/* ==============================================
           ENHANCED MAIN STYLES WITH MODERN CSS
           Using CSS Custom Properties & Performance Optimizations
           ============================================== */

        /* CSS Reset with modern best practices */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Enhanced root styles */
        html {
            height: 100%;
            overflow: hidden;
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
            -moz-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            background-color: var(--color-black);
            font-family: var(--font-family-primary);
            font-size: var(--font-size-base);
            line-height: var(--leading-normal);
            color: var(--color-white);

            /* Performance optimizations */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;

            /* Touch optimizations */
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }



        /* Final CTA section animations for desktop */
        .final-cta-section .z-10 {
            position: relative;
            width: 100vw;
            height: 100vh;
            max-width: none;
        }

        .final-cta-container {
            position: relative;
            width: 100%;
            height: 100vh;
        }

        .final-cta-image {
            position: absolute;
            left: 76%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 600px;
            height: auto;
            opacity: 0;
            transition: all 1.2s ease-out;
            z-index: 1;
            pointer-events: none;
        }

        .final-cta-image.slide-in {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        .final-cta-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateY(30px);
            z-index: 2;
            opacity: 0;
            transition: all 0.8s ease-out;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 40px;
            max-width: 80vw;
            width: auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .final-cta-text.slide-in {
            opacity: 1;
            transform: translate(-50%, -50%) translateY(0);
        }

        @keyframes logoFloat {

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

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


        #sections-container {
            height: 100vh;
            width: 100%;
            position: relative;
            transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            /* "Bouncy" transition */
            z-index: 1;
        }

        /* Global section constraints */
        .section {
            min-height: 100vh;
            height: 100vh;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            position: relative;
        }

        #why-us-content {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 35%;
            height: 100vh;
            z-index: 10;
            padding: 60px 40px;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(15px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            text-align: right;
        }

        #why-us-content a {
            margin-left: 5rem;
        }

        h2 {
            color: #FF6135;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 97, 53, 0.5);
            font-weight: 900;
        }

        h1 {
            color: #FF6135;
            /* Custom color for hero */
            text-shadow: 2px 2px 4px rgb(226, 214, 214), 0 0 10px rgb(255, 255, 255);
            font-weight: bold;
        }

        /* Mobile optimizations for sections container */
        @media (max-width: 768px) {
            #sections-container {
                transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
                /* Same bouncy transition as desktop */
            }

            body {
                overflow-x: hidden;
                /* Prevent horizontal scroll */
            }

            /* Ensure viewport units work correctly on mobile */
            #sections-container .section {
                min-height: 100vh;
                height: 100vh;
                /* Dynamic viewport height for mobile browsers */
                padding: 1rem !important;
                overflow: hidden;
                box-sizing: border-box;
            }
        }

        /* Extra tight mobile responsiveness for small phones */
        @media (max-width: 480px) {
            #sections-container .section {
                padding: 0.5rem !important;
                height: 100vh;
                overflow: hidden;
            }

            /* Tighter text spacing */
            h1,
            h2,
            h3 {
                line-height: 1.1 !important;
                margin-bottom: 0.75rem !important;
            }

            p {
                line-height: 1.4 !important;
                margin-bottom: 0.5rem !important;
            }
        }

        /* Ultra-tight for very small screens */
        @media (max-width: 375px) {
            #sections-container .section {
                padding: 0.25rem !important;
                height: 100vh;
                overflow: hidden;
            }

            .max-w-6xl,
            .max-w-5xl,
            .max-w-4xl,
            .max-w-3xl,
            .max-w-2xl {
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0.5rem !important;
            }
        }

        /* Desktop background images (16:9) */
        #story {
            background-image: url('./assets/story.JPG');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        /* Mobile background images (9:16) */
        @media (max-width: 768px) {
            #story {
                background-image: url('./assets/story-mobile.png');
                background-attachment: scroll;
                /* Fixed attachment can cause issues on mobile */
            }

            #why-us {
                background-image: url('./assets/services-mobile.png');
                background-attachment: scroll;
            }

            #pricing {
                background-image: url('./assets/pricing-mobile.JPG');
                background-attachment: scroll;
                /* Fixed attachment can cause issues on mobile */
            }

            #why-us a {
                margin-left: 0 !important;
                /* Reset margin for mobile */
            }
        }

        /* Enhanced services section for small phones */
        .sliding-nati-image {
            height: 100vh !important;
            /* Even bigger on small phones */
            right: -35% !important;
        }

        section#services.active .sliding-nati-image {
            display: absolute;
            transform: scale(1.25) translateY(-40%) translateX(-35%) !important;
        }

        #services h2 {
            font-size: 2rem !important;
            margin-bottom: 0.75rem !important;
        }

        #services h3 {
            font-size: 1.25rem !important;
        }

        #services .backdrop-blur-sm {
            padding: 1rem !important;
        }

        #services ul li {
            font-size: 0.9rem !important;
            line-height: 1.3 !important;
        }


        /* Enhanced services section for small phones */
        .sliding-nati-image {
            height: 120% !important;
            /* Maximum size for tiny screens */
            right: -40% !important;
        }

        section#services.active .sliding-nati-image {
            transform: translateY(-50%) translateX(-15%) !important;
        }

        #services h2 {
            font-size: 1.75rem !important;
            line-height: 1.1 !important;
            margin-bottom: 0.5rem !important;
        }

        #services h3 {
            font-size: 1.1rem !important;
            margin-bottom: 0.5rem !important;
        }

        #services .backdrop-blur-sm {
            padding: 0.75rem !important;
            margin-bottom: 0.75rem !important;
        }

        #services ul li {
            font-size: 0.8rem !important;
            line-height: 1.2 !important;
            margin-bottom: 0.25rem !important;
        }

        #philosophy-content p {
            font-size: 0.8rem !important;
        }


        #why-us-content {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 35%;
            height: 100vh;
            z-index: 10;
            padding: 60px 40px;
            background-color: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(15px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            text-align: right;
        }

        /* Desktop-only alignment override */
        @media (min-width: 769px) {
            #why-us-content {
                align-items: flex-end !important;
            }
        }

        /* Mobile adjustments for why-us-content */
        @media (max-width: 768px) {
            #why-us-content {
                width: auto;
                position: static;
                height: auto;
                padding: 2rem 1rem;
                background-color: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(10px);
                border-radius: 0;
                margin: 0;
                max-width: 95%;
                box-sizing: border-box;
                align-items: center;
                text-align: center;
            }
        }

        .section {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            position: relative;
            overflow: hidden;
            box-sizing: border-box;
        }

        /* Hero section specific - handled in hero.css */
        /* .hero-section padding removed to prevent conflicts */

        /* Mobile-specific section adjustments */
        @media (max-width: 768px) {
            .section {
                padding: 0.5rem;
                min-height: 100vh;
                height: 100vh;
                /* Force exact height on mobile */
                max-height: 100vh;
                /* Prevent overflow */
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
            }

            .section>div,
            .section .z-10,
            .section .max-w-6xl,
            .section .max-w-5xl,
            .section .max-w-4xl {
                width: 100% !important;
                max-width: 95% !important;
                max-height: 90vh !important;
                box-sizing: border-box !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                padding: 1rem 0.5rem !important;
                margin: 0 auto !important;
            }

            /* Scale down content that's too large - exclude hero section */
            .section:not(:first-child) h1 {
                font-size: 1.875rem !important;
                /* 30px */
                line-height: 1.1 !important;
                margin-bottom: 0.5rem !important;
            }

            .section:not(:first-child) h2 {
                font-size: 1.5rem !important;
                /* 24px */
                line-height: 1.2 !important;
                margin-bottom: 0.75rem !important;
            }

            .section:not(:first-child) p {
                font-size: 0.875rem !important;
                /* 14px */
                line-height: 1.4 !important;
                margin-bottom: 0.5rem !important;
            }

            .section ul,
            .section .grid {
                margin-bottom: 1rem !important;
            }

            .section li {
                font-size: 0.875rem !important;
                line-height: 1.3 !important;
                margin-bottom: 0.25rem !important;
            }
        }

        @media (max-width: 480px) {
            .section {
                padding: 0.5rem 0.125rem !important;
            }

            .section>div,
            .section .z-10 {
                max-height: 85vh !important;
                padding: 0.5rem 0.25rem !important;
            }

            /* Keep hero large even on extra small screens */
            .section:first-child h1 {
                font-size: 2rem !important;
                /* Keep hero title prominent */
            }

            .section:not(:first-child) h1 {
                font-size: 1.5rem !important;
                /* 24px */
            }

            .section:not(:first-child) h2 {
                font-size: 1.25rem !important;
                /* 20px */
            }

            /* Services section mobile - small screens */
            #services {
                padding: 1.5rem 0.5rem !important;
            }

            #services h2 {
                font-size: 2rem !important;
                margin-bottom: 1.5rem !important;
            }

            #services .backdrop-blur-sm {
                padding: 1rem !important;
                max-width: 95% !important;
            }

            #services h3 {
                font-size: 1.25rem !important;
            }

            #services ul {
                font-size: 0.8rem !important;
            }
        }

        /* Mobile logo and button adjustments - preserve hero */
        @media (max-width: 768px) {

            /* Hero logo sizing moved to hero.css to prevent conflicts */
            /* Keeping mobile-specific overrides only when needed */

            /* Hero section specific - keep original sizing */
            .section:first-child h1 {
                font-size: 2.5rem !important;
                /* Keep hero title large */
                line-height: 1.2 !important;
                margin-bottom: 1rem !important;
            }

            .section:first-child p {
                font-size: 1rem !important;
                /* Keep hero text readable */
                line-height: 1.5 !important;
                margin-bottom: 2rem !important;
            }

            .section:first-child a[class*="bg-"] {
                padding: 1rem 2rem !important;
                /* Keep hero button large */
                font-size: 1rem !important;
            }

            /* Other sections - smaller sizing */
            .section:not(:first-child) a[class*="bg-"],
            .section:not(:first-child) button {
                padding: 0.5rem 1rem !important;
                font-size: 0.75rem !important;
                margin-top: 0.5rem !important;
            }

            /* Make tables fit */
            .section table {
                font-size: 0.625rem !important;
                width: 100% !important;
            }

            .section th,
            .section td {
                padding: 0.25rem !important;
                font-size: 0.625rem !important;
            }
        }

        .cursor-grab {
            cursor: grab;
        }

        .active.cursor-grabbing {
            cursor: grabbing;
        }

        /* Comprehensive Responsive Design */

        /* Remove conflicting styles - handled in section-specific rules */

        /* Additional mobile grid and layout fixes */
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr !important;
                gap: 0.75rem !important;
            }

            /* Fix list alignment for RTL */
            ul {
                text-align: right !important;
                margin: 0 auto !important;
                max-width: 100% !important;
            }

            li {
                justify-content: flex-end !important;
                text-align: right !important;
                word-wrap: break-word !important;
            }

            /* Video stays behind content */
            video {
                z-index: -1 !important;
            }
        }

        /* Touch-friendly improvements */
        @media (max-width: 768px) {

            /* Larger touch targets */
            button,
            a {
                min-height: 44px;
                min-width: 44px;
            }

            /* Better spacing for touch */
            .space-y-4>*+* {
                margin-top: 1.5rem !important;
            }

            .gap-8 {
                gap: 1.5rem !important;
            }
        }

        /* Navigation dots styling and mobile positioning */
        #nav-dots {
            position: fixed;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            z-index: 50;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        #nav-dots button {
            width: 10px !important;
            height: 10px !important;
            border-radius: 50% !important;
            border: none !important;
            background-color: rgba(156, 163, 175, 0.6) !important;
            transition: all 0.3s ease !important;
            cursor: pointer !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        #nav-dots button:hover {
            background-color: rgba(255, 255, 255, 0.8) !important;
            transform: scale(1.1) !important;
        }

        #nav-dots button.bg-white {
            background-color: white !important;
            transform: scale(1.05) !important;
        }

        /* Larger mobile navigation dots for better usability */
        @media (max-width: 768px) {
            #nav-dots {
                right: 0.5rem !important;
                gap: 0.5rem !important;
            }

            #nav-dots button,
            #nav-dots button.w-3,
            #nav-dots button.h-3 {
                width: 12px !important;
                height: 12px !important;
                min-width: 12px !important;
                min-height: 12px !important;
                max-width: 12px !important;
                max-height: 12px !important;
            }

            #nav-dots button:hover {
                transform: scale(1.1) !important;
            }

            #nav-dots button.bg-white,
            #nav-dots button.scale-125 {
                transform: scale(1.05) !important;
            }
        }

        @media (max-width: 480px) {
            #nav-dots {
                right: 0.375rem !important;
                gap: 0.375rem !important;
            }

            #nav-dots button,
            #nav-dots button.w-3,
            #nav-dots button.h-3 {
                width: 10px !important;
                height: 10px !important;
                min-width: 10px !important;
                min-height: 10px !important;
                max-width: 10px !important;
                max-height: 10px !important;
            }
        }

        /* Safe area support for devices with notches */
        @supports (padding: max(0px)) {
            body {
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
            }

            .section {
                padding-top: max(1rem, env(safe-area-inset-top));
                padding-bottom: max(1rem, env(safe-area-inset-bottom));
            }

            /* Mobile nav-dots already handled above */
            @media (min-width: 769px) {
                #nav-dots {
                    right: max(1rem, env(safe-area-inset-right));
                }
            }
        }

        /* Ultra-tight mobile optimizations for touch targets */
        @media (max-width: 768px) {

            /* Ensure touch targets are at least 44px */
            button,
            a,
            input,
            select,
            textarea {
                min-height: 44px;
                min-width: 44px;
                touch-action: manipulation;
            }

            /* Prevent zoom on form inputs */
            input,
            select,
            textarea {
                font-size: 16px !important;
            }

            /* Better touch scrolling */
            body,
            html {
                -webkit-overflow-scrolling: touch;
                scroll-behavior: smooth;
            }

            /* Prevent horizontal overflow */
            * {
                max-width: 100%;
                box-sizing: border-box;
            }

            /* Responsive images */
            img {
                height: auto;
                max-width: 100%;
            }

            /* Better text readability */
            p,
            li,
            span {
                word-wrap: break-word;
                hyphens: auto;
            }

            /* Enhanced CTA buttons for mobile */
            .px-8,
            .px-6,
            .px-4 {
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
            }

            .py-4,
            .py-3 {
                padding-top: 1rem !important;
                padding-bottom: 1rem !important;
                min-height: 48px !important;
            }

            /* Ensure all clickable elements are touch-friendly */
            a,
            button {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                text-align: center !important;
                min-height: 44px !important;
                padding: 0.75rem 1rem !important;
            }

            /* Better spacing for sections */
            .section {
                padding: 1rem 0.75rem !important;
            }

            /* Grid optimizations */
            .grid {
                grid-template-columns: 1fr !important;
                gap: 1rem !important;
            }

            /* Max width containers */
            .max-w-6xl,
            .max-w-5xl,
            .max-w-4xl,
            .max-w-3xl {
                max-width: 100% !important;
                padding: 0 0.5rem !important;
            }
        }

        /* Improve mobile performance */
        @media (max-width: 768px) {
            * {
                -webkit-tap-highlight-color: transparent;
            }

            body {
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: none;
            }

            /* Optimize animations for mobile */
            .section {
                will-change: transform;
            }

            #sections-container {
                backface-visibility: hidden;
                perspective: 1000px;
            }
        }

        /* High DPI display optimizations */
        @media (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi) {

            .hero-logo,
            img {
                image-rendering: -webkit-optimize-contrast;
                image-rendering: crisp-edges;
            }
        }

        /* Additional responsive fixes for specific sections */
        @media (max-width: 768px) {

            /* Pricing table mobile optimization */
            .overflow-x-auto {
                -webkit-overflow-scrolling: touch;
            }

            table {
                font-size: 0.875rem !important;
            }

            th,
            td {
                padding: 0.5rem !important;
                min-width: 80px;
            }

            /* Services cards responsive */
            .bg-gray-900 {
                margin-bottom: 1rem !important;
                padding: 1.5rem !important;
            }

            /* Services section mobile */
            #services {
                padding: 2rem 1rem !important;
            }

            #services h2 {
                font-size: 2.5rem !important;
                margin-bottom: 2rem !important;
            }

            #services .grid {
                grid-template-columns: 1fr !important;
                gap: 1.5rem !important;
            }

            #services .backdrop-blur-sm {
                padding: 1.5rem !important;
                margin: 0 auto !important;
                max-width: 90% !important;
            }

            #services h3 {
                font-size: 1.5rem !important;
                margin-bottom: 1rem !important;
            }

            #services ul {
                font-size: 0.9rem !important;
                line-height: 1.4 !important;
            }

            #services li {
                margin-bottom: 0.5rem !important;
            }

            /* Ensure proper text wrapping */
            h1,
            h2,
            h3,
            p,
            li {
                word-wrap: break-word;
                hyphens: auto;
            }

            /* Fix overflow issues */
            * {
                box-sizing: border-box;
            }

            .section>* {
                max-width: 100%;
                overflow-x: hidden;
            }
        }

        @media (max-width: 460px) {
            .section {
                padding: 0.125rem !important;
            }

            .max-w-6xl,
            .max-w-5xl,
            .max-w-4xl {
                max-width: 98% !important;
                padding: 0 0.5rem !important;
            }

            h1 {
                font-size: 1.75rem !important;
            }

            h2 {
                font-size: 1.5rem !important;
            }

            /* Services section - extra small screens */
            #services {
                padding: 1rem 0.25rem !important;
            }

            #services h2 {
                font-size: 1.75rem !important;
                margin-bottom: 1rem !important;
            }

            #services .backdrop-blur-sm {
                padding: 0.75rem !important;
                max-width: 98% !important;
            }

            #services h3 {
                font-size: 1.1rem !important;
            }

            #services ul {
                font-size: 0.75rem !important;
            }
        }

        /* Accessibility Floating Menu */
        #accessibility-floating-menu {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
            font-family: 'Heebo', sans-serif;
        }

        .accessibility-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .accessibility-btn:hover {
            background: #e64a19;
            transform: scale(1.1);
        }

        .accessibility-panel {
            position: absolute;
            bottom: 70px;
            left: 0;
            width: 320px;
            max-height: 500px;
            background: #232323;
            border-radius: 18px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.3s ease;
            overflow: hidden;
            color: white;
            direction: rtl;
        }

        .accessibility-panel.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .accessibility-header {
            background: #ff7043;
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .accessibility-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
        }

        #close-accessibility {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.2s;
        }

        #close-accessibility:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .accessibility-content {
            padding: 20px;
            max-height: 400px;
            overflow-y: auto;
        }

        .accessibility-controls {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #444;
        }

        .accessibility-control-btn {
            background: #25D366;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-family: 'Heebo', sans-serif;
            font-size: 14px;
            font-weight: bold;
            margin: 4px;
            transition: all 0.2s;
            min-width: 100px;
        }

        .accessibility-control-btn:hover {
            background: #128C7E;
            transform: scale(1.05);
        }

        .font-size-controls {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }

        .accessibility-info h4,
        .accessibility-info h5 {
            color: #ff7043;
            margin: 15px 0 8px 0;
            font-size: 16px;
        }

        .accessibility-info h5 {
            font-size: 14px;
            margin-top: 12px;
        }

        .accessibility-info p {
            font-size: 14px;
            line-height: 1.5;
            margin: 8px 0;
        }

        .accessibility-info ul {
            font-size: 13px;
            line-height: 1.4;
            margin: 8px 0;
            padding-right: 20px;
        }

        .accessibility-info li {
            margin-bottom: 4px;
        }

        .accessibility-contact {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #444;
        }

        .accessibility-contact a {
            color: #25D366;
            text-decoration: none;
            font-weight: bold;
        }

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

        /* Mobile adjustments for accessibility menu */
        @media (max-width: 768px) {
            #accessibility-floating-menu {
                bottom: 15px;
                left: 15px;
            }

            .accessibility-btn {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }

            .accessibility-panel {
                width: 280px;
                max-height: 400px;
            }

            .accessibility-content {
                padding: 15px;
            }
        }

        @media (max-width: 480px) {
            .accessibility-panel {
                width: 260px;
                max-height: 350px;
                left: -10px;
            }

            .accessibility-content {
                padding: 12px;
            }

            .accessibility-info h4,
            .accessibility-info h5 {
                font-size: 14px;
            }

            .accessibility-info p,
            .accessibility-info ul {
                font-size: 12px;
            }
        }

        /* Contact Form Styles */
        .contact-input {
            width: 100%;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: white;
            font-family: 'Heebo', sans-serif;
            font-size: 16px;
            transition: all 0.3s ease;
            direction: rtl;
            text-align: right;
        }

        .contact-input:focus {
            outline: none;
            border-color: #FF6135;
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 0 3px rgba(255, 97, 53, 0.2);
        }

        .contact-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
            direction: rtl;
            text-align: right;
        }

        .contact-submit-btn {
            width: 100%;
            padding: 16px 24px;
            background: linear-gradient(135deg, #FF6135, #e64a19);
            color: white;
            border: none;
            border-radius: 12px;
            font-family: 'Heebo', sans-serif;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 97, 53, 0.3);
        }

        .contact-submit-btn:hover {
            background: linear-gradient(135deg, #e64a19, #d84315);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 97, 53, 0.4);
        }

        .contact-submit-btn:active {
            transform: translateY(0);
        }

        .contact-submit-btn:disabled {
            background: #666;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .contact-alt-btn {
            display: inline-block;
            padding: 12px 24px;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            transition: all 0.3s ease;
            text-align: center;
            min-width: 200px;
        }

        .contact-alt-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .form-status {
            margin-top: 16px;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .form-status.success {
            background: rgba(76, 175, 80, 0.2);
            border: 2px solid #4CAF50;
            color: #4CAF50;
            opacity: 1;
        }

        .form-status.error {
            background: rgba(244, 67, 54, 0.2);
            border: 2px solid #f44336;
            color: #f44336;
            opacity: 1;
        }

        .form-group label {
            color: #FF6135;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* Smooth scroll behavior for CTAs */
        .scroll-to-contact {
            scroll-behavior: smooth;
        }

        /* Mobile adjustments for contact form */
        @media (max-width: 768px) {
            .contact-input {
                font-size: 16px;
                /* Prevent zoom on iOS */
                padding: 14px 16px;
            }

            .contact-submit-btn {
                padding: 18px 24px;
                font-size: 16px;
            }

            .contact-alt-btn {
                padding: 14px 20px;
                min-width: 100%;
                margin-bottom: 12px;
            }

            .contact-alternatives .flex {
                flex-direction: column;
            }

            /* Remove conflicting styles - handled in contact.css */
        }

        @media (max-width: 480px) {
            .contact-input {
                padding: 14px 16px;
                /* Bigger touch targets */
                font-size: 16px;
                /* Keep 16px to prevent zoom */
                min-height: 50px;
                /* Ensure adequate touch target */
                border-radius: 8px;
            }

            .contact-submit-btn {
                padding: 18px 24px;
                /* Bigger touch target */
                font-size: 16px;
                min-height: 56px;
                /* Larger touch target for buttons */
                border-radius: 8px;
            }

            #contact {
                padding: 1rem 0.5rem !important;
            }

            #contact h2 {
                font-size: 2rem !important;
                margin-bottom: 0.75rem !important;
            }

            #contact p {
                font-size: 1rem !important;
                margin-bottom: 1.5rem !important;
            }

            #contact .grid {
                gap: 1rem !important;
            }

            #contact .space-y-6>*+* {
                margin-top: 1rem !important;
            }
        }

        @media (max-width: 375px) {
            #contact {
                padding: 1rem 0.25rem !important;
            }

            #contact h2 {
                font-size: 1.75rem !important;
            }

            #contact p {
                font-size: 0.9rem !important;
            }

            .contact-input {
                padding: 10px 12px;
                font-size: 16px;
            }

            .contact-submit-btn {
                padding: 14px 18px;
            }
        }

        @media (min-width: 800) and (max-width: 1023px) {
            

        }