/* 
   Smart Choice Maintenance - Global Styles 
   Strict Adherence to A-Z Instructions
*/

:root {
    /* Locked Colors */
    --primary-blue: #0A2A4A;
    /* Headings, Main Text */
    --accent-green: #0FAF2D;
    /* Buttons, Links, Highlights */
    --text-dark: #1F1F1F;
    /* Body Text */
    --bg-white: #FFFFFF;
    --bg-light: #F4F7F6;

    /* Layout */
    --container-width: 1140px;
    --header-height: 80px;
}

/* Global Resets & Typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* Utility Classes */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

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

.section {
    padding: 60px 0;
}

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

/* Typography Overrides */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 0.8rem;
}

/* Buttons */
.btn {
    display: inline-block;
    background-color: var(--accent-green);
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    border: 2px solid var(--accent-green);
}

.btn:hover {
    background-color: #0d9626;
    border-color: #0d9626;
    color: white;
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: var(--primary-blue);
}

/* Top Bar */
.top-bar {
    background-color: var(--primary-blue);
    color: white;
    padding: 10px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.top-contacts a {
    color: white;
    margin-left: 20px;
    font-weight: 600;
}

.top-contacts i {
    color: var(--accent-green);
    margin-right: 5px;
}

/* Main Header */
.main-header {
    background: #ffffff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    padding: 0;
    /* Minimized padding to reduce height */
    position: absolute;
    /* Sits at top, scrolls away */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

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

.main-header .logo img {
    height: 85px;
    /* Increased from 60px as requested */
    width: auto;
    transition: all 0.3s ease;
}

/* Navigation */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-link {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 1rem;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-green);
}

.mobile-toggle {
    display: none;
    font-size: 24px;
    color: var(--primary-blue);
    cursor: pointer;
}

/* Hero Section with Ken Burns Effect */
.hero-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    min-height: 600px;
    display: flex;
    align-items: center;
    color: white;
}

.hero-bg-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/hero-bg.jpg');
    /* Reverted back to generic hero-bg.jpg if mapped */
    background-size: cover;
    background-position: center;
    z-index: -2;
    animation: kenBurns 20s infinite alternate linear;
}

.hero-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(10, 42, 74, 0.9), rgba(10, 42, 74, 0.7));
    z-index: -1;
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

/* Floating WhatsApp */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    transition: transform 0.3s;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .floating-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* Modern Introduction Section */
.intro-section {
    padding: 120px 0;
    background-color: #ffffff;
    background-image: radial-gradient(#eff6ff 1px, transparent 1px);
    background-size: 30px 30px;
    /* Subtle dot pattern */
}

.intro-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.intro-badge {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    color: var(--accent-green);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 15px;
    background: rgba(15, 175, 45, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
}

.intro-headline {
    font-family: 'Outfit', sans-serif;
    font-size: 2.8rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.intro-accent-line {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-green), transparent);
    margin: 0 auto 35px;
    border-radius: 2px;
}

.intro-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    /* Larger, more readable */
    line-height: 1.7;
    color: #475569;
    /* Slate 600 - Softer than pure black */
    font-weight: 300;
    /* Light weight for modern feel */
}

/* Services Grid */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.service-card {
    flex: 0 1 350px;
    /* target width */
    max-width: 100%;
    /* responsive constraint */
    background: white;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s;
    border-bottom: 3px solid transparent;
    margin: 0 auto;
    /* Extra safety for single items in some layouts */
}

.service-card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--accent-green);
}

.service-icon {
    font-size: 40px;
    color: var(--accent-green);
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
}

@keyframes floatGlass {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* How We Work Section */
.steps-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    text-align: center;
    margin-top: 50px;
}

.step-item {
    flex: 1;
    min-width: 150px;
}

.step-number {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;

    /* Green Glass Effect */
    background: rgba(15, 175, 45, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 175, 45, 0.3);
    box-shadow: 0 10px 30px rgba(15, 175, 45, 0.15);

    color: var(--accent-green);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;

    /* Animation */
    animation: floatGlass 3s ease-in-out infinite;
    position: relative;
}

/* Stagger Animations */
.step-item:nth-child(2) .step-number {
    animation-delay: 0.2s;
}

.step-item:nth-child(3) .step-number {
    animation-delay: 0.4s;
}

.step-item:nth-child(4) .step-number {
    animation-delay: 0.6s;
}

.step-item:nth-child(5) .step-number {
    animation-delay: 0.8s;
}

.step-item h4 {
    margin-bottom: 15px;
    color: var(--primary-blue);
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

.step-item p {
    font-size: 1rem;
    color: #64748b;
}


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

.testimonial-card {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.quote-icon {
    font-size: 3rem;
    color: var(--accent-green);
    opacity: 0.1;
    position: absolute;
    top: 20px;
    right: 30px;
}

.review-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 30px;
    font-style: italic;
    position: relative;
    z-index: 1;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.reviewer-avatar {
    width: 50px;
    height: 50px;
    background: var(--primary-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    font-family: 'Outfit', sans-serif;
}

.reviewer-details h5 {
    margin: 0;
    font-size: 1rem;
    color: var(--primary-blue);
    font-weight: 700;
}

.reviewer-details span {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-bottom: 5px;
}

.stars {
    color: #ffb400;
    font-size: 0.9rem;
}

/* Modern Google Review Card */
.google-review-container {
    max-width: 850px;
    margin: 0 auto;
}

.google-review-card-modern {
    background: #ffffff;
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.google-review-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.google-badge {
    background: #f8fafc;
    padding: 12px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.google-badge span {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #475569;
    letter-spacing: 0.5px;
}

.gr-content {
    padding: 40px;
}

.gr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 20px;
}

.gr-profile {
    display: flex;
    align-items: center;
    gap: 18px;
}

.gr-avatar-modern {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4285F4, #34A853);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.gr-author-name {
    margin: 0 0 4px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: var(--primary-blue);
    font-weight: 700;
}

.gr-meta-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: #64748b;
}

.gr-verified-tick {
    color: #34A853;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gr-rating-stars {
    color: #ffb400;
    font-size: 1.1rem;
    background: rgba(255, 180, 0, 0.1);
    padding: 8px 15px;
    border-radius: 50px;
}

.gr-body-text p {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #1e293b;
    font-weight: 400;
    font-style: italic;
    margin: 0;
}

.gr-footer-action {
    margin-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 25px;
}

.gr-link {
    color: #4285F4;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.gr-link:hover {
    color: #1a73e8;
    gap: 12px;
}

@media (max-width: 600px) {
    .gr-content {
        padding: 25px;
    }
    .gr-body-text p {
        font-size: 1.1rem;
    }
    .gr-header {
        flex-direction: column;
        gap: 15px;
    }
}



/* Audience / Who We Serve Section */
.section-bg-grey {
    background-color: #f8fafc;
    /* Very light cool grey */
}

.audience-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}

.audience-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    flex: 0 1 300px;
    /* target width */
    width: 100%;
}

.audience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(15, 175, 45, 0.3);
}

.audience-icon {
    width: 50px;
    height: 50px;
    background: rgba(15, 175, 45, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent-green);
    flex-shrink: 0;
}

.audience-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-blue);
}

footer {
    background-color: #051a2e;
    /* Darker shade of primary blue */
    color: white;
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer h3 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.footer ul li {
    margin-bottom: 10px;
}

.footer a {
    color: #ccc;
}

.footer a:hover {
    color: var(--accent-green);
}

.footer-bottom {
    padding-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #888;
}

/* Responsive */

/* Coverage / Areas Section */
.coverage-text {
    font-size: 1.2rem;
    color: #475569;
    line-height: 1.8;
}

.location-tag {
    display: inline-block;
    background: rgba(15, 175, 45, 0.1);
    color: var(--primary-blue);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 5px;
    transition: all 0.2s ease;
}

.location-tag:hover {
    background: var(--accent-green);
    color: white;
    transform: translateY(-2px);
}

/* Why Choose Us Section */
.reasons-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1140px;
    margin: 0 auto;
}

.reason-card {
    background: white;
    padding: 35px 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    flex: 0 0 300px;
    /* Force 3 cards per row on desktop (300*3 + gaps < 1140) */
    max-width: 100%;
}

.reason-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: rgba(15, 175, 45, 0.3);
}

.icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(15, 175, 45, 0.1), rgba(15, 175, 45, 0.2));
    color: var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.reason-card h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--primary-blue);
}

.reason-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Modern Page Header */
.page-header {
    background: linear-gradient(135deg, var(--primary-blue), #031120);
    padding: 100px 0;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(15, 175, 45, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.page-header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Modern professional look */
    color: #ffffff;
    /* Force white text for visibility */
    position: relative;
    z-index: 1;
}

.text-highlight {
    color: var(--accent-green) !important;
}

.page-header p {
    font-size: 1.25rem;
    color: #cbd5e1;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Modern Pro Back Button (Global) */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-weight: 600;
    margin-top: 40px;
    padding: 12px 35px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
    /* Ensure clickable */
}

/* Shine Effect */
.back-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
}

.back-btn:hover::before {
    left: 100%;
}

.back-btn:hover {
    background: #ffffff;
    color: var(--primary-blue);
    border-color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.back-btn i {
    transition: transform 0.3s ease;
}

.back-btn:hover i {
    transform: translateX(-5px);
}

/* Modern Footer */
.footer-modern {
    background: linear-gradient(to bottom, #051a2e, #031120);
    color: #fff;
    padding: 50px 0 30px;
    /* Reduced top padding (from 80px) */
    font-size: 0.95rem;
    border-top: 5px solid var(--accent-green);
    position: relative;
    overflow: hidden;
}

.footer-top-grid {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
}

/* Footer Logo */
.footer-logo {
    height: 70px;
    width: auto;
    /* Maintain aspect ratio to prevent stretching */
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    /* Make logo white */
    opacity: 1;
    /* Ensure full visibility */
    transition: all 0.3s ease;
}

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

.company-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 25px;
    max-width: 440px;
    text-align: justify;
    text-justify: inter-character;
    /* Distributes gaps between all characters */
    text-align-last: left;
    hyphens: none;
    -webkit-hyphens: none;
    word-spacing: -0.01em;
    letter-spacing: -0.01em;
}

.footer-title {
    color: white;
    font-size: 1.25rem;
    margin-bottom: 25px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--accent-green);
    border-radius: 2px;
}

/* Links & Animation */
.footer-links li,
.contact-list li {
    margin-bottom: 12px;
}

.footer-links a,
.contact-list a {
    color: #cbd5e1;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover,
.contact-list a:hover {
    color: var(--accent-green);
    transform: translateX(5px);
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #cbd5e1;
}

.contact-list i {
    color: var(--accent-green);
    margin-top: 5px;
    width: 20px;
    text-align: center;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.hours-list li span:first-child {
    min-width: 140px;
    /* Fixed width for day labels to align times */
    font-weight: 500;
    white-space: nowrap;
    /* Prevent wrapping */
    flex-shrink: 0;
}

.hours-list li:last-child {
    border-bottom: none;
}

.hours-list li span:last-child {
    white-space: nowrap;
    text-align: right;
}

.social-links-footer {
    display: flex;
    gap: 15px;
}

.social-links-footer a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
}

.social-links-footer a:hover {
    background: var(--accent-green);
    transform: translateY(-3px);
}

.footer-bottom-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    gap: 10px;
}

.footer-bottom-row p {
    color: #64748b;
    margin: 0;
}

/* =========================================
   PAGE SPECIFIC STYLES (Consolidated)
   ========================================= */

/* --- About Us Page --- */
.about-flex {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-text-content {
    flex: 1;
}

.about-text-content h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.about-text-content h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 4px;
    background: var(--accent-green);
    border-radius: 2px;
}

.about-text-content p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 12px;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-character;
    /* Distributes space evenly across the line */
    text-align-last: left;
    hyphens: none;
    -webkit-hyphens: none;
    word-spacing: -0.01em;
    letter-spacing: -0.01em;
}

.about-image-content {
    flex: 1;
}

.about-image-content img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.about-image-content img:hover {
    transform: translateY(-5px);
}

/* --- Contact Us Page --- */
.contact-flex {
    display: flex;
    gap: 60px;
}

.contact-info-col,
.contact-form-col {
    flex: 1;
}

.modern-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 15px;
}

.modern-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 4px;
    background: var(--accent-green);
    border-radius: 2px;
}

.c-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.icon-box {
    width: 45px;
    height: 45px;
    background-color: rgba(15, 175, 45, 0.1);
    color: var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.c-item h4 {
    margin: 0 0 5px;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    color: var(--primary-blue);
    font-weight: 700;
}

.c-item p,
.c-item a {
    margin: 0;
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.3s;
}

.c-item a:hover {
    color: var(--accent-green);
}

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

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

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    padding: 12px;
    border-color: var(--accent-green);
    outline: none;
}

/* --- Services Page --- */
.service-detail-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin: 40px 0;
}

.service-detail-row.reverse {
    flex-direction: row-reverse;
}

.service-text {
    flex: 1;
    padding: 10px 20px 10px 0;
}

.service-detail-row.reverse .service-text {
    padding: 10px 0 10px 20px;
}

.service-text h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: -0.5px;
}

.service-text h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 4px;
    background: var(--accent-green);
    border-radius: 2px;
}

.service-text p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #475569;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-character;
    /* Clean linear edges without large word gaps */
    text-align-last: left;
    hyphens: none;
    -webkit-hyphens: none;
    word-spacing: -0.01em;
    letter-spacing: -0.01em;
}

.service-image {
    flex: 1;
}

.service-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    height: 300px;
    object-fit: cover;
}

.divider {
    height: 1px;
    background-color: #eee;
    margin: 40px 0;
}

/* --- Final CTA Section --- */
.cta-buttons {
    display: grid;
    grid-template-areas: "call whatsapp" "email email";
    gap: 20px;
    justify-content: center;
    max-width: 500px;
    margin: 30px auto 0;
}

.cta-buttons .btn:nth-child(1) {
    grid-area: call;
}

.cta-buttons .btn:nth-child(2) {
    grid-area: whatsapp;
}

.cta-buttons .btn:nth-child(3) {
    grid-area: email;
    justify-self: center;
    min-width: 200px;
    text-align: center;
}

/* =========================================
   RESPONSIVE MEDIA QUERIES
   ========================================= */

@media (max-width: 992px) {

    /* About Us - Stack vertically */
    .about-flex {
        flex-direction: column;
        gap: 40px;
    }

    .about-image-content {
        width: 100%;
    }

    .about-text-content h2 {
        font-size: 2rem;
    }

    /* Contact Us - Stack vertically */
    .contact-flex {
        flex-direction: column;
        gap: 40px;
    }

    .footer-top-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    /* Force 3 columns on mobile for services */
    .services-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* Ensures center alignment for last row */
        gap: 10px;
        /* Smaller gap */
    }

    .service-card {
        flex: 0 0 calc(33.333% - 10px);
        /* 3 cards per row accounting for gap */
        max-width: calc(33.333% - 10px);
        padding: 15px 10px;
        /* Reduced padding */
        margin: 0;
        /* Remove auto margin */
    }

    .service-icon {
        font-size: 28px;
        /* Smaller icons */
        margin-bottom: 10px;
    }

    .service-card h3 {
        font-size: 0.9rem;
        /* Smaller text */
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .service-card p {
        font-size: 0.75rem;
        /* Smaller description */
        line-height: 1.3;
        display: none;
        /* Hide description on mobile to save space? Or just small? User said "cards" usually implies content. Let's keep small text. */
        /* Actually user said "cards". If they are tiny, text might break layout. I'll keep it small. */
        display: block;
    }

    /* Mobile Navigation */
    .nav-menu.active {
        display: flex;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        text-align: center;
        border-top: 2px solid var(--accent-green);
    }

    .mobile-toggle {
        display: block;
        cursor: pointer;
    }

    /* Footer Stack */
    .footer-top-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom-row {
        flex-direction: column;
        text-align: center;
    }

    /* Services - Side-by-Side Mobile Layout */
    .service-detail-row {
        gap: 15px;
        margin: 30px 0;
        align-items: center;
        /* Center vertically as requested */
    }

    /* Keep row-reverse for even items to maintain visual variety or unset? 
       User wants "like desktop", so keeping the alternation pattern is good,
       but usually on mobile straight lists are better. 
       However, user specifically asked for "image next to details". */

    .service-detail-row.reverse {
        flex-direction: row-reverse;
    }

    .service-text {
        flex: 1.5;
        /* More room for text to avoid large gaps */
        padding: 0 !important;
    }

    .service-image {
        flex: 0.5;
        /* Smaller image to prioritize text readability */
    }

    .service-image img {
        height: 140px;
        /* Reduced height for mobile */
        border-radius: 6px;
    }

    .service-text h2 {
        font-size: 1.1rem;
        /* Smaller heading */
        margin-bottom: 10px;
    }

    .service-text h2::after {
        width: 30px;
        height: 3px;
    }

    .service-text p {
        font-size: 0.86rem;
        line-height: 1.5;
        text-align: justify;
        text-justify: inter-character;
        /* Forced even spacing between all characters */
        text-align-last: left;
        hyphens: none;
        -webkit-hyphens: none;
        word-spacing: -0.02em;
        letter-spacing: -0.01em;
    }

    .about-text-content p {
        font-size: 0.88rem;
        line-height: 1.5;
        text-align: justify;
        text-justify: inter-character;
        /* Forced even spacing between all characters */
        text-align-last: left;
        hyphens: none;
        -webkit-hyphens: none;
        word-spacing: -0.02em;
        letter-spacing: -0.01em;
        margin-bottom: 20px;
    }

    .divider {
        margin: 25px 0;
    }

    /* Force 2 columns on mobile for reasons/promise */
    .reasons-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .reason-card {
        flex: 0 0 calc(50% - 15px);
        /* 2 cards per row accounting for gap */
        max-width: calc(50% - 15px);
        padding: 25px 15px;
        margin: 0;
    }

    .reason-card h4 {
        font-size: 1rem;
    }

    .reason-card p {
        font-size: 0.85rem;
    }

    /* Stack CTA buttons on mobile */
    .cta-buttons {
        grid-template-areas: "call" "whatsapp" "email";
        gap: 15px;
    }
}

/* Very Small Screens */
@media (max-width: 480px) {
    .service-detail-row {
        gap: 10px;
    }

    .service-text h2 {
        font-size: 1rem;
    }

    .service-image img {
        height: 110px;
    }
}

/* --- Policy Pages Styling --- */
.policy-content {
    max-width: 900px;
    margin: 0 auto;
}

.intro-text {
    font-size: 1.2rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 50px;
    text-align: center;
}

.policy-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.policy-block {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.policy-block:hover {
    transform: translateY(-5px);
    border-color: var(--accent-green);
}

.policy-block h3 {
    font-family: 'Outfit', sans-serif;
    color: var(--primary-blue);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.policy-block p {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 15px;
}

.policy-block ul {
    list-style: none;
    padding-left: 0;
}

.policy-block ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #475569;
}

.policy-block ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--accent-green);
    font-size: 0.9rem;
}

.contact-card {
    background: rgba(15, 175, 45, 0.05);
    padding: 25px;
    border-radius: 12px;
    margin-top: 20px;
    border: 1px dashed var(--accent-green);
}

.contact-card a {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
}

.contact-card a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .policy-block {
        padding: 25px;
    }

    .policy-block h3 {
        font-size: 1.25rem;
    }
}