/* 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) now defined once in base.html */



        .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;
        }

        /* Hero tab panels.
           "Find trainer" (icon + text + button) is taller than "Find
           Opportunities" (a single search row), so swapping them with
           display:none made the whole card jump in height. Both panels sit in
           the SAME grid cell instead, which makes the card permanently as tall
           as the taller one — whichever is showing. No fixed height to keep in
           step if the copy or the button size ever changes. */
        .heroPanels {
            display: grid;
            align-items: center;
        }

        .heroPanels > * {
            grid-area: 1 / 1;
        }

        /* The inactive panel keeps its box (so the height holds) but is not
           visible, focusable, or clickable. */
        .heroPanels > .is-hidden {
            visibility: hidden;
            opacity: 0;
            pointer-events: 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;
            }
        }

        /* "How it works" panels (2026-07-17): render the blue step PNGs
           (step1-5.png) as pure white on the navy-gradient panels — same
           treatment as the corporate section on /home (home.css).
           brightness(0) flattens the artwork, invert(1) flips it to white.
           ROLLBACK: remove this rule for the original blue icons. */
        #how-training-content img,
        #how-opportunities-content img {
            filter: brightness(0) invert(1);
        }

        /* REMOVED (2026-07): .header-favicon/.header-main-logo logo-swap rules —
           dead selectors, no markup uses those classes (header.html swaps logos
           with Tailwind hidden/sm:block instead). The @360px .header-top gap
           tightening moved to templates/base.html so it applies on EVERY page,
           not just the landing page (fixes logo squeeze on Moto G4 / Z Fold). */
        /* 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; }
        }

        /* Subscribe form css */
        /* Override Chrome's default autofill background color */
        input:-webkit-autofill,
        input:-webkit-autofill:hover, 
        input:-webkit-autofill:focus, 
        input:-webkit-autofill:active {
            transition: background-color 5000s ease-in-out 0s !important;
            -webkit-text-fill-color: #374151 !important; /* This matches your text-gray-700 class */
        }

        .heroSwiperBg .swiper-slide {
            will-change: opacity;
            transform: translateZ(0);
        }

        /* ── Demo-card family for "Access our Premium Training Material"
           (2026-07-17) — same card design as the /home material grids
           (values copied from Home/static/css/home.css). The old card was a
           plain Tailwind article (see ROLLBACK comment in the template). ── */
        .demo-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition:
                box-shadow 0.2s ease,
                transform 0.2s ease;
        }

        .demo-card:hover {
            box-shadow: 0 8px 30px rgba(37, 99, 235, 0.15);
            transform: translateY(-3px);
        }

        .demo-card-thumb {
            background: linear-gradient(
                135deg,
                #0d5484 0%,
                #1a5d8d 40%,
                #296ca7 70%,
                #2774cc 100%
            );
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .demo-card-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* the crown corner-badge img must keep its own small size */
        .demo-card-thumb .corner-badge img {
            width: 1.25rem;
            height: 1.25rem;
            object-fit: contain;
        }

        .demo-card-body {
            padding: 18px 18px 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .demo-card-title {
            font-size: 0.94rem;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.4;
            margin: 0;
        }

        .demo-btn-download,
        .demo-view-all {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 16px;
            background: linear-gradient(90deg, #3bb8e8 0%, #1b6085 100%);
            color: #fff;
            font-size: 0.875rem;
            font-weight: 600;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition:
                opacity 0.2s ease,
                transform 0.1s ease,
                box-shadow 0.2s ease;
        }

        .demo-btn-download:hover,
        .demo-view-all:hover {
            opacity: 0.94;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(27, 96, 133, 0.35);
        }

        .demo-btn-download {
            margin-top: auto;
            width: 100%;
        }

        /* price row — same values as the /home material cards (home.css) */
        .demo-price-row {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .demo-price {
            font-size: 1.05rem;
            font-weight: 700;
            color: #126792;
        }

        .demo-price-old {
            font-size: 0.8rem;
            color: #9ca3af;
            text-decoration: line-through;
        }

        .demo-view-all {
            padding: 12px 28px;
        }

        /* equal-height cards: swiper wrapper is already flex; let slides
           stretch and make each card fill its slide so the View Details
           buttons align regardless of title/price line counts */
        .premiumSwiper .swiper-slide {
            height: auto;
            display: flex;
        }

        .premiumSwiper .demo-card {
            height: 100%;
        }

        /* ── "Browse talent by category" chips (2026-07-17) ──
           Themed 3D cards replacing the flat grey tiles (inline Tailwind:
           bg-[#F2F5F6] border-2 shadow-sm). Same design family as the
           material cards / advantage chips: white→sky gradient face,
           brand-gradient top strip, navy-tinted layered shadows, sky ring
           on the rating pill. The #browseCategories prefix outranks the
           utilities regardless of stylesheet order (this also normalises
           the stray permanent border on the first card).
           ROLLBACK: remove this block for the original flat tiles. */
        #browseCategories .grid a {
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #ffffff 0%, #f6fcff 100%);
            border: 1px solid #dbeefb;
            border-radius: 16px;
            box-shadow:
                0 1px 2px rgba(2, 32, 58, 0.06),
                0 10px 24px -10px rgba(27, 96, 133, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
            transition:
                box-shadow 0.25s ease,
                transform 0.25s ease,
                border-color 0.25s ease;
        }

        #browseCategories .grid a::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #0a4e7b 0%, #135d92 40%, #205f97 70%, #2a72c4 100%);
        }

        #browseCategories .grid a:hover {
            transform: translateY(-4px);
            border-color: #b9e3f7;
            box-shadow:
                0 2px 4px rgba(2, 32, 58, 0.08),
                0 18px 34px -12px rgba(27, 96, 133, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }

        /* star + rating becomes a soft sky pill */
        #browseCategories .grid a .flex.items-start {
            background: #e9f6fc;
            border: 1px solid #d9f0fb;
            border-radius: 999px;
            padding: 4px 12px;
            width: fit-content;
            align-items: center;
        }