/* ==========================================================================
   RESPONSIVE COMBINED CSS
   Consolidated responsive styles for Harmain Solar Energy website
   Generated: September 9, 2025
   ========================================================================== */

/* RESPONSIVE HERO SECTION *//* HERO SECTION RESPONSIVE CSS */
/* Created: September 5, 2025 */
/* Purpose: Fix hero section typography to match services section and add left alignment */

/* ===== CSS CUSTOM PROPERTIES FOR HERO SECTION ===== */
:root {
    /* Desktop Hero variables - NEVER modified by responsive breakpoints */
    --hero-desktop-font-size: 3.5rem; /* 56px - Match services section */
    --hero-desktop-line-height: 120%;
    --hero-desktop-letter-spacing: -0.05em;
    --hero-desktop-font-weight: 700;
    
    /* Hero responsive variables */
    --current-hero-font-size: var(--hero-desktop-font-size);
    --current-hero-line-height: var(--hero-desktop-line-height);
    --current-hero-letter-spacing: var(--hero-desktop-letter-spacing);
    --current-hero-font-weight: var(--hero-desktop-font-weight);
}

/* ===== DESKTOP HERO TYPOGRAPHY FIXES (≥1024px) ===== */
@media screen and (min-width: 1024px) {
    /* Hero Main Title - Desktop - DIRECT VALUES */
    section#home h1.font-bold.text-dark[style*="font-size: 140px"],
    #home h1.font-bold.text-dark[style*="font-size: 140px"],
    h1.font-bold.text-dark[style*="font-size: 140px"] {
        font-size: 6rem !important; /* 96px - Larger hero desktop size */
        line-height: 120% !important;
        letter-spacing: -0.05em !important;
        font-weight: 700 !important;
        text-align: left !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
    }
}

/* ===== TABLET USES DESKTOP STYLES - NO TABLET BREAKPOINT NEEDED ===== */
/* Tablets (768px-1023px) will automatically use desktop styles above */

/* ===== MOBILE PORTRAIT (≤767px) ===== */
@media screen and (max-width: 767px) and (orientation: portrait) {
    /* Hero Main Title - Mobile Portrait - DIRECT VALUES */
    section#home h1.font-bold.text-dark[style*="font-size: 140px"],
    #home h1.font-bold.text-dark[style*="font-size: 140px"],
    h1.font-bold.text-dark[style*="font-size: 140px"] {
        font-size: 3rem !important; /* 48px - Larger hero mobile size */
        line-height: 120% !important;
        letter-spacing: -0.05em !important;
        font-weight: 700 !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===== MOBILE LANDSCAPE (≤767px) ===== */
@media screen and (max-width: 767px) and (orientation: landscape), 
       screen and (max-height: 500px) {
    /* Hero Main Title - Mobile Landscape - DIRECT VALUES */
    section#home h1.font-bold.text-dark[style*="font-size: 140px"],
    #home h1.font-bold.text-dark[style*="font-size: 140px"],
    h1.font-bold.text-dark[style*="font-size: 140px"] {
        font-size: 2.5rem !important; /* 40px - Larger hero landscape size */
        line-height: 120% !important;
        letter-spacing: -0.05em !important;
        font-weight: 700 !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media screen and (max-width: 1023px) {
    /* Hardware Acceleration */
    #home h1.font-bold.text-dark[style*="font-size: 140px"] {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    /* Smooth Transitions */
    #home h1.font-bold.text-dark[style*="font-size: 140px"] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ===== CUSTOMER PICTURES BLUR EFFECT (ALL BREAKPOINTS) ===== */
/* Make customer profile pictures slightly blurry for privacy/impression effect */
#home div[style*="background-image: url('./src/images/customer1-indian.jpg')"],
#home div[style*="background-image: url('./src/images/customer2-new-2024.jpg')"],
#home div[style*="background-image: url('./src/images/customer3-new-2024.jpg')"],
#home div[style*="background-image: url('./src/images/customer4-updated.jpg')"] {
    filter: blur(1.5px) !important;
    -webkit-filter: blur(1.5px) !important;
    opacity: 0.85 !important;
    transition: filter 0.3s ease, opacity 0.3s ease !important;
}

/* Subtle hover effect to show clearer version */
#home div[style*="background-image: url('./src/images/customer1-indian.jpg')"]:hover,
#home div[style*="background-image: url('./src/images/customer2-new-2024.jpg')"]:hover,
#home div[style*="background-image: url('./src/images/customer3-new-2024.jpg')"]:hover,
#home div[style*="background-image: url('./src/images/customer4-updated.jpg')"]:hover {
    filter: blur(0.5px) !important;
    -webkit-filter: blur(0.5px) !important;
    opacity: 1 !important;
}

/* RESPONSIVE FEATURES SECTION */
/* PANTHER RESPONSIVE CSS - FEATURES SECTION */
/* Applying proven PANTHER desktop preservation + mobile enhancement methodology */
/* Training Data: Harmain Solar Energy successful responsive conversion */

/* ===== CSS CUSTOM PROPERTIES FOR BREAKPOINT ISOLATION ===== */
:root {
    /* Desktop variables - NEVER modified by responsive breakpoints */
    --desktop-container-width: 1440px;
    --desktop-content-width: 1360px;
    --desktop-padding: 40px;
    --desktop-gap: 2rem;
    --desktop-font-large: 56px;
    --desktop-font-medium: 21px;
    --desktop-border-radius: 24px;
    
    /* Default to desktop values */
    --current-breakpoint: "desktop";
    --current-padding: var(--desktop-padding);
    --current-gap: var(--desktop-gap);
    --current-font-large: var(--desktop-font-large);
}

/* ===== BULLETPROOF DESKTOP PROTECTION + MINIMAL ALIGNMENT FIX ===== */
/* Desktop experience preserved with minimal centering to match feedback image */
/* HIGHEST SPECIFICITY - CANNOT BE OVERRIDDEN */
@media screen and (min-width: 1024px) {
    /* Remove constraining padding from Features section wrapper */
    #features div[style*="max-width: 1440px"].lg\:px-20 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Remove vertical padding from Features section wrapper */
    #features div[style*="max-width: 1440px"].sm\:py-20 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Also remove smaller padding for completeness */
    #features div[style*="max-width: 1440px"].py-10 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Features Grid Container - Remove conflicting margins for flexbox */
    #features div[style*="width: 1280px"].flex.items-start.gap-8 {
        /* Keep original width */
        width: 1280px !important; /* Full original width */
        max-width: 1280px !important;
        margin: 0 !important; /* Remove margins - parent flexbox handles centering */
        padding: 0 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 2rem !important; /* 32px gap between cards */
        flex-shrink: 0 !important; /* Prevent grid from shrinking */
    }
    
    /* Individual Feature Cards - Original Width */
    #features div[style*="width: 1280px"].flex.items-start.gap-8 > div[style*="width: 296px"] {
        /* Back to original 296px width with absolute positioning */
        width: 296px !important;
        min-width: 296px !important;
        flex: none !important;
        box-sizing: border-box !important;
    }
    
    /* Main Container - Vertical and Horizontal Centering */
    #features div[style*="max-width: 1360px"] {
        /* Preserve original container dimensions */
        width: 100% !important; /* Maintain full width */
        max-width: 1360px !important; /* Preserve original max-width */
        min-height: 837px !important; /* Maintain original min-height */
        /* Center content vertically and horizontally */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3rem !important; /* Space between header and grid to prevent overlapping */
        box-sizing: border-box !important;
        position: relative !important; /* For background image positioning */
    }
    
    /* Remove padding from Features Container */
    #features .bg-dark-blue[style*="padding: 60px 80px"] {
        /* Remove top and bottom padding, keep horizontal for content clearance */
        padding: 0 80px !important;
    }
    
    /* Section Header - Remove conflicting margins for flexbox */
    #features div[style*="width: 695px; height: 192px"] {
        margin: 0 !important; /* Remove all margins - flexbox handles centering */
        flex-shrink: 0 !important; /* Prevent header from shrinking */
    }
}

/* ===== TABLET USES DESKTOP STYLES - NO TABLET BREAKPOINT NEEDED ===== */
/* Tablets (768px-1023px) will automatically use desktop styles above */

/* ===== MOBILE PORTRAIT (≤767px) - COMPLETE ISOLATION FROM TABLET/DESKTOP ===== */
@media screen and (max-width: 767px) {
    /* Mobile-specific CSS custom properties */
    :root {
        --mobile-padding: 16px;
        --mobile-gap: 1rem;
        --mobile-font-large: 32px;
        --mobile-font-medium: 18px;
        --mobile-border-radius: 16px;
        
        /* Active mobile variables */
        --current-breakpoint: "mobile";
        --current-padding: var(--mobile-padding);
        --current-gap: var(--mobile-gap);
        --current-font-large: var(--mobile-font-large);
    }
    
    /* Section-Level Container - Hero Style Approach */
    section#features {
        padding: 0 !important; /* Section has no padding - Hero wrapper handles it */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Hero-Style Wrapper Container - Matches Hero Section */
    #features > div[style*="max-width: 1440px"] {
        padding: 0 1rem !important; /* Hero-style mobile padding */
    }
    
    /* Main Features Container - Dark Blue Box with Enhanced Padding */
    #features div[style*="max-width: 1360px"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 3rem 1.75rem !important; /* Enhanced top/bottom padding for portrait */
        margin: 0 !important;
        border-radius: 16px !important;
        min-height: auto !important;
        position: relative !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    /* Features Grid Container - Convert to Single Column */
    #features div[style*="width: 1280px"] {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important; /* Remove absolute positioning */
        left: auto !important;
        top: auto !important; /* Remove top offset */
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }
    
    /* Section Header Container - No Absolute Positioning */
    #features div[style*="width: 695px; height: 192px;"] {
        width: 100% !important;
        height: auto !important;
        position: static !important; /* Remove absolute positioning */
        left: auto !important;
        top: auto !important;
        text-align: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        margin: 0 0 1.5rem 0 !important;
    }
    
    /* Section Header Title - Mobile Scaling (66% reduction) */
    #features h2[style*="font-size: 56px"] {
        font-size: 32px !important; /* 57% scaling for mobile */
        width: 100% !important;
        height: auto !important;
        line-height: 120% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Individual Feature Cards - Full Width Stack */
    #features div[style*="width: 296px; height: 281px;"] {
        width: 100% !important;
        height: auto !important;
        flex: none !important;
        margin: 0 !important;
        padding: 1.5rem !important; /* Mobile padding */
        box-sizing: border-box !important;
        border-radius: 12px !important;
        min-height: auto !important;
    }
    
    /* Feature Card Content - Left Aligned Like Desktop */
    #features div[style*="width: 232px; height: 217px;"] {
        width: 100% !important;
        height: auto !important;
        gap: 1rem !important;
        text-align: left !important; /* Left aligned like desktop */
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Icons and content left aligned */
    }
    
    /* Feature Card Text Container - Left Aligned */
    #features div[style*="width: 232px; height: 121px;"] {
        width: 100% !important;
        height: auto !important;
        gap: 0.75rem !important;
        text-align: left !important; /* Left aligned like desktop */
    }
    
    /* Feature Card Titles - Left Aligned */
    #features h3[style*="font-size: 21px"] {
        font-size: 18px !important;
        line-height: 130% !important;
        text-align: left !important; /* Left aligned like desktop */
    }
    
    /* Feature Card Descriptions - Left Aligned */
    #features p[style*="font-size: 14px"] {
        font-size: 14px !important;
        width: 100% !important;
        height: auto !important;
        text-align: left !important; /* Left aligned like desktop */
        line-height: 150% !important;
    }
    
    /* Feature Icons - Left Aligned & At Top */
    #features div[style*="background: #419b3e"] {
        width: 56px !important;
        height: 56px !important;
        flex-shrink: 0 !important;
        margin: 0 !important; /* Remove center margin - left aligned */
        align-self: flex-start !important; /* Ensure icon stays at top-left */
        order: -1 !important; /* Force icon to top of card */
    }
    
    /* Section Badge */
    #features div[style*="width: 171px; height: 34px"] {
        width: auto !important;
        height: auto !important;
        padding: 8px 16px !important;
        margin: 0 auto 1rem auto !important;
        display: inline-flex !important;
    }
}

/* ===== MOBILE LANDSCAPE (≤767px + landscape) - ISOLATED FROM PORTRAIT ===== */
@media screen and (max-width: 767px) and (orientation: landscape), 
       screen and (max-height: 500px) {
    /* Mobile landscape-specific variables */
    :root {
        --mobile-landscape-padding: 12px;
        --mobile-landscape-gap: 0.75rem;
        --mobile-landscape-font-large: 28px;
        
        /* Active landscape variables */
        --current-orientation: "landscape";
        --current-padding: var(--mobile-landscape-padding);
        --current-gap: var(--mobile-landscape-gap);
        --current-font-large: var(--mobile-landscape-font-large);
    }
    
    /* Main Features Container - Landscape with Identical Top/Bottom Padding */
    #features div[style*="max-width: 1360px"] {
        padding: 2rem 1.5rem 2rem 1.5rem !important; /* Identical top/bottom padding */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: auto !important;
    }
    
    /* Features Grid - HORIZONTAL SCROLL for Landscape */
    #features div[style*="width: 1280px"] {
        top: 1rem !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 0.5rem !important;
        scrollbar-width: thin !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Webkit Scrollbar Styling for Landscape */
    #features div[style*="width: 1280px"]::-webkit-scrollbar {
        height: 4px !important;
    }
    
    #features div[style*="width: 1280px"]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 2px !important;
    }
    
    #features div[style*="width: 1280px"]::-webkit-scrollbar-thumb {
        background: rgba(65, 155, 62, 0.6) !important;
        border-radius: 2px !important;
    }
    
    #features div[style*="width: 1280px"]::-webkit-scrollbar-thumb:hover {
        background: rgba(65, 155, 62, 0.8) !important;
    }
    
    /* Feature Cards - Landscape FIXED WIDTH FOR SCROLL */
    #features div[style*="width: 296px; height: 281px;"] {
        width: 280px !important;
        height: auto !important;
        flex-shrink: 0 !important;
        padding: 1.5rem 1rem !important;
        min-height: 180px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    /* Section Header - Compact for Landscape */
    #features div[style*="width: 695px; height: 192px;"] {
        margin: 0 0 1rem 0 !important;
    }
    
    /* Header Title - Landscape Typography (74% reduction) */
    #features h2[style*="font-size: 56px"] {
        font-size: 28px !important; /* Compact for landscape height */
    }
    
    /* Feature Titles - Landscape Scaling */
    #features h3[style*="font-size: 21px"] {
        font-size: 16px !important;
    }
    
    /* Feature Descriptions - Landscape Scaling */
    #features p[style*="font-size: 14px"] {
        font-size: 13px !important;
        line-height: 140% !important; /* Tighter for landscape */
    }
    
    /* Feature Icons - Compact for Landscape */
    #features div[style*="background: #419b3e"] {
        width: 48px !important;
        height: 48px !important;
    }
}

/* ===== ERROR PREVENTION - CROSS-CONTAMINATION PROTECTION ===== */
@media screen and (min-width: 1024px) {
    /* Ensure mobile/tablet classes don't affect desktop */
    .mobile-only,
    .mobile-layout,
    .mobile-container,
    .tablet-only,
    .tablet-layout,
    .tablet-container {
        display: revert !important;
        position: revert !important;
        width: revert !important;
        height: revert !important;
    }
}

@media screen and (max-width: 767px) {
    /* Ensure desktop/tablet classes don't affect mobile */
    .desktop-protected,
    .desktop-layout,
    .desktop-container {
        /* Mobile shouldn't see these as active */
    }
}


/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Hardware acceleration for smooth animations */
@media screen and (max-width: 1023px) {
    #features * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
    
    /* Smooth transitions */
    #features div[style*="width: 296px; height: 281px;"] {
        transition: all 0.3s ease-in-out !important;
    }
    
    /* Prevent horizontal scrolling */
    #features {
        overflow-x: hidden !important;
    }
    
    /* Optimize background rendering */
    #features div[class*="bg-dark-blue"] {
        will-change: transform !important;
    }
}

/* ===== TOUCH TARGET OPTIMIZATION ===== */
@media screen and (max-width: 1023px) {
    /* Ensure minimum touch target sizes for iOS/Android */
    #features button,
    #features a,
    #features [onclick],
    #features [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem !important;
        touch-action: manipulation !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media screen and (max-width: 1023px) {
    /* Improved focus visibility */
    #features *:focus {
        outline: 2px solid #419b3e !important;
        outline-offset: 2px !important;
    }
    
    /* Better text contrast for mobile */
    #features .text-gray-600 {
        color: #4a5568 !important;
    }
    
    /* Ensure readable font sizes */
    #features * {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* ===== RESPONSIVE IMAGES & ICONS ===== */
@media screen and (max-width: 1023px) {
    /* Responsive SVG icons */
    #features svg {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Background image optimization */
    #features div[style*="background-image"] {
        background-size: cover !important;
        background-position: center !important;
    }
}

/* RESPONSIVE SERVICES SECTION */
/* SERVICES SECTION RESPONSIVE CSS - CORRECTED VERSION */
/* Created: September 4, 2025 - FIXED */
/* Purpose: Proper mobile responsiveness with correct HTML structure targeting */

/* ===== CSS CUSTOM PROPERTIES FOR SERVICES SECTION ===== */
:root {
    /* Desktop Services variables - NEVER modified by responsive breakpoints */
    --services-card-wrapper-width: 880px; /* Card wrapper width */
    --services-card-content-width: 380px;
    --services-card-gap: 2rem; /* 32px gap between cards */
    --services-slide-distance: 600px;
    
    /* Dynamic card counting variables - FUTURE-PROOF */
    --card-count: 2; /* Default: 2 cards, can be updated dynamically */
    --card-spacing: 1rem; /* Space between cards */
    
    /* Services responsive variables */
    --current-services-wrapper-width: var(--services-card-wrapper-width);
    --current-services-gap: var(--services-card-gap);
    --current-services-slide-distance: var(--services-slide-distance);
}

/* ===== BULLETPROOF DESKTOP PROTECTION (≥1024px) ===== */
@media screen and (min-width: 1024px) {
    /* Desktop Services section remains completely untouched */
    #services {
        /* All existing desktop styles preserved - NO CHANGES */
    }
}

/* ===== TABLET USES DESKTOP STYLES - NO TABLET BREAKPOINT NEEDED ===== */
/* Tablets (768px-1023px) will automatically use desktop styles above */

/* ===== MOBILE PORTRAIT (≤767px) - VERTICAL CARD LAYOUT ===== */
@media screen and (max-width: 767px) and (orientation: portrait) {
    /* Mobile portrait Services variables - FIXED WALL-STICKING */
    :root {
        --mobile-services-wrapper-width: calc(100vw - 3rem); /* Full width minus padding - NO MORE WALL STICKING */
        --mobile-services-gap: 1rem; /* Proper gap between cards */
        --mobile-services-slide-distance: calc(100vw - 2rem); /* Slide by full width minus margins */
        
        /* Active mobile portrait variables */
        --current-services-wrapper-width: var(--mobile-services-wrapper-width);
        --current-services-gap: var(--mobile-services-gap);
        --current-services-slide-distance: var(--mobile-services-slide-distance);
    }
    
    /* Services Section Container - Mobile Portrait */
    #services {
        padding: 2rem 0 !important;
    }
    
    #services > div {
        padding: 0 1.5rem !important;
        gap: 2rem !important;
    }
    
    /* Services Header - Mobile Portrait */
    #services .flex.w-full.justify-between.items-end {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.5rem !important;
    }
    
    /* Services Navigation - Right Aligned & Smaller */
    #services .flex.items-center.gap-4 {
        align-self: flex-end !important;
    }
    
    #services #prev-btn,
    #services #next-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
    }
    
    /* Services Slider Container - Mobile Portrait */
    #services .w-full.overflow-hidden {
        margin: 0 -1.5rem !important; /* Full width */
        padding: 0 1.5rem !important;  /* Restore padding */
    }
    
    #services #services-slider {
        gap: var(--current-services-gap) !important;
    }
    
    /* Remove the gap-8 class effect on mobile portrait */
    #services #services-slider.gap-8 {
        gap: var(--current-services-gap) !important;
    }
    
    /* Card Wrapper - Mobile Portrait (FIXED WALL-STICKING) */
    #services .flex.items-start.flex-shrink-0 {
        width: var(--current-services-wrapper-width) !important;
        flex: 0 0 var(--current-services-wrapper-width) !important; /* Fixed width, no shrinking */
        min-width: var(--current-services-wrapper-width) !important;
        margin-right: var(--current-services-gap) !important; /* Proper spacing prevents wall-sticking */
    }
    
    /* Last card - Extra margin for complete visibility */
    #services .flex.items-start.flex-shrink-0:last-child {
        margin-right: 2rem !important; /* Extra space to ensure last card doesn't stick to edge */
    }
    
    /* Override gap-8 class on card wrappers in mobile portrait - keep content/image gap at 0 for vertical layout */
    #services .flex.items-start.flex-shrink-0.gap-8 {
        gap: 0 !important; /* No internal gap in vertical layout */
    }
    
    /* Remove old gap handling - now using margin system */
    #services #services-slider.gap-8 {
        gap: 0 !important; /* Gap handled by individual card margins */
    }
    
    /* Actual Card - Mobile Portrait (VERTICAL LAYOUT) */
    #services .bg-gray-50.rounded-2xl {
        width: 100% !important;
        flex-direction: column !important; /* VERTICAL STACK */
        padding: 1.5rem !important;
        gap: 1.5rem !important;
        position: relative !important; /* For rating capsule positioning */
    }
    
    /* Content Area - Mobile Portrait (GOES BELOW IMAGE) */
    #services .bg-gray-50.rounded-2xl > div:first-child {
        width: 100% !important;
        order: 2 !important; /* Content goes BELOW image */
    }
    
    /* Image Area - Mobile Portrait (GOES ABOVE CONTENT) */
    #services .bg-gray-50.rounded-2xl > div:last-child {
        width: 100% !important;
        height: 180px !important;
        order: 1 !important; /* Image goes ABOVE content */
        border-radius: 16px !important;
        flex: none !important;
    }
    
    /* Card Header - Mobile Portrait - Keep rating with title */
    #services .flex.justify-between.items-center.w-full:first-child {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important; /* Title on left, rating on right */
        gap: 1rem !important;
    }
    
    /* Product Title - Mobile Portrait */
    #services .text-dark.text-2xl.font-bold {
        font-size: 1.5rem !important; /* 24px */
        width: auto !important;
        margin: 0 !important;
        flex: 1 !important; /* Take remaining space */
    }
    
    /* Rating Capsule - Keep with title in normal flow */
    #services .flex.items-center.gap-1.px-3.py-1.bg-primary.rounded-full {
        position: static !important; /* Normal position with title */
        margin: 0 !important;
    }
    
    /* Features Section - Mobile Portrait */
    #services .flex.flex-col.items-start.gap-3.border {
        margin: 0.5rem 0 !important;
    }
    
    /* Bottom Section - Mobile Portrait (no extra space needed) */
    #services .flex.justify-between.items-center.w-full:last-child {
        margin-bottom: 0 !important; /* No extra space needed */
        flex-direction: row !important; /* Keep buttons horizontal */
        align-items: center !important;
        justify-content: flex-start !important; /* Button on left */
    }
    
    /* Remove duplicate - handled above */
    
    /* No special treatment for last child in portrait - let natural flow handle peek */
    
    /* Services Slider - DYNAMIC WIDTH FOR ANY NUMBER OF CARDS */
    #services #services-slider {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: calc((var(--current-services-wrapper-width) + var(--current-services-gap)) * var(--card-count) + 2rem) !important; /* Dynamic width based on card count */
        min-width: 100% !important;
        gap: 0 !important; /* Gap handled by card margins */
    }
}

/* ===== MOBILE LANDSCAPE (≤767px) - HORIZONTAL CARD LAYOUT ===== */
@media screen and (max-width: 767px) and (orientation: landscape), 
       screen and (max-height: 500px) {
    /* Mobile landscape Services variables - FIXED CARD VISIBILITY */
    :root {
        --mobile-landscape-wrapper-width: calc(100vw - 4rem); /* Full width minus padding - ENSURE COMPLETE VISIBILITY */
        --mobile-landscape-content-width: 260px; /* Smaller content area */
        --mobile-landscape-gap: 1.5rem; /* Optimal gap between cards */
        --mobile-landscape-slide-distance: calc(100vw - 3rem); /* Full slide to show complete next card */
        
        /* Active mobile landscape variables */
        --current-services-wrapper-width: var(--mobile-landscape-wrapper-width);
        --current-services-gap: var(--mobile-landscape-gap);
        --current-services-slide-distance: var(--mobile-landscape-slide-distance);
    }
    
    /* Services Section Container - Mobile Landscape */
    #services {
        padding: 1.5rem 0 !important;
    }
    
    #services > div {
        padding: 0 1rem !important; /* Reduce padding to prevent cutoff */
        gap: 1.5rem !important;
        max-width: 100vw !important; /* Ensure container doesn't exceed viewport */
        box-sizing: border-box !important;
    }
    
    /* Services Header - Mobile Landscape - Keep horizontal but ensure buttons fit */
    #services .flex.w-full.justify-between.items-end {
        flex-direction: row !important; /* Keep horizontal */
        align-items: flex-end !important;
        gap: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Title section - allow wrapping */
    #services .flex.flex-col.items-start.gap-6 {
        flex: 1 !important;
        min-width: 0 !important; /* Allow shrinking */
    }
    
    /* Navigation controls - ensure they're always visible */
    #services .flex.items-center.gap-4 {
        flex-shrink: 0 !important; /* Never shrink navigation */
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    
    /* Services Navigation - Full Size in Landscape */
    #services #prev-btn,
    #services #next-btn {
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
    }
    
    /* Services Slider Container - Mobile Landscape - Better padding control */
    #services .w-full.overflow-hidden {
        margin: 0 -1rem !important; /* Minimal margin for full width */
        padding: 0 1rem !important; /* Minimal padding */
    }
    
    /* Card Wrapper - Mobile Landscape */
    #services .flex.items-start.flex-shrink-0 {
        width: var(--current-services-wrapper-width) !important;
        gap: 1.25rem !important;
    }
    
    /* Actual Card - Mobile Landscape (KEEP HORIZONTAL) */
    #services .bg-gray-50.rounded-2xl {
        width: 100% !important;
        flex-direction: row !important; /* HORIZONTAL LAYOUT */
        padding: 1.25rem !important;
        gap: 1.25rem !important;
        align-items: stretch !important;
    }
    
    /* Content Area - Mobile Landscape (LEFT SIDE) */
    #services .bg-gray-50.rounded-2xl > div:first-child {
        width: var(--mobile-landscape-content-width) !important;
        order: 1 !important; /* Content on left */
    }
    
    /* Image Area - Mobile Landscape (RIGHT SIDE) */
    #services .bg-gray-50.rounded-2xl > div:last-child {
        flex: 1 !important;
        height: 160px !important; /* Compact for landscape */
        order: 2 !important; /* Image on right */
        border-radius: 16px !important;
    }
    
    /* Card Header - Keep Rating with Title in Landscape */
    #services .flex.justify-between.items-center.w-full:first-child {
        flex-direction: row !important; /* Keep horizontal */
        align-items: center !important;
        gap: 1rem !important;
    }
    
    /* Product Title - Compact for Landscape */
    #services .text-dark.text-2xl.font-bold {
        font-size: 1.25rem !important; /* 20px - compact */
    }
    
    /* Rating Capsule - KEEP NORMAL POSITION in landscape */
    #services .flex.items-center.gap-1.px-3.py-1.bg-primary.rounded-full {
        position: static !important; /* Normal position in landscape */
        margin: 0 !important;
    }
    
    /* Card Wrapper - Dynamic Spacing for Any Number of Cards (Landscape) */
    #services .flex.items-start.flex-shrink-0 {
        margin-right: var(--current-services-gap) !important; /* Dynamic gap */
        flex: 0 0 var(--current-services-wrapper-width) !important; /* Fixed width, no shrinking */
        min-width: var(--current-services-wrapper-width) !important;
    }
    
    #services .flex.items-start.flex-shrink-0:last-child {
        margin-right: 3rem !important; /* Extra margin to ensure full visibility of last card */
    }
    
    /* Services Slider - DYNAMIC WIDTH FOR ANY NUMBER OF CARDS (LANDSCAPE) */
    #services #services-slider {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: calc((var(--current-services-wrapper-width) + var(--current-services-gap)) * var(--card-count) + 3rem) !important; /* Dynamic width with proper visibility margin */
        min-width: 100% !important;
    }
    
    /* Compact spacing for landscape height */
    #services .flex.flex-col.items-start.gap-6 {
        gap: 1rem !important;
    }
    
    #services .flex.flex-col.items-start.gap-3.border {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    #services .flex.items-center.gap-2.text-gray-600 span {
        font-size: 0.875rem !important; /* Smaller text for landscape */
    }
}

/* ===== TOUCH OPTIMIZATION FOR ALL MOBILE DEVICES ===== */
@media screen and (max-width: 1023px) {
    /* Services Slider Touch Preparation */
    #services #services-slider {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    #services #services-slider.dragging {
        cursor: grabbing;
        scroll-behavior: auto; /* Disable smooth scroll while dragging */
    }
    
    /* Prevent text selection during swipe */
    #services #services-slider * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Services Buttons - Touch Friendly */
    #services button {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation;
    }
    
    /* Performance Optimization */
    #services #services-slider {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
    }
    
    /* Prevent horizontal overflow */
    #services {
        overflow-x: hidden !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media screen and (max-width: 1023px) {
    /* Focus Visibility */
    #services button:focus {
        outline: 2px solid #419b3e !important;
        outline-offset: 2px !important;
    }
    
    /* Touch Feedback */
    #services .bg-gray-50:active {
        transform: scale(0.995);
        transition: transform 0.1s ease;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media screen and (max-width: 1023px) {
    /* Hardware Acceleration */
    #services .bg-gray-50.rounded-2xl,
    #services #services-slider,
    #services .flex.items-start.flex-shrink-0 {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        perspective: 1000px;
        -webkit-perspective: 1000px;
    }
    
    /* Smooth Transitions */
    #services .bg-gray-50.rounded-2xl {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Optimize Images */
    #services div[style*="background-image"] {
        background-attachment: scroll !important;
        will-change: transform !important;
    }
}

/* ===== DEBUG UTILITIES (Remove in production) ===== */
.services-debug * {
    outline: 1px solid red !important;
    background: rgba(255, 0, 0, 0.05) !important;
}

.services-debug .flex.items-start.flex-shrink-0 {
    outline: 3px solid blue !important; /* Card wrapper */
}

.services-debug .bg-gray-50.rounded-2xl {
    outline: 3px solid green !important; /* Actual card */
}

/* RESPONSIVE STEPS SECTION */
/* STEPS/HOW-IT-WORKS SECTION RESPONSIVE CSS */
/* Created: September 5, 2025 */
/* Purpose: Make How-it-Works section responsive and remove images on mobile portrait */

/* ===== CSS CUSTOM PROPERTIES FOR STEPS SECTION ===== */
:root {
    /* Desktop Steps variables - NEVER modified by responsive breakpoints */
    --steps-section-width: 1440px;
    --steps-container-width: 1280px;
    --steps-desktop-padding: 80px;
    --steps-desktop-vertical: 150px;
    
    /* Steps responsive variables */
    --current-steps-padding: var(--steps-desktop-padding);
    --current-steps-vertical: var(--steps-desktop-vertical);
}

/* ===== BULLETPROOF DESKTOP PROTECTION (≥1024px) ===== */
@media screen and (min-width: 1024px) {
    /* Desktop Steps section remains completely untouched - NO CHANGES */
    #how-it-works {
        /* All existing desktop styles preserved - NO CHANGES */
    }
    
    /* NO DESKTOP TITLE CHANGES - Keep original 56px size */
}


/* ===== MOBILE PORTRAIT (≤767px) - REMOVE IMAGES ===== */
@media screen and (max-width: 767px) and (orientation: portrait) {
    /* Steps Section Container - Mobile Portrait */
    #how-it-works {
        width: 100% !important;
        padding: 3rem 1rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Main Steps Container - Mobile Portrait */
    #how-it-works > div {
        width: 100% !important;
        height: auto !important;
        gap: 2rem !important;
        margin: 0 !important;
    }
    
    /* Steps Header Container - Mobile Portrait */
    #how-it-works div[style*="width: 657px; height: 192px"] {
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    /* Sub Heading Badge - Mobile Portrait */
    #how-it-works div[style*="Simple Process"] {
        width: auto !important;
        height: auto !important;
        padding: 8px 16px !important;
        margin: 0 auto !important;
    }
    
    /* Steps Title - Mobile Portrait BIGGER LIKE HERO */
    #how-it-works h2[style*="font-size: 56px"] {
        font-size: 3rem !important; /* 48px - Match hero mobile size */
        line-height: 120% !important;
        letter-spacing: -0.05em !important;
        font-weight: 700 !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 1rem 0 !important;
    }
    
    /* Content Container - Mobile Portrait (ONLY STEPS, NO IMAGE) */
    #how-it-works div[style*="width: 1280px; height: 364px"] {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        height: auto !important;
        justify-content: flex-start !important;
    }
    
    /* INTERACTIVE IMAGE - COMPLETELY HIDDEN ON MOBILE PORTRAIT */
    #how-it-works-image {
        display: none !important;
    }
    
    /* FAQ Steps Container - Mobile Portrait (FULL WIDTH, NO GAPS) */
    #how-it-works div[style*="width: 601px; height: 364px"] {
        width: 100% !important;
        height: auto !important;
        gap: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Individual Step Items - Mobile Portrait (NO GAPS, NO MARGINS) */
    #how-it-works .how-it-works-step {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 1rem !important;
        border-radius: 8px !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Remove border from last step - Mobile Portrait */
    #how-it-works .how-it-works-step:last-child {
        border-bottom: none !important;
    }
    
    /* Step Title - Mobile Portrait */
    #how-it-works .how-it-works-step div[style*="font-size: 21px"] {
        font-size: 18px !important;
    }
    
    /* Step Content - Mobile Portrait */
    #how-it-works .step-content {
        width: 100% !important;
        font-size: 14px !important;
        line-height: 150% !important;
        padding-right: 0 !important;
    }
    
    /* Step Number Badge - Mobile Portrait */
    #how-it-works .how-it-works-step div[style*="width: 40px; height: 40px"] {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }
    
    /* Step Number Text - Mobile Portrait */
    #how-it-works .how-it-works-step div[style*="font-size: 16px"] {
        font-size: 14px !important;
    }
}

/* ===== MOBILE LANDSCAPE (≤767px) - COMPACT HORIZONTAL LAYOUT ===== */
@media screen and (max-width: 767px) and (orientation: landscape), 
       screen and (max-height: 500px) {
    /* Steps Section Container - Mobile Landscape */
    #how-it-works {
        width: 100% !important;
        padding: 2rem 1.5rem !important;
        margin: 0 !important;
    }
    
    /* Main Steps Container - Mobile Landscape */
    #how-it-works > div {
        width: 100% !important;
        height: auto !important;
        gap: 1.5rem !important;
    }
    
    /* Steps Title - Mobile Landscape BIGGER LIKE HERO */
    #how-it-works h2[style*="font-size: 56px"] {
        font-size: 2.5rem !important; /* 40px - Match hero landscape size */
        line-height: 120% !important;
        letter-spacing: -0.05em !important;
        font-weight: 700 !important;
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
    }
    
    /* Content Container - Mobile Landscape (KEEP HORIZONTAL) */
    #how-it-works div[style*="width: 1280px; height: 364px"] {
        flex-direction: row !important;
        gap: 1.5rem !important;
        width: 100% !important;
        height: auto !important;
        align-items: flex-start !important;
    }
    
    /* Interactive Image - Mobile Landscape (EVEN SMALLER WIDTH, TALLER HEIGHT) */
    #how-it-works-image {
        width: 30% !important;
        height: 320px !important;
        flex-shrink: 0 !important;
        margin-right: 1rem !important;
    }
    
    /* FAQ Steps Container - Mobile Landscape (WIDER, NO GAPS) */
    #how-it-works div[style*="width: 601px; height: 364px"] {
        width: 65% !important;
        height: auto !important;
        gap: 0 !important;
        min-height: 320px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    /* Individual Step Items - Mobile Landscape (NO GAPS, NO MARGINS) */
    #how-it-works .how-it-works-step {
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 0.75rem 1rem !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Remove border from last step */
    #how-it-works .how-it-works-step:last-child {
        border-bottom: none !important;
    }
    
    /* Step Title - Mobile Landscape */
    #how-it-works .how-it-works-step div[style*="font-size: 21px"] {
        font-size: 16px !important;
    }
    
    /* Step Content - Mobile Landscape */
    #how-it-works .step-content {
        font-size: 13px !important;
        line-height: 140% !important;
    }
}

/* ===== HIDE DEBUG FEATURES ===== */
/* Hide breakpoint debug indicator - can be re-enabled later if needed */
.breakpoint-indicator {
    display: none !important;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media screen and (max-width: 1023px) {
    /* Focus Visibility */
    #how-it-works .how-it-works-step:focus {
        outline: 2px solid #419b3e !important;
        outline-offset: 2px !important;
    }
    
    /* Touch Feedback */
    #how-it-works .how-it-works-step:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Ensure minimum touch target sizes */
    #how-it-works .how-it-works-step {
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media screen and (max-width: 1023px) {
    /* Hardware Acceleration */
    #how-it-works .how-it-works-step,
    #how-it-works-image {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    /* Smooth Transitions */
    #how-it-works * {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Prevent horizontal scrolling */
    #how-it-works {
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #how-it-works * {
        box-sizing: border-box !important;
    }
}

/* RESPONSIVE TESTIMONIALS SECTION */
/* TESTIMONIALS SECTION RESPONSIVE CSS */
/* Created: September 4, 2025 */
/* Purpose: Mobile responsiveness with proper horizontal padding to prevent edge-touching */

/* ===== CSS CUSTOM PROPERTIES FOR TESTIMONIALS SECTION ===== */
:root {
    /* Desktop Testimonials variables - NEVER modified by responsive breakpoints */
    --testimonials-section-width: 1440px;
    --testimonials-container-width: 1360px;
    --testimonials-content-width: 1280px;
    --testimonials-desktop-padding: 40px;
    
    /* Testimonials responsive variables */
    --current-testimonials-padding: var(--testimonials-desktop-padding);
}

/* ===== BULLETPROOF DESKTOP PROTECTION (≥1024px) ===== */
@media screen and (min-width: 1024px) {
    /* Desktop Testimonials section remains completely untouched */
    #testimonials {
        /* All existing desktop styles preserved - NO CHANGES */
    }
}

/* ===== TABLET USES DESKTOP STYLES - NO TABLET BREAKPOINT NEEDED ===== */
/* Tablets (768px-1023px) will automatically use desktop styles above */

/* ===== MOBILE PORTRAIT (≤767px) - PREVENT EDGE TOUCHING ===== */
@media screen and (max-width: 767px) and (orientation: portrait) {
    /* Mobile portrait Testimonials variables */
    :root {
        --mobile-testimonials-padding: 16px;
        
        /* Active mobile portrait variables */
        --current-testimonials-padding: var(--mobile-testimonials-padding);
    }
    
    /* Testimonials Section Container - Mobile Portrait */
    #testimonials {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important; /* Mobile outer padding */
        box-sizing: border-box !important;
    }
    
    /* Main Testimonials Container - Teal Background with Proper Padding */
    #testimonials > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2rem 1.5rem !important; /* Enhanced padding to prevent edge-touching */
        margin: 0 !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Testimonials Content Container - Full Width */
    #testimonials div[style*="width: 1280px"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2rem !important;
    }
    
    /* Testimonials Header - Mobile Portrait */
    #testimonials div[style*="gap-6"] {
        gap: 1.5rem !important;
        padding: 0 !important;
    }
    
    /* Testimonials Header Title - Mobile Scaling */
    #testimonials h2[style*="font-size: 56px"] {
        font-size: 32px !important; /* 57% scaling for mobile */
        line-height: 120% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Testimonials Badge */
    #testimonials div[style*="bg-transparent"] {
        padding: 8px 16px !important;
    }
    
    /* Testimonials Badge Text */
    #testimonials div[style*="font-size:15px"] {
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }
    
    /* Testimonials Grid - Single Column */
    #testimonials .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Individual Testimonial Cards - Mobile Portrait */
    #testimonials .grid > div {
        padding: 1.5rem !important;
        gap: 1rem !important;
        border-radius: 12px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Testimonial Text */
    #testimonials .text-white\/90 {
        font-size: 14px !important;
        line-height: 150% !important;
    }
    
    /* Testimonial Author Name */
    #testimonials .text-white.font-medium {
        font-size: 16px !important;
    }
    
    /* Testimonial Author Title */
    #testimonials .text-white\/60 {
        font-size: 13px !important;
    }
}

/* ===== MOBILE LANDSCAPE (≤767px) - OPTIMIZED FOR LANDSCAPE ===== */
@media screen and (max-width: 767px) and (orientation: landscape), 
       screen and (max-height: 500px) {
    /* Mobile landscape Testimonials variables */
    :root {
        --mobile-landscape-testimonials-padding: 12px;
        
        /* Active landscape variables */
        --current-testimonials-padding: var(--mobile-landscape-testimonials-padding);
    }
    
    /* Testimonials Section Container - Mobile Landscape */
    #testimonials {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* Main Testimonials Container - Compact for Landscape */
    #testimonials > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2rem 2rem !important; /* Horizontal padding to prevent edge-touching */
        margin: 0 !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Testimonials Content Container */
    #testimonials div[style*="width: 1280px"] {
        width: 100% !important;
        max-width: 100% !important;
        gap: 1.5rem !important;
    }
    
    /* Testimonials Header - Compact for Landscape */
    #testimonials div[style*="gap-6"] {
        gap: 1rem !important;
    }
    
    /* Header Title - Landscape Typography */
    #testimonials h2[style*="font-size: 56px"] {
        font-size: 28px !important; /* Compact for landscape height */
        line-height: 120% !important;
    }
    
    /* Testimonials Grid - 2 columns for landscape efficiency */
    #testimonials .grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
    }
    
    /* Individual Testimonial Cards - Landscape */
    #testimonials .grid > div {
        padding: 1rem !important;
        gap: 0.75rem !important;
        border-radius: 12px !important;
    }
    
    /* Compact Typography for Landscape */
    #testimonials .text-white\/90 {
        font-size: 13px !important;
        line-height: 140% !important;
    }
    
    #testimonials .text-white.font-medium {
        font-size: 14px !important;
    }
    
    #testimonials .text-white\/60 {
        font-size: 12px !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media screen and (max-width: 1023px) {
    /* Focus Visibility */
    #testimonials a:focus {
        outline: 2px solid #ffffff !important;
        outline-offset: 2px !important;
    }
    
    /* Touch Feedback */
    #testimonials a:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media screen and (max-width: 1023px) {
    /* Hardware Acceleration */
    #testimonials .grid > div {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        perspective: 1000px;
        -webkit-perspective: 1000px;
    }
    
    /* Smooth Transitions */
    #testimonials .grid > div {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Prevent horizontal scrolling */
    #testimonials {
        overflow-x: hidden !important;
    }
}

/* RESPONSIVE FOOTER SECTION */
/* FOOTER/CONTACT SECTION RESPONSIVE CSS */
/* Created: September 5, 2025 */
/* Purpose: Comprehensive responsive design for footer section with mobile-first approach */

/* ===== CSS CUSTOM PROPERTIES FOR FOOTER SECTION ===== */
:root {
    /* Desktop Footer variables - NEVER modified by responsive breakpoints */
    --footer-desktop-padding: 80px;
    --footer-desktop-vertical: 128px;
    --footer-logo-height: 60px;
    --footer-contact-icon: 48px;
    
    /* Footer responsive variables */
    --current-footer-padding: var(--footer-desktop-padding);
    --current-footer-vertical: var(--footer-desktop-vertical);
    --current-logo-height: var(--footer-logo-height);
    --current-contact-icon: var(--footer-contact-icon);
}

/* ===== ALL BREAKPOINTS - TAILWIND PATTERN OVERRIDE ===== */
/* Base mobile size - text-3xl */
section#contact h2.self-stretch.text-dark,
#contact h2.self-stretch.text-dark,
#contact h2.text-dark {
    font-size: 56px !important; /* text-3xl from your Tailwind config */
    line-height: 120% !important;
    letter-spacing: -0.05em !important;
    font-weight: 700 !important;
}

/* Small screens and up - text-4xl */
@media screen and (min-width: 640px) {
    section#contact h2.self-stretch.text-dark,
    #contact h2.self-stretch.text-dark,
    #contact h2.text-dark {
        font-size: 64px !important; /* text-4xl from your Tailwind config */
    }
}

/* Large screens and up - text-5xl */
@media screen and (min-width: 1024px) {
    section#contact h2.self-stretch.text-dark,
    #contact h2.self-stretch.text-dark,
    #contact h2.text-dark {
        font-size: 48px !important; /* text-5xl from your Tailwind config */
    }
}

/* ===== TABLET USES DESKTOP STYLES - NO TABLET BREAKPOINT NEEDED ===== */
/* Tablets (768px-1023px) will automatically use desktop styles above */

/* ===== MOBILE PORTRAIT (≤767px) - SINGLE COLUMN STACK ===== */
@media screen and (max-width: 767px) and (orientation: portrait) {
    /* Mobile portrait Footer variables */
    :root {
        --mobile-footer-padding: 16px;
        --mobile-footer-vertical: 48px;
        --mobile-logo-height: 32px;
        --mobile-contact-icon: 44px;
        
        /* Active mobile portrait variables */
        --current-footer-padding: var(--mobile-footer-padding);
        --current-footer-vertical: var(--mobile-footer-vertical);
        --current-logo-height: var(--mobile-logo-height);
        --current-contact-icon: var(--mobile-contact-icon);
    }
    
    /* Footer Section Container - Mobile Portrait */
    #contact {
        padding: 0 !important;
    }
    
    #contact > div {
        padding: var(--current-footer-vertical) var(--current-footer-padding) !important;
        box-sizing: border-box !important;
    }
    
    /* Main Footer Container - Mobile Portrait (SINGLE COLUMN STACK) */
    #contact .flex.w-full.max-w-none.mx-auto[style*="max-width: 1440px"]:first-child {
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    
    /* MAIN GREEN CONTAINER - Mobile Portrait (CTA Section) */
    #contact .w-1\/2:first-child {
        width: 100% !important;
        padding: 2.5rem 2rem 1rem 2rem !important;
        order: 1 !important;
        background: linear-gradient(135deg, rgba(65, 155, 62, 0.15) 0%, rgba(65, 155, 62, 0.08) 100%) !important;
        backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(65, 155, 62, 0.25) !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px rgba(65, 155, 62, 0.15) !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Logo + Contact Section - Mobile Portrait (Simple section with left-aligned content) */
    #contact .w-1\/2:last-child {
        width: 100% !important;
        padding: 2rem !important;
        order: 2 !important;
        align-items: flex-start !important;
        gap: 1.5rem !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 16px !important;
        backdrop-filter: blur(5px) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Additional mobile portrait styling for title */
    section#contact h2.self-stretch.text-dark,
    #contact h2.self-stretch.text-dark,
    #contact h2.text-dark {
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    /* Footer Description - Mobile Portrait */
    #contact p.text-gray-600 {
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* CTA Buttons Container - Mobile Portrait (STACK VERTICALLY) */
    #contact .flex.items-start.gap-6 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    /* Individual CTA Button Containers - Mobile Portrait */
    #contact .flex.items-start.gap-6 > .flex.items-center {
        width: 100% !important;
    }
    
    /* CTA Buttons - Mobile Portrait (FULL WIDTH) + MODERN GLASS BUTTONS */
    #contact .flex.h-12 {
        width: 100% !important;
        height: 52px !important; /* Touch-friendly */
        font-size: 16px !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Primary CTA Button - Enhanced */
    #contact .flex.h-12[style*="background: #419b3e"],
    #contact .flex.h-12.bg-primary {
        background: linear-gradient(135deg, #419b3e 0%, #5cb85c 100%) !important;
        box-shadow: 0 4px 16px rgba(65, 155, 62, 0.3) !important;
    }
    
    /* CTA Buttons Hover Effect - Mobile Portrait */
    #contact .flex.h-12:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Footer Logo Container - Mobile Portrait (LEFT-ALIGNED) */
    #contact .mb-6.flex.justify-center.w-full {
        margin-bottom: 1.5rem !important;
        order: 1 !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
    
    /* Footer Logo - Mobile Portrait */
    #contact img[alt="Harmain Solar Energy"] {
        height: var(--current-logo-height) !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* NAVIGATION PILLS - COMPLETELY HIDDEN ON MOBILE PORTRAIT */
    #contact .flex.px-6.py-2.justify-center.items-center.gap-6 {
        display: none !important;
    }
    
    /* Contact Information Container - Mobile Portrait (MOVE TO LOGO SECTION) */
    #contact .flex.justify-between.items-start.self-stretch {
        flex-direction: column !important;
        gap: 1rem !important;
        order: 3 !important; /* Move to logo section */
        margin-top: 1rem !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Contact Information Items - Mobile Portrait (SIMPLE LEFT-ALIGNED TEXT) */
    #contact .flex.justify-between.items-start.self-stretch .flex.items-center.gap-3 {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 0.75rem 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Contact Items Hover Effect - Mobile Portrait (Subtle) */
    #contact .flex.justify-between.items-start.self-stretch .flex.items-center.gap-3:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
        background: transparent !important;
    }
    
    /* Contact Icons - Mobile Portrait (REVERT TO ORIGINAL STYLING) */
    #contact div[style*="width: 48px; height: 48px"] {
        width: var(--current-contact-icon) !important;
        height: var(--current-contact-icon) !important;
        flex-shrink: 0 !important;
        /* Revert to original background and border radius */
    }
    
    /* Contact Icons Images - Mobile Portrait */
    #contact div[style*="width: 48px; height: 48px"] img {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Contact Text - Mobile Portrait (REVERT TO ORIGINAL DARK COLORS) */
    #contact .flex.flex-col.justify-center.items-start span,
    #contact .flex.flex-col.justify-center.items-start a {
        font-size: 15px !important;
        line-height: 1.5 !important;
        color: #6b7280 !important; /* Original gray color */
    }
    
    #contact .flex.flex-col.justify-center.items-start a {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #1f2937 !important; /* Original dark color */
        text-decoration: none !important;
    }
    
    #contact .flex.flex-col.justify-center.items-start a:hover {
        color: #419b3e !important;
        transition: color 0.3s ease !important;
    }
    
    /* Copyright Row Container - Mobile Portrait (STACK VERTICALLY) */
    #contact .flex.w-full.max-w-none.mx-auto.pt-8 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        padding-top: 2rem !important;
        text-align: center !important;
    }
    
    /* Copyright Text - Mobile Portrait */
    #contact .text-primary.text-sm {
        order: 3 !important;
        font-size: 13px !important;
    }
    
    /* Powered by Intrepid Text - Mobile Portrait */
    #contact .text-gray-500.text-xs {
        font-size: 11px !important;
        text-align: center !important;
    }
    
    /* Footer Links Container - Mobile Portrait */
    #contact .flex.items-center.gap-4 {
        order: 2 !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    /* Footer Links - Mobile Portrait */
    #contact .flex.items-center.gap-4 a {
        font-size: 14px !important;
        padding: 8px 16px !important;
        width: 100% !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    }
    
    /* Back to Top Button - Mobile Portrait */
    #contact button[onclick*="scrollTo"] {
        order: 1 !important;
        width: 100% !important;
        justify-content: center !important;
        height: 48px !important;
        font-size: 14px !important;
    }
    
    #contact button[onclick*="scrollTo"] span {
        font-size: 14px !important;
    }
}

/* ===== MOBILE LANDSCAPE (≤767px OR ≤500px height) - DESKTOP-LIKE LAYOUT ===== */
@media screen and (max-width: 767px) and (orientation: landscape), 
       screen and (max-height: 500px) {
    /* Mobile landscape Footer variables */
    :root {
        --mobile-landscape-padding: 20px;
        --mobile-landscape-vertical: 32px;
        --mobile-landscape-logo: 28px;
        --mobile-landscape-icon: 40px;
        
        /* Active mobile landscape variables */
        --current-footer-padding: var(--mobile-landscape-padding);
        --current-footer-vertical: var(--mobile-landscape-vertical);
        --current-logo-height: var(--mobile-landscape-logo);
        --current-contact-icon: var(--mobile-landscape-icon);
    }
    
    /* Footer Section Container - Mobile Landscape */
    #contact {
        padding: 0 !important;
    }
    
    #contact > div {
        padding: var(--current-footer-vertical) var(--current-footer-padding) !important;
    }
    
    /* Main Footer Container - Mobile Landscape (ALL CONTENT IN GREEN CONTAINER) */
    #contact .flex.w-full.max-w-none.mx-auto[style*="max-width: 1440px"]:first-child {
        flex-direction: column !important;
        gap: 0 !important;
        align-items: stretch !important;
        background: linear-gradient(135deg, rgba(65, 155, 62, 0.12) 0%, rgba(65, 155, 62, 0.06) 100%) !important;
        border: 1px solid rgba(65, 155, 62, 0.2) !important;
        border-radius: 16px !important;
        padding: 2rem 1.5rem !important;
        box-shadow: 0 6px 24px rgba(65, 155, 62, 0.12) !important;
    }
    
    /* Left Side CTA - Mobile Landscape (CTA SECTION WITHIN GREEN CONTAINER) */
    #contact .w-1\/2:first-child {
        width: 100% !important;
        padding: 0 0 1.5rem 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        order: 1 !important;
        border-bottom: 1px solid rgba(65, 155, 62, 0.2) !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Right Side Content - Mobile Landscape (LOGO + CONTACT SECTION WITHIN GREEN CONTAINER) */
    #contact .w-1\/2:last-child {
        width: 100% !important;
        padding: 0 !important;
        gap: 1rem !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Additional mobile landscape styling for title */
    section#contact h2.self-stretch.text-dark,
    #contact h2.self-stretch.text-dark,
    #contact h2.text-dark {
        margin-bottom: 0.75rem !important;
    }
    
    /* Footer Description - Mobile Landscape */
    #contact p.text-gray-600 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }
    
    /* CTA Buttons - Mobile Landscape (ORIGINAL STYLE) */
    #contact .flex.items-start.gap-6 {
        gap: 1rem !important;
    }
    
    #contact .flex.h-12 {
        height: 44px !important;
        padding: 0 16px !important;
        font-size: 14px !important;
    }
    
    /* Footer Logo Container - Mobile Landscape (LEFT-ALIGNED LIKE DESKTOP) */
    #contact .mb-6.flex.justify-center.w-full {
        margin-bottom: 1rem !important;
        order: 1 !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
    
    /* Footer Logo - Mobile Landscape */
    #contact img[alt="Harmain Solar Energy"] {
        height: var(--current-logo-height) !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* NAVIGATION PILLS - COMPLETELY HIDDEN ON MOBILE LANDSCAPE */
    #contact .flex.px-6.py-2.justify-center.items-center.gap-6 {
        display: none !important;
    }
    
    /* Contact Information - Mobile Landscape (MOVE TO RIGHT SIDE LIKE DESKTOP) */
    #contact .flex.justify-between.items-start.self-stretch {
        margin-top: 1rem !important;
        margin-bottom: 0 !important;
        gap: 1rem !important;
        order: 3 !important; /* Move to right side section */
        position: relative !important;
        z-index: 1 !important;
        flex-direction: row !important; /* Keep horizontal on landscape */
    }
    
    /* Contact Icons - Mobile Landscape */
    #contact div[style*="width: 48px; height: 48px"] {
        width: var(--current-contact-icon) !important;
        height: var(--current-contact-icon) !important;
    }
    
    /* Contact Icons Images - Mobile Landscape */
    #contact div[style*="width: 48px; height: 48px"] img {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Contact Text - Mobile Landscape (COMPACT) */
    #contact .flex.flex-col.justify-center.items-start span {
        font-size: 12px !important;
    }
    
    #contact .flex.flex-col.justify-center.items-start a {
        font-size: 14px !important;
    }
    
    /* Copyright Row - Mobile Landscape (HORIZONTAL BUT COMPACT) */
    #contact .flex.w-full.max-w-none.mx-auto.pt-8 {
        padding-top: 1.5rem !important;
        gap: 1rem !important;
    }
    
    /* Footer Links - Mobile Landscape */
    #contact .flex.items-center.gap-4 {
        gap: 1rem !important;
    }
    
    #contact .flex.items-center.gap-4 a {
        font-size: 12px !important;
    }
    
    /* Back to Top Button - Mobile Landscape */
    #contact button[onclick*="scrollTo"] {
        height: 40px !important;
        padding: 0 12px !important;
    }
    
    #contact button[onclick*="scrollTo"] span {
        font-size: 12px !important;
    }
    
    #contact button[onclick*="scrollTo"] div[style*="width: 20px; height: 20px"] {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media screen and (max-width: 1023px) {
    /* Focus Visibility */
    #contact a:focus,
    #contact button:focus {
        outline: 2px solid #419b3e !important;
        outline-offset: 2px !important;
    }
    
    /* Touch Feedback */
    #contact a:active,
    #contact button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Ensure minimum touch target sizes */
    #contact a,
    #contact button {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media screen and (max-width: 1023px) {
    /* Hardware Acceleration */
    #contact .flex,
    #contact img,
    #contact button {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    /* Smooth Transitions */
    #contact * {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Prevent horizontal scrolling */
    #contact {
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #contact * {
        box-sizing: border-box !important;
    }
}

/* RESPONSIVE ABOUT SECTION */
/* ABOUT SECTION RESPONSIVE CSS */
/* Created: September 5, 2025 */
/* Purpose: Make About section responsive and remove Pakistan map on mobile */

/* ===== CSS CUSTOM PROPERTIES FOR ABOUT SECTION ===== */
:root {
    /* Desktop About variables - NEVER modified by responsive breakpoints */
    --about-section-padding: 40px;
    --about-container-width: 1360px;
    --about-container-height: 1156px;
    --about-desktop-font-size: 56px;
    
    /* About responsive variables */
    --current-about-padding: var(--about-section-padding);
    --current-about-font-size: var(--about-desktop-font-size);
}

/* ===== BULLETPROOF DESKTOP PROTECTION (≥1024px) ===== */
@media screen and (min-width: 1024px) {
    /* Desktop About section remains completely untouched */
    #about {
        /* All existing desktop styles preserved - NO CHANGES */
    }
}

/* ===== TABLET USES DESKTOP STYLES - NO TABLET BREAKPOINT NEEDED ===== */
/* Tablets (768px-1023px) will automatically use desktop styles above */

/* ===== MOBILE PORTRAIT (≤767px) - REMOVE MAP, STACK CONTENT ===== */
@media screen and (max-width: 767px) and (orientation: portrait) {
    /* About Section Container - Mobile Portrait */
    #about {
        width: 100% !important;
        height: auto !important;
        padding: 0 1rem !important;
    }
    
    /* Main About Container - Mobile Portrait */
    #about > div {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 3rem 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    /* Header Content - Mobile Portrait */
    #about div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        padding: 0 !important;
    }
    
    /* Text Content - Mobile Portrait */
    #about div[style*="width: 695px"] {
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
    }
    
    /* Sub Heading - Mobile Portrait */
    #about div[style*="Proven Impact"] {
        font-size: 13px !important;
        text-align: center !important;
    }
    
    /* About Title - Mobile Portrait */
    #about h2[style*="font-size:56px"] {
        font-size: 32px !important; /* Mobile scaling */
        text-align: center !important;
        line-height: 120% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Description - Mobile Portrait */
    #about div[style*="width: 448px; height: 72px"] {
        width: 100% !important;
        height: auto !important;
        font-size: 16px !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 1rem 0 !important;
    }
    
    /* Statistics and Map Container - Mobile Portrait */
    #about div[style*="gap: 120px"] {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        padding: 2rem 0 0 0 !important;
    }
    
    /* Statistics Column - Mobile Portrait (2x2 Grid) */
    #about div[style*="width: 207px; height: 584px"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        height: auto !important;
        justify-items: center !important;
        margin-bottom: 2rem !important;
    }
    
    /* Individual Stat Items - Mobile Portrait */
    #about div[style*="gap: 16px"][style*="110px"] {
        width: 100% !important;
        height: auto !important;
        text-align: center !important;
        padding: 1.5rem 1rem !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    
    /* Stat Numbers - Mobile Portrait */
    #about div[style*="font-size: 64px"] {
        font-size: 36px !important;
        line-height: 120% !important;
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Stat Labels - Mobile Portrait */
    #about div[style*="font-size: 16px"][style*="150%"] {
        font-size: 14px !important;
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* PAKISTAN MAP - COMPLETELY HIDDEN ON MOBILE PORTRAIT */
    #about div[style*="width: 953px; height: 584px"] {
        display: none !important;
    }
}

/* ===== MOBILE LANDSCAPE (≤767px OR ≤500px height) - COMPACT LAYOUT ===== */
@media screen and (max-width: 767px) and (orientation: landscape), 
       screen and (max-height: 500px) {
    /* About Section Container - Mobile Landscape */
    #about {
        width: 100% !important;
        height: auto !important;
        padding: 0 1.5rem !important;
    }
    
    /* Main About Container - Mobile Landscape */
    #about > div {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 2rem 2rem !important;
        box-sizing: border-box !important;
    }
    
    /* Header Content - Mobile Landscape */
    #about div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        padding: 0 !important;
        align-items: flex-start !important;
    }
    
    /* Text Content - Mobile Landscape (LEFT ALIGNED) */
    #about div[style*="width: 695px"] {
        width: 100% !important;
        height: auto !important;
        text-align: left !important;
    }
    
    /* About Title - Mobile Landscape */
    #about h2[style*="font-size:56px"] {
        font-size: 28px !important; /* Compact for landscape */
        text-align: left !important;
        line-height: 120% !important;
    }
    
    /* Description - Mobile Landscape (LEFT ALIGNED) */
    #about div[style*="width: 448px; height: 72px"] {
        width: 100% !important;
        height: auto !important;
        font-size: 14px !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 1rem 0 !important;
    }
    
    /* Statistics and Map Container - Mobile Landscape (STATISTICS ONLY, NO MAP) */
    #about div[style*="gap: 120px"] {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        padding: 1.5rem 0 !important;
        align-items: center !important;
    }
    
    /* Statistics Column - Mobile Landscape (FULL WIDTH, NO MAP) */
    #about div[style*="width: 207px; height: 584px"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        height: auto !important;
        justify-items: center !important;
    }
    
    /* Individual Stat Items - Mobile Landscape (Compact) */
    #about div[style*="gap: 16px"][style*="110px"] {
        width: 100% !important;
        height: auto !important;
        text-align: left !important;
        padding: 1rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
    }
    
    /* Stat Numbers - Mobile Landscape (Smaller) */
    #about div[style*="font-size: 64px"] {
        font-size: 24px !important;
        line-height: 120% !important;
    }
    
    /* Stat Labels - Mobile Landscape */
    #about div[style*="font-size: 16px"][style*="150%"] {
        font-size: 12px !important;
    }
    
    /* Pakistan Map - COMPLETELY HIDDEN ON MOBILE LANDSCAPE */
    #about div[style*="width: 953px; height: 584px"] {
        display: none !important;
    }
    
    /* Map Image - Mobile Landscape */
    #about div[style*="width: 600px; height: 550px"] {
        width: 100% !important;
        height: 100% !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media screen and (max-width: 1023px) {
    /* Focus Visibility */
    #about a:focus {
        outline: 2px solid #ffffff !important;
        outline-offset: 2px !important;
    }
    
    /* Touch Feedback */
    #about a:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media screen and (max-width: 1023px) {
    /* Hardware Acceleration */
    #about div,
    #about img {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    /* Smooth Transitions */
    #about * {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Prevent horizontal scrolling */
    #about {
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    #about * {
        box-sizing: border-box !important;
    }
}

/* STICKY HEADER STYLES */
/* Floating Glass Sticky Header */
/* Modern glassmorphism header that slides down when main header scrolls out of view */

.sticky-header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: 1200px;
    height: 64px;
    z-index: 1000;
    
    /* Glassmorphism Background - Dark Glass (matching site theme) */
    background: rgba(17, 36, 55, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Modern Rounded Border */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    
    /* Premium Shadow */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 
                0 2px 16px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* Initial Hidden State */
    opacity: 0;
    visibility: hidden;
    
    /* Smooth Animation */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Ensure it works on mobile devices */
    will-change: transform, opacity;
}

/* Visible State */
.sticky-header.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Container Layout */
.sticky-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 32px;
    width: 100%;
}

/* Logo Section */
.sticky-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sticky-logo img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: brightness(1.1);
    transition: all 0.2s ease;
}

.sticky-logo:hover img {
    filter: brightness(1.2);
    transform: scale(1.02);
}

/* Navigation Section */
.sticky-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    justify-content: center;
}

.sticky-nav a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    position: relative;
    padding: 8px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
}

.sticky-nav a:hover {
    opacity: 1;
    color: #4eb84a;
    transform: translateY(-1px);
}

/* Active Navigation State */
.sticky-nav a.active {
    opacity: 1;
    color: #4eb84a;
}

/* Navigation Hover Effect */
.sticky-nav a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background: linear-gradient(90deg, #4eb84a, #419b3e);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 1px;
}

.sticky-nav a:hover::before,
.sticky-nav a.active::before {
    width: 100%;
}

/* CTA Button Section */
.sticky-cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sticky-cta button {
    background: linear-gradient(135deg, #4eb84a 0%, #419b3e 100%);
    color: #ffffff;
    border: none;
    border-radius: 24px;
    padding: 12px 24px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* Glass Button Effect */
    box-shadow: 0 4px 16px rgba(78, 184, 74, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-cta button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 184, 74, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #5dc455 0%, #4aaa43 100%);
}

.sticky-cta button:active {
    transform: translateY(-1px);
    transition: all 0.1s ease;
}

/* Button Shimmer Effect */
.sticky-cta button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 255, 255, 0.2) 50%, 
                transparent 100%);
    transition: left 0.5s ease;
}

.sticky-cta button:hover::before {
    left: 100%;
}

/* Micro-animations for premium feel */
@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.sticky-header.visible {
    animation: fadeInSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Responsive adjustments for smaller desktop screens */
@media (max-width: 1300px) {
    .sticky-header {
        width: 95%;
        max-width: 1200px;
    }
    
    .sticky-nav {
        gap: 24px;
    }
    
    .sticky-container {
        padding: 0 24px;
    }
}

@media (max-width: 1024px) {
    .sticky-header {
        width: 92%;
    }
    
    .sticky-nav {
        gap: 20px;
    }
    
    .sticky-nav a {
        font-size: 14px;
    }
    
    .sticky-container {
        padding: 0 20px;
    }
}

/* ================================
   MOBILE & TABLET RESPONSIVE STYLES
   ================================ */

/* TABLET RESPONSIVE (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .sticky-header {
        width: calc(100vw - 3rem);
        height: 56px;
        top: 15px;
        border-radius: 14px;
    }
    
    .sticky-container {
        padding: 0 20px;
    }
    
    /* Show hamburger, hide desktop navigation */
    .sticky-hamburger {
        display: flex !important;
    }
    
    .sticky-nav {
        display: none !important;
    }
    
    /* Logo sizing */
    .sticky-logo-desktop {
        display: none;
    }
    
    .sticky-logo-mobile-portrait {
        display: none;
    }
    
    .sticky-logo-mobile-landscape {
        display: block;
        height: 32px;
    }
    
    /* CTA button */
    .sticky-cta-desktop {
        display: none;
    }
    
    .sticky-cta-mobile-portrait {
        display: none;
    }
    
    .sticky-cta-mobile-landscape {
        display: inline-block;
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* MOBILE LANDSCAPE (≤767px, landscape) */
@media (max-width: 767px) and (orientation: landscape) {
    .sticky-header {
        width: calc(100vw - 2rem);
        height: 48px;
        top: 8px;
        border-radius: 12px;
    }
    
    .sticky-container {
        padding: 0 16px;
    }
    
    /* Show hamburger, hide desktop navigation */
    .sticky-hamburger {
        display: flex !important;
    }
    
    .sticky-nav {
        display: none !important;
    }
    
    /* Logo sizing - small horizontal logo */
    .sticky-logo-desktop {
        display: none;
    }
    
    .sticky-logo-mobile-portrait {
        display: none;
    }
    
    .sticky-logo-mobile-landscape {
        display: block;
        height: 28px;
    }
    
    /* CTA button - shortened text */
    .sticky-cta-desktop {
        display: none;
    }
    
    .sticky-cta-mobile-portrait {
        display: none;
    }
    
    .sticky-cta-mobile-landscape {
        display: inline-block;
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 20px;
    }
}

/* MOBILE PORTRAIT (≤767px, portrait) */
@media (max-width: 767px) and (orientation: portrait) {
    .sticky-header {
        width: calc(100vw - 2rem);
        height: 50px;
        top: 10px;
        border-radius: 12px;
    }
    
    .sticky-container {
        padding: 0 16px;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Show hamburger, hide desktop navigation */
    .sticky-hamburger {
        display: flex !important;
        flex-shrink: 0;
    }
    
    .sticky-nav {
        display: none !important;
    }
    
    /* Logo sizing - icon only */
    .sticky-logo {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .sticky-logo-desktop {
        display: none;
    }
    
    .sticky-logo-mobile-portrait {
        display: block;
        height: 30px;
        filter: brightness(0) invert(1); /* Make icon white */
    }
    
    .sticky-logo-mobile-landscape {
        display: none;
    }
    
    /* CTA button - icon only */
    .sticky-cta-desktop {
        display: none;
    }
    
    .sticky-cta {
        flex-shrink: 0;
    }
    
    .sticky-cta-mobile-portrait {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 65px;
        height: 40px;
        padding: 0;
        border-radius: 20px;
        color: #ffffff;
        background: linear-gradient(180deg, rgba(78, 184, 74, 0.9) 0%, rgba(49, 138, 45, 0.9) 100%);
    }
    
    .sticky-cta-mobile-portrait svg {
        width: 20px !important;
        height: 20px !important;
        fill: #ffffff !important;
        stroke: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .sticky-cta-mobile-landscape {
        display: none;
    }
}

/* ================================
   MOBILE COMPONENT STYLES
   ================================ */

/* Hamburger Button Styles */
.sticky-hamburger {
    display: none; /* Hidden on desktop */
    align-items: center;
    flex-shrink: 0;
}

.sticky-hamburger button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sticky-hamburger button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.sticky-hamburger button:active {
    transform: scale(0.95);
}

.sticky-hamburger svg {
    width: 20px;
    height: 20px;
}

/* Mobile Logo Responsive Display */
.sticky-logo-desktop,
.sticky-logo-mobile-portrait, 
.sticky-logo-mobile-landscape {
    transition: all 0.2s ease;
}

/* Default: Hide mobile versions on desktop */
@media (min-width: 1024px) {
    .sticky-hamburger {
        display: none !important;
    }
    
    .sticky-logo-desktop {
        display: block;
    }
    
    .sticky-logo-mobile-portrait,
    .sticky-logo-mobile-landscape {
        display: none;
    }
    
    .sticky-cta-desktop {
        display: inline-block;
    }
    
    .sticky-cta-mobile-portrait,
    .sticky-cta-mobile-landscape {
        display: none;
    }
}

/* Mobile CTA Button Styles */
.sticky-cta-mobile-portrait,
.sticky-cta-mobile-landscape {
    background: linear-gradient(135deg, #4eb84a 0%, #419b3e 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    
    /* Glass Button Effect */
    box-shadow: 0 4px 16px rgba(78, 184, 74, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-cta-mobile-portrait:hover,
.sticky-cta-mobile-landscape:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 184, 74, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #5dc455 0%, #4aaa43 100%);
}

.sticky-cta-mobile-portrait:active,
.sticky-cta-mobile-landscape:active {
    transform: translateY(-1px);
    transition: all 0.1s ease;
}

/* Touch-friendly spacing */
@media (max-width: 767px) {
    .sticky-container > * {
        margin: 0 4px;
    }
    
    .sticky-container > *:first-child {
        margin-left: 0;
    }
    
    .sticky-container > *:last-child {
        margin-right: 0;
    }
}

/* Accessibility */
.sticky-header:focus-within {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 
                0 2px 16px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 0 0 3px rgba(78, 184, 74, 0.3);
}

.sticky-nav a:focus,
.sticky-cta button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(78, 184, 74, 0.5);
    border-radius: 4px;
}

/* Smooth scrolling enhancement when clicking navigation */
html {
    scroll-behavior: smooth;
}

/* Performance optimizations */
.sticky-header * {
    box-sizing: border-box;
}

/* Browser compatibility for backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .sticky-header {
        background: rgba(17, 36, 55, 0.95);
    }
}

/* MOBILE DROPDOWN STYLES */
/* Mobile Glass Dropdown Menu
   Elegant dropdown that appears below header instead of full-page overlay */

/* Core Dropdown Styles - Matches Sticky Header Glassmorphism */
.mobile-dropdown {
    position: fixed;
    top: 80px; /* Dynamic - calculated by JavaScript */
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    width: calc(100vw - 2rem);
    max-width: 400px;
    z-index: 999;
    
    /* Same glassmorphism as sticky header */
    background: rgba(17, 36, 55, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
                0 2px 16px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* Prevent child elements from showing outside rounded corners */
    overflow: hidden;
    
    /* Animation - Hidden State */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Performance optimization */
    will-change: transform, opacity;
}

/* Visible State - Smooth Dropdown Animation */
.mobile-dropdown.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Container */
.dropdown-container {
    padding: 16px 0;
    width: 100%;
}

/* Clean Navigation Links - No Icons */
.dropdown-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dropdown-nav a {
    display: block;
    padding: 12px 24px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    position: relative;
    border-radius: 8px;
    margin: 2px 8px;
    opacity: 0.9;
}

.dropdown-nav a:hover {
    background: rgba(78, 184, 74, 0.1);
    color: #4eb84a;
    opacity: 1;
}

/* Completely disable any pseudo-element dashes */
.dropdown-nav a::before,
.dropdown-nav a::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
}

/* Active state indicator */
.dropdown-nav a.active {
    background: rgba(78, 184, 74, 0.2);
    color: #4eb84a;
    opacity: 1;
}


/* Light background overlay for better focus */
.dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(2px);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.mobile-dropdown.visible .dropdown-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ================================
   RESPONSIVE BREAKPOINTS
   ================================ */

/* Portrait Mobile (≤767px, portrait) */
@media (max-width: 767px) and (orientation: portrait) {
    .mobile-dropdown {
        width: calc(100vw - 1rem);
        max-width: none;
        top: 70px; /* Account for mobile header height */
    }
    
    .dropdown-nav a {
        padding: 14px 20px;
        font-size: 16px;
        min-height: 44px; /* iOS minimum touch target */
        display: flex;
        align-items: center;
    }
}

/* Landscape Mobile (≤767px, landscape) */
@media (max-width: 767px) and (orientation: landscape) {
    .mobile-dropdown {
        top: 60px; /* Compact header height */
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        width: calc(100vw - 2rem);
        max-width: 350px;
    }
    
    .dropdown-nav a {
        padding: 10px 20px;
        font-size: 15px;
    }
    
    .dropdown-container {
        padding: 12px 0;
    }
}

/* Tablet (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-dropdown {
        top: 75px;
        max-width: 350px;
        width: calc(50vw);
        min-width: 300px;
    }
    
    .dropdown-nav a {
        padding: 12px 24px;
        font-size: 16px;
    }
}

/* Hide on desktop - only show on mobile/tablet */
@media (min-width: 1024px) {
    .mobile-dropdown {
        display: none !important;
    }
}

/* ================================
   ACCESSIBILITY & POLISH
   ================================ */

/* Focus states for keyboard navigation */
.dropdown-nav a:focus {
    outline: 2px solid #4eb84a;
    outline-offset: 2px;
    background: rgba(78, 184, 74, 0.1);
    color: #4eb84a;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mobile-dropdown {
        transition: opacity 0.2s ease;
    }
    
    .dropdown-nav a {
        transition: background-color 0.2s ease;
    }
    
    .dropdown-nav a::before {
        transition: none;
    }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
    .dropdown-backdrop {
        background: rgba(0, 0, 0, 0.1);
    }
}

/* Performance optimizations */
.mobile-dropdown * {
    box-sizing: border-box;
}

/* Browser compatibility for backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .mobile-dropdown {
        background: rgba(17, 36, 55, 0.88);
    }
    
    .dropdown-backdrop {
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.1);
    }
}

/* ================================
   ANIMATION KEYFRAMES
   ================================ */

/* Entry animation for dropdown items */
@keyframes dropdownSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for navigation links */
.mobile-dropdown.visible .dropdown-nav a {
    animation: dropdownSlideIn 0.2s ease forwards;
}

.mobile-dropdown.visible .dropdown-nav a:nth-child(1) { animation-delay: 0.05s; }
.mobile-dropdown.visible .dropdown-nav a:nth-child(2) { animation-delay: 0.1s; }
.mobile-dropdown.visible .dropdown-nav a:nth-child(3) { animation-delay: 0.15s; }
.mobile-dropdown.visible .dropdown-nav a:nth-child(4) { animation-delay: 0.2s; }
.mobile-dropdown.visible .dropdown-nav a:nth-child(5) { animation-delay: 0.25s; }

/* BREAKPOINT ISOLATION STYLES */
/* BULLETPROOF BREAKPOINT ISOLATION SYSTEM */
/* Created: September 4, 2025 */
/* Purpose: Absolute separation between mobile, tablet, and desktop CSS */

/* ===== CSS CUSTOM PROPERTIES FOR COMPLETE ISOLATION ===== */
:root {
    /* Desktop variables - NEVER modified by responsive breakpoints */
    --desktop-container-width: 1440px;
    --desktop-content-width: 1360px;
    --desktop-padding: 40px;
    --desktop-gap: 2rem;
    --desktop-font-large: 56px;
    --desktop-font-medium: 21px;
    --desktop-font-small: 16px;
    --desktop-border-radius: 24px;
    
    /* Color variables - consistent across all breakpoints */
    --brand-primary: #4eb84a;
    --brand-dark: #030300;
    --brand-dark-blue: #112437;
    --text-gray: #636363;
    --background-white: #ffffff;
}

/* ===== STRICT DESKTOP PROTECTION (≥1024px) ===== */
/* HIGHEST SPECIFICITY - CANNOT BE OVERRIDDEN */
@media screen and (min-width: 1024px) {
    html body {
        min-width: 1024px !important; /* Absolute desktop layout protection */
    }
    
    /* Desktop namespace - completely isolated */
    .desktop-protected,
    .desktop-layout,
    .desktop-container {
        /* These classes are ONLY active on desktop */
        /* Mobile/tablet CSS cannot touch these */
    }
    
    /* Desktop-only custom properties */
    :root {
        --current-breakpoint: "desktop";
        --current-padding: var(--desktop-padding);
        --current-gap: var(--desktop-gap);
        --current-font-large: var(--desktop-font-large);
    }
}

/* ===== TABLET ISOLATION (768px-1023px) ===== */
/* Explicit boundaries - no overlap with desktop or mobile */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Tablet-specific custom properties */
    :root {
        --tablet-padding: 24px;
        --tablet-gap: 1.5rem;
        --tablet-font-large: 44px;
        --tablet-font-medium: 20px;
        --tablet-font-small: 15px;
        --tablet-border-radius: 20px;
        
        /* Active tablet variables */
        --current-breakpoint: "tablet";
        --current-padding: var(--tablet-padding);
        --current-gap: var(--tablet-gap);
        --current-font-large: var(--tablet-font-large);
    }
    
    /* Tablet namespace - isolated from desktop and mobile */
    .tablet-only,
    .tablet-layout,
    .tablet-container {
        /* These classes are ONLY active on tablet */
    }
    
    /* Tablet portrait-specific rules */
    @media screen and (orientation: portrait) {
        .tablet-portrait-only {
            /* Portrait tablet only */
        }
    }
    
    /* Tablet landscape-specific rules */
    @media screen and (orientation: landscape) {
        .tablet-landscape-only {
            /* Landscape tablet only */
        }
    }
}

/* ===== MOBILE ISOLATION (≤767px) ===== */
/* Complete isolation from tablet and desktop */
@media screen and (max-width: 767px) {
    /* Mobile-specific custom properties */
    :root {
        --mobile-padding: 16px;
        --mobile-gap: 1rem;
        --mobile-font-large: 32px;
        --mobile-font-medium: 18px;
        --mobile-font-small: 14px;
        --mobile-border-radius: 16px;
        
        /* Active mobile variables */
        --current-breakpoint: "mobile";
        --current-padding: var(--mobile-padding);
        --current-gap: var(--mobile-gap);
        --current-font-large: var(--mobile-font-large);
    }
    
    /* Mobile namespace - completely isolated */
    .mobile-only,
    .mobile-layout,
    .mobile-container {
        /* These classes are ONLY active on mobile */
    }
}

/* ===== MOBILE PORTRAIT ISOLATION ===== */
@media screen and (max-width: 767px) and (orientation: portrait) {
    :root {
        --current-orientation: "portrait";
        --current-layout: "vertical-stack";
    }
    
    .mobile-portrait-only {
        /* Portrait mobile exclusive */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: var(--mobile-gap) !important;
    }
}

/* ===== MOBILE LANDSCAPE ISOLATION ===== */
@media screen and (max-width: 767px) and (orientation: landscape) {
    :root {
        --mobile-landscape-padding: 12px;
        --mobile-landscape-gap: 0.75rem;
        --mobile-landscape-font-large: 28px;
        
        --current-orientation: "landscape";
        --current-layout: "horizontal-efficient";
        --current-padding: var(--mobile-landscape-padding);
        --current-gap: var(--mobile-landscape-gap);
        --current-font-large: var(--mobile-landscape-font-large);
    }
    
    .mobile-landscape-only {
        /* Landscape mobile exclusive */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--mobile-landscape-gap) !important;
    }
}

/* ===== ADVANCED LANDSCAPE MOBILE (≤1023px + landscape + ≤500px height) ===== */
/* Super-specific targeting to avoid desktop interference */
@media screen and (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
    :root {
        --landscape-mobile-height-constrained: true;
        --landscape-mobile-compact-padding: 8px;
        --landscape-mobile-compact-gap: 0.5rem;
    }
    
    .landscape-mobile-compact {
        /* Ultra-compact landscape mobile */
        padding: var(--landscape-mobile-compact-padding) !important;
        gap: var(--landscape-mobile-compact-gap) !important;
        height: auto !important;
        min-height: auto !important;
    }
}

/* ===== HOVER CAPABILITY ISOLATION ===== */
/* Desktop and hover-capable tablets */
@media screen and (hover: hover) and (min-width: 1024px) {
    .hover-desktop-only:hover {
        /* Hover effects only on desktop */
        transform: translateY(-2px);
        transition: transform 0.2s ease;
    }
}

/* Touch devices only */
@media screen and (hover: none) and (max-width: 1023px) {
    .touch-only:active {
        /* Touch feedback only */
        transform: scale(0.98);
        opacity: 0.8;
        transition: all 0.15s ease;
    }
}

/* ===== CONTAINER QUERY ISOLATION (Future-proofing) ===== */
/* Using container queries where supported for ultimate isolation */
@supports (container-type: inline-size) {
    .container-isolated {
        container-type: inline-size;
        container-name: main-content;
    }
    
    @container main-content (min-width: 1024px) {
        .container-desktop-only {
            /* Container-based desktop isolation */
        }
    }
    
    @container main-content (max-width: 1023px) {
        .container-mobile-tablet-only {
            /* Container-based mobile/tablet isolation */
        }
    }
}

/* ===== SPECIFICITY PROTECTION SYSTEM ===== */
/* High specificity rules that mobile/tablet cannot override */
html body .desktop-protected-high-specificity {
    /* Desktop protection with high specificity */
}

@media screen and (min-width: 1024px) {
    html body .desktop-absolute-protection {
        /* Maximum specificity for desktop protection */
    }
}

/* Lower specificity for mobile/tablet - cannot override desktop */
@media screen and (max-width: 1023px) {
    .mobile-tablet-lower-specificity {
        /* Intentionally lower specificity */
    }
}

/* ===== DEBUGGING UTILITIES ===== */
/* Visual indicators for current breakpoint (removable in production) */
.breakpoint-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99999;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    border-radius: 4px;
    pointer-events: none;
}

@media screen and (min-width: 1024px) {
    .breakpoint-indicator::before {
        content: "DESKTOP ≥1024px";
        background: green;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .breakpoint-indicator::before {
        content: "TABLET 768px-1023px";
        background: orange;
    }
}

@media screen and (max-width: 767px) {
    .breakpoint-indicator::before {
        content: "MOBILE ≤767px";
        background: red;
    }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
    .breakpoint-indicator::before {
        content: "MOBILE LANDSCAPE ≤767px";
        background: purple;
    }
}

@media screen and (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) {
    .breakpoint-indicator::before {
        content: "COMPACT LANDSCAPE ≤500px height";
        background: darkblue;
    }
}

/* ===== PERFORMANCE OPTIMIZATION FOR EACH BREAKPOINT ===== */
/* Desktop performance */
@media screen and (min-width: 1024px) {
    .desktop-optimized {
        /* Desktop-specific optimizations */
        will-change: auto; /* Desktop doesn't need aggressive optimization */
    }
}

/* Mobile/Tablet performance */
@media screen and (max-width: 1023px) {
    .mobile-tablet-optimized {
        /* Mobile performance optimizations */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: transform;
    }
}

/* ===== VIEWPORT OVERFLOW PROTECTION ===== */
/* Prevent mobile layouts from affecting desktop */
@media screen and (max-width: 1023px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
}

/* Desktop viewport protection */
@media screen and (min-width: 1024px) {
    html, body {
        overflow-x: auto; /* Normal desktop behavior */
        max-width: none; /* No viewport constraints */
    }
}

/* ===== ERROR PREVENTION ===== */
/* Catch-all rules to prevent cross-contamination */
@media screen and (min-width: 1024px) {
    /* Ensure mobile classes don't affect desktop */
    .mobile-only,
    .mobile-layout,
    .mobile-container,
    .tablet-only,
    .tablet-layout,
    .tablet-container {
        display: revert !important;
        position: revert !important;
        width: revert !important;
        height: revert !important;
    }
}

@media screen and (max-width: 767px) {
    /* Ensure desktop classes don't affect mobile */
    .desktop-protected,
    .desktop-layout,
    .desktop-container,
    .tablet-only,
    .tablet-layout,
    .tablet-container {
        /* Mobile shouldn't see these classes as active */
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Ensure desktop/mobile classes don't affect tablet */
    .desktop-protected,
    .desktop-layout,
    .desktop-container,
    .mobile-only,
    .mobile-layout,
    .mobile-container {
        /* Tablet shouldn't see these classes as active */
    }
}

/* ===== ACCESSIBILITY ISOLATION ===== */
/* Desktop accessibility */
@media screen and (min-width: 1024px) {
    .desktop-a11y {
        /* Desktop-specific accessibility features */
    }
}

/* Mobile/Tablet accessibility */
@media screen and (max-width: 1023px) {
    .mobile-tablet-a11y {
        /* Touch-specific accessibility features */
        min-height: 44px; /* iOS touch target minimum */
        min-width: 44px;
        touch-action: manipulation;
    }
}

/* ===== FINAL SAFETY NET ===== */
/* Last resort protection against any conflicts */
@media screen and (min-width: 1024px) {
    .ultimate-desktop-protection {
        /* If all else fails, these rules protect desktop */
        position: relative !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}