/* Background blur effect  */
        .blur-active {
            filter: blur(5px);
            pointer-events: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Slide-in transition */
        .slide-menu {
            transform: translateX(-100%);
            transition: transform 0.35s ease;
        }

        .slide-menu.open {
            transform: translateX(0);
        }

        @keyframes slide-scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* Helper for smoother GPU-accelerated logo track transforms */
        .logo-track {
            will-change: transform;
        }

        /* HOW IT WORKS: mobile swiper slide sizing */
        .howSwiper .swiper-slide {
            transform: scale(0.9);
            transition: transform 0.3s ease;
            cursor: pointer;
            padding-left: 1.5rem;
            /* extra left space so big numbers are not cut */
        }

        /* Step text + number default color (mobile swiper) */
        .howSwiper .swiper-slide .text-sm,
        .howSwiper .swiper-slide>div:first-child {
            color: #9CA3AF;
            /* medium grey */
            transition: color 0.3s ease;
        }

        /* Slight grow on hover */
        .howSwiper .swiper-slide:hover {
            transform: scale(1.03);
        }

        /* On hover / active, text + number becomes white */
        .howSwiper .swiper-slide:hover .text-sm,
        .howSwiper .swiper-slide-active .text-sm,
        .howSwiper .swiper-slide:hover>div:first-child,
        .howSwiper .swiper-slide-active>div:first-child {
            color: #FFFFFF;
        }

        /* Active step appears largest */
        .howSwiper .swiper-slide-active {
            transform: scale(1.08);
        }

        /* HOW IT WORKS: desktop grid hover effect */
        .how-step-desktop {
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        /* Desktop step text + number default color */
        .how-step-desktop .text-sm,
        .how-step-desktop>div:first-child {
            color: #9CA3AF;
            /* medium grey */
            transition: color 0.3s ease;
        }

        /* On hover, desktop step grows and text becomes white */
        .how-step-desktop:hover {
            transform: scale(1.08);
        }

        .how-step-desktop:hover .text-sm,
        .how-step-desktop:hover>div:first-child {
            color: #FFFFFF;
        }

        .howSwiper .swiper-pagination {
            margin-top: 20px !important;
            position: relative !important;
        }

        .howSwiper .swiper-pagination-bullet {
            background: #ffffff;
            opacity: 0.5;
        }
        
        /* Tab Change Animations */
        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes fadeOutRight {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(50px); }
        }
        @keyframes fadeOutLeft {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(-50px); }
        }
        
        .animate-fadeInRight { animation: fadeInRight 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
        .animate-fadeInLeft { animation: fadeInLeft 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
        .animate-fadeOutRight { animation: fadeOutRight 0.8s ease-in forwards; }
        .animate-fadeOutLeft { animation: fadeOutLeft 0.8s ease-in forwards; }

        .howSwiper .swiper-pagination-bullet-active {
            background: #05a7ec;
            opacity: 1;
        }

        .premium-arrows button {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid #3DB5E8;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all .3s ease;
        }

        /* Arrow icon */
        .premium-arrows button svg {
            color: #3DB5E8;
            width: 20px;
            height: 20px;
        }

        /* Pressed state */
        .premium-arrows button:active {
            background: #3DB5E8;
            border-color: #3DB5E8;
        }

        .premium-arrows button:active svg {
            color: #fff;
        }

        /* -------------------------------- */
        /* HOVER (Mouse over)               */
        /* -------------------------------- */
        .premium-arrows button:hover {
            background: #3DB5E8;
            /* light blue background */
        }

        .premium-arrows button:hover svg {
            stroke: white;
            /* stays blue */
        }


        /* Ensure arrows always visible on mobile, but stay behind fixed header/promo */
        .premium-arrows {
            position: relative;
            z-index: 10 !important;
        }

        /* Corner crown badge on cards (copied from all-material) */
        .corner-badge {
            position: absolute;
            top: 0;
            right: 0;
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, #FFDC21, #FB8C0A);
            border-bottom-left-radius: 999px;
            border-top-right-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .corner-badge i {
            color: #ffffff;
        }
        /* ❌ HIDE ARROWS ON DESKTOP */
        @media (min-width: 1257px) {
            .premium-arrows {
                display: none !important;
            }
        }

        /* Active nav link */
        .nav-active {
            color: #48BEEC;
        }



        .fade-group>* {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.95s ease-out, transform 0.95s ease-out;
        }

        #heroContent {
            transition: opacity 0.9s ease-in-out;
        }

        /* Hero form tabs: only the active one shows white outline */
        .tab-btn {
            border-width: 1px;
            border-style: solid;
            border-color: transparent;
        }

        .tab-btn.active {
            border-color: #ffffff;
        }

        /* Hide default focus outline on hero search input */
        .heroSearchForm input:focus {
            outline: none;
        }
/* auto pop up modal css */
        /* Profile circle gradient */
        .profile-circle {
            background: conic-gradient(#48BEEC 0deg 360deg);
        }

        /* Modal backdrop */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 999;
            align-items: flex-start;
            justify-content: center;
            padding: 1.25rem;
            overflow-y: auto;
        }

        .modal-backdrop.show {
            display: flex;
        }

        /* Ensure modal fits inside viewport and right side can scroll internally */
        .modal-backdrop > .bg-white.rounded-lg {
            max-height: calc(100vh - 2.5rem);
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Inner body uses flex so right column can scroll when content overflows */
        .modal-body {
            display: flex;
            flex: 1 1 auto;
            min-height: 0; /* allow children to shrink and overflow properly */
        }

        .modal-left {
            flex: 2 1 40%;
        }

        .modal-right {
            flex: 3 1 60%;
            overflow-y: auto;
            padding: 2rem;
            box-sizing: border-box;
            position: relative;
        }

        /* Pin the close button to the modal's top-right corner */
        .modal-close {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            z-index: 30;
        }

    /* Sticky header: sits on top with slight translucency and blur */
        #mainPage {
            position: fixed;
            top: var(--promo-height, 0px);
            left: 0;
            right: 0;
            z-index: 30;
        background: rgba(255,255,255,0.95);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        box-shadow: 0 1px 6px rgba(16,24,40,0.04);
    }

     /* Keep page content visible below the fixed header.
         Adjust the fallback 64px if your header height changes. */
    :root {
        --header-fallback: 64px;
        --hero-gap: 24px; /* default gap between header and hero (desktop) */
    }

    /* Responsive hero gap: smaller gaps on narrow viewports */
    @media (max-width: 767px) {
        :root { --hero-gap: 16px; }
    }
    @media (max-width: 639px) {
        :root { --hero-gap: 12px; }
    }
     body { padding-top: calc(var(--promo-height, 0px) + var(--header-fallback)); }

     /* Ensure the hero always keeps the same gap below header across breakpoints */
     .hero-section { margin-top: var(--hero-gap) !important; }

    
        /* Responsive padding for mobile hero search form
           - default: matches Tailwind p-3 (0.75rem)
           - <450px: slightly reduce inner form padding for very small screens
           - >=450px and <768px: increase wrapper padding slightly to 1rem
           - md and up remain controlled by Tailwind's md:p-8 */

        /* default wrapper padding (keeps Tailwind behavior for p-3) */
        .mobile-padding{ padding:0.75rem !important; }

        /* inner form (uses Tailwind `p-3 py-4` -> 0.75rem LR, 1rem TB).
           For very small screens reduce to 0.5rem LR and 0.75rem TB */
        @media (max-width:449px){
            .heroSearchForm{ padding:0.75rem 0.5rem !important; font-size:12px !important; }
            .heroSearchForm .findTrainerBtn,
            .heroSearchForm .findOpportunitiesBtn{ padding:2px 4px !important; font-size:11px !important; }
            .heroSearchForm input{ padding:1px 3px !important; font-size:11px !important; }
            .heroSearchForm button{  font-size:11px !important; }
        }

        @media (min-width:450px) and (max-width:767px){
            .mobile-padding{ padding:1rem !important; }
        }
   
        /* Keep equal fixed width but reduce padding for 'How it works' pill buttons on small screens */
        @media (max-width: 450px) {
            #howTrainingBtn, #howOpportunitiesBtn {
                width: 125px !important; /* keep original equal width */
                padding: 4px 6px !important; /* reduced padding */
                font-size: 12px !important;
            }

            /* Slightly tighten the gap so pills don't overflow */
            #how-it-works .shrink-0 .flex { gap: 4px; }
        }
    
        /* Reduce card padding and font sizes on small screens for category boxes */
        @media (max-width: 450px) {
            #browseCategories .grid a.block {
                padding: 0.75rem !important; /* ~p-3 */
                min-height: 0 !important;
            }

            #browseCategories .grid a.block h3 {
                font-size: 15px !important;
                line-height: 1.15 !important;
                margin-bottom: 0.35rem !important;
            }

            #browseCategories .grid a.block .flex.items-start span {
                font-size: 12px !important;
            }

            #browseCategories .grid a.block .flex.items-start i {
                width: 16px !important;
                height: 16px !important;
            }
        }

    
        @media (max-width: 450px) {
            .swiper-slide .text-2xl {
                font-size: 18px; /* Adjust font size for small screens */
            }
        }

    
        /* Reduce heading font-size and vertical gaps for very small devices to prevent awkward wrapping */
        @media (max-width: 360px) {
            #how-training-content h3,
            #how-opportunities-content h3 {
                font-size: 18px !important;
                
            }

            /* Reduce the empty subtitle/p spacer size */
            #how-training-content p,
            #how-opportunities-content p {
                font-size: 1rem !important;
                margin-top: 0.25rem !important;
                margin-bottom: 0.25rem !important;
            }

            /* Shrink large top margins inside these sections (e.g., the desktop grid spacing) */
            #how-training-content .mt-10,
            #how-opportunities-content .mt-10 {
                margin-top: 0.5rem !important;
            }
        }
        /* Reduce specific paragraph font for very small screens (<400px) */
        @media (max-width: 400px) {
            .reduce-400 {
                font-size: 0.875rem !important;
            }
        }

        /* Header logo swap: show small favicon under 360px, hide on larger */
        .header-favicon, .sticky-favicon { display: none; }
        .header-main-logo, .sticky-main-logo { display: inline-block; }

        @media (max-width: 360px) {
            .header-favicon, .sticky-favicon { display: inline-block !important; width: 36px; height: auto; }
            .header-main-logo, .sticky-main-logo { display: none !important; }
            /* Reduce spacing between hamburger and logo on very small screens */
            .header-top { gap: 0.5rem !important; padding-left: 0.5rem !important; }
        }
        /* Reduce vertical gap between tab row and search row on very small screens */
        @media (max-width: 450px) {
            .heroSearchForm .tabs-row { margin-bottom: 0.5rem !important; }
            .heroSearchForm .tabs-row + .flex { /* the search input row */
                padding-top: 0.25rem !important;
            }
        }
        /* CTA search button: border only on small screens (below Tailwind `sm`) */
        .cta-search-btn { border: none !important; }
       

    
        /* Remove visible separation between promo banner and header on small screens
           changed: keep header bottom border on small screens for visual separation */
        @media (max-width: 640px) {
            #mainPage { border-bottom: 1px solid #E5E7EB !important; box-shadow: none !important; }
            #promoBanner { margin-bottom: 0 !important; }
        }

    
        /* Nudge header up slightly to avoid 1px gaps when promo wraps to multiple lines */
        @media (max-width: 640px) {
            #mainPage { top: calc(var(--promo-height, 0px) - 1px) !important; }
        }

    
        /* Small-screen footer compacting: reduce font-size and spacing */
        @media (max-width: 480px) {
            /* reduce the gap between the copyright paragraph and the links */
            footer .border-t + .flex { gap: 0.8rem !important; padding-top: 0.25rem; }

            /* reduce spacing between the links themselves */
            footer .border-t + .flex .items-center { gap: 1rem !important; }

            /* slightly smaller font for bottom links and copyright */
            footer .border-t + .flex p,
            footer .border-t + .flex a { font-size: 13px !important; line-height: 1.1 !important; }

            /* make links wrap more tightly and avoid large vertical padding */
            footer .border-t + .flex .items-center a { display: inline-block; padding: 0 !important; margin: 0 !important; }
            /* remove default paragraph margins which add extra vertical space */
            footer .border-t + .flex p { margin: 0 !important; }
        }
         @media (max-width: 340px) {
             footer .border-t + .flex .items-center { gap: 0.5rem !important; }
         }

    
        /* Small screens: make left slide menu font smaller for better fit (-sm) */
        @media (max-width: 640px) {
            /* reduce base font-size inside the slide menu */
            .slide-menu nav { font-size: 14px !important; }
            /* ensure individual links also apply the smaller size and tighter line-height */
            .slide-menu nav a { font-size: 14px !important; line-height: 1.25 !important; }
        }