/* Super Pro Variables */
    :root {
        --bg-midnight: #0B0F19;
        --text-gold: #D4AF37;
        --glass-border: rgba(255, 255, 255, 0.1);
        --headerH: 80px;
    }

    /* CSS Top Page Loading Animation */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3.5px;
        background: linear-gradient(90deg, transparent, #2563eb, #fbbf24, #1a1f71, transparent);
        background-size: 200% 100%;
        z-index: 999999;
        animation: page-load-anim 1.5s ease-out forwards;
        pointer-events: none;
    }
    @keyframes page-load-anim {
        0% { transform: translateX(-100%); opacity: 1; }
        60% { transform: translateX(0%); opacity: 1; }
        99% { transform: translateX(100%); opacity: 0; }
        100% { transform: translateX(100%); opacity: 0; display: none; }
    }

    html {
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }

    body {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
        background-color: #F8FAFC;
        color: #1E293B;
        overflow-x: hidden;
        padding-top: var(--headerH, 80px);
        margin: 0;
    }

    img,
    video,
    canvas,
    svg {
        max-width: 100%;
        height: auto;
    }

    table {
        width: 100%;
    }

    [style*="margin-top: 80px"],
    [style*="margin-top:80px"] {
        margin-top: 0 !important;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    }

    /* Glassmorphism Utilities */
    .glass-panel {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
    }
    
    .glass-dark {
        background: rgba(11, 15, 25, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Text Gradients */
    .text-gradient-gold {
        background: linear-gradient(135deg, #D4AF37, #F3E5AB, #AA8C2C);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .text-gradient-blue {
        background: linear-gradient(135deg, #2563EB, #60A5FA);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Button Glows */
    .btn-glow-gold {
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
        transition: all 0.3s ease;
    }
    .btn-glow-gold:hover {
        box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
        transform: translateY(-2px);
    }

    /* Card Hover 3D */
    .hover-card-3d {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hover-card-3d:not(.tilt-3d-lite):hover {
        transform: translateY(-5px) scale(1.01);
        box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
    }

    @media (hover: hover) and (pointer: fine) {
        .tilt-3d-lite {
            transform: translateZ(0);
            will-change: transform;
            transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .tilt-3d-soft,
        .tilt-3d-angle {
            transform: translateZ(0);
            will-change: transform;
            transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .tilt-3d-lite::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            background: radial-gradient(140% 80% at 20% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%);
            opacity: 0;
            transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
            pointer-events: none;
        }

        .tilt-3d-soft::before,
        .tilt-3d-angle::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            opacity: 0;
            pointer-events: none;
            transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .tilt-3d-soft::before {
            background: radial-gradient(120% 80% at 30% 10%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%);
        }

        .tilt-3d-angle::before {
            background: radial-gradient(140% 90% at 80% 10%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 58%);
        }

        .tilt-3d-lite:hover {
            transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
            box-shadow: 0 24px 60px -30px rgba(2, 6, 23, 0.35);
        }

        .tilt-3d-soft:hover {
            transform: perspective(1100px) rotateX(1.5deg) rotateY(1.5deg) translateY(-3px);
            box-shadow: 0 20px 56px -34px rgba(2, 6, 23, 0.32);
        }

        .tilt-3d-angle:hover {
            transform: perspective(1000px) rotateX(3deg) rotateY(-4deg) translateY(-6px);
            box-shadow: 0 30px 70px -38px rgba(2, 6, 23, 0.4);
        }

        .tilt-3d-lite:hover::before {
            opacity: 1;
        }

        .tilt-3d-soft:hover::before,
        .tilt-3d-angle:hover::before {
            opacity: 1;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .tilt-3d-lite,
        .tilt-3d-lite:hover {
            transition: none !important;
            transform: none !important;
        }
        .tilt-3d-soft,
        .tilt-3d-soft:hover,
        .tilt-3d-angle,
        .tilt-3d-angle:hover {
            transition: none !important;
            transform: none !important;
        }
        .tilt-3d-lite::before {
            display: none !important;
        }
        .tilt-3d-soft::before,
        .tilt-3d-angle::before {
            display: none !important;
        }
    }
    
    /* Scrollbar — see consolidated rules in SCROLLBAR MANAGEMENT section below */
    
    /* Button Styles */
    .btn-primary {
        background: linear-gradient(135deg, #2563eb, #f2750a);
        color: white;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
        background: linear-gradient(135deg, #1d4ed8, #e35d05);
    }
    
    .btn-secondary {
        background: white;
        color: #334155;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
        border: 2px solid #e2e8f0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    
    .btn-secondary:hover {
        background: #f8fafc;
        border-color: #2563eb;
        color: #2563eb;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* Card Styles - Premium Professional Cards */
    .card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .card:not(.tilt-3d-lite):hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        transform: translateY(-4px);
        border-color: rgba(37, 99, 235, 0.1);
    }
    
    /* Responsive Card Padding */
    @media (max-width: 768px) {
        .card {
            padding: 1rem;
            border-radius: 8px;
        }
    }
    

    /* Container Custom - Max Width Container */
    .container-custom {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    @media (max-width: 768px) {
        .container-custom {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }
    
    /* Section Padding - Consistent Vertical Spacing */
    .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    @media (max-width: 768px) {
        .section-padding {
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
    }
    
    /* Text Gradient - Beautiful Gradient Text */
    .text-gradient {
        background: linear-gradient(135deg, #2563eb, #f2750a);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Input Field - Form Inputs */
    .input-field {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: white;
        color: #1e293b;
    }
    
    .input-field:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }
    
    .input-field::placeholder {
        color: #94a3b8;
    }
    /* Header Backdrop Blur */
    /* (duplicate .card block removed — see primary .card rules above) */
    .backdrop-blur-custom {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* ============================================
       SCROLLBAR MANAGEMENT - Professional Solution
       ============================================ */
    
    /* 1. Global: Prevent Horizontal Overflow */
    html, body {
        overflow-x: clip !important;
        width: 100%;
        margin: 0;
    }
    
    /* 2. Main Page Scrollbar - Subtle Styling */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.45);
        border-radius: 999px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(100, 116, 139, 0.7);
    }

    /* (Duplicate body::before removed — primary rule is above, lines ~302-321) */

    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
    }
    
    /* 3. Header & Navigation - No Scrollbars */
    #main-header,
    #main-header *,
    header nav,
    .nav-link-pro,
    .mega-dropdown,
    .dropdown-menu,
    .login-dropdown {
        overflow: visible !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    #main-header::-webkit-scrollbar,
    #main-header *::-webkit-scrollbar,
    header nav::-webkit-scrollbar,
    .mega-dropdown::-webkit-scrollbar,
    .dropdown-menu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    
    /* 4. Hero Slider - No Scrollbars */
    .hero-slider,
    .hero-slider .container-custom,
    .hero-slider .slide,
    .hero-slider .slide > div,
    .hero-slider .slide > div > div {
        overflow: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .hero-slider::-webkit-scrollbar,
    .hero-slider *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* 5. Utility Class: Hide Scrollbar on Any Element */
    .no-scrollbar {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    
    /* ============================================
   HERO SLIDER STYLES
   ============================================ */

/* Fix: Hero slider content cut on small viewports */
#home-hero .slide > div[class*="min-h"],
.hero-slider .slide > div {
    min-height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-height: 700px) {
    #home-hero .slide > div[class*="min-h"],
    .hero-slider .slide > div {
        min-height: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Fix: Side dock buttons overlap fix */
#home-hero,
.hero-slider .slide,
.hero-slider .slide > div {
    overflow: hidden !important;
}
    
    /* Base Styles */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* ============================================
       ACCESSIBILITY - Skip to Content & Focus
       ============================================ */
    
    /* Skip-to-content link (WCAG 2.4.1) */
    .skip-to-content {
        position: absolute;
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.75rem 1.5rem;
        background: #2563eb;
        color: #fff;
        font-weight: 700;
        font-size: 0.9rem;
        border-radius: 0 0 8px 8px;
        z-index: 100000;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
        transition: top 0.2s ease;
    }
    
    .skip-to-content:focus {
        top: 0;
        outline: none;
    }
    
    /* Enhanced focus ring for keyboard navigation (WCAG 2.4.7) */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid #2563eb;
        outline-offset: 2px;
        border-radius: 4px;
    }
    
    /* Remove focus ring for mouse users */
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible) {
        outline: none;
    }
    
    body {
        font-family: 'Inter', sans-serif;
        line-height: 1.6;
        color: #1e293b;
        background-color: #ffffff;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Responsive headings */
    h1 { font-size: clamp(1.4rem, 4.2vw, 2.1rem); }
    h2 { font-size: clamp(1.25rem, 3.4vw, 1.7rem); }
    h3 { font-size: clamp(1.125rem, 2.7vw, 1.35rem); }
    h4 { font-size: clamp(1rem, 2.2vw, 1.15rem); }
    p, li { font-size: clamp(0.92rem, 2vw, 0.98rem); }

    /* Images/videos should never overflow */
    img, video { max-width: 100%; height: auto; }
    
    /* Mobile Responsive */
    @media (max-width: 768px) {
        .section-padding {
            padding-top: 3rem;
            padding-bottom: 3rem;
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }
    
    /* Hero Slider Styles - Fixed Positioning */
    .hero-slider {
        position: relative;
        width: 100%;
        height: clamp(460px, 78vh, 860px);
        min-height: 460px;
        max-height: 860px;
        overflow: hidden;
    }
    
    #home-hero {
        margin-top: calc(-1 * var(--headerH));
        padding-top: 0;
    }
    
    #home-hero .hero-slider {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        height: clamp(520px, calc(100svh - var(--headerH)), 980px);
        min-height: clamp(520px, calc(100svh - var(--headerH)), 980px);
        max-height: none;
    }
    
    #home-hero .slide,
    #home-hero .slide > div {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        height: clamp(520px, calc(100svh - var(--headerH)), 980px);
        min-height: clamp(520px, calc(100svh - var(--headerH)), 980px);
    }
    
    @media (min-width: 1200px) and (max-width: 1535px) {
        :root {
            --headerH: 72px;
        }
    }
    @media (max-width: 1024px) {
        :root {
            --headerH: 64px;
        }
    }
    /* Note: Scrollbar hiding for slider is handled in the SCROLLBAR MANAGEMENT section above */
    
    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
        z-index: 1;
        display: flex;
        align-items: center;
    }
    
    .slide.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 2;
    }
    
    .hero-slider .slide h1 {
        font-size: clamp(1.5rem, 3.5vw, 3rem) !important;
        line-height: 1.2 !important;
    }
    
    .hero-slider .slide h2 {
        font-size: clamp(1rem, 2vw, 1.5rem) !important;
        line-height: 1.3 !important;
    }
    
    .hero-slider .slide p {
        font-size: clamp(0.9rem, 1.3vw, 1.05rem) !important;
        line-height: 1.5 !important;
    }
    
    .hero-slider .container-custom {
        height: 100%;
        display: flex;
        align-items: center;
        padding-top: clamp(0.75rem, 3vh, 1.75rem) !important;
        padding-bottom: clamp(0.75rem, 3vh, 1.75rem) !important;
    }
    
    /* Navigation Dots - Enhanced Visibility */
    .slider-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        border: 2px solid rgba(255, 255, 255, 0.8);
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }
    
    .slider-dot:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: scale(1.15);
    }
    
    .slider-dot.active {
        background: white;
        border-color: white;
        transform: scale(1.3);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
    
    /* Navigation Dots Container - Responsive */
    .hero-slider .flex.space-x-2,
    .hero-slider div[class*="space-x-2"] {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        max-width: 100%;
        padding: 0 20px;
    }
    
    /* Professional tone: disable bounce decorations inside slider */
    .hero-slider .animate-bounce {
        animation: none !important;
    }
    
    /* Mobile responsive dots - Force small size */
    @media (max-width: 768px) {
        .slider-dot {
            width: 10px !important;
            height: 10px !important;
            min-width: 10px !important;
            min-height: 10px !important;
            padding: 0 !important;
            touch-action: manipulation;
        }
        .slider-dot.active {
            transform: scale(1.3);
        }
    }
    
    /* Mobile responsive slider */
     @media (max-width: 768px) {
         .hero-slider {
             height: clamp(360px, 60vh, 520px);
             min-height: 360px;
             max-height: 520px;
         }
         
         .slide {
             min-height: 100%;
         }
     }
     
     /* Tablet responsive slider */
     @media (min-width: 769px) and (max-width: 1024px) {
         .hero-slider {
             height: 70vh;
             min-height: 500px;
             max-height: 650px;
         }
     }
     
     /* Small phones adjustments */
     @media (max-width: 480px) {
         .hero-slider {
             height: clamp(320px, 55vh, 480px);
             min-height: 320px;
             max-height: 480px;
         }
         .slide {
             min-height: 100%;
         }
     }
     
     /* Mobile Slider Content Improvements */
     @media (max-width: 768px) {
         /* Smaller headings on mobile */
         .hero-slider .slide h1 {
             font-size: 1.75rem !important;
             line-height: 1.2 !important;
         }
         
         .hero-slider .slide h2 {
             font-size: 1rem !important;
             line-height: 1.3 !important;
         }
         
         .hero-slider .slide p {
             font-size: 0.875rem !important;
             line-height: 1.5 !important;
         }
         
         /* Stats section improvements */
         .hero-slider .slide .flex.items-center.space-x-8 {
             gap: 0.5rem !important;
             padding-top: 1rem !important;
             margin-bottom: 1rem !important;
         }
         
         .hero-slider .slide .flex.items-center.space-x-8 > div {
             flex: 1;
             min-width: 0;
         }
         
         .hero-slider .slide .flex.items-center.space-x-8 .text-2xl {
             font-size: 1.25rem !important;
         }
         
         .hero-slider .slide .flex.items-center.space-x-8 .text-sm {
             font-size: 0.625rem !important;
             white-space: nowrap;
         }
         
         /* Better button spacing */
         .hero-slider .slide .flex.flex-col.gap-4 {
             gap: 0.75rem !important;
         }
         
         .hero-slider .slide a[class*="px-8"] {
             padding: 0.75rem 1.5rem !important;
             font-size: 0.875rem !important;
         }
         
         /* Navigation dots - smaller on mobile */
         .slider-dot {
             width: 8px !important;
             height: 8px !important;
             min-width: 8px !important;
             min-height: 8px !important;
         }
         
         /* More space between stats and dots */
         .hero-slider > div:last-child {
             bottom: 1rem !important;
         }
     }
     
     /* Extra small phones */
     @media (max-width: 375px) {
         .hero-slider .slide h1 {
             font-size: 1.5rem !important;
         }
         
         .hero-slider .slide .flex.items-center.space-x-8 .text-sm {
             font-size: 0.5rem !important;
         }
         
         .slider-dot {
             width: 6px !important;
             height: 6px !important;
             min-width: 6px !important;
             min-height: 6px !important;
         }
     }
    
    /* Ensure slider content is properly positioned */
    .hero-slider .slide > div {
        width: 100%;
        height: 100%;
        position: relative;
    }
    
    .hero-slider .min-h-\[70vh\] {
        min-height: 100% !important;
        height: 100% !important;
    }

    /* Make slide media responsive */
    .hero-slider .slide img,
    .hero-slider .slide picture img,
    .hero-slider .slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* Form Styles */
    .input-field {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #1e293b;
        background-color: #ffffff;
        transition: all 0.2s ease-in-out;
        min-height: 2.75rem;
    }
    
    .input-field.pl-10 {
        padding-left: 2.5rem;
    }
    
    .input-field:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }
    
    .input-field:hover {
        border-color: #cbd5e1;
    }
    
    /* Icon positioning fix */
    .relative .absolute {
        pointer-events: none;
    }
    /* Exception: allow click on visibility toggle buttons inside relative containers */
    .relative .absolute.toggle-visibility,
    .relative button.toggle-visibility {
        pointer-events: auto;
        cursor: pointer;
        z-index: 10;
    }
    
    .relative svg {
        z-index: 10;
    }
    
    .error-message {
        color: #dc2626;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .error-message.hidden {
        display: none;
    }
    
    /* Additional color utilities */
    .bg-primary-50 {
        background-color: #eff6ff;
    }
    
    .bg-green-50 {
        background-color: #f0fdf4;
    }
    
    .bg-blue-50 {
        background-color: #eff6ff;
    }
    /* Form Styles */
    .input-field {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #1e293b;
        background-color: #ffffff;
        transition: all 0.2s ease-in-out;
        min-height: 2.75rem;
    }
    
    .input-field.pl-10 {
        padding-left: 2.5rem;
    }
    
    .input-field:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }
    
    .input-field:hover {
        border-color: #cbd5e1;
    }
    
    /* Icon positioning fix */
    .relative .absolute {
        pointer-events: none;
    }
    /* Exception: allow click on visibility toggle buttons inside relative containers */
    .relative .absolute.toggle-visibility,
    .relative button.toggle-visibility {
        pointer-events: auto;
        cursor: pointer;
        z-index: 10;
    }
    
    .relative svg {
        z-index: 10;
    }
    
    .error-message {
        color: #dc2626;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    
    .error-message.hidden {
        display: none;
    }
    
    /* Additional color utilities */
    .bg-primary-50 {
        background-color: #eff6ff;
    }
    
    .bg-green-50 {
        background-color: #f0fdf4;
    }
    
    .bg-blue-50 {
        background-color: #eff6ff;
    }
    
    .text-green-600 {
        color: #16a34a;
    }
    
    .text-blue-600 {
        color: #2563eb;
    }
    
    /* New Animations & Utilities */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 40px, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animate-fade-in-up {
        animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
    
    .animate-scale-in {
        animation: scaleIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    .glass-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    }
    
    .glass-card:hover {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
        transform: translateY(-5px);
    }

    /* CSS Top Page Loading Animation */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3.5px;
        background: linear-gradient(90deg, transparent, #2563eb, #fbbf24, #1a1f71, transparent);
        background-size: 200% 100%;
        z-index: 999999;
        animation: page-load-anim 1.5s ease-out forwards;
        pointer-events: none;
    }
    @keyframes page-load-anim {
        0% { transform: translateX(-100%); opacity: 1; }
        60% { transform: translateX(0%); opacity: 1; }
        99% { transform: translateX(100%); opacity: 0; }
        100% { transform: translateX(100%); opacity: 0; display: none; }
    }

    html {
        scroll-behavior: smooth;
    }
    
    /* Reading Progress Bar */
    #reading-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 4px;
        background: linear-gradient(to right, #2563eb, #f2750a);
        z-index: 9999;
        width: 0%;
        transition: width 0.1s;
    }
    
    /* ============================================
       SUPER PRO MOBILE RESPONSIVENESS FIXES
       Comprehensive mobile-first styling
       ============================================ */
    
    /* Prevent horizontal overflow globally */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Container overflow protection */
    .container, .container-custom, [class*="container"] {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .grid > *,
    .flex > * {
        min-width: 0;
    }
    
    /* Mobile Typography Optimization (< 768px) */
    @media (max-width: 768px) {
        /* Reduce section title sizes */
        h2.text-3xl, 
        h2.text-4xl,
        .text-3xl,
        section h2 {
            font-size: 1.5rem !important;
            line-height: 1.3 !important;
        }
        
        h3.text-xl,
        .text-xl {
            font-size: 1.125rem !important;
        }
        
        /* Reduce paragraph and description text */
        .text-xl.text-gray-600,
        section > div > p.text-xl {
            font-size: 0.95rem !important;
        }
        
        /* Section padding optimization */
        section {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        
        section.py-16 {
            padding-top: 2.5rem !important;
            padding-bottom: 2.5rem !important;
        }
        
        /* Service Cards - Lighter shadows */
        .shadow-lg {
            box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08) !important;
        }
        
        .hover\:shadow-2xl:hover {
            box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.12) !important;
        }
        
        /* Card padding reduction */
        .p-6 {
            padding: 1rem !important;
        }
        
        .p-8 {
            padding: 1.25rem !important;
        }
        
        /* Grid gaps */
        .gap-8 {
            gap: 1rem !important;
        }
        
        .gap-6 {
            gap: 0.75rem !important;
        }
        
        /* Stats section - smaller text */
        .text-4xl,
        .text-5xl,
        [data-count] {
            font-size: 1.75rem !important;
        }
        
        /* Certification badges grid */
        .grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 0.5rem !important;
        }
        
        .grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 .p-6 {
            padding: 0.75rem !important;
        }
        
        .grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 .w-16 {
            width: 2.5rem !important;
            height: 2.5rem !important;
        }
        
        .grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 .text-sm {
            font-size: 0.7rem !important;
        }
        
        /* Process steps - full width on mobile */
        .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
            grid-template-columns: 1fr !important;
        }
        
        /* Icon sizes on mobile */
        .w-16.h-16 {
            width: 3rem !important;
            height: 3rem !important;
        }
        
        .w-20.h-20 {
            width: 3.5rem !important;
            height: 3.5rem !important;
        }
        
        /* Button sizing */
        .btn-primary,
        .btn-secondary {
            padding: 0.625rem 1rem !important;
            font-size: 0.875rem !important;
        }
        
        /* Form container */
        .max-w-4xl {
            max-width: 100% !important;
            padding: 0 0.5rem !important;
        }
        
        .p-8.md\:p-12 {
            padding: 1.5rem !important;
        }
        
        /* Testimonial grid */
        .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
            grid-template-columns: 1fr !important;
        }
    }
    
    /* Small phones specific (< 480px) */
    @media (max-width: 480px) {
        h2.text-3xl,
        h2.text-4xl,
        .text-3xl,
        section h2 {
            font-size: 1.25rem !important;
            line-height: 1.35 !important;
        }
        
        .text-xl.text-gray-600,
        section > div > p.text-xl {
            font-size: 0.875rem !important;
        }
        
        section {
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }
        
        /* Icon sizes */
        .w-16.h-16 {
            width: 2.5rem !important;
            height: 2.5rem !important;
        }
        
        .w-16.h-16 svg,
        .w-16.h-16 .w-8 {
            width: 1.25rem !important;
            height: 1.25rem !important;
        }
        
        /* Stats on phones */
        .text-4xl,
        .text-5xl,
        [data-count] {
            font-size: 1.5rem !important;
        }
        
        /* Certification grid - 2 columns */
        .grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
    
    /* WhatsApp Floating Button - Mobile Optimization (scoped) */
    .whatsapp-float,
    .fixed.bottom-4.right-4.whatsapp-float,
    .fixed.bottom-6.right-6.whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }
    
    @media (max-width: 768px) {
        .whatsapp-float,
        .fixed.bottom-4.right-4.whatsapp-float,
        .fixed.bottom-6.right-6.whatsapp-float {
            width: 45px !important;
            height: 45px !important;
            bottom: 1rem !important;
            right: 1rem !important;
            font-size: 1.1rem !important;
        }
    }
    
    /* Hero/Slider Content Mobile Fix */
    @media (max-width: 768px) {
        .hero-slider .container,
        .slide .container {
            padding: 0 1rem !important;
        }
        
        .hero-slider h1,
        .slide h1 {
            font-size: 1.5rem !important;
            line-height: 1.3 !important;
        }
        
        .hero-slider h2,
        .slide h2 {
            font-size: 1.25rem !important;
        }
        
        .hero-slider p,
        .slide p {
            font-size: 0.9rem !important;
        }
        
        /* Stats in hero */
        .hero-slider .flex.gap-8,
        .slide .flex.gap-8 {
            gap: 1rem !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
        }
        
        .hero-slider .text-3xl,
        .slide .text-3xl {
            font-size: 1.25rem !important;
        }
    }
    
    @media (max-width: 480px) {
        .hero-slider h1,
        .slide h1 {
            font-size: 1.25rem !important;
        }
        
        .hero-slider h2,
        .slide h2 {
            font-size: 1rem !important;
        }
        
        .hero-slider .text-3xl,
        .slide .text-3xl {
            font-size: 1.1rem !important;
        }
    }
    
    /* Fix any element that might overflow */
    @media (max-width: 768px) {
        /* Tables */
        table {
            display: block;
            overflow-x: auto;
            max-width: 100%;
        }
        
        /* Code blocks */
        pre, code {
            max-width: 100%;
            overflow-x: auto;
            word-wrap: break-word;
        }
        
        /* Long text */
        .break-words {
            word-break: break-word;
            overflow-wrap: break-word;
        }
        
        /* Images */
        img {
            max-width: 100% !important;
            height: auto !important;
        }
        
        /* Grid auto-fit for cards */
        .grid {
            max-width: 100%;
        }
    }
    
    /* Touch-friendly tap targets */
    @media (max-width: 768px) {
        a, button {
            min-height: 44px;
            min-width: 44px;
        }
        
        /* Smaller inline links can be excluded */
        p a, span a, li a {
            min-height: auto;
            min-width: auto;
        }
    }
    
    /* Improved spacing for mobile sections */
    @media (max-width: 768px) {
        .mb-12 {
            margin-bottom: 2rem !important;
        }
        
        .mb-8 {
            margin-bottom: 1.5rem !important;
        }
        
        .mb-6 {
            margin-bottom: 1rem !important;
        }
        
        .space-y-8 > * + * {
            margin-top: 1.5rem !important;
        }
        
        .space-y-6 > * + * {
            margin-top: 1rem !important;
        }
    }
    
    /* ============================================
       ENHANCED MOBILE FIXES - Logo, Slider, Blue Glow
       ============================================ */
    
    /* Logo - Optimized for mobile */
    @media (max-width: 768px) {
        header img[alt*="KMFSL"],
        header .h-12,
        header .h-14,
        header img {
            height: 3rem !important;
            width: auto !important;
        }
    }
    
    @media (max-width: 480px) {
        header img[alt*="KMFSL"],
        header .h-12,
        header .h-14,
        header img {
            height: 2.5rem !important;
        }
    }
    
    /* Reduce blue body glow on mobile */
    @media (max-width: 768px) {
        body::before,
        body::after,
        .bg-gradient-to-r::before,
        .bg-gradient-to-r::after {
            opacity: 0.3 !important;
        }
        
        /* Remove side glow shadows if any */
        body {
            box-shadow: none !important;
        }
    }
    
    /* Slider mobile optimizations */
    @media (max-width: 768px) {
        .slide {
            padding: 0 !important;
        }

        .hero-slider .container-custom {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .hero-slider .slide .grid {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .hero-slider .slide .text-white.space-y-6 {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        
        .slide .text-4xl,
        .slide h1.text-4xl {
            font-size: 1.5rem !important;
            line-height: 1.3 !important;
        }
        
        .slide .text-xl,
        .slide h2.text-xl {
            font-size: 1rem !important;
        }
        
        .slide .text-lg,
        .slide p.text-lg {
            font-size: 0.875rem !important;
            line-height: 1.5 !important;
        }
        
        /* Stats row in slider */
        .slide .flex.items-center.space-x-8 {
            flex-wrap: wrap !important;
            gap: 0.75rem !important;
            justify-content: flex-start !important;
        }
        
        .slide .flex.items-center.space-x-8 > div {
            margin: 0 !important;
            width: calc(33% - 0.5rem) !important;
        }
        
        .slide .text-2xl {
            font-size: 1.25rem !important;
        }
        
        .slide .text-sm {
            font-size: 0.7rem !important;
        }
        
        /* Slider buttons */
        .slide .px-8 {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }
        
        .slide .py-4 {
            padding-top: 0.75rem !important;
            padding-bottom: 0.75rem !important;
        }
        
        .slide .gap-4 {
            gap: 0.75rem !important;
        }
        
        /* Slider min height */
        .min-h-\[70vh\] {
            min-height: 50vh !important;
        }
        
        .slide .space-y-6 {
            padding: 0 !important;
        }
        
        /* Hide decorative circles on mobile */
        .slide .hidden.lg\:block {
            display: none !important;
        }
    }
    
    @media (max-width: 480px) {
        .slide .text-4xl,
        .slide h1.text-4xl {
            font-size: 1.25rem !important;
        }
        
        .slide .text-xl,
        .slide h2.text-xl {
            font-size: 0.9rem !important;
        }
        
        .slide .text-lg,
        .slide p.text-lg {
            font-size: 0.8rem !important;
        }
        
        .min-h-\[70vh\] {
            min-height: 45vh !important;
        }
    }
    
    /* Certifications section - better grid on mobile */
    @media (max-width: 768px) {
        .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 0.5rem !important;
        }
        
        .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 > div {
            text-align: center;
        }
        
        .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 .rounded-xl.p-6 {
            padding: 0.5rem !important;
        }
        
        .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 .w-16.h-16 {
            width: 2rem !important;
            height: 2rem !important;
        }
        
        .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 .w-8.h-8 {
            width: 1rem !important;
            height: 1rem !important;
        }
        
        .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 h4 {
            font-size: 0.65rem !important;
        }
        
        .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 p {
            font-size: 0.55rem !important;
        }
    }
    
    @media (max-width: 480px) {
        .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }
    
    /* Corporate Partnerships stats - better on mobile */
    @media (max-width: 768px) {
        .bg-white\/5.backdrop-blur-sm .grid.grid-cols-2.md\:grid-cols-4 {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 1rem !important;
        }
        
        .bg-white\/5.backdrop-blur-sm .text-3xl {
            font-size: 1.25rem !important;
        }
    }
    
    /* Technology section grid */
    @media (max-width: 768px) {
        .grid.grid-cols-1.lg\:grid-cols-2 {
            grid-template-columns: 1fr !important;
        }
        
        .grid.grid-cols-2.gap-6 {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 0.75rem !important;
        }
    }
    
    /* Process steps on mobile */
    @media (max-width: 768px) {
        .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 .rounded-2xl.p-8 {
            padding: 1.25rem !important;
        }
        
        /* Hide arrow connectors on mobile */
        .hidden.lg\:block.absolute {
            display: none !important;
        }
    }
    
    /* Contact form on mobile */
    @media (max-width: 768px) {
        .rounded-2xl.shadow-2xl .p-8.md\:p-12 {
            padding: 1.25rem !important;
        }
        
        .grid.grid-cols-1.md\:grid-cols-2 {
            grid-template-columns: 1fr !important;
        }
    }
    
    /* Footer on mobile */
    @media (max-width: 768px) {
        footer .grid {
            grid-template-columns: 1fr !important;
            gap: 1.5rem !important;
        }
        
        footer .text-3xl,
        footer .text-2xl {
            font-size: 1.25rem !important;
        }
    }
    
    /* Fix any remaining blue glow/border issues */
    @media (max-width: 768px) {
        *[style*="box-shadow"] {
            box-shadow: 0 4px 15px -4px rgba(0,0,0,0.1) !important;
        }
        
        .shadow-xl,
        .shadow-2xl {
            box-shadow: 0 4px 20px -4px rgba(0,0,0,0.12) !important;
        }
    }

    /* ============================================
       GLOBAL STABILITY LAYER - Overlap & Oversize Guard
       ============================================ */
    section,
    .card,
    .glass-panel,
    .glass-dark {
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    .container-custom {
        width: min(1280px, 100% - 2rem);
    }
    
    @media (max-width: 1536px) {
        .text-7xl {
            font-size: clamp(2rem, 5.5vw, 3.4rem) !important;
            line-height: 1.1 !important;
        }
        
        .text-6xl {
            font-size: clamp(1.8rem, 4.6vw, 2.9rem) !important;
            line-height: 1.15 !important;
        }
        
        .text-5xl {
            font-size: clamp(1.6rem, 3.8vw, 2.45rem) !important;
            line-height: 1.18 !important;
        }
        
        .text-4xl {
            font-size: clamp(1.35rem, 3vw, 2rem) !important;
            line-height: 1.22 !important;
        }
    }
    
    @media (max-width: 1366px) {
        .hero-slider .grid.lg\:grid-cols-2 {
            gap: 1.25rem !important;
        }
        
        .hero-slider .text-white.space-y-6 {
            gap: 0.9rem !important;
        }
        
        .hero-slider .hidden.lg\:block .w-96.h-96 {
            width: 18rem !important;
            height: 18rem !important;
        }
        
        .hero-slider .hidden.lg\:block .w-80.h-80 {
            width: 14.5rem !important;
            height: 14.5rem !important;
        }
        
        .hero-slider .hidden.lg\:block .w-64.h-64 {
            width: 11rem !important;
            height: 11rem !important;
        }
        
        .hero-slider .slide .flex.items-center.space-x-8 {
            flex-wrap: wrap !important;
            gap: 0.75rem !important;
        }
    }
    
    @media (max-width: 1199px) {
        .container-custom {
            width: min(100%, calc(100% - 1.25rem));
        }
        
        .grid[class*="lg:grid-cols-"],
        .grid[class*="md:grid-cols-"] {
            align-items: start !important;
        }
    }
    
    @media (max-width: 1536px) {
        .text-3xl {
            font-size: clamp(1.2rem, 2.3vw, 1.7rem) !important;
            line-height: 1.25 !important;
        }
        
        .text-2xl {
            font-size: clamp(1.08rem, 1.8vw, 1.42rem) !important;
            line-height: 1.28 !important;
        }
        
        .text-xl {
            font-size: clamp(0.98rem, 1.4vw, 1.16rem) !important;
            line-height: 1.38 !important;
        }
        
        .text-lg {
            font-size: clamp(0.92rem, 1.2vw, 1.04rem) !important;
            line-height: 1.42 !important;
        }
    }
    
    @media (max-width: 1366px) {
        .section-padding {
            padding-top: clamp(2.3rem, 4.2vw, 3.4rem) !important;
            padding-bottom: clamp(2.3rem, 4.2vw, 3.4rem) !important;
        }
        
        .section-padding .grid[class*="lg:grid-cols-"] {
            gap: 1.15rem !important;
        }
        
        .btn-primary,
        .btn-secondary,
        .hero-slider a[class*="px-8"][class*="py-4"],
        .section-padding a[class*="px-8"][class*="py-4"] {
            padding-top: 0.65rem !important;
            padding-bottom: 0.65rem !important;
            padding-left: 1.05rem !important;
            padding-right: 1.05rem !important;
            font-size: 0.88rem !important;
            line-height: 1.2 !important;
        }
        
        .hover\:scale-105:hover {
            transform: translateY(-2px) scale(1.02) !important;
        }
        
        .group:hover .mega-dropdown {
            transform: translateX(-50%) translateY(0) scale(0.995);
        }
        
        .mega-dropdown .item-title {
            font-size: 0.82rem;
            line-height: 1.25;
        }
        
        .mega-dropdown .item-desc {
            font-size: 0.71rem;
            line-height: 1.35;
        }
    }
    
    @media (max-width: 1024px) {
        .section-padding .rounded-3xl,
        .section-padding .rounded-2xl,
        .section-padding .rounded-xl {
            border-radius: 0.85rem !important;
        }
        
        .section-padding .p-8,
        .section-padding .p-10,
        .section-padding .p-12 {
            padding: 1rem !important;
        }
        
        .section-padding .gap-10,
        .section-padding .gap-12 {
            gap: 1rem !important;
        }
    }
    
    @media (max-width: 768px) {
        .section-padding .max-w-3xl,
        .section-padding .max-w-4xl,
        .section-padding .max-w-5xl {
            max-width: 100% !important;
        }
        
        .section-padding input,
        .section-padding select,
        .section-padding textarea {
            font-size: 16px !important;
            line-height: 1.35 !important;
        }
        
        .section-padding .flex.items-center.space-x-8 {
            flex-wrap: wrap !important;
            gap: 0.7rem !important;
        }
    }
    
    @media (max-width: 480px) {
        .container-custom {
            width: min(100%, calc(100% - 1rem));
        }
        
        .section-padding {
            padding-top: 2rem !important;
            padding-bottom: 2rem !important;
        }
        
        .hero-slider .container-custom {
            padding-left: 0.7rem !important;
            padding-right: 0.7rem !important;
        }
    }
    
    @media (min-width: 1600px) {
        .container-custom {
            width: min(1320px, calc(100% - 3rem));
        }
        
        .section-padding .grid[class*="lg:grid-cols-"] {
            gap: clamp(1.5rem, 2vw, 2rem) !important;
        }
    }
    
    @media (min-width: 1920px) {
        .container-custom {
            width: min(1440px, calc(100% - 4rem));
        }
    }
    
    @media (max-width: 360px) {
        h1,
        .text-4xl,
        .text-5xl,
        .text-6xl {
            font-size: clamp(1.15rem, 8vw, 1.55rem) !important;
            line-height: 1.2 !important;
        }
        
        .hero-slider a[class*="px-8"][class*="py-4"],
        .section-padding a[class*="px-8"][class*="py-4"] {
            padding: 0.55rem 0.8rem !important;
            font-size: 0.8rem !important;
        }
    }
    
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
    
    @supports (content-visibility: auto) {
        main section:not(:first-of-type) {
            content-visibility: auto;
            contain-intrinsic-size: 1px 900px;
        }
    }


/* ============ Shared Modal CSS (deduplicated from 12 pages) ============ */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.3s ease;
}
.modal-content {
    background: white; border-radius: 12px; max-width: 500px; width: 90%;
    max-height: 80vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}
.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; padding: 25px; text-align: center; border-radius: 12px 12px 0 0;
}
.success-icon { font-size: 48px; margin-bottom: 10px; }
.modal-header h2 { margin: 0; font-size: 24px; }
.modal-body { padding: 25px; }
.reference-box {
    background: #f8f9ff; border: 2px solid #667eea; border-radius: 8px;
    padding: 20px; text-align: center; margin-bottom: 20px;
}
.reference-box h3 { color: #667eea; margin: 0 0 10px 0; }
.reference-number {
    font-size: 28px; font-weight: bold; color: #333; letter-spacing: 2px;
    margin: 10px 0; padding: 10px; background: white; border-radius: 6px;
    border: 1px solid #ddd;
}
.next-steps {
    background: #e8f5e8; border-left: 4px solid #28a745;
    padding: 15px; margin: 20px 0; border-radius: 4px;
}
.next-steps h4 { color: #155724; margin: 0 0 10px 0; }
.next-steps ul { color: #155724; margin: 0; padding-left: 20px; }
.contact-info {
    display: flex; gap: 20px; margin-top: 20px;
}
.contact-item {
    display: flex; align-items: center; gap: 10px; flex: 1;
}
.contact-item .icon { font-size: 24px; }
.contact-item strong { display: block; color: #333; }
.contact-item p { margin: 0; color: #666; font-size: 14px; }
.social-icons {
    display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.social-icon {
    display: inline-block; padding: 8px; border-radius: 50%;
    background: #f8f9fa; transition: all 0.3s ease; text-decoration: none;
}
.social-icon:hover {
    background: #667eea; transform: translateY(-2px);
}
.social-icon img { width: 24px; height: 24px; display: block; }
.modal-footer {
    padding: 20px 25px; border-top: 1px solid #eee;
    display: flex; gap: 10px; justify-content: center;
}
.modal-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white; border: none; padding: 12px 24px; border-radius: 6px;
    cursor: pointer; font-weight: 500;
}
.modal-btn-secondary {
    background: #6c757d; color: white; border: none; padding: 12px 24px;
    border-radius: 6px; cursor: pointer; font-weight: 500;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 600px) {
    .contact-info { flex-direction: column; gap: 15px; }
}