/* Variables for easy color management */
:root {
    --mountain-blue: #4A90B8;
    --deep-teal: #2C7A99;
    --vibrant-orange: #E85A2B;
    --warm-orange: #F17739;
    --fresh-white: #FFFFFF;
    --mountain-gray: #F8F9FA;
    --charcoal: #2C3E50;
    --steel-gray: #6C757D;
    --success-green: #28A745;
    --warning-amber: #FFC107;
    --light-blue: #E3F2FD;
    --light-orange: #FFF3E0;
}

/* Base Styles */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--charcoal);
    line-height: 1.6;
    background-color: var(--fresh-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--charcoal);
    font-weight: 700;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.8em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.8em; }

p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--steel-gray);
    margin-bottom: 1em;
}

a {
    color: var(--mountain-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--vibrant-orange);
}



.contact-info-block .section-title {
    font-size: 35px !important;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    
    .contact-form-block.aos-init.aos-animate
 {
    width: 350px !important;
    padding: 15px !important;
}
    
    .contact-info-block.aos-init.aos-animate {
    width: 350px !important;
    margin-top: 33px !important;
}
}
@media (min-width: 992px) {
    .contact-grid {
        margin-top: 100px !important;
        grid-template-columns: 1.2fr 1fr;
        gap: 80px;
        row-gap: 80px;
        column-gap: 80px;
    }
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.section-bg-light-gray {
    background-color: var(--mountain-gray);
}

.section-bg-light-orange {
    background-color: var(--light-orange);
}

.section-bg-deep-teal {
    background-color: var(--deep-teal);
    color: var(--fresh-white); /* Text in this section should be white */
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary, .cta-button {
    background-color: var(--vibrant-orange);
    color: var(--fresh-white);
}

.btn-primary:hover, .cta-button:hover {
    background-color: var(--warm-orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background-color: var(--mountain-blue);
    color: var(--fresh-white);
}

.btn-secondary:hover {
    background-color: var(--deep-teal);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Header */
.header {
    background-color: var(--fresh-white);
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 50px; /* Adjust as needed */
}

.navigation .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Default to flex for desktop */
}

.navigation .nav-links li {
    margin-left: 30px;
}

.navigation .nav-links a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--charcoal);
    padding: 10px 0;
    position: relative;
}

.navigation .nav-links a:hover {
    color: var(--vibrant-orange);
}

.navigation .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--vibrant-orange);
    transition: width 0.3s ease;
}

.navigation .nav-links a:hover::after {
    width: 100%;
}

.contact-info .phone-number {
    color: var(--vibrant-orange);
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    margin-right: 20px;
    font-size: 1.1em;
}

/* Hamburger Menu (Mobile) */
.hamburger-menu {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    z-index: 1001; /* Ensure it's above the menu */
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: var(--charcoal);
    transition: all 0.3s ease;
}





.contact-info .phone-number {
    color: var(--vibrant-orange);
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    margin-right: 20px;
    font-size: 1.1em;
}

/* Hamburger Menu (Mobile) */
.hamburger-menu {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: var(--charcoal);
    transition: all 0.3s ease;
}
/* Hero Section */
.hero-section {
    position: relative;
    height: 80vh; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fresh-white); /* Text on video will be white */
    text-align: center;
    overflow: hidden;
    margin-top: 80px; /* Space for fixed header */
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Ensures video covers the area */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(74, 144, 184, 0.7), rgba(44, 122, 153, 0.7)); /* Mountain Blue to Deep Teal gradient */
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-content h1 {
    color: var(--fresh-white);
    font-size: 3.5em;
    margin-bottom: 10px;
}

.hero-content p {
    color: var(--fresh-white);
    font-size: 1.2em;
    margin-bottom: 25px;
}

.hero-buttons .btn {
    margin: 0 10px;
}

/* Why Choose Us Section */
.why-choose-us-section {
    padding: 80px 0;
    text-align: center;
}

.why-choose-us-section h2 {
    margin-bottom: 50px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: left;
}

.feature-item {
    background-color: var(--fresh-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.feature-item h3 {
    color: var(--mountain-blue);
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
}

.certification-badge {
    height: 60px; /* Adjust size */
    margin-top: 15px;
}

/* Services Section */
.services-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--fresh-white);
}

.services-section h2 {
    margin-bottom: 50px;
}

.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: var(--mountain-gray);
    padding: 30px;
    border-radius: 8px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.service-card img {
    height: 70px;
    margin-bottom: 20px;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
}

.service-card h3 {
    color: var(--mountain-blue);
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
}

.service-card ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.service-card ul li {
    background: url('path/to/check_icon.png') no-repeat left center / 20px; /* Use a check icon */
    padding-left: 30px;
    margin-bottom: 8px;
    color: var(--steel-gray);
}

/* About Us Section */
.about-us-section {
    padding: 80px 0;
}

.about-us-section h2 {
    text-align: center;
    margin-bottom: 50px;
}

.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.team-photos {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.team-member {
    text-align: center;
}

.team-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--mountain-blue);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.team-photo:hover {
    transform: scale(1.05);
}

.team-member h3 {
    margin-top: 15px;
    margin-bottom: 5px;
    color: var(--charcoal);
    font-weight: 600;
}

.team-member p {
    color: var(--steel-gray);
    font-size: 0.9em;
}

.about-text {
    flex: 1;
    min-width: 300px;
    text-align: left;
}

.about-text strong {
    color: var(--vibrant-orange);
}

.bilingual-note {
    font-weight: 600;
    color: var(--mountain-blue);
}

/* Testimonials Section */
.testimonials-section {
    padding: 80px 0;
    text-align: center;
}

.testimonials-section h2 {
    margin-bottom: 50px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: var(--fresh-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.customer-info {
    /* display: flex; */
    align-items: center;
    margin-bottom: 15px;
}

.customer-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 3px solid var(--success-green); /* Success Green border */
}

.customer-name {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    color: var(--charcoal);
    margin: 0;
    font-size: 1.1em;
}
p.testimonial-quote {
    margin: 0px;
}
.stars {
    color: var(--success-green); /* Star color */
    font-size: 1.2em;
    letter-spacing: 2px;
}

.testimonial-quote {
    font-family: 'Roboto Slab', serif; /* Use accent font for quote */
    font-style: italic;
    color: var(--steel-gray);
    flex-grow: 1; /* Pushes content down if needed */
}

/* Offers Section */
.offers-section {
    padding: 80px 0;
    text-align: center;
    color: var(--charcoal); /* Default text color for this section */
}

.offers-section h2 {
    color: var(--charcoal);
    margin-bottom: 50px;
}

.offers-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.coupon-card, .financing-info {
    background-color: var(--fresh-white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex: 1;
    min-width: 350px;
    max-width: 500px;
    text-align: left;
}

.coupon-card {
    border: 2px dashed var(--vibrant-orange); /* Orange dashed border */
}

.coupon-card h3 {
    color: var(--mountain-blue);
    margin-top: 0;
}

.discount-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2em;
    color: var(--vibrant-orange);
    margin: 15px 0;
}

.terms {
    font-size: 0.85em;
    color: var(--steel-gray);
}

.financing-info h3 {
    color: var(--mountain-blue);
    margin-top: 0;
}

.financing-partners {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0;
    align-items: center;
}

.partner-logo {
    height: 50px; /* Adjust size */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.partner-logo:hover {
    opacity: 1;
}

.financing-cta {
    margin-top: 20px;
}

/* Service Areas Section */
.service-areas-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--fresh-white);
}

.service-areas-section h2 {
    margin-bottom: 50px;
}

.service-area-map iframe {
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.city-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px;
    font-weight: 600;
    color: var(--mountain-blue);
    max-width: 800px;
    margin: 0 auto;
}

/* Contact Section */
.contact-section {
    padding: 80px 0;
    text-align: center;
}

.contact-section h2 {
    color: var(--fresh-white);
    margin-bottom: 30px;
}

.contact-section p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
}

.contact-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.contact-details p {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--fresh-white);
    display: flex;
    align-items: center;
}

.contact-details p i {
    font-size: 1.5em;
    margin-right: 10px;
    color: var(--vibrant-orange); /* Icons in orange */
}

.contact-details a {
    color: var(--fresh-white);
}

.contact-details a:hover {
    color: var(--vibrant-orange);
}

/* Social Media Icons (You'll need a font icon library like Font Awesome or similar) */
.social-media a {
    display: inline-block;
    color: var(--fresh-white);
    font-size: 2em;
    margin: 0 15px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-media a:hover {
    color: var(--vibrant-orange); /* Orange hover */
    transform: translateY(-3px);
}

/* Contact Form */
.contact-form {
    background-color: var(--fresh-white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto 50px auto;
    text-align: left;
}

.contact-form h3 {
    color: var(--charcoal);
    margin-bottom: 30px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: calc(100% - 20px);
    padding: 12px 10px;
    border: 1px solid var(--mountain-gray);
    border-radius: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    color: var(--charcoal);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--mountain-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 184, 0.2); /* Light blue glow */
    outline: none;
}

.contact-form button.btn-primary {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
}

/* Footer */
.footer {
    background-color: var(--charcoal);
    color: var(--light-gray);
    padding: 40px 0;
    text-align: center;
}

.footer p {
    color: var(--mountain-gray);
    margin-bottom: 10px;
    font-size: 0.9em;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-links a {
    color: var(--mountain-blue);
    font-size: 0.9em;
}

.footer-links a:hover {
    color: var(--vibrant-orange);
}

/* Responsive Design */
@media (max-width: 1199px) { /* Tablet and smaller */
    .hero-content h1 {
        font-size: 3em;
    }
    
    .hamburger-menu {
        display: flex; /* Show hamburger */
    }
    .header .contact-info .cta-button {
        display: none; /* Hide desktop CTA */
    }
}

@media (max-width: 767px) { /* Mobile */
    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.5em; }

    .hero-section {
        height: 100vh; /* Full viewport height on mobile */
    }

    .hero-content {
        padding: 0 15px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .hero-buttons .btn {
        width: 80%;
        margin: 0 auto;
    }

    .feature-grid, .service-cards-grid, .testimonial-grid {
        grid-template-columns: 1fr; /* Single column */
    }

    .about-content {
        flex-direction: column;
    }

    .coupon-card, .financing-info {
        min-width: unset;
        width: 100%;
    }

    .contact-details {
        flex-direction: column;
        gap: 15px;
    }

    .social-media {
        margin-top: 30px;
    }

    .city-list {
        flex-direction: column;
        align-items: center;
    }
}

/* Modal Styling */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--fresh-white);
    margin: auto;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    text-align: center;
}

.modal-content h2 {
    color: var(--charcoal);
    margin-bottom: 20px;
}

.modal-content p {
    color: var(--steel-gray);
    margin-bottom: 15px;
}

.modal-financing-partners {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 25px 0;
}

.modal-financing-partners img {
    height: 60px;
    filter: grayscale(80%); /* Subtle grayscale */
    transition: filter 0.3s ease;
}

.modal-financing-partners img:hover {
    filter: grayscale(0%); /* Color on hover */
}

.modal .btn-primary {
    margin-top: 20px;
}

.close-button {
    color: var(--steel-gray);
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--vibrant-orange);
    text-decoration: none;
}
/* Header Phone Call Button */
.phone-call-button {
    display: flex; /* Use flexbox to align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    padding: 10px 20px;
    background-color: var(--vibrant-orange); /* Orange background */
    color: var(--fresh-white); /* White text */
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
}

.phone-call-button:hover {
    background-color: var(--warm-orange); /* Darker orange on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: var(--fresh-white); /* Ensure text stays white on hover */
}

/* Lottie Player specific styling within the button */
.phone-call-button lottie-player {
    /* Lottie player itself might have default sizing, ensure it adheres to button needs */
    width: 25px; /* Adjust as needed */
    height: 25px; /* Adjust as needed */
    flex-shrink: 0; /* Prevent icon from shrinking on small screens */
}

/* Adjust contact-info display to prevent button from growing too much */
.header .contact-info {
    display: flex;
    align-items: center;
    gap: 20px; /* Adjust gap if needed */
}
/* Keyframes for a subtle shake animation */
@keyframes shake {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    45% { transform: rotate(3deg); }
    60% { transform: rotate(-3deg); }
    75% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
}

/* ... (your existing variables and base styles) ... */

/* Header Phone Call Button */
.phone-call-button {
    display: flex; /* Use flexbox to align icon and text */
    align-items: center;
    gap: 8px; /* Space between icon and text */
    padding: 10px 20px;
    background-color: var(--vibrant-orange); /* Orange background */
    color: var(--fresh-white); /* White text */
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
}

.phone-call-button:hover {
    background-color: var(--warm-orange); /* Darker orange on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: var(--fresh-white); /* Ensure text stays white on hover */
}

/* Styling for the Font Awesome phone icon */
.phone-call-button .phone-icon-animated {
    color: var(--fresh-white); /* Ensure the icon is white */
    font-size: 25px; /* Adjust size as needed */
    flex-shrink: 0; /* Prevent icon from shrinking on small screens */
    /* Apply the shake animation */
    animation: shake 2s infinite ease-in-out; /* 2s duration, infinite loop, ease-in-out timing */
}

/* Adjust contact-info display to prevent button from growing too much */
.header .contact-info {
    display: flex;
    align-items: center;
    gap: 20px; /* Adjust gap if needed */
}

/* ... (rest of your CSS) ... */

@media (max-width: 1199px) { /* Tablet and smaller */
    /* ... existing styles ... */
    .header .contact-info .phone-call-button {
        display: flex;
        padding: 8px 15px; /* Slightly smaller padding for mobile */
        font-size: 1em;
    }
    .header .contact-info .phone-call-button .phone-icon-animated {
        font-size: 20px; /* Smaller icon for mobile */
    }
}
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 60px;
}
/* Hero Section */
.hero-section {
    position: relative;
    height: 85vh; /* Slightly taller for more impact */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fresh-white);
    text-align: center;
    overflow: hidden;
    margin-top: 80px; /* Space for fixed header */
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Ensures video covers the area */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Darker, more prominent overlay for readability */
    background: linear-gradient(to bottom, rgba(44, 122, 153, 0.8), rgba(74, 144, 184, 0.8)); /* Deep Teal to Mountain Blue with higher opacity */
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 100%; /* Allow content box to define max-width */
    padding: 0 20px; /* Container padding */
}

/* NEW: Hero Content Box Styling */
.hero-content-box {
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white background */
    padding: 50px 40px; /* Generous padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Prominent shadow for depth */
    max-width: 800px; /* Max width for the content block */
    margin: 0 auto; /* Center the box */
    text-align: center;
    /* Optional: Frosted glass effect for modern look */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.hero-content-box h1 {
    color: var(--charcoal); /* Text color from design guide */
    font-size: 3.8em; /* Slightly larger for desktop impact */
    margin-bottom: 15px;
    line-height: 1.1;
}

.hero-content-box .hero-subheading {
    color: var(--steel-gray); /* Text color from design guide */
    font-size: 1.4em; /* Prominent subheading */
    font-weight: 600; /* Semi-bold for emphasis */
    margin-bottom: 25px;
}

.hero-content-box p {
    color: var(--steel-gray); /* Text color from design guide */
    font-size: 1.1em;
    margin-bottom: 15px;
}

.hero-content-box .tagline {
    font-family: 'Roboto Slab', serif; /* Use accent font for tagline */
    font-size: 1.2em;
    color: var(--mountain-blue); /* Distinct color for tagline */
    font-weight: 500;
    margin-top: 25px;
    margin-bottom: 40px; /* More space before buttons */
}

.hero-buttons .btn {
    margin: 0 15px; /* More spacing between buttons */
    padding: 14px 30px; /* Slightly larger buttons */
    font-size: 1.1em;
}

/* Responsive adjustments for Hero Section */
@media (max-width: 1199px) {
    .hero-section {
        height: 90vh; /* Adjust height for tablets */
    }
    .hero-content-box {
        padding: 40px 30px;
        max-width: 700px;
    }
    .hero-content-box h1 {
        font-size: 3.2em;
    }
    .hero-content-box .hero-subheading {
        font-size: 1.3em;
    }
}

@media (max-width: 767px) {
    .hero-section {
        height: 100vh; /* Full viewport height on mobile */
        margin-top: 60px; /* Adjust for potentially smaller mobile header */
    }
    .hero-content-box {
        padding: 30px 20px;
        border-radius: 8px;
        max-width: 90%; /* Allow content box to fill more width */
    }
    .hero-content-box h1 {
        font-size: 2.2em; /* Mobile headline size */
        margin-bottom: 10px;
    }
    .hero-content-box .hero-subheading {
        font-size: 1.1em;
        margin-bottom: 20px;
    }
    .hero-content-box p {
        font-size: 0.95em;
        margin-bottom: 10px;
    }
    .hero-content-box .tagline {
        font-size: 1.05em;
        margin-top: 15px;
        margin-bottom: 30px;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .hero-buttons .btn {
        width: 100%; /* Full width buttons on mobile */
        margin: 0; /* Remove horizontal margin */
    }
}
.logo img {
    height: 120px;
    margin: -32px 0;
}
/* Hero Section */
.hero-section {
    position: relative;
    height: 90vh; /* Make it nearly full screen */
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    text-align: center;
    overflow: hidden;
    margin-top: 80px; /* Space for fixed header */
    color: var(--fresh-white); /* Default text color for hero */
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Ensures video covers the area */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* More sophisticated gradient overlay */
    background: linear-gradient(
        to bottom,
        rgba(44, 122, 153, 0.9),    /* Deep Teal, slightly more opaque at top */
        rgba(74, 144, 184, 0.7),    /* Mountain Blue, a bit less opaque in middle */
        rgba(44, 122, 153, 0.9)     /* Deep Teal, more opaque at bottom */
    );
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px; /* Max width for central text block */
    padding: 0 20px; /* Container padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Make content take full height within hero for centering */
}

.hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--fresh-white);
    font-size: 4.5em; /* Very large for impact */
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); /* Subtle text shadow for pop */
    letter-spacing: -1px; /* Tighter letter spacing for larger text */
}

.hero-content .hero-tagline {
    font-family: 'Roboto Slab', serif; /* Using accent font */
    font-weight: 500;
    font-size: 1.8em; /* Prominent tagline */
    color: var(--fresh-white); /* White for strong contrast */
    margin-bottom: 30px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.hero-content .hero-value-prop {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    margin-bottom: 40px; /* Space before buttons */
    max-width: 600px; /* Control line length */
    line-height: 1.5;
}

.hero-buttons {
    display: flex;
    gap: 25px; /* More space between buttons */
    margin-top: 20px; /* Space from text */
}

.btn-hero-large { /* A new class for larger hero buttons */
    padding: 16px 35px;
    font-size: 1.2em;
    border-radius: 50px; /* More rounded, "pill" shape for modern look */
    min-width: 250px;
}

.btn-hero-secondary { /* A new class for the secondary hero button */
    padding: 16px 35px;
    font-size: 1.2em;
    border-radius: 50px; /* More rounded, "pill" shape */
    background-color: transparent;
    border: 2px solid var(--fresh-white); /* White border */
    color: var(--fresh-white);
}

.btn-hero-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle white overlay on hover */
    border-color: var(--fresh-white); /* Keep border white */
    color: var(--fresh-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Scroll Down Indicator */
.scroll-down {
    position: absolute;
    bottom: 30px; /* Position from bottom */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--fresh-white);
    font-size: 0.9em;
    opacity: 0.8;
    z-index: 1; /* Ensure it's above overlay */
}

.scroll-down span {
    margin-bottom: 5px;
}

.animated-chevron {
    font-size: 1.5em;
    animation: bounce 2s infinite; /* Apply bounce animation */
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Responsive adjustments for Hero Section */
@media (max-width: 1199px) { /* Tablet and smaller */
    .hero-section {
        height: 90vh;
    }
    .hero-content h1 {
        font-size: 3.5em;
    }
    .hero-content .hero-tagline {
        font-size: 1.5em;
    }
    .hero-content .hero-value-prop {
        font-size: 1.1em;
        max-width: 500px;
    }
    .btn-hero-large, .btn-hero-secondary {
        padding: 14px 30px;
        font-size: 1.1em;
        min-width: 220px;
    }
}

@media (max-width: 767px) { /* Mobile */
    .hero-section {
        height: 100vh;
        margin-top: 60px; /* Adjust for mobile header */
    }
    .hero-content {
        padding: 0 15px;
    }
    .hero-content h1 {
        font-size: 2.5em; /* Smaller headline for mobile */
        margin-bottom: 15px;
    }
    .hero-content .hero-tagline {
        font-size: 1.2em;
        margin-bottom: 20px;
    }
    .hero-content .hero-value-prop {
        font-size: 0.95em;
        margin-bottom: 30px;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .btn-hero-large, .btn-hero-secondary {
        width: 100%; /* Full width buttons on mobile */
        min-width: unset; /* Remove min-width constraint */
        padding: 12px 20px;
        font-size: 1em;
    }
    .scroll-down {
        bottom: 20px;
    }
}
.btn-primary:hover, .cta-button:hover {
    background-color: var(--warm-orange);
    transform: translateY(-2px);
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.scroll-down.aos-init.aos-animate {
    display: none;
}

.hero-section {
    position: relative;
    height: 100vh
737.6px
;
    display: flex
;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: 80px;
    color: var(--fresh-white);
}
.hero-content .hero-value-prop {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    max-width: 600px;
    line-height: 1.5;
}
.hero-content .hero-tagline {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 1.8em;
    color: var(--fresh-white);
    margin-bottom: 1px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}
.hero-buttons {
    display: flex
;
    gap: 0px;
    margin-top: 20px;
}
@media (max-width: 1199px) { /* Tablet and smaller */
    /* ... existing styles for mobile navigation, etc. ... */

    /* Hide the full desktop phone button */
    .phone-call-button.desktop-only {
        display: none;
    }

    /* Show and style the mobile-only icon button */
    .mobile-phone-icon-button {
        display: flex; /* Make it visible */
        align-items: center;
        justify-content: center; /* Center the icon */
        width: 45px; /* Fixed width for a square button */
        height: 45px; /* Fixed height */
        padding: 0; /* No padding needed */
        background-color: var(--vibrant-orange);
        color: var(--fresh-white);
        border-radius: 50%; /* Make it round */
        font-size: 1.5em; /* Larger icon for tap target */
        text-decoration: none;
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        border: none;
        cursor: pointer;
    }

    .mobile-phone-icon-button:hover {
        background-color: var(--warm-orange);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        color: var(--fresh-white);
    }

    .mobile-phone-icon-button .phone-icon-animated {
        font-size: 1.2em; /* Adjust icon size within the mobile button */
    }

    /* Adjust the general contact-info flex behavior if needed */
    .header .contact-info {
        gap: 15px; /* Adjust gap between mobile phone button and hamburger */
    }
}
/* Header Phone Call Button - Desktop Style */
.phone-call-button {
    display: flex; /* Always visible by default */
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--vibrant-orange);
    color: var(--fresh-white);
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
}

.phone-call-button:hover {
    background-color: var(--warm-orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: var(--fresh-white);
}

/* Styling for the Font Awesome phone icon (applies to both buttons) */
.phone-icon-animated {
    color: var(--fresh-white);
    font-size: 25px;
    flex-shrink: 0;
    animation: shake 2s infinite ease-in-out;
}

/* Hide the mobile-specific icon button on desktop */
.mobile-phone-icon-button {
    display: none;
}

/* Ensure the desktop button's text is visible on desktop */
.desktop-only span {
    display: inline-block; /* Ensure the number text is visible */
}
/* Why Choose Us Section - New Advanced Style */
.why-choose-us-section {
    padding: 100px 0; /* More vertical padding */
    text-align: center;
    background-color: var(--mountain-gray); /* Light gray background */
}

.why-choose-us-section h2 {
    margin-bottom: 20px; /* Less space before intro text */
    color: var(--charcoal);
    font-size: 2.8em;
}

.why-choose-us-section .section-intro-text {
    max-width: 800px;
    margin: 0 auto 60px auto; /* Centered, more space below */
    font-size: 1.2em;
    color: var(--steel-gray);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}

.features-grid-advanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Responsive grid */
    gap: 30px; /* Space between cards */
    margin-bottom: 80px; /* Space before key stats */
}

.feature-card {
    background-color: var(--fresh-white);
    padding: 40px; /* More padding */
    border-radius: 12px; /* Softer rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* More pronounced shadow */
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px); /* Lift higher on hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

.feature-card .icon-wrapper {
    background-color: var(--light-blue); /* Light blue background for icon */
    color: var(--mountain-blue); /* Mountain blue icon color */
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Circular icon background */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em; /* Larger icon size */
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Subtle shadow for icon */
}

.feature-card h3 {
    color: var(--charcoal);
    font-size: 1.8em; /* Prominent heading */
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700;
}

.feature-card p {
    color: var(--steel-gray);
    font-size: 1em;
    line-height: 1.6;
}

.feature-card p strong {
    color: var(--vibrant-orange); /* Highlighted keywords in orange */
}

/* NEW: Key Stats Section */
.key-stats-section {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center;
    gap: 40px; /* Space between stat items */
    background-color: var(--deep-teal); /* Deep Teal background */
    color: var(--fresh-white);
    padding: 60px 40px; /* Padding for the section */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    max-width: 1000px; /* Max width for the stats block */
    margin: 0 auto; /* Center the stats block */
}

.stat-item {
    text-align: center;
    flex: 1 1 200px; /* Flexible width for items */
    min-width: 150px; /* Minimum width before wrapping */
}

.stat-item .stat-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 3.5em; /* Large, impactful numbers */
    color: var(--vibrant-orange); /* Vibrant orange for numbers */
    display: block; /* Make it a block element */
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.stat-item .stat-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.9); /* Slightly transparent white text */
    margin: 0;
}

/* Responsive adjustments for Why Choose Us Section */
@media (max-width: 1199px) {
    .why-choose-us-section h2 {
        font-size: 2.5em;
    }
    .why-choose-us-section .section-intro-text {
        font-size: 1.1em;
    }
    .feature-card {
        padding: 30px;
    }
    .feature-card .icon-wrapper {
        width: 50px;
        height: 50px;
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .feature-card h3 {
        font-size: 1.6em;
    }
    .feature-card p {
        font-size: 0.95em;
    }
    .key-stats-section {
        padding: 40px 30px;
        gap: 30px;
    }
    .stat-item .stat-number {
        font-size: 3em;
    }
    .stat-item .stat-text {
        font-size: 1em;
    }
}

@media (max-width: 767px) {
    .why-choose-us-section {
        padding: 60px 0;
    }
    .why-choose-us-section h2 {
        font-size: 2em;
    }
    .why-choose-us-section .section-intro-text {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .features-grid-advanced {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 25px;
    }
    .feature-card {
        padding: 25px;
        align-items: center; /* Center content in card on mobile */
        text-align: center;
    }
    .feature-card .icon-wrapper {
        margin-bottom: 15px;
    }
    .feature-card h3 {
        font-size: 1.5em;
    }
    .feature-card p {
        font-size: 0.9em;
    }
    .key-stats-section {
        flex-direction: column; /* Stack stats on mobile */
        gap: 25px;
        padding: 30px 20px;
    }
    .stat-item .stat-number {
        font-size: 2.8em;
    }
    .stat-item .stat-text {
        font-size: 0.9em;
    }
}
.feature-card h3 {
    color: var(--charcoal);
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 0px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.4px;
}
.feature-card {
    background-color: var(--fresh-white);
    padding: 29px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    text-align: left;
    display: flex
;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-item .stat-number {
    background: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 50px;
    color: var(--vibrant-orange);
    display: block;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    border-radius: 100px;
}
.key-stats-section {
    display: flex
;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    background-color: var(--deep-teal);
    color: var(--fresh-white);
    padding: 60px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    max-width: 1063px;
    margin: 0 auto;
}
h2.aos-init.aos-animate {
    line-height: 58px;
}
/* Services Section */
.services-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--fresh-white); /* Clean background */
}

.services-section h2 {
    color: var(--charcoal);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.services-section .section-intro-text {
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 1.2em;
    color: var(--steel-gray);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}

/* Tabs Container */
.tabs-container {
    max-width: 1200px; /* Max width for the entire tabs block */
    margin: 0 auto;
    background-color: var(--fresh-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Clear floats/contain shadows */
}

/* Tab Buttons */
.tab-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    background-color: var(--light-gray); /* Light background for tab navigation */
    border-bottom: 1px solid var(--border-color);
    padding: 15px 20px;
    gap: 15px; /* Space between buttons */
}

.tab-button {
    background: none;
    border: none;
    padding: 15px 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    color: var(--charcoal); /* Default text color */
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px; /* Slightly rounded buttons */
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
}

.tab-button i {
    font-size: 1.2em; /* Icon size */
    color: var(--mountain-blue); /* Icon color */
    transition: color 0.3s ease;
}

.tab-button:hover:not(.active) {
    background-color: var(--border-color); /* Subtle hover for inactive */
    color: var(--deep-teal);
}

.tab-button.active {
    background-color: var(--vibrant-orange); /* Active tab background */
    color: var(--fresh-white); /* Active tab text color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Shadow for active tab */
    transform: translateY(-2px); /* Slight lift for active */
}

.tab-button.active i {
    color: var(--fresh-white); /* Active icon color */
}

/* Tab Content */
.tab-content-wrapper {
    padding: 40px; /* Padding for the entire content area */
}

.tab-pane {
    display: none; /* Hidden by default */
    animation: fadeIn 0.8s ease-out; /* Fade-in animation */
}

.tab-pane.active {
    display: block; /* Active tab is visible */
}

.tab-pane-inner {
    display: flex;
    align-items: flex-start; /* Align image and text at the top */
    gap: 40px; /* Space between image and text */
    text-align: left;
}

.tab-image {
    flex: 0 0 45%; /* Image takes 45% of the width */
    max-width: 45%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.tab-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease; /* Subtle zoom on hover */
}

.tab-image img:hover {
    transform: scale(1.03);
}

.tab-text {
    flex: 1; /* Text takes remaining space */
    color: var(--steel-gray);
}

.tab-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2em; /* Heading within tab content */
    color: var(--deep-teal); /* Darker heading color */
    margin-top: 0;
    margin-bottom: 20px;
}

.tab-text p {
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 15px;
}

.tab-text ul {
    list-style: none; /* Remove default list style */
    padding-left: 0;
    margin-bottom: 20px;
}

.tab-text ul li {
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
    margin-bottom: 10px;
    font-size: 1em;
    line-height: 1.5;
}

.tab-text ul li::before {
    content: "\f00c"; /* Font Awesome checkmark icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--vibrant-orange); /* Orange checkmark */
    position: absolute;
    left: 0;
    top: 0;
}

.tab-text ul li strong {
    color: var(--deep-teal); /* Bolded text within lists */
}

.tab-ctas {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.btn-sm { /* Small button for tab content */
    padding: 10px 25px;
    font-size: 0.95em;
}

/* Keyframe for fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 1199px) { /* Tablet and smaller */
    .services-section h2 {
        font-size: 2.5em;
    }
    .services-section .section-intro-text {
        font-size: 1.1em;
        margin-bottom: 50px;
    }
    .tab-button {
        padding: 12px 20px;
        font-size: 1em;
        gap: 6px;
    }
    .tab-button i {
        font-size: 1.1em;
    }
    .tab-content-wrapper {
        padding: 30px;
    }
    .tab-pane-inner {
        flex-direction: column; /* Stack image and text on smaller screens */
        gap: 30px;
    }
    .tab-image {
        flex: none; /* Remove flex sizing */
        max-width: 100%; /* Full width for image */
    }
    .tab-text h3 {
        font-size: 1.8em;
    }
    .tab-text p {
        font-size: 1em;
    }
    .tab-text ul li {
        font-size: 0.95em;
    }
    .tab-ctas {
        flex-direction: column; /* Stack buttons on mobile */
        gap: 10px;
    }
    .btn-sm {
        width: 100%; /* Full width buttons on mobile */
    }
}

@media (max-width: 767px) { /* Mobile */
    .services-section {
        padding: 60px 0;
    }
    .services-section h2 {
        font-size: 2em;
    }
    .services-section .section-intro-text {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .tab-buttons {
        flex-direction: column; /* Stack tab buttons vertically */
        align-items: stretch; /* Stretch buttons to full width */
        padding: 15px;
        gap: 10px;
    }
    .tab-button {
        font-size: 0.95em;
        padding: 12px 15px;
        justify-content: flex-start; /* Align text to left */
    }
    .tab-content-wrapper {
        padding: 25px 15px;
    }
    .tab-image {
        margin-bottom: 20px;
    }
    .tab-text h3 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }
    .tab-text p {
        font-size: 0.9em;
    }
    .tab-text ul li {
        font-size: 0.85em;
    }
}
.tab-pane {
    display: none; /* Hidden by default */
    animation: fadeIn 0.8s ease-out; /* Fade-in animation */
}

.tab-pane.active {
    display: block; /* Active tab is visible */
}
/* About Us Section - Professional & User-Centric Style */
.about-us-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--fresh-white); /* Clean white background */
}

.about-us-section h2 {
    color: var(--charcoal);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.about-us-section .section-intro-text {
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 1.2em;
    color: var(--steel-gray);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}


.about-main-grid {
    display: grid;

    gap: 80px; /* Generous space between columns */
    max-width: 800px;
    margin: 0 auto 60px auto; /* Center the grid */
    align-items: flex-start; /* Align columns at the top */
    text-align: left; /* Reset text alignment for content */
}

/* Main Narrative Column */
.about-narrative-column {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between narrative blocks */
}

.narrative-block {
    background-color: var(--light-gray); /* Subtle background for blocks */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Very subtle shadow */
}

.narrative-block h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.8em;
    color: var(--deep-teal); /* Brand color for headings */
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.3;
}

.narrative-block p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05em;
    color: var(--steel-gray);
    line-height: 1.7;
    margin-bottom: 0; /* Remove default paragraph margin */
}

.narrative-block p strong {
    color: var(--vibrant-orange); /* Emphasize keywords in orange */
}

/* Team Members Column */
.about-team-column {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Space between team member cards */
    padding-top: 20px; /* Align visually with narrative blocks */
}

.team-member-card {
    background-color: var(--fresh-white);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color); /* Subtle border */
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.team-photo-pro {
    width: 120px; /* Fixed size for professionalism */
    height: 120px;
    border-radius: 50%; /* Circular photo */
    object-fit: cover;
    margin-bottom: 15px;
    border: 4px solid var(--vibrant-orange); /* Orange border for pop */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.team-member-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    color: var(--charcoal);
    margin-bottom: 5px;
}

.team-member-card p {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95em;
    color: var(--steel-gray);
    margin-bottom: 10px;
}

.experience-tag {
    display: inline-block;
    background-color: var(--mountain-blue); /* Distinct color for experience */
    color: var(--fresh-white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.text-center {
    text-align: center; /* For the button below the grid */
    margin-top: 40px; /* Space above button */
}

.btn-lg {
    padding: 15px 35px;
    font-size: 1.15em;
}

/* Responsive adjustments */
@media (max-width: 1199px) { /* Tablet and smaller */
    .about-main-grid {
        grid-template-columns: 1fr; /* Stack columns on tablet */
        gap: 60px;
        margin-bottom: 40px;
    }
    .about-team-column {
        flex-direction: row; /* Display team members in a row on tablets */
        flex-wrap: wrap; /* Allow wrapping if needed */
        justify-content: center;
        gap: 30px;
        padding-top: 0;
    }
    .team-member-card {
        flex: 1 1 calc(50% - 30px); /* Two cards per row */
        max-width: 350px; /* Limit card width */
    }
}

@media (max-width: 767px) { /* Mobile */
    .about-us-section {
        padding: 60px 0;
    }
    .about-us-section h2 {
        font-size: 2em;
    }
    .about-us-section .section-intro-text {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .about-main-grid {
        gap: 40px;
    }
    .narrative-block {
        padding: 25px;
    }
    .narrative-block h3 {
        font-size: 1.6em;
    }
    .narrative-block p {
        font-size: 0.95em;
    }
    .about-team-column {
        flex-direction: column; /* Stack team members vertically on mobile */
        gap: 25px;
    }
    .team-member-card {
        flex: 1 1 100%; /* Full width for cards */
        max-width: unset;
        padding: 20px;
    }
    .team-photo-pro {
        width: 100px;
        height: 100px;
    }
    .team-member-card h4 {
        font-size: 1.3em;
    }
    .team-member-card p {
        font-size: 0.9em;
    }
    .experience-tag {
        font-size: 0.8em;
        padding: 4px 10px;
    }
    .btn-lg {
        padding: 12px 25px;
        font-size: 1em;
    }
}
.about-us-section

 {
    padding: 0px 0px 100px 0px;
    text-align: center;
    background-color: var(--fresh-white);
}
/* Special Offers & Coupons Section */
.offers-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--light-orange); /* Distinct background for offers */
}

.offers-section h2 {
    color: var(--charcoal);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.offers-section .section-intro-text {
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 1.2em;
    color: var(--steel-gray);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}

.coupon-grid-pro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive grid for coupons */
    gap: 40px; /* Space between coupons */
    justify-content: center; /* Center coupons if less than a full row */
    max-width: 1200px; /* Max width for the grid */
    margin: 0 auto 40px auto;
}

/* The Advanced Coupon Card */
.coupon-card-pro-alt {
    background-color: var(--fresh-white); /* White background */
    border: 5px dotted var(--vibrant-orange); /* Thick ORANGE dotted border */
    border-radius: 20px; /* More rounded corners */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Stronger professional shadow */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.coupon-card-pro-alt:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.coupon-header-alt {
    background-color: var(--deep-teal); /* Dark header for contrast */
    color: var(--fresh-white);
    padding: 30px 20px; /* More padding */
    border-bottom: 3px dotted rgba(255, 255, 255, 0.5); /* Lighter dotted line */
    text-align: center;
}

.coupon-header-alt .discount-percent-alt,
.coupon-header-alt .discount-amount-alt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Extra bold */
    font-size: 4.5em; /* Even larger discount text */
    line-height: 1;
    color: var(--vibrant-orange); /* Vibrant orange for the discount number */
    display: block;
    margin-bottom: 8px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); /* Deeper shadow for pop */
}

.coupon-header-alt .offer-title-alt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.8em; /* Larger title */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coupon-body-alt {
    padding: 30px; /* More padding */
    color: var(--steel-gray);
    flex-grow: 1;
    text-align: center;
}

.coupon-body-alt .coupon-description-alt {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05em;
    margin-bottom: 25px;
}

.coupon-details-alt {
    list-style: none;
    padding-left: 0;
    margin-bottom: 35px; /* More space before button */
}

.coupon-details-alt li {
    position: relative;
    padding-left: 30px; /* Space for icon */
    margin-bottom: 12px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1.5;
    color: var(--charcoal);
    text-align: left; /* Align text within list items */
}

.coupon-details-alt li .fa-check {
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--vibrant-orange); /* Orange checkmark */
    font-size: 1.2em;
}

.coupon-details-alt li .fa-xmark {
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--steel-gray); /* Gray for "cannot be combined" */
    font-size: 1.2em;
}

.btn-coupon-action-alt {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 15px 35px; /* Larger button */
    font-size: 1.2em; /* Larger text */
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    transition: all 0.3s ease;
}

.btn-coupon-action-alt:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.coupon-footer-alt {
    background-color: var(--light-gray); /* Light gray footer */
    padding: 20px 20px; /* More padding */
    font-size: 0.9em;
    color: var(--steel-gray);
    text-align: center;
    border-top: 2px dotted var(--border-color); /* Light dotted top border */
}

.coupon-footer-alt p {
    margin-bottom: 5px;
    line-height: 1.4;
}

.coupon-footer-alt .coupon-validity-alt {
    font-weight: 700;
    color: var(--deep-teal);
    font-size: 1em;
}

.coupon-footer-alt .coupon-disclaimer-small-alt {
    font-size: 0.8em;
    margin-top: 10px;
}

.coupon-overall-disclaimer {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    color: var(--steel-gray);
    margin-top: 20px;
    text-align: center;
    line-height: 1.5;
}

/* Responsive Adjustments for Offers Section */
@media (max-width: 1199px) {
    .offers-section h2 {
        font-size: 2.5em;
    }
    .offers-section .section-intro-text {
        font-size: 1.1em;
        margin-bottom: 50px;
    }
    .coupon-grid-pro {
        gap: 30px;
    }
    .coupon-card-pro-alt {
        border-width: 4px;
        border-radius: 15px;
    }
    .coupon-header-alt {
        padding: 25px 20px;
    }
    .coupon-header-alt .discount-percent-alt,
    .coupon-header-alt .discount-amount-alt {
        font-size: 3.8em;
    }
    .coupon-header-alt .offer-title-alt {
        font-size: 1.6em;
    }
    .coupon-body-alt {
        padding: 25px;
    }
    .coupon-description-alt {
        font-size: 1em;
    }
    .coupon-details-alt li {
        font-size: 0.95em;
    }
    .btn-coupon-action-alt {
        padding: 12px 30px;
        font-size: 1.1em;
    }
    .coupon-footer-alt {
        padding: 15px 20px;
        font-size: 0.85em;
    }
}

@media (max-width: 767px) {
    .offers-section {
        padding: 60px 0;
    }
    .offers-section h2 {
        font-size: 2em;
    }
    .offers-section .section-intro-text {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .coupon-grid-pro {
        grid-template-columns: 1fr; /* Stack coupons vertically */
        gap: 25px;
    }
    .coupon-card-pro-alt {
        border-width: 3px;
        border-radius: 12px;
        max-width: 90%; /* Adjust max-width for mobile */
        margin: 0 auto;
    }
    .coupon-header-alt {
        padding: 20px 15px;
    }
    .coupon-header-alt .discount-percent-alt,
    .coupon-header-alt .discount-amount-alt {
        font-size: 3.2em;
    }
    .coupon-header-alt .offer-title-alt {
        font-size: 1.3em;
    }
    .coupon-body-alt {
        padding: 20px;
    }
    .coupon-description-alt {
        font-size: 0.95em;
    }
    .coupon-details-alt li {
        font-size: 0.9em;
        padding-left: 25px;
    }
    .btn-coupon-action-alt {
        font-size: 1em;
        padding: 10px 25px;
    }
    .coupon-footer-alt {
        padding: 12px 15px;
        font-size: 0.8em;
    }
}
/* Honest Pricing & Financing Section */
.pricing-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--fresh-white); /* Clean white background */
}

.pricing-section h2 {
    color: var(--charcoal);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.pricing-section .section-intro-text {
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 1.2em;
    color: var(--steel-gray);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}

.pricing-philosophy-block-standalone {
    max-width: 900px; /* Max width for the content block */
    margin: 0 auto;
    background-color: var(--light-gray); /* Subtle background for distinction */
    padding: 50px; /* More padding for a premium feel */
    border-radius: 15px; /* Softer rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Professional shadow */
    border: 1px solid var(--border-color); /* Add a subtle border */
    text-align: left; /* Align text within the block */
}

.pricing-philosophy-block-standalone h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.2em; /* Larger heading */
    color: var(--deep-teal);
    margin-top: 0;
    margin-bottom: 30px;
    line-height: 1.3;
}

.pricing-philosophy-block-standalone p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
    color: var(--steel-gray);
    line-height: 1.7;
    margin-bottom: 30px;
}

.pricing-philosophy-block-standalone p strong {
    color: var(--vibrant-orange); /* Emphasize keywords */
}

.pricing-philosophy-block-standalone ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.pricing-philosophy-block-standalone ul li {
    position: relative;
    padding-left: 40px; /* More space for icon */
    margin-bottom: 18px; /* More space between items */
    font-family: 'Open Sans', sans-serif;
    font-size: 1.15em; /* Slightly larger text */
    color: var(--charcoal);
    line-height: 1.5;
}

.pricing-philosophy-block-standalone ul li i {
    position: absolute;
    left: 0;
    top: 3px; /* Adjust alignment */
    color: var(--vibrant-orange); /* Keep checkmark vibrant */
    font-size: 1.4em; /* Larger icon */
}

.pricing-philosophy-block-standalone ul li strong {
    color: var(--deep-teal);
}

/* Responsive adjustments for Pricing Section */
@media (max-width: 1199px) {
    .pricing-section h2 {
        font-size: 2.5em;
    }
    .pricing-section .section-intro-text {
        font-size: 1.1em;
        margin-bottom: 50px;
    }
    .pricing-philosophy-block-standalone {
        padding: 40px;
    }
    .pricing-philosophy-block-standalone h3 {
        font-size: 2em;
    }
    .pricing-philosophy-block-standalone p {
        font-size: 1em;
    }
    .pricing-philosophy-block-standalone ul li {
        font-size: 1.05em;
        padding-left: 35px;
    }
    .pricing-philosophy-block-standalone ul li i {
        font-size: 1.3em;
    }
}

@media (max-width: 767px) {
    .pricing-section {
        padding: 60px 0;
    }
    .pricing-section h2 {
        font-size: 2em;
    }
    .pricing-section .section-intro-text {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .pricing-philosophy-block-standalone {
        padding: 30px;
        border-radius: 10px;
    }
    .pricing-philosophy-block-standalone h3 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .pricing-philosophy-block-standalone p {
        font-size: 0.95em;
        margin-bottom: 20px;
    }
    .pricing-philosophy-block-standalone ul li {
        font-size: 0.95em;
        padding-left: 30px;
        margin-bottom: 15px;
    }
    .pricing-philosophy-block-standalone ul li i {
        font-size: 1.2em;
    }
}
.coupon-header-alt {
    background-color: #e7e7e7;
    color: hsl(0deg 0% 25.83%);
    padding: 30px 20px;
    border-bottom: 3px dotted rgba(255, 255, 255, 0.5);
    text-align: center;
}
/* .coupon-header-alt {
    background-color: #e7e7e7;
    color: var(--fresh-white);
    padding: 30px 20px;
    border-bottom: 3px dotted rgba(255, 255, 255, 0.5);
    text-align: center;
} */
.btn-coupon-action-alt {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 15px 35px;
    font-size: 15px !important;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}.coupon-footer-alt {
    background-color: var(--light-gray);
    padding: 1px 20px 20px 20px;
    font-size: 0.9em;
    color: var(--steel-gray);
    text-align: center;
    border-top: 2px dotted var(--border-color);
}
.coupon-body-alt {
    padding: 22px;
    color: var(--steel-gray);
    flex-grow: 1;
    text-align: center;
}
.coupon-grid-pro {
    display: grid
;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto 40px auto;
}
.coupon-header-alt .discount-percent-alt, .coupon-header-alt .discount-amount-alt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 60px;
    line-height: 1;
    color: var(--vibrant-orange);
    display: block;
    margin-bottom: 8px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}
.coupon-header-alt .offer-title-alt

 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* Honest Pricing & Flexible Financing Section - Single Row Grid */
.pricing-options-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--fresh-white); /* Clean white background */
}

.pricing-options-section h2 {
    color: var(--charcoal);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.pricing-options-section .section-intro-text {
    max-width: 900px; /* Slightly wider intro text */
    margin: 0 auto 60px auto;
    font-size: 1.2em;
    color: var(--steel-gray);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}

.pricing-features-grid-row {
    display: grid;
    /* On large screens, force 4 columns in one row */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px; /* Space between grid items */
    max-width: 1300px; /* Allow wider for 4 columns */
    margin: 0 auto; /* Center the grid */
}

.feature-box-stacked {
    background-color: var(--light-gray); /* Subtle background for each box */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); /* Professional shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text within the box */
    border: 1px solid var(--border-color); /* Subtle border */
}

.feature-box-stacked:hover {
    transform: translateY(-8px); /* Lift on hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
}

.feature-box-stacked .icon-stacked {
    font-size: 3em; /* Icon size */
    color: var(--mountain-blue); /* Brand color for icons */
    margin-bottom: 15px; /* Space between icon and heading */
}

.feature-box-stacked h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.4em; /* Heading size */
    color: var(--deep-teal);
    margin-bottom: 10px; /* Space between heading and paragraph */
    line-height: 1.3;
}

.feature-box-stacked p {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95em; /* Paragraph size */
    color: var(--steel-gray);
    line-height: 1.5;
    margin-bottom: 0; /* Remove default paragraph bottom margin */
}

/* Responsive adjustments */
@media (max-width: 1200px) { /* Adjust for smaller desktops/large tablets */
    .pricing-features-grid-row {
        grid-template-columns: repeat(2, 1fr); /* Two columns on smaller screens */
        gap: 25px;
    }
}

@media (max-width: 767px) { /* Mobile */
    .pricing-options-section {
        padding: 60px 0;
    }
    .pricing-options-section h2 {
        font-size: 2em;
    }
    .pricing-options-section .section-intro-text {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .pricing-features-grid-row {
        grid-template-columns: 1fr; /* Stack all boxes vertically on mobile */
        gap: 20px;
    }
    .feature-box-stacked {
        padding: 25px;
        border-radius: 10px;
    }
    .feature-box-stacked .icon-stacked {
        font-size: 2.5em;
        margin-bottom: 10px;
    }
    .feature-box-stacked h3 {
        font-size: 1.3em;
    }
    .feature-box-stacked p {
        font-size: 0.9em;
    }
}
/* Service Areas Section */
.service-areas-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--fresh-white);
}

.service-areas-section h2 {
    color: var(--charcoal);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.service-areas-section .section-intro-text {
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 1.2em;
    color: var(--steel-gray);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}

.service-map {
    width: 100%;
    height: 500px; /* Standard height for a good map view */
    border-radius: 15px; /* Rounded corners for modern look */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Professional shadow */
    margin-bottom: 60px; /* Space below map */
    overflow: hidden; /* Ensures border-radius applies cleanly */
}

.service-areas-list-container {
    text-align: center;
}

.service-areas-list-container h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2em;
    color: var(--deep-teal);
    margin-bottom: 30px;
}

.service-cities-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid; /* Use grid for multi-column list */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2-3 columns on desktop */
    gap: 15px 20px; /* Row and column gap */
    max-width: 900px; /* Limit list width */
    text-align: left; /* Align list items left */
}

.service-cities-list li {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
    color: var(--charcoal);
    line-height: 1.5;
    position: relative;
    padding-left: 28px; /* Space for icon */
}

.service-cities-list li i {
    position: absolute;
    left: 0;
    top: 5px; /* Adjust vertical alignment */
    color: var(--vibrant-orange); /* Brand color for icons */
    font-size: 1.1em;
}

/* Responsive Adjustments for Service Areas Section */
@media (max-width: 1199px) {
    .service-areas-section h2 {
        font-size: 2.5em;
    }
    .service-areas-section .section-intro-text {
        font-size: 1.1em;
        margin-bottom: 50px;
    }
    .service-map {
        height: 450px;
        border-radius: 12px;
        margin-bottom: 50px;
    }
    .service-areas-list-container h3 {
        font-size: 1.8em;
        margin-bottom: 25px;
    }
    .service-cities-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjust columns for tablet */
        gap: 12px 18px;
    }
    .service-cities-list li {
        font-size: 1em;
        padding-left: 25px;
    }
    .service-cities-list li i {
        font-size: 1em;
    }
}

@media (max-width: 767px) {
    .service-areas-section {
        padding: 60px 0;
    }
    .service-areas-section h2 {
        font-size: 2em;
    }
    .service-areas-section .section-intro-text {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .service-map {
        height: 350px; /* Shorter map on mobile */
        border-radius: 10px;
        margin-bottom: 40px;
    }
    .service-areas-list-container h3 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    .service-cities-list {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 10px;
    }
    .service-cities-list li {
        font-size: 0.95em;
        padding-left: 22px;
    }
    .service-cities-list li i {
        font-size: 0.95em;
        top: 4px;
    }
}
/* Contact Section - Advanced CTA Boxes */
.contact-section {
    padding: 100px 0;
    text-align: center;
    background-color: var(--deep-teal); /* Dark brand color background */
    color: var(--fresh-white); /* White text for contrast */
}

.contact-section h2 {
    color: var(--fresh-white);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.contact-section .section-intro-text {
    max-width: 800px;
    margin: 0 auto 60px auto;
    font-size: 1.2em;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9); /* Slightly muted white for readability */
}

.contact-cta-grid {
    display: flex; /* Use flexbox for the two boxes */
    justify-content: center; /* Center the boxes horizontally */
    gap: 40px; /* Space between the two boxes */
    max-width: 900px; /* Control max width of the box pair */
    margin: 0 auto 70px auto; /* Center and add bottom margin */
}

.contact-cta-box {
    flex: 1 1 45%; /* Allow boxes to grow/shrink and take up about 45% of parent width each */
    min-height: 300px; /* Minimum height for the boxes */
    position: relative; /* For absolute positioning of overlay */
    border-radius: 15px;
    overflow: hidden; /* Ensures image and overlay are contained */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-decoration: none; /* Remove underline from link */
    color: var(--fresh-white); /* White text over image */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Stronger shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific background images for each box */
.call-box {
    background-image: url('../images/call-bg.jpg'); /* Adjust path as needed */
}

.email-box {
    background-image: url('../images/email-bg.jpg'); /* Adjust path as needed */
}

/* Overlay for readability */
.contact-cta-box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Darker overlay for text contrast */
    transition: background-color 0.3s ease;
    z-index: 1; /* Place overlay above image but below content */
}

.contact-cta-box:hover .overlay {
    background-color: rgba(0, 0, 0, 0.4); /* Lighter overlay on hover */
}

/* Content within the box (icon, heading, detail) */
.contact-cta-box > * {
    position: relative; /* Bring content above the overlay */
    z-index: 2;
}

.contact-cta-box .icon-cta {
    font-size: 4em; /* Large icon */
    color: var(--vibrant-orange); /* Vibrant orange for icons */
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.contact-cta-box:hover .icon-cta {
    transform: scale(1.1); /* Slightly enlarge icon on hover */
}

.contact-cta-box h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Extra bold */
    font-size: 2.2em;
    margin-bottom: 10px;
    line-height: 1.2;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Text shadow for pop */
}

.contact-cta-box .cta-detail {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.contact-cta-box:hover {
    transform: translateY(-10px) scale(1.02); /* Lift and slightly enlarge on hover */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35); /* Stronger shadow on hover */
}

/* Instagram Button Section */
.social-media-instagram-btn {
    margin-top: 50px;
}

.social-media-instagram-btn h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.8em;
    color: var(--fresh-white);
    margin-bottom: 30px; /* More space above the button */
}

.btn-instagram {
    display: inline-flex; /* Allows icon and text to sit nicely */
    align-items: center; /* Vertically align icon and text */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); /* Instagram gradient */
    color: var(--fresh-white);
    padding: 15px 35px; /* Generous padding */
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Strong shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-instagram i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 1.3em; /* Slightly larger icon */
}

.btn-instagram:hover {
    transform: translateY(-5px); /* Lift button on hover */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
    filter: brightness(1.1); /* Slightly brighter on hover */
}

/* Responsive Adjustments */
@media (max-width: 991px) { /* Tablets */
    .contact-cta-grid {
        flex-direction: column; /* Stack boxes vertically */
        gap: 30px;
        max-width: 500px; /* Limit width of stacked boxes */
    }
    .contact-cta-box {
        min-height: 250px;
        flex: 1 1 auto; /* Adjust flex properties for stacking */
    }
    .contact-cta-box .icon-cta {
        font-size: 3.5em;
    }
    .contact-cta-box h3 {
        font-size: 2em;
    }
    .contact-cta-box .cta-detail {
        font-size: 1.1em;
    }
    .btn-instagram {
        padding: 12px 30px;
        font-size: 1.1em;
    }
    .btn-instagram i {
        font-size: 1.2em;
    }
}

@media (max-width: 767px) { /* Mobile */
    .contact-section {
        padding: 60px 0;
    }
    .contact-section h2 {
        font-size: 2em;
    }
    .contact-section .section-intro-text {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .contact-cta-grid {
        gap: 25px;
        max-width: 90%;
        margin-bottom: 50px;
    }
    .contact-cta-box {
        min-height: 200px;
        border-radius: 12px;
    }
    .contact-cta-box .icon-cta {
        font-size: 3em;
        margin-bottom: 15px;
    }
    .contact-cta-box h3 {
        font-size: 1.8em;
    }
    .contact-cta-box .cta-detail {
        font-size: 1em;
    }
    .social-media-instagram-btn h3 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    .btn-instagram {
        font-size: 1em;
        padding: 10px 25px;
    }
    .btn-instagram i {
        font-size: 1.1em;
    }
}
.btn-instagram:hover {
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}
.contact-cta-box h3 {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.2em;
    margin-bottom: 10px;
    line-height: 1.2;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.hero-overlay
 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(44 122 153 / 66%), /* Deep Teal, slightly more opaque at top */ rgba(74, 144, 184, 0.7), /* Mountain Blue, a bit less opaque in middle */ rgb(44 122 153 / 66%) /* Deep Teal, more opaque at bottom */);
    z-index: -1;
}
.tab-image img {
    width: 100%;
    height: 600px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}
@media (max-width: 1199px) {
    .header .contact-info .phone-call-button {
        display: none;
        padding: 8px 15px;
        font-size: 1em;
    }
}

/* General Body and Container adjustments (if not already present) */
body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Navigation Adjustments */

.header .logo {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between logo image and license number */
}

.header .logo img {
    height: 50px; /* Adjust as needed */
    width: auto;
}

.license-number {
    font-size: 0.85em;
    font-weight: 600;
    color: #004d40; /* Dark teal/green, adjust to match your brand */
    white-space: nowrap; /* Prevents wrapping if space is tight */
}

.header .contact-info {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between phone number and "Hablamos Español" */
}

.hablemos-espanol {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #004d40; /* Or a color that stands out but fits your palette */
    font-weight: 600;
}

.hablemos-espanol .spanish-flag-icon {
    width: 20px; /* Size of the flag icon */
    height: auto;
    margin-right: 5px;
    border: 1px solid #ddd; /* Small border to make it pop */
    border-radius: 2px;
}

/* Hero Section (Existing, ensure button styling is cohesive) */
.btn-hero-large {
    font-size: 1.25em;
    padding: 15px 30px;
}

.btn-hero-secondary {
    font-size: 1.1em;
    padding: 12px 25px;
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-hero-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Why Choose Us Section */
.why-choose-us-section .features-grid-advanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.why-choose-us-section .feature-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-us-section .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.why-choose-us-section .feature-card .icon-wrapper {
    background-color: #00796b; /* Teal */
    color: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5em;
    margin: 0 auto 20px;
}

.why-choose-us-section .feature-card h3 {
    color: #004d40; /* Darker teal */
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.why-choose-us-section .feature-card p {
    font-size: 1em;
    color: #555;
}

/* Service Areas Section (Map and List) */
.service-areas-section .service-map {
    height: 400px; /* Adjust map height */
    width: 100%;
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-areas-list-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.service-areas-list-container h3 {
    text-align: center;
    color: #004d40;
    margin-bottom: 25px;
    font-size: 1.6em;
}

.service-cities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2 or 3 columns on desktop */
    gap: 15px 20px;
}

.service-cities-list li {
    font-size: 1.1em;
    color: #333;
    display: flex;
    align-items: center;
}

.service-cities-list li .fa-location-dot {
    color: #00796b; /* Teal icon */
    margin-right: 10px;
    font-size: 0.9em;
}


/* FAQ Section */
.faq-section {
    padding: 80px 0;
}

.faq-accordion-container {
    max-width: 900px;
    margin: 40px auto 0;
}

.faq-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.faq-item .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 25px;
    background-color: #f7f7f7;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25em;
    color: #004d40; /* Dark teal */
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.faq-item .accordion-header:hover,
.faq-item .accordion-header.active {
    background-color: #e6f5f4; /* Lighter teal */
}

.faq-item .accordion-header h3 {
    margin: 0;
    font-size: 1em; /* Adjusted to fit button text size */
}

.faq-item .accordion-icon {
    font-size: 1.2em;
    color: #00796b;
    transition: transform 0.3s ease;
}

.faq-item .accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

.faq-item .accordion-content {
    max-height: 0;
    padding: 0 25px;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    background-color: #fff;
}

.faq-item .accordion-content p {
    padding-bottom: 20px;
    margin-top: 0;
    line-height: 1.8;
    color: #555;
}

.faq-item .accordion-content.open {
    max-height: 200px; /* Adjust as needed, or use JS to calculate dynamic height */
    padding-top: 15px;
    padding-bottom: 20px;
}


/* Responsive Adjustments (Add to existing media queries or create new ones) */
@media (max-width: 992px) {
    .header .contact-info .desktop-only {
        display: none; /* Hide desktop specific contact info */
    }

    .header .mobile-phone-icon-button {
        display: block; /* Show mobile phone icon */
    }

    .license-number {
        font-size: 0.75em;
    }

    .why-choose-us-section .features-grid-advanced {
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }

    .service-cities-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjust columns for smaller screens */
    }
}


@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5em;
    }
    .hero-tagline {
        font-size: 1.2em;
    }
    .hero-value-prop {
        font-size: 1em;
    }

    .btn-hero-large {
        font-size: 1.1em;
        padding: 12px 25px;
    }
    .btn-hero-secondary {
        font-size: 1em;
        padding: 10px 20px;
    }

    .header .logo {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .license-number {
        font-size: 0.7em;
        text-align: left;
    }

    .faq-item .accordion-header {
        font-size: 1.1em;
        padding: 15px 20px;
    }
    .faq-item .accordion-content p {
        font-size: 0.95em;
        padding: 0 20px 15px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2em;
    }
    .hero-tagline {
        font-size: 1em;
    }
    .hero-value-prop {
        font-size: 0.9em;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .btn-hero-large, .btn-hero-secondary {
        width: 100%;
        text-align: center;
    }

    .hablemos-espanol {
        font-size: 0.8em;
    }

    .service-cities-list {
        grid-template-columns: 1fr; /* Stack cities on very small screens */
    }
}
.license-number {
    font-size: 16px;
    font-weight: 900;
    color: #004d40;
    white-space: nowrap;
}
.logo img {
    height: 120px !important;
    margin: -15px 0;
}
.license-number {
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    color: #004d40;
    white-space: nowrap;
    margin-top: 5px;
}
.service-areas-list-container.aos-init.aos-animate {
    justify-content: center;
    display: flex
;
}

[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    text-align: center;
    transform: translateZ(0);
}

p.section-intro-text.aos-init.aos-animate {
    text-align: center;
}
/* ======================================= */
/* General Styles for Inner Pages        */
/* ======================================= */
.page-header-section {
    position: relative;
    margin-top: 80px; /* Assuming header height */
    padding: 80px 0; /* Adjust padding as needed */
    text-align: center;
    color: var(--fresh-white);
    background-size: cover;
    background-position: center;
}

/* Add a generic padding utility class for content sections if not already present */
.content-section-padding {
    padding: 80px 0;
}

.section-bg-white {
    background-color: var(--fresh-white);
}

.text-center {
    text-align: center;
}

.section-intro-text.text-center {
    margin-left: auto;
    margin-right: auto;
}


/* ======================================= */
/* About Us Page Specific Styles         */
/* ======================================= */

/* Story Section */
.story-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Text column wider */
    gap: 50px;
    align-items: center;
}

.story-text h2 {
    color: var(--deep-teal);
    font-size: 2.5em; /* Match homepage section titles */
    margin-bottom: 25px;
}

.story-text p {
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--steel-gray);
    margin-bottom: 20px;
}

.story-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.team-member-profile-card {
    background-color: var(--fresh-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    text-align: center;
    border: 1px solid #e0e0e0; /* Subtle border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.team-profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 5px solid var(--vibrant-orange);
}

.team-member-profile-card h3 {
    color: var(--charcoal);
    font-size: 1.8em;
    margin-bottom: 5px;
}

.team-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: var(--mountain-blue);
    font-size: 1.1em;
    margin-bottom: 10px;
}

.team-experience {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    color: var(--steel-gray);
    font-size: 0.95em;
    margin-bottom: 15px;
}

.team-bio {
    font-size: 0.95em;
    color: var(--steel-gray);
    line-height: 1.6;
    text-align: left; /* Align bio text left for readability */
    margin-bottom: 20px;
}

.team-member-profile-card h4 {
    font-family: 'Montserrat', sans-serif;
    color: var(--deep-teal);
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
}

.specializations-list {
    list-style: none;
    padding-left: 0;
    text-align: left;
}

.specializations-list li {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95em;
    color: var(--charcoal);
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.specializations-list li::before {
    content: "\f058"; /* Font Awesome solid check circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--vibrant-orange);
    position: absolute;
    left: 0;
    top: 2px;
}

/* Philosophy - Core Values Section */
.core-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.value-card {
    background-color: var(--light-gray); /* Match homepage section */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.value-icon {
    font-size: 2.8em;
    color: var(--mountain-blue);
    margin-bottom: 15px;
}

.value-card h4 {
    color: var(--charcoal);
    font-size: 1.4em;
    margin-bottom: 10px;
}

.value-card p {
    font-size: 0.95em;
    color: var(--steel-gray);
    line-height: 1.6;
}

/* Family Owned Advantages Section */
.family-advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.advantage-item {
    background-color: var(--fresh-white); /* White cards on light gray background */
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advantage-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.advantage-icon {
    font-size: 2.5em;
    color: var(--vibrant-orange);
    margin-bottom: 15px;
}

.advantage-item h4 {
    color: var(--deep-teal);
    font-size: 1.3em;
    margin-bottom: 10px;
}

.advantage-item p {
    font-size: 0.9em;
    color: var(--steel-gray);
    line-height: 1.5;
}

/* Professional Excellence Section */
.excellence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.excellence-item {
    background-color: var(--light-gray); /* Consistent with other info blocks */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.excellence-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.excellence-icon {
    font-size: 2.8em;
    color: var(--success-green); /* Green for excellence/certification */
    margin-bottom: 15px;
}

.excellence-item h4 {
    color: var(--charcoal);
    font-size: 1.4em;
    margin-bottom: 10px;
}

.excellence-item p {
    font-size: 0.95em;
    color: var(--steel-gray);
    line-height: 1.6;
}

/* Bilingual Service Section */
.bilingual-content-wrapper {
    background-color: var(--fresh-white); /* Card on light gray bg */
    padding: 40px;
    border-radius: 12px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.bilingual-icon-container {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.spanish-flag-large, .us-flag-large {
    width: 60px; /* Adjust size as needed */
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.bilingual-content-wrapper h2 {
    color: var(--deep-teal);
    font-size: 2.2em;
    margin-bottom: 15px;
}

.bilingual-content-wrapper .section-intro-text {
    font-size: 1.1em;
    margin-bottom: 20px;
}

.hablamos-espanol-prominent {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.3em;
    color: var(--vibrant-orange);
    margin-top: 15px;
}


/* Responsive adjustments for About Us page sections */
@media (max-width: 991px) { /* Tablets */
    .story-grid {
        grid-template-columns: 1fr; /* Stack on tablets */
    }
    .story-image {
        order: -1; /* Image on top */
        margin-bottom: 30px;
    }
    .team-grid {
        grid-template-columns: 1fr; /* Stack team members */
    }
    .team-member-profile-card {
        max-width: 500px; /* Limit width when stacked */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) { /* Mobile */
    .content-section-padding {
        padding: 60px 0;
    }
    .story-text h2,
    .bilingual-content-wrapper h2 {
        font-size: 2em;
    }
    .team-member-profile-card h3,
    .value-card h4,
    .advantage-item h4,
    .excellence-item h4 {
        font-size: 1.3em;
    }
    .team-profile-photo {
        width: 120px;
        height: 120px;
    }
    .core-values-grid,
    .family-advantages-grid,
    .excellence-grid {
        grid-template-columns: 1fr;
    }
}

/* Story Section */
.story-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Text column wider */
    gap: 50px;
    align-items: center; /* This helps vertically align if content heights differ */
}

.story-text {
    text-align: left; /* Explicitly set for the text block */
}

.story-text h2 {
    color: var(--deep-teal);
    font-size: 2.5em;
    margin-bottom: 25px;
    text-align: left; /* Ensure heading is also left-aligned */
}

.story-text p {
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--steel-gray);
    margin-bottom: 20px;
    text-align: left; /* Ensure paragraphs are left-aligned */
}

.story-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for Story Section if text flows too wide on medium screens before stacking */
@media (max-width: 991px) { /* Tablets */
    .story-grid {
        grid-template-columns: 1fr; /* Stack on tablets */
    }
    .story-image {
        order: -1; /* Image on top if you prefer, or remove if text should be first */
        margin-bottom: 30px;
    }
    .story-text h2, .story-text p {
        text-align: center; /* Or keep left, depending on stacked preference */
    }
}

@media (max-width: 767px) { /* Mobile */
    .story-text h2, .story-text p {
        text-align: center; /* Center text when stacked on mobile, or keep left */
    }
}
/* --- Services Page Specific Styles --- */

/* Smaller Hero Section for inner pages */
.hero-section.small-hero {
    height: 40vh; /* Adjust as needed, e.g., 40% of viewport height */
    min-height: 300px; /* Minimum height to ensure content visibility */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden; /* Ensure video doesn't overflow */
}

.hero-section.small-hero .hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire container */
    transform: translate(-50%, -50%);
    z-index: 1;
}

.hero-section.small-hero .hero-overlay {
    background: rgba(0, 0, 0, 0.5); /* Darker overlay for text readability */
    z-index: 2;
}

.hero-section.small-hero .hero-content {
    z-index: 3;
    color: var(--fresh-white);
    position: relative; /* Ensure content is above overlay */
}

.hero-section.small-hero h1 {
    font-size: 3.2em; /* Slightly smaller than main homepage hero */
    margin-bottom: 15px;
    color: var(--fresh-white);
}

.hero-section.small-hero .hero-tagline {
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.5;
    color: var(--fresh-white);
    max-width: 800px;
    margin: 0 auto;
}

/* Services Overview Section */
.services-overview-section {
    padding: 80px 0; /* Consistent padding */
}

.services-overview-section h2 {
    color: var(--deep-teal);
    margin-bottom: 25px;
}

.services-overview-section p {
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--steel-gray);
    max-width: 900px; /* Limit width for readability */
    margin: 0 auto;
}

/* Service Category Sections */
.service-category-section {
    padding: 80px 0;
}

.service-category-section h2 {
    color: var(--deep-teal);
    font-size: 2.5em;
    margin-bottom: 25px;
    text-align: center; /* Center align category titles */
}

.service-category-section p {
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--steel-gray);
    margin-bottom: 40px;
    text-align: center; /* Center align category descriptions */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.service-category-section .service-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 30px;
    margin-top: 40px; /* Space above grid */
}

.service-category-section .service-card {
    background-color: var(--fresh-white);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-category-section .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.service-category-section .service-card img {
    max-width: 120px; /* Icon size */
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px; /* Slightly rounded images */
}

.service-category-section .service-card h3 {
    color: var(--mountain-blue);
    font-size: 1.6em;
    margin-bottom: 15px;
}

.service-category-section .service-card p {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--steel-gray);
    margin-bottom: 15px;
    text-align: center; /* Ensure paragraphs are centered within card */
}

.service-category-section .service-card ul {
    list-style: none; /* Remove default list style */
    padding: 0;
    margin: 0;
    text-align: left; /* Align list items to the left */
    width: 100%; /* Take full width of card */
}

.service-category-section .service-card ul li {
    font-size: 0.9em;
    color: var(--charcoal);
    margin-bottom: 8px;
    padding-left: 25px; /* Space for custom bullet */
    position: relative;
}

.service-category-section .service-card ul li:last-child {
    margin-bottom: 0;
}

/* Custom checkmark/bullet for list items */
.service-category-section .service-card ul li::before {
    content: '\f00c'; /* FontAwesome checkmark icon */
    font-family: 'Font Awesome 6 Free'; /* Make sure this font is loaded */
    font-weight: 900; /* For solid icons */
    color: var(--vibrant-orange); /* Orange color for the checkmark */
    position: absolute;
    left: 0;
    top: 2px; /* Adjust vertical alignment */
}


/* Call to Action Section (Reusing existing classes) */
.cta-section {
    padding: 80px 0;
    background-color: var(--deep-teal); /* Assuming this variable exists */
    color: var(--fresh-white);
    text-align: center;
}

.cta-section h2 {
    color: var(--fresh-white);
    font-size: 2.8em;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 1.2em;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.cta-section .btn {
    display: inline-block;
    padding: 15px 35px;
    background-color: var(--vibrant-orange);
    color: var(--fresh-white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-section .btn:hover {
    background-color: var(--warm-orange);
    transform: translateY(-3px);
}

/* Responsive Adjustments for Services Page */
@media (max-width: 991px) { /* Tablets */
    .hero-section.small-hero h1 {
        font-size: 2.5em;
    }

    .hero-section.small-hero .hero-tagline {
        font-size: 1.1em;
    }

    .service-category-section h2 {
        font-size: 2em;
    }

    .service-category-section .service-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 767px) { /* Mobile phones */
    .hero-section.small-hero {
        height: 35vh;
        min-height: 250px;
    }

    .hero-section.small-hero h1 {
        font-size: 2em;
    }

    .hero-section.small-hero .hero-tagline {
        font-size: 1em;
    }

    .services-overview-section,
    .service-category-section,
    .cta-section {
        padding: 60px 0;
    }

    .service-category-section h2 {
        font-size: 1.8em;
    }

    .service-category-section .service-card {
        padding: 25px;
    }

    .service-category-section .service-card img {
        max-width: 100px;
    }

    .service-category-section .service-card h3 {
        font-size: 1.4em;
    }

    .cta-section h2 {
        font-size: 2.2em;
    }

    .cta-section p {
        font-size: 1em;
    }
}

@media (max-width: 575px) { /* Smaller mobile devices */
    .hero-section.small-hero {
        height: 30vh;
        min-height: 200px;
    }

    .hero-section.small-hero h1 {
        font-size: 1.8em;
    }

    .hero-section.small-hero .hero-tagline {
        font-size: 0.9em;
    }

    .service-category-section .service-cards-grid {
        grid-template-columns: 1fr; /* Stack cards on very small screens */
    }
}






/* Service Areas Page Specific Styles */

/* Small Hero Section for internal pages */
.hero-section.small-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('path/to/your/service-areas-hero.jpg') no-repeat center center/cover;
    height: 40vh; /* Adjust height as needed */
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fresh-white);
    text-align: center;
    position: relative;
    overflow: hidden; /* Ensures no overflow issues with content */
}

.hero-section.small-hero h1 {
    font-size: 3.5em; /* Larger title */
    color: var(--fresh-white);
    margin-bottom: 0.2em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-section.small-hero .hero-tagline {
    font-size: 1.3em;
    color: var(--fresh-white);
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Service Areas Grid */
.service-areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 80px; /* Space before map */
}

.service-area-card {
    background-color: var(--mountain-gray);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--vibrant-orange); /* Accent border */
}

.service-area-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.service-area-card h3 {
    font-size: 1.8em;
    color: var(--deep-teal);
    margin-bottom: 15px;
}

.service-area-card p {
    font-size: 1.1em;
    color: var(--steel-gray);
    line-height: 1.5;
}

/* Map Section */
.map-section {
    margin-top: 60px;
    padding: 40px 0;
    background-color: var(--light-blue);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.map-section h2 {
    color: var(--charcoal);
    margin-bottom: 20px;
}

/* Ensure the map div has a proper height */
#map {
    height: 450px; /* Adjust as needed */
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Adjustments for Service Areas Page */
@media (max-width: 992px) { /* Tablets and smaller desktops */
    .hero-section.small-hero h1 {
        font-size: 3em;
    }
    .hero-section.small-hero .hero-tagline {
        font-size: 1.2em;
    }

    .service-areas-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }

    .service-area-card {
        padding: 25px;
    }
    .service-area-card h3 {
        font-size: 1.6em;
    }
}

@media (max-width: 767px) { /* Mobile phones */
    .hero-section.small-hero {
        height: 30vh;
        min-height: 200px;
    }
    .hero-section.small-hero h1 {
        font-size: 2.2em;
    }
    .hero-section.small-hero .hero-tagline {
        font-size: 1em;
    }

    .service-areas-grid {
        grid-template-columns: 1fr; /* Stack cards on small screens */
        gap: 20px;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .service-area-card {
        padding: 20px;
    }
    .service-area-card h3 {
        font-size: 1.5em;
    }
    .service-area-card p {
        font-size: 1em;
    }

    #map {
        height: 300px; /* Smaller map on mobile */
    }

    .map-section {
        padding: 30px 0;
    }
}







/* --- New Contact Us Page Specific Styles --- */

/* Hero Section specific to Contact Page - feel free to change background image */
.hero-section.small-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('path/to/your/contact-hero-image.jpg') no-repeat center center/cover;
    height: 40vh; /* Adjust height as needed */
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fresh-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Main Content Grid for Contact Page */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column on small screens */
    gap: 60px; /* Space between the two main blocks */
    align-items: flex-start; /* Aligns items to the start of their grid cell */
}

@media (min-width: 992px) { /* Two columns on larger screens */
    .contact-grid {
        grid-template-columns: 1.2fr 1fr; /* Info block slightly wider than form */
        gap: 80px;
    }
}

/* Contact Info Block */
.contact-info-block {
    padding: 30px;
    background-color: var(--fresh-white);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-top: 5px solid var(--vibrant-orange); /* Accent color */
}

.contact-info-block .section-title {
    margin-bottom: 20px;
}

.contact-info-block .section-description {
    margin-bottom: 40px;
    color: var(--steel-gray);
    line-height: 1.6;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.detail-item .icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 55px; /* Fixed size for circle */
    min-height: 55px;
    border-radius: 50%;
    background-color: var(--vibrant-orange);
    color: var(--fresh-white);
    font-size: 1.6em;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.detail-item h4 {
    font-size: 1.4em;
    color: var(--deep-teal);
    margin-bottom: 5px;
}

.detail-item p {
    font-size: 1.05em;
    color: var(--charcoal);
    margin: 0;
}

.detail-item a {
    color: var(--vibrant-orange);
    text-decoration: none;
    transition: color 0.3s ease;
}

.detail-item a:hover {
    color: var(--deep-teal);
    text-decoration: underline;
}

.detail-item .small-text {
    font-size: 0.9em;
    color: var(--steel-gray);
}

/* Contact Form Block */
.contact-form-block {
    padding: 40px;
    background-color: var(--light-blue); /* Lighter background for form */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.contact-form-block .section-title {
    color: var(--deep-teal);
    margin-bottom: 15px;
}
.contact-form-block .section-description {
    margin-bottom: 30px;
}


/* Re-using existing form styles */
.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--charcoal);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1em;
    color: var(--charcoal);
    background-color: var(--fresh-white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    border-color: var(--vibrant-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 126, 0, 0.2); /* Light orange focus glow */
}

.contact-form textarea {
    resize: vertical; /* Allow vertical resizing only */
}

.contact-form .btn-primary.btn-block {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 20px; /* Space above button */
}

/* Map Section on Contact Page */
#contact-map-section {
    padding-top: 0; /* Remove top padding if previous section has padding-bottom */
    padding-bottom: var(--section-spacing); /* Use your existing section spacing variable */
    margin-top: 60px; /* Space above map section */
}

.full-width-map {
    height: 500px; /* Adjust height as needed */
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensures map content stays within border-radius */
}

@media (max-width: 768px) {
    .contact-info-block,
    .contact-form-block {
        padding: 25px; /* Reduce padding on smaller screens */
    }
    .contact-grid {
        gap: 40px;
    }
    .detail-item {
        flex-direction: column; /* Stack icon and text vertically */
        align-items: flex-start;
        text-align: left;
    }
    .detail-item .icon-circle {
        margin-bottom: 10px;
    }
    .full-width-map {
        height: 350px; /* Smaller map on mobile */
    }
}

@media (max-width: 480px) {
    .contact-info-block .section-description,
    .contact-form-block .section-description {
        font-size: 0.95em;
    }
    .detail-item h4 {
        font-size: 1.3em;
    }
    .detail-item p {
        font-size: 0.95em;
    }
}

.contact-form-block {
    width: 597px;
    padding: 40px;
    /* background-color: var(--light-blue); */
    border-radius: 10px;
    /* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); */
}
.contact-form-block {
    width: 527px;
    padding: 40px;
    background-color: var(--light-blue);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #c1c1c1;
    border-radius: 5px;
    font-size: 1em;
    color: var(--charcoal);
    background-color: var(--fresh-white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.detail-item a {
    display: flex
;
    color: var(--vibrant-orange);
    text-decoration: none;
    transition: color 0.3s ease;
}
.detail-item p {
    text-align: left !important;
    font-size: 1.05em;
    color: var(--charcoal);
    margin: 0;
}

.detail-item h4 {
    text-align: left !important;
    font-size: 1.4em;
    color: var(--deep-teal);
    margin-bottom: 5px;
}


.hero-section.small-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/duct-cleaningnew.png) no-repeat center center / cover;
    height: 40vh;
    min-height: 300px;
    display: flex
;
    align-items: center;
    justify-content: center;
    color: var(--fresh-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.story-image img {
    width: 100%;
    height: 500px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}





@media (max-width: 1199px) {
    .mobile-phone-icon-button .phone-icon-animated {
        margin-left: 7px;
        font-size: 1.2em;
        margin-top: 9px;
    }
    .hablemos-espanol {
    display: none !important;
    display: flex
;
    align-items: center;
    font-size: 0.9em;
    color: #004d40;
    font-weight: 600;
}

/*.license-number {*/
/*    display: none;*/
/*    text-align: center;*/
/*    font-size: 16px;*/
/*    font-weight: 900;*/
/*    color: #004d40;*/
/*    white-space: nowrap;*/
/*    margin-top: 5px;*/
/*}*/



.hero-buttons.aos-init.aos-animate {
    margin-right: 74px;
}

.hero-section {
    position: relative;
    height: 122vh;
    display: flex
;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: 80px;
    color: var(--fresh-white);
}
}



.hablemos-espanol {
    display: flex
;
    align-items: center;
    margin-left: 22px;
    font-size: 0.9em;
    margin-top: 6px;
    color: #004d40;
    font-weight: 600;
}
p.review-date {
    padding: 0px;
    margin-top: 0px;
}
.customer-photo {
    width: 60px;
    display: none;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 3px solid var(--success-green);
}
.customer-info {
    /* display: flex
; */
    align-items: center;
    margin-bottom: 15px;
}


/* Google Review Button Styles */
.google-review-btn {
  text-align: center;
  margin-top: 30px;
}

.google-review-btn h3 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.btn-google-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #4285F4;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-google-review:hover {
  background-color: #f1f1f1;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.btn-google-review i {
  margin-right: 10px;
  font-size: 1.2rem;
}

/* Blog Archive Styles */
.blog-hero {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../img/blog-hero-bg.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 80px 0;
  text-align: center;
}

.blog-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.blog-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-image {
  height: 220px;
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
  transform: scale(1.05);
}

.blog-content {
  padding: 25px;
}

.blog-category {
  display: inline-block;
  background: #4CAF50;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.blog-content h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.blog-content h2 a {
  color: #333;
  text-decoration: none;
}

.blog-excerpt {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.blog-date {
  color: #888;
}

.read-more {
  color: #4CAF50;
  font-weight: 600;
  text-decoration: none;
}

/* Single Blog Post Styles */
.single-blog {
  padding: 60px 0;
}

.blog-header {
  text-align: center;
  margin-bottom: 40px;
}

.blog-header h1 {
  font-size: 2.2rem;
  margin: 15px 0;
}

.blog-meta {
  color: #777;
  margin-bottom: 20px;
}

.blog-author {
  font-style: italic;
}

.blog-featured-image {
  margin-bottom: 40px;
  border-radius: 8px;
  overflow: hidden;
}

.blog-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
}

.blog-content h2 {
  color: #333;
  margin: 30px 0 15px;
  font-size: 1.6rem;
}

.blog-content p {
  margin-bottom: 20px;
}

.blog-cta {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  margin-top: 40px;
  text-align: center;
}

.blog-cta p {
  margin-bottom: 0;
}
section.blog-posts {
    margin: 150px 0px;
}
.blog-content h2 {
    line-height: 34px;
    color: #333;
    margin: 30px 0 15px;
    font-size: 1.6rem;
    margin: 17px 0px;
}


.hero-section {
    background-image: url(img/home\ page-min.JPG);
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: 80px;
    padding: 100px 0;
    position: relative;
    height: 100vh 737.6px;
    display: flex
;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: 80px;
    color: var(--fresh-white);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay with 50% opacity */
    z-index: 1;
}

/* Make sure your content stays above the overlay */
.hero-section .container {
    position: relative;
    z-index: 2;
}





/* Reviews Page Specific Styles */

/* Hero section for inner pages */
.page-header-section {
    position: relative;
    margin-top: 80px; /* Space for fixed header */
    padding: 100px 0; /* Adjust padding as needed */
    text-align: center;
    color: var(--fresh-white);
    background-size: cover;
    background-position: center;
    overflow: hidden; /* Ensures content stays within bounds */
}

.page-header-section .hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(44, 122, 153, 0.8), /* Deep Teal with opacity */
        rgba(74, 144, 184, 0.8)  /* Mountain Blue with opacity */
    );
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-header-section .hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-header-section h1 {
    font-size: 3.5em; /* Large title for impact */
    color: var(--fresh-white);
    margin-bottom: 15px;
    line-height: 1.1;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.page-header-section .hero-tagline {
    font-family: 'Roboto Slab', serif;
    font-size: 1.5em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

/* General Section Padding for content */
.content-section-padding {
    padding: 100px 0;
}

/* Reviews Grid */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.review-card {
    background-color: var(--fresh-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid var(--mountain-blue); /* Accent border on left */
}

.review-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.review-meta {
    margin-bottom: 15px;
}

.review-meta .customer-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.3em;
    color: var(--charcoal);
    display: block; /* Ensures name is on its own line if needed */
    margin-bottom: 5px;
}

.review-meta .stars {
    color: var(--success-green); /* Green for stars */
    font-size: 1.1em;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.review-meta .review-source {
    font-size: 0.9em;
    color: var(--steel-gray);
    font-style: italic;
    display: block;
}

.review-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05em;
    color: var(--steel-gray);
    line-height: 1.7;
    margin-bottom: 15px;
    flex-grow: 1; /* Allows text to take available space */
}

.review-date {
    font-size: 0.85em;
    color: var(--steel-gray);
    text-align: right; /* Align date to the right */
    display: block;
}

/* Specific styling for Google Reviews section */
.google-reviews-section {
    background-color: var(--light-blue); /* Lighter blue background */
}

.google-review-card {
    border-left-color: #4285F4; /* Google blue accent */
}

/* Call to action button at the bottom of Google reviews section */
.cta-reviews {
    margin-top: 60px;
}

.btn-google-review-large {
    display: inline-flex;
    align-items: center;
    background-color: #4285F4; /* Google blue */
    color: var(--fresh-white);
    padding: 15px 35px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: 0.5px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-google-review-large:hover {
    background-color: #357ae8; /* Darker blue on hover */
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.btn-google-review-large i {
    margin-right: 10px;
    font-size: 1.3em;
}



.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    color: white;
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

@media (min-width: 1024px) {
    .lg\:text-left {
        color: #ff4e03;
        text-align: left;
    }
}

@media (min-width: 768px) {
    .md\:mb-8 {
        color: white;
        margin-bottom: 2rem;
    }
}


/* Responsive Adjustments for Reviews Page */
@media (max-width: 1199px) { /* Tablets and smaller desktops */
    .page-header-section h1 {
        font-size: 3em;
    }
    .page-header-section .hero-tagline {
        font-size: 1.3em;
    }
    .content-section-padding {
        padding: 80px 0;
    }
    .review-grid {
        gap: 25px;
    }
    .review-card {
        padding: 25px;
    }
    .review-meta .customer-name {
        font-size: 1.2em;
    }
    .review-text {
        font-size: 1em;
    }
    .btn-google-review-large {
        padding: 12px 30px;
        font-size: 1.1em;
    }
}

@media (max-width: 767px) { /* Mobile phones */
    .page-header-section {
        padding: 80px 0 60px 0; /* Adjust top/bottom padding for mobile */
        margin-top: 60px; /* Adjust for mobile header height */
    }
    .page-header-section h1 {
        font-size: 2.2em;
    }
    .page-header-section .hero-tagline {
        font-size: 1.1em;
    }
    .content-section-padding {
        padding: 60px 0;
    }
    .review-grid {
        grid-template-columns: 1fr; /* Stack reviews vertically */
        gap: 20px;
    }
    .review-card {
        padding: 20px;
        border-radius: 10px;
        border-left-width: 4px;
    }
    .review-meta .customer-name {
        font-size: 1.1em;
    }
    .review-text {
        font-size: 0.95em;
    }
    .review-date {
        font-size: 0.8em;
    }
    .btn-google-review-large {
        padding: 10px 25px;
        font-size: 1em;
        width: 100%; /* Full width button on mobile */
        box-sizing: border-box; /* Include padding in width */
    }
}
/*



Inside your @media (max-width: XXXpx) block, e.g., 991px or 767px */



.review-scroll-container {
  max-height: 150px; /* Adjust this value to set the desired height before scrolling */
  overflow-y: auto; /* This creates the vertical scrollbar when content exceeds max-height */
  padding-right: 10px; /* Adds some space for the scrollbar */
}

/* Optional: Style the scrollbar for better aesthetics (Webkit browsers) */
.review-scroll-container::-webkit-scrollbar {
  width: 8px;
}

.review-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.review-scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.review-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}
   
   
   
   
   
   
   
   
 .testimonial-section {
      max-width: 1300px;
      margin: 60px auto;
      padding: 40px 20px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
    }

    .testimonial-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .testimonial-header h2 {
      font-size: 32px;
      margin: 0;
      color: #2c3e50;
    }

    .carousel-wrapper {
      overflow: hidden;
      position: relative;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.6s ease-in-out;
    }

    .testimonial-card {
      flex: 0 0 50%;
      padding: 20px;
      transition: transform 0.3s;
    }

    .testimonial-card:hover {
      transform: translateY(-5px);
    }

    .testimonial-content {
      background: #f9fafc;
      padding: 30px;
      border-radius: 15px;
      
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .testimonial-text {
      font-size: 17px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

  .testimonial-meta {
    font-size: 18px !important;
    color: #ff623e !important;
      
  }

    .testimonial-name {
      font-weight: 600;
      color: #000;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 26px;
      background: #3498db;
      border: none;
      color: #fff;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 2;
      transition: background 0.3s;
    }

    .carousel-btn:hover {
      background: #2980b9;
    }

    #prevBtn {
      left: 10px;
    }

    #nextBtn {
      right: 10px;
    }

    @media (max-width: 768px) {
      .testimonial-card {
        flex: 0 0 100%;
      }

      #prevBtn, #nextBtn {
        display: none;
      }
    }   
    
    
    .testimonial-card:hover {
    transform: none !important;
    box-shadow: none !important;
}
.tab-button {
    border: 1px solid #000;
    background: none;
    border: 1px solid;
    padding: 15px 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    display: flex
;
    align-items: center;
    gap: 8px;
}
.tabs-container.aos-init.aos-animate {
    box-shadow: none;
}
.navigation .nav-links a:hover {
    text-decoration: none !important;
    color: var(--vibrant-orange);
}
.page-header-section {
    height: 400px;
    position: relative;
    margin-top: 80px;
    padding: 100px 0;
    text-align: center;
    color: var(--fresh-white);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.page-header-section .hero-overlay {
    background: linear-gradient(to bottom, rgb(0 0 0 / 50%), /* Deep Teal with opacity */ rgb(0 0 0 / 50%) /* Mountain Blue with opacity */);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.hero-section.small-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/duct-cleaningnew.png) no-repeat center center / cover !important;
    height: 40vh;
    min-height: 400px;
    display: flex
;
    align-items: center;
    justify-content: center;
    color: var(--fresh-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}





.contact-info-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.phone-call-button {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  gap: 8px;
}

.social-spanish-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 200px; /* Adjust as needed */
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons a {
  color: #333;
  font-size: 18px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #0073e6;
}

.hablemos-espanol {
  margin-left: auto;
  font-weight: bold;
  white-space: nowrap;
}
.phone-call-button {
    display: flex
;
    align-items: center;
    font-weight: bold;
    color: #ffffff !important;
    text-decoration: none;
    gap: 8px;
}


@media (max-width: 1199px) {
    /* ... ensure your existing .hamburger-menu and .navigation default styles are here ... */

    .navigation {
        /* Default state for mobile: hidden */
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%); /* Hidden off-screen to the right */
        transition: transform 0.3s ease-out; /* Smooth transition */
        background-color: var(--fresh-white); /* Default background color for the menu panel */
        z-index: 999; /* Ensure it's above other content but below hamburger toggle (if higher z-index) */
        overflow-y: auto; /* Allow scrolling if menu content overflows */
        flex-direction: column; /* Ensure vertical layout for flexbox */
        justify-content: center; /* Center content vertically */
        align-items: center; /* Center content horizontally */
    }

    .navigation.active {
        display: flex !important; /* Force display flex to make it visible */
        transform: translateX(0%) !important; /* Bring into view */
    }

    .navigation .nav-links {
        display: flex !important; /* Ensure the ul itself is a flex container */
        flex-direction: column !important; /* Stack list items vertically */
        list-style: none !important; /* Remove any default list bullets */
        padding: 0 !important; /* Remove default padding */
        margin: 0 !important; /* Remove default margin */
        width: 100%; /* Ensure it takes full width of the parent */
        max-width: 300px; /* Optional: set a max-width for the menu content */
        text-align: center; /* Center the text within the list */
    }

    .navigation .nav-links li {
        margin: 20px 0 !important; /* Add vertical spacing between menu items */
        display: block !important; /* Ensure each list item is treated as a block */
        width: 100%;
    }

    .navigation .nav-links a {
        text-align: left;
        color: var(--charcoal) !important; /* Set text color to charcoal (very dark gray/black) */
        font-size: 14px !important; /* Make font size larger for readability */
        text-decoration: none !important; /* Remove underlines from links */
        padding: 0px 0 !important; /* Add padding for clickable area */
        display: block !important; /* Make the entire link area clickable */
        transition: color 0.2s ease-in-out; /* Smooth hover effect */
    }

    .navigation .nav-links a:hover,
    .navigation .nav-links a:focus {
        color: var(--vibrant-orange) !important; /* Hover effect color */
    }

    /* Optional: Hide scrollbar on body when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
    }

    /* Hamburger menu icon animations when 'open' class is applied by JS */
    .hamburger-menu.open .bar:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }
    .hamburger-menu.open .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.open .bar:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }
}

@media (max-width: 1199px) {


  .license-number {
    margin-top: 5px;
    margin-left: 15px; /* Adjust as needed */
  }
}

/* style.css */


.hero-section.small-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/duct-cleaningnew.png) no-repeat center center / cover !important;
    height: 48vh;
    min-height: 700px !important;
    display: flex
;
    align-items: center;
    justify-content: center;
    color: var(--fresh-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}


.service-cities-list li {
    width: 247px !important;
    font-size: 1.1em;
    color: #333;
    display: flex
;
    align-items: center;
}


.contact-form-block .section-title {
    color: var(--deep-teal);
    margin-bottom: 15px;
    font-size: 35px !important;
}
.contact-info-block .section-title {
    font-size: 35px;
    margin-bottom: 20px !important;
}






@media (max-width: 1199px) {

.logo img {
    height: 100px !important;
    margin: -15px 0;
}


    .license-number {
        margin-top: 5px !important;
        margin-left: 9px !important;
    }

}

@media (max-width: 1199px) {
    .hero-section {
        position: relative;
        height: 21vh !important;
        display: flex
;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        margin-top: 130px;
        color: var(--fresh-white);
    }

    h1.aos-init.aos-animate {
    font-size: 25px !important;
}

p.hero-tagline.aos-init.aos-animate {
    font-size: 18px;
}

p.hero-value-prop.aos-init.aos-animate {
    display: none !important;
    font-size: 14px;
}
a.btn.btn-primary.btn-hero-large {
    
    font-size: 13px;
}
.hero-buttons .btn {
    margin: 0 15px;
    padding: 12px 13px;
    font-size: 1.1em;
}

    .hero-buttons .btn {
        margin: 0 15px;
        padding: 12px 13px;
        font-size: 13px;
    }

    h2.aos-init.aos-animate {
    font-size: 19px;
    line-height: 28px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px !important;
}


    .tab-content-wrapper {
        padding: 25px 10px;
    }
    .tab-image img {
    width: 100%;
    height: 277px !important;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

    .narrative-block p {
        font-size: 14px;
    }

    .narrative-block h3 {
        font-size: 18px;
    }
    .why-choose-us-section .feature-card h3 {
    color: #004d40;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 17px;
    font-size: 17px;
    text-align: center;
    width: 100%;
}
.feature-card p {
    font-size: 14px;
    color: #555;
}
.coupon-header-alt .discount-percent-alt, .coupon-header-alt .discount-amount-alt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 40px !important;
}

.page-header-section {
    height: 195px !important;
}
.story-image img {
    width: 100%;
    height: 360px !important;
}
.hero-section.small-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/duct-cleaningnew.png) no-repeat center center / cover !important;
    height: 48vh;
    min-height: 236px !important;
}
p.hero-tagline.aos-init.aos-animate {
    margin-top: 14px;
}
    .service-feature-item{
        gap: 20px;
        padding: 10px !important;
    }

    .feature-image img {
    width: 300px;
    height: 250px;
    margin-left: -20px;
    }
    .feature-content h3 {
    color: var(--vibrant-orange);
    font-size: 22px;
    text-align: left;
    margin-bottom: 15px;
}

    .story-image {
        order: 0 !important;
        margin-bottom: 30px;
    }

}