:root { --primary: #c81e1e;
--primary-hover: #a81919;
--primary-foreground: #ffffff; --accent: #f97316;
--accent-hover: #ea580c; --light-gray: #f5f5f5;
--light-gray-dark: #b3b3b3; --background: #ffffff;
--foreground: #0a0a14;
--text-gray: #6b7280;
--muted-foreground: #666666; --border-color: #e5e7eb; --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--transition: all 0.3s ease; --radius: 0.5rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--foreground);
background-color: var(--background);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
ul {
list-style: none;
} h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
p {
margin-bottom: 1rem;
}
@media (min-width: 768px) {
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 3.5rem;
}
} .container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 768px) {
.container {
padding: 0 2rem;
}
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 2rem;
font-size: 1rem;
font-weight: 700;
border-radius: var(--radius);
border: none;
cursor: pointer;
transition: var(--transition);
text-align: center;
}
.btn-primary {
background-color: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
background-color: var(--primary-hover);
}
.btn-accent {
background-color: var(--accent);
color: white;
}
.btn-accent:hover {
background-color: var(--accent-hover);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--foreground);
color: var(--foreground);
}
.btn-outline:hover {
background-color: var(--foreground);
color: white;
}
.btn-outline-white {
background-color: transparent;
border: 2px solid white;
color: white;
}
.btn-outline-white:hover {
background-color: white;
color: var(--foreground);
}
.btn-white {
background-color: white;
color: var(--accent);
}
.btn-white:hover {
background-color: #f3f4f6;
}
.btn-lg {
padding: 0.875rem 2rem;
font-size: 1rem;
} .site-header {
position: sticky;
top: 0;
left: 0;
right: 0;
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
z-index: 50;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
}
.logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.logo img,
.logo .custom-logo {
height: 48px;
width: auto;
} .custom-logo-link {
display: block;
line-height: 0;
}
@media (min-width: 768px) {
.logo img {
height: 64px;
}
}
.logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.logo-text .company-name {
color: var(--primary);
font-size: 1.25rem;
font-weight: 700;
}
.logo-text .company-tagline {
font-size: 0.75rem;
font-weight: 400;
color: var(--text-gray);
} .main-nav {
display: none;
}
.main-nav ul {
display: flex;
align-items: center;
gap: 2rem;
}
.main-nav a {
font-weight: 500;
color: #374151;
padding: 0.5rem 0;
transition: var(--transition);
}
.main-nav a:hover,
.main-nav a.active {
color: var(--primary);
}
.header-cta {
display: none;
} .mobile-menu-toggle {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
color: #374151;
}
.mobile-menu-toggle span {
display: block;
width: 24px;
height: 2px;
background-color: currentColor;
border-radius: 2px;
transition: var(--transition);
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
} .mobile-nav {
display: none;
padding: 1rem 0;
border-top: 1px solid var(--border-color);
}
.mobile-nav.active {
display: block;
}
.mobile-nav ul {
display: flex;
flex-direction: column;
gap: 1rem;
}
.mobile-nav a {
display: block;
font-weight: 500;
color: #374151;
transition: var(--transition);
}
.mobile-nav a:hover,
.mobile-nav a.active {
color: var(--primary);
}
@media (min-width: 768px) {
.main-nav {
display: block;
}
.header-cta {
display: block;
}
.mobile-menu-toggle {
display: none;
}
} .hero {
background-color: var(--light-gray);
color: var(--foreground);
padding: 5rem 0;
}
.hero-content {
text-align: center;
}
.hero h1 {
margin-bottom: 1.5rem;
}
.hero-description {
font-size: 1.25rem;
color: var(--foreground);
max-width: 900px;
margin: 0 auto 2rem;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
@media (min-width: 640px) {
.hero-buttons {
flex-direction: row;
justify-content: center;
}
} .page-hero {
background-color: var(--light-gray);
color: var(--foreground);
padding: 4rem 0;
text-align: center;
}
.page-hero h1 {
margin-bottom: 1rem;
}
.page-hero p {
font-size: 1.25rem;
max-width: 900px;
margin: 0 auto;
} .stats-section {
background-color: var(--primary);
color: var(--primary-foreground);
padding: 2.5rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-item .stat-icon {
margin-bottom: 0.5rem;
}
.stat-item .stat-icon svg {
width: 32px;
height: 32px;
}
.stats-section .stat-number,
.stats-section p,
.stat-item .stat-number,
.stat-item p {
color: #ffffff;
}
.stat-item .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.25rem;
}
.stat-item p {
font-size: 1.125rem;
margin-bottom: 0;
}
@media (min-width: 768px) {
.stats-grid {
grid-template-columns: repeat(3, 1fr);
}
} .section {
padding: 4rem 0;
}
.section-lg {
padding: 6rem 0;
}
.section-gray {
background-color: var(--light-gray);
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h2 {
margin-bottom: 1rem;
}
.section-header p {
color: var(--text-gray);
max-width: 900px;
margin: 0 auto;
} .card {
background-color: white;
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--card-shadow);
border: 1px solid #f3f4f6;
transition: var(--transition);
}
.card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.card-icon {
margin-bottom: 1rem;
}
.card-icon svg {
width: 40px;
height: 40px;
color: var(--accent);
}
.card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.card p {
color: var(--text-gray);
margin-bottom: 1rem;
}
.card-link {
color: var(--accent);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.card-link:hover {
color: var(--accent-hover);
} .services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.services-grid {
grid-template-columns: repeat(4, 1fr);
}
} .features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.features-grid {
grid-template-columns: repeat(4, 1fr);
}
} .card-center {
text-align: center;
}
.card-center .card-icon {
display: flex;
justify-content: center;
} .service-detail {
padding: 4rem 0;
}
.service-detail-content {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: center;
}
@media (min-width: 768px) {
.service-detail-content {
grid-template-columns: 1fr 1fr;
}
}
.service-detail-text h2 {
font-size: 1.875rem;
font-weight: 700;
margin-bottom: 1rem;
}
.service-detail-text p {
color: var(--text-gray);
margin-bottom: 1.5rem;
}
.service-icon-box {
display: inline-block;
padding: 0.75rem;
background-color: #fff7ed;
border-radius: var(--radius);
margin-bottom: 1rem;
}
.service-icon-box svg {
width: 40px;
height: 40px;
color: var(--accent);
}
.service-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.service-feature {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.service-feature .check {
color: var(--accent);
flex-shrink: 0;
margin-top: 0.125rem;
}
.service-image {
background-color: var(--light-gray);
border-radius: var(--radius);
height: 320px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-gray);
} .service-detail.reverse .service-detail-content {
direction: ltr;
}
@media (min-width: 768px) {
.service-detail.reverse .service-detail-content {
direction: rtl;
}
.service-detail.reverse .service-detail-content > * {
direction: ltr;
}
} .page-content .service-detail {
padding: 4rem 0;
}
.page-content .service-detail.section-gray {
background-color: var(--light-gray);
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
}
.page-content .service-checklist {
list-style: none;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.page-content .service-checklist li {
position: relative;
padding-left: 1.75rem;
}
.page-content .service-checklist li::before {
content: '';
position: absolute;
left: 0;
top: 0.25rem;
width: 1rem;
height: 1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.page-content .rounded-image img {
border-radius: var(--radius);
width: 100%;
height: auto;
object-fit: cover;
} .page-content .values-section,
.page-content .membership-section {
background-color: var(--light-gray);
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding: 4rem calc(50vw - 50%);
}
.page-content .about-section,
.page-content .team-section {
padding: 4rem 0;
}
.page-content .team-card,
.page-content .value-card {
text-align: center;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.page-content .value-icon {
margin-bottom: 1rem;
}
.page-content .team-photo {
margin-left: auto;
margin-right: auto;
}
.page-content .team-photo img {
border-radius: 50%;
object-fit: cover;
} .page-content .home-services,
.page-content .home-features,
.page-content .home-cta-section {
padding: 4rem 0;
}
.page-content .home-features {
background-color: var(--light-gray);
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
}
.page-content .home-service-card,
.page-content .home-feature-card {
text-align: center;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-content .home-service-card:hover,
.page-content .home-feature-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.page-content .home-card-icon {
margin-bottom: 1rem;
}
.page-content .home-card-link {
color: var(--primary);
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.page-content .home-card-link:hover {
color: var(--primary-hover);
}
.page-content .home-cta-section .cta-box {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} .about-content {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.about-content {
grid-template-columns: 1fr 1fr;
}
}
.about-text h2 {
margin-bottom: 1.5rem;
}
.about-text p {
color: var(--text-gray);
}
.about-image {
background-color: var(--light-gray);
border-radius: var(--radius);
height: 384px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-gray);
} .team-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.team-member {
background-color: white;
padding: 1.5rem;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
text-align: center;
}
.team-member-image {
width: 128px;
height: 128px;
border-radius: 50%;
background-color: #d1d5db;
margin: 0 auto 1rem;
}
.team-member h4 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.team-member .role {
color: var(--accent);
margin-bottom: 1rem;
}
.team-member p {
color: var(--text-gray);
font-size: 0.875rem;
margin-bottom: 0;
} .certifications-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
justify-items: center;
}
@media (min-width: 768px) {
.certifications-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.certification-badge {
width: 128px;
height: 128px;
background-color: white;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
color: #9ca3af;
text-align: center;
font-size: 0.875rem;
} .membership-single {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 300px;
margin: 0 auto;
}
.membership-logo {
width: 200px;
height: auto;
margin-bottom: 1rem;
}
.membership-name {
font-weight: 600;
color: var(--foreground);
} .contact-section {
padding: 4rem 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 1024px) {
.contact-grid {
grid-template-columns: 1fr 2fr;
}
}
.contact-info-card {
background-color: white;
padding: 1.5rem;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
height: fit-content;
}
.contact-info-card h2 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.contact-items {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.contact-item:last-child {
margin-bottom: 0;
}
.contact-item svg {
width: 20px;
height: 20px;
color: var(--accent);
margin-top: 0.125rem;
flex-shrink: 0;
}
.contact-item h4 {
font-weight: 600;
margin-bottom: 0.25rem;
font-size: 1rem;
}
.contact-item p {
color: var(--text-gray);
margin-bottom: 0;
font-size: 0.875rem;
}
.contact-item a {
color: var(--text-gray);
}
.contact-item a:hover {
color: var(--primary);
} .contact-form-wrapper {
background-color: var(--light-gray);
padding: 1.5rem;
border-radius: var(--radius);
}
.contact-form-wrapper h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
} .wpforms-container {
margin: 0;
}
.wpforms-container .wpforms-form .wpforms-field-label {
font-weight: 500;
margin-bottom: 0.5rem;
}
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius);
font-size: 1rem;
transition: var(--transition);
}
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(200, 30, 30, 0.1);
}
.wpforms-container .wpforms-form button[type="submit"] {
background-color: var(--accent);
color: white;
padding: 0.75rem 2rem;
border: none;
border-radius: var(--radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.wpforms-container .wpforms-form button[type="submit"]:hover {
background-color: var(--accent-hover);
} .cta-box {
background-color: white;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
overflow: hidden;
}
.cta-box-grid {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.cta-box-grid {
grid-template-columns: 1fr 1fr;
}
}
.cta-box-form {
padding: 2rem;
}
@media (min-width: 1024px) {
.cta-box-form {
padding: 3rem;
}
}
.cta-box-form h2 {
font-size: 1.875rem;
margin-bottom: 1rem;
}
.cta-box-form > p {
color: var(--text-gray);
margin-bottom: 1.5rem;
}
.cta-box-reasons {
background-color: var(--light-gray);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 1024px) {
.cta-box-reasons {
padding: 3rem;
}
}
.cta-box-reasons h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.reasons-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.reason-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.reason-check {
background-color: var(--primary);
border-radius: 50%;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.reason-check svg {
width: 14px;
height: 14px;
color: white;
} .map-section {
height: 384px;
background-color: var(--light-gray);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-gray);
}
.map-section iframe {
width: 100%;
height: 100%;
border: none;
} .cta-section {
background-color: var(--primary);
color: white;
padding: 4rem 0;
text-align: center;
}
.cta-section h2 {
margin-bottom: 1rem;
color: #ffffff;
}
.cta-section p {
font-size: 1.25rem;
max-width: 900px;
margin: 0 auto 2rem;
}
.cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
justify-content: center;
}
} .site-footer {
background-color: var(--light-gray);
color: var(--foreground);
padding: 3rem 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.footer-brand {
margin-bottom: 1.5rem;
}
.footer-brand .logo {
margin-bottom: 1rem;
}
.footer-column h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
} .footer-contact-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.footer-contact-item svg {
width: 18px;
height: 18px;
color: var(--primary);
margin-top: 0.125rem;
flex-shrink: 0;
} .footer-service-areas {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.footer-service-areas a {
color: var(--foreground);
font-size: 0.875rem;
transition: var(--transition);
}
.footer-service-areas a:hover {
color: var(--primary);
} .footer-hours {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.footer-hours-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.footer-hours-item svg {
width: 18px;
height: 18px;
color: var(--primary);
margin-top: 0.125rem;
flex-shrink: 0;
}
.footer-hours-item .hours-text p {
margin-bottom: 0;
}
.footer-hours-item .hours-text .day {
font-weight: 500;
}
.footer-bottom {
margin-top: 2rem;
padding: 2rem 0;
border-top: 1px solid var(--border-color);
text-align: center;
}
.footer-bottom p {
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
.footer-bottom a {
color: var(--foreground);
}
.footer-bottom a:hover {
color: var(--primary);
}
.footer-menu {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
display: flex;
justify-content: center;
gap: 1.5rem;
}
.footer-menu li a {
font-size: 0.875rem;
color: var(--foreground);
text-decoration: none;
}
.footer-menu li a:hover {
color: var(--primary);
} .error-404 {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 0;
}
.error-404 h1 {
font-size: 6rem;
color: var(--primary);
margin-bottom: 0.5rem;
}
.error-404 h2 {
margin-bottom: 1rem;
}
.error-404 p {
color: var(--text-gray);
margin-bottom: 2rem;
} .city-service-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 1024px) {
.city-service-grid {
grid-template-columns: 1fr 1fr;
}
}
.city-service-text h2 {
font-size: 1.875rem;
margin-bottom: 1.5rem;
}
.city-service-text h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.city-service-text p {
color: var(--text-gray);
margin-bottom: 1rem;
}
.zip-codes {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
}
.zip-code {
background-color: var(--light-gray);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
}
.landmarks-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
}
@media (min-width: 640px) {
.landmarks-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.landmark-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.landmark-item svg {
width: 16px;
height: 16px;
color: var(--accent);
flex-shrink: 0;
}
.city-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.city-contact-box {
background-color: var(--light-gray);
padding: 1.5rem;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
}
.city-contact-box h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.city-contact-box > p {
color: var(--text-gray);
margin-bottom: 1.5rem;
}
.city-phone {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.city-phone svg {
width: 20px;
height: 20px;
color: var(--accent);
}
.city-phone p {
margin-bottom: 0;
}
.city-phone .phone-label {
font-weight: 600;
}
.city-phone .phone-number {
font-size: 1.125rem;
}
.city-why-box {
background-color: white;
padding: 1.5rem;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
}
.city-why-box h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.city-why-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.city-why-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.city-why-check {
background-color: var(--accent);
border-radius: 50%;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.city-why-check svg {
width: 14px;
height: 14px;
color: white;
} .text-center {
text-align: center;
}
.text-primary {
color: var(--primary);
}
.text-accent {
color: var(--accent);
}
.mb-0 {
margin-bottom: 0;
}
.mb-1 {
margin-bottom: 0.5rem;
}
.mb-2 {
margin-bottom: 1rem;
}
.mb-3 {
margin-bottom: 1.5rem;
}
.mb-4 {
margin-bottom: 2rem;
}
.mt-2 {
margin-top: 1rem;
}
.mt-4 {
margin-top: 2rem;
}