:root {
            --modern-hero-autoplay-duration: 6000ms;
            --modern-hero-transition: 700ms;
            --modern-hero-content-transition: 800ms;
            --modern-hero-accent: #2563eb;
            --modern-hero-accent-glow: #3b82f6;
            --modern-hero-dark: #0a0f1a;
            --modern-hero-overlay-strength: 0.55;
            --modern-hero-font-heading: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
            --modern-hero-font-body: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
            --modern-hero-side-spacing: 80px;
            --modern-hero-glass-bg: rgba(255, 255, 255, 0.06);
            --modern-hero-glass-border: rgba(255, 255, 255, 0.12);
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .modern-hero-slider {
            position: relative;
            width: 100%;
            height: 86vh;
            min-height: 600px;
            overflow: hidden;
            background: var(--modern-hero-dark);
            font-family: "Fredoka", sans-serif;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            cursor: default;
            isolation: isolate;
        }

        .modern-hero-slides-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .modern-hero-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            z-index: 1;
            transition: opacity var(--modern-hero-transition) cubic-bezier(0.4, 0, 0.2, 1),
                visibility var(--modern-hero-transition) cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        .modern-hero-slide.modern-hero-active {
            opacity: 1;
            visibility: visible;
            z-index: 3;
            pointer-events: auto;
        }

        .modern-hero-slide.modern-hero-exiting {
            z-index: 2;
            opacity: 0;
            transition: opacity 500ms cubic-bezier(0.4, 0, 0.6, 1),
                visibility 500ms cubic-bezier(0.4, 0, 0.6, 1);
        }

        .modern-hero-bg-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            will-change: transform;
            pointer-events: none;
            transition: transform 200ms ease-out;
        }

        .modern-hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(10, 15, 26, 0.09) 0%, rgba(10, 15, 26, 0.4) 40%, rgba(10, 15, 26, 0.49) 85%, rgba(10, 15, 26, 0.19) 100%);
            pointer-events: none;
            z-index: 1;
        }

        /* Removed nth-child specific overlays – no longer needed */
        .modern-hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            padding: 0 var(--modern-hero-side-spacing);
            max-width: 1400px;
            margin: 0 auto;
            pointer-events: none;
        }

        .modern-hero-content>* {
            pointer-events: auto;
        }

        .modern-hero-tagline {
            display: inline-block;
            /*font-size: 0.85rem;*/
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 1.2rem;
            position: relative;
            padding-left: 3rem;
            opacity: 0;
            transform: translateY(18px);
            transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
        }

        .modern-hero-tagline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 2.2rem;
            height: 2px;
            background: #239434;
            border-radius: 4px;
        }

        .modern-hero-active .modern-hero-tagline {
            opacity: 1;
            transform: translateY(0);
        }

        .modern-hero-heading {
            font-family: "Fredoka", sans-serif;
            /*font-size: clamp(2.4rem, 5vw, 4.8rem);*/
            font-weight: 600;
            line-height: 1.08;
            color: #ffffff;
            margin-bottom: 1.4rem;
            max-width: 750px;
            letter-spacing: -0.02em;
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
            text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
            text-transform: capitalize;
        }

        .modern-hero-active .modern-hero-heading {
            opacity: 1;
            transform: translateY(0);
        }

        .modern-hero-heading .modern-hero-char {
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .modern-hero-active .modern-hero-heading .modern-hero-char {
            opacity: 1;
            transform: translateY(0);
        }

        .modern-hero-description {
            /*font-size: clamp(1rem, 1.4vw, 1.2rem);*/
            font-weight: 600;
            line-height: 1.65;
            color: #fff;
            max-width: 560px;
            margin-bottom: 2.2rem;
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.7s ease 0.35s, transform 0.7s ease 0.35s;
        }

        .modern-hero-active .modern-hero-description {
            opacity: 1;
            transform: translateY(0);
        }

        .modern-hero-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.7s ease 0.45s, transform 0.7s ease 0.45s;
        }

        .modern-hero-active .modern-hero-buttons {
            opacity: 1;
            transform: translateY(0);
        }

        .modern-hero-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.9rem 2rem;
            font-size: 0.95rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-decoration: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            border: 2px solid transparent;
            outline: none;
        }

        .modern-hero-btn:focus-visible {
            outline: 3px solid var(--modern-hero-accent-glow);
            outline-offset: 3px;
        }

        .modern-hero-btn-primary {
            background: var(--modern-hero-accent);
            color: #ffffff;
            border-color: var(--modern-hero-accent);
            box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35);
        }

        .modern-hero-btn-primary:hover {
            background: #1d4ed8;
            border-color: #1d4ed8;
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(37, 99, 235, 0.5);
        }

        .modern-hero-btn-primary:active {
            transform: translateY(-1px) scale(0.97);
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
        }

        .modern-hero-btn-secondary {
            background: transparent;
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .modern-hero-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.75);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        .modern-hero-btn-secondary:active {
            transform: translateY(-1px) scale(0.97);
        }

        .modern-hero-arrow {
            position: absolute;
            top: 50%;
            z-index: 10;
            transform: translateY(-50%);
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, 0.35);
            background: rgba(10, 15, 26, 0.5);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #ffffff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            opacity: 0.75;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        .modern-hero-arrow:hover {
            background: rgba(37, 99, 235, 0.6);
            border-color: rgba(255, 255, 255, 0.7);
            opacity: 1;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
            transform: translateY(-50%) scale(1.06);
        }

        .modern-hero-arrow:active {
            transform: translateY(-50%) scale(0.94);
        }
        .modern-hero-arrow:focus-visible {
            outline: 3px solid var(--modern-hero-accent-glow);
            outline-offset: 3px;
            opacity: 1;
        }

        .modern-hero-arrow-prev {
            left: 20px;
        }
        .modern-hero-arrow-next {
            right: 20px;
        }

        .modern-hero-arrow svg {
            width: 20px;
            height: 20px;
            pointer-events: none;
            transition: transform 0.25s ease;
        }
        .modern-hero-arrow-prev:hover svg {
            transform: translateX(-3px);
        }
        .modern-hero-arrow-next:hover svg {
            transform: translateX(3px);
        }

        .modern-hero-pagination {
            position: absolute;
            bottom: 36px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            gap: 10px;
            padding: 8px 16px;
            background: rgba(10, 15, 26, 0.45);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-radius: 40px;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .modern-hero-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            border: none;
            cursor: pointer;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }

        .modern-hero-dot:hover {
            background: rgba(255, 255, 255, 0.75);
            transform: scale(1.25);
        }
        .modern-hero-dot:focus-visible {
            outline: 2px solid var(--modern-hero-accent-glow);
            outline-offset: 3px;
        }
        .modern-hero-dot.modern-hero-dot-active {
            background: #ffffff;
            width: 28px;
            border-radius: 20px;
            box-shadow: 0 0 16px rgba(255, 255, 255, 0.5);
        }

        .modern-hero-progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            z-index: 11;
            background: rgba(255, 255, 255, 0.1);
            pointer-events: none;
        }

        .modern-hero-progress-fill {
            height: 100%;
            background: var(--modern-hero-accent-glow);
            transform-origin: left center;
            transform: scaleX(0);
            will-change: transform;
            border-radius: 0 2px 2px 0;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
        }

        .modern-hero-progress-fill.modern-hero-progress-running {
            animation: modern-hero-progress-anim var(--modern-hero-autoplay-duration) linear forwards;
            animation-play-state: running;
        }

        .modern-hero-progress-fill.modern-hero-progress-paused {
            animation-play-state: paused;
        }

        @keyframes modern-hero-progress-anim {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        .modern-hero-slide[data-animation="split-screen"] .modern-hero-bg-img {
            clip-path: inset(0 50% 0 50%);
            transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
        }
        .modern-hero-slide[data-animation="split-screen"].modern-hero-active .modern-hero-bg-img {
            clip-path: inset(0 0% 0 0%);
        }
        .modern-hero-slide[data-animation="split-screen"] .modern-hero-btn-primary {
            opacity: 0;
            transform: rotate(-6deg) scale(0.85);
            transition: opacity 0.6s ease 0.5s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s,
                background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .modern-hero-slide[data-animation="split-screen"].modern-hero-active .modern-hero-btn-primary {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        /* Responsive styles */
        @media (max-width: 1199px) and (min-width: 768px) {
            .modern-hero-slider {
                height: 80vh;
                min-height: 560px;
            }
            :root { --modern-hero-side-spacing: 48px; }
            .modern-hero-heading {
                font-size: clamp(2rem, 4.2vw, 3.4rem);
                max-width: 600px;
            }
            .modern-hero-description {
                font-size: 1rem;
                max-width: 460px;
            }
            .modern-hero-btn {
                padding: 0.75rem 1.6rem;
                font-size: 0.9rem;
            }
            .modern-hero-arrow {
                width: 44px; height: 44px;
            }
            .modern-hero-arrow-prev { left: 12px; }
            .modern-hero-arrow-next { right: 12px; }
            .modern-hero-pagination {
                bottom: 28px; gap: 8px; padding: 6px 14px;
            }
            .modern-hero-dot { width: 8px; height: 8px; }
            .modern-hero-dot.modern-hero-dot-active { width: 24px; }
        }

        @media (max-width: 767px) {

    .modern-hero-slider{
        height: 35svh;
        min-height: 260px;
        overflow:hidden;
    }

    .modern-hero-slides-wrapper{
        height:100%;
    }

    .modern-hero-slide{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }

    .modern-hero-bg-img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
        transform:none !important;
    }
    
    .modern-hero-pagination {
  padding: 5px 16px;
}
.modern-hero-dot {
  width: 5px;
  height: 5px;
  
}
.modern-hero-dot.modern-hero-dot-active {
  background: #ffffff;
  width: 15px;
  
}

    .modern-hero-content{
        display:flex;
        justify-content:flex-end;
        align-items:center;
        text-align:center;
        height:100%;
        width:100%;
        padding:0 20px 50px;
        z-index:5;
    }

    .modern-hero-tagline{
        font-size:12px;
        letter-spacing:1px;
        margin-bottom:12px;
    }

    .modern-hero-heading{
        font-size:20px;
        line-height:1.2;
        max-width:100%;
        margin-bottom:15px;
        word-break:break-word;
    }

    .modern-hero-heading span{
        white-space:normal !important;
    }

    .modern-hero-description{
        font-size:14px;
        line-height:1.7;
        max-width:100%;
        margin-bottom:20px;
    }

    .modern-hero-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:12px;
        align-items:center;
    }

    .modern-hero-btn{
        width:100%;
        max-width:280px;
    }

    .modern-hero-arrow{
        width:38px;
        height:38px;
        bottom:75px;
        top:auto;
        display: none;
    }

    .modern-hero-pagination{
        bottom:20px;
    }
}

        @media (prefers-reduced-motion: reduce) {
            .modern-hero-slide .modern-hero-bg-img,
            .modern-hero-slide[data-animation] .modern-hero-bg-img,
            .modern-hero-slide.modern-hero-active .modern-hero-bg-img {
                transition: none !important;
                animation: none !important;
                transform: scale(1) !important;
                clip-path: inset(0 0% 0 0%) !important;
                opacity: 1 !important;
            }
            .modern-hero-slide .modern-hero-content>*,
            .modern-hero-slide[data-animation] .modern-hero-content>* {
                transition: opacity 0.3s ease !important;
                transform: none !important;
                opacity: 1 !important;
            }
            .modern-hero-progress-fill.modern-hero-progress-running {
                animation-duration: 0.01ms !important;
            }
        }
        
        .modern-hero-space {
            display: inline-block;
            width: 0.35em;
        }