/* =========================================================
   ALLIED INDIA DEFENCE
   CINEMATIC HERO
   ========================================================= */

.aid-hero {
    --hero-orange: #f47c20;
    --hero-navy: #0b1f33;
    --hero-white: #ffffff;

    position: relative;

    width: 100%;

    height: 360vh;

    background: #071522;

    overflow: clip;

    isolation: isolate;
}


/* =========================================================
   HERO STAGE
   ========================================================= */

.aid-hero__stage {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 680px;

    overflow: hidden;

    background: #071522;

}


/* =========================================================
   VISUAL LAYERS
   ========================================================= */

.aid-hero__visuals {

    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

}


.aid-hero__scene {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.aid-hero__scene.is-active {

    opacity: 1;

    visibility: visible;

}


.aid-hero__scene-image {

    position: absolute;

    inset: -6%;

    width: 112%;

    height: 112%;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    transform:
        scale(1.08);

    will-change:
        transform;

}


/* =========================================================
   DARK CINEMATIC SHADE
   ========================================================= */

.aid-hero__shade {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(3, 12, 21, .94) 0%,
            rgba(3, 12, 21, .72) 28%,
            rgba(3, 12, 21, .20) 64%,
            rgba(3, 12, 21, .42) 100%
        ),

        linear-gradient(
            180deg,
            rgba(3, 12, 21, .55) 0%,
            transparent 35%,
            rgba(3, 12, 21, .72) 100%
        );

}


/* =========================================================
   VIGNETTE
   ========================================================= */

.aid-hero__vignette {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0, 0, 0, .18) 70%,
            rgba(0, 0, 0, .65) 100%
        );

}


/* =========================================================
   TECHNICAL GRID
   ========================================================= */

.aid-hero__grid {

    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.075) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.075) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

    mask-image:

        linear-gradient(
            90deg,
            black 0%,
            rgba(0,0,0,.5) 55%,
            transparent 100%
        );

}


/* =========================================================
   SCANLINE
   ========================================================= */

.aid-hero__scanline {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 1px;

    z-index: 8;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(244,124,32,.75),
            transparent
        );

    opacity: .65;

}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.aid-hero__container {

    position: relative;

    z-index: 10;

    width: min(
        1320px,
        calc(100% - 100px)
    );

    height: 100%;

    margin: 0 auto;

}


/* =========================================================
   TECHNICAL TOP / BOTTOM
   ========================================================= */

.aid-hero__technical {

    position: absolute;

    left: 50%;

    z-index: 11;

    width: min(
        1320px,
        calc(100% - 100px)
    );

    transform:
        translateX(-50%);

    display: flex;

    justify-content: space-between;

    color:
        rgba(255,255,255,.58);

    font-family:
        var(
            --font-tech,
            'Rajdhani',
            sans-serif
        );

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .24em;

    text-transform: uppercase;

    pointer-events: none;

}


.aid-hero__technical--top {

    top: 112px;

}


.aid-hero__technical--bottom {

    bottom: 35px;

}


.aid-hero__technical::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    height: 1px;

    background:
        rgba(255,255,255,.16);

}


.aid-hero__technical--top::before {

    top: -17px;

}


.aid-hero__technical--bottom::before {

    bottom: -14px;

}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.aid-hero__content {

    position: absolute;

    left: 0;

    top: 50%;

    transform:
        translateY(-50%);

    width: min(
        720px,
        62vw
    );

}


/* =========================================================
   EYEBROW
   ========================================================= */

.aid-hero__eyebrow {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

    color: rgba(255,255,255,.8);

    font-family:
        var(
            --font-tech,
            'Rajdhani',
            sans-serif
        );

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .28em;

    text-transform: uppercase;

}


.aid-hero__eyebrow-line {

    display: block;

    width: 42px;

    height: 2px;

    background:
        var(--hero-orange);

}


/* =========================================================
   MAIN TITLE
   ========================================================= */

.aid-hero__title {

    margin: 0;

    color: #fff !important;

    font-family:
        var(
            --font-display,
            'Rajdhani',
            sans-serif
        ) !important;

    font-size:
        clamp(
            62px,
            5.6vw,
            118px
        ) !important;

    font-weight: 700 !important;

    line-height: .82 !important;

    letter-spacing: -.055em;

    text-transform: uppercase;

}


.aid-hero__title-line {

    display: block;

    overflow: hidden;

}


.aid-hero__title-line--accent {

    color: #fff !important;

}


/* =========================================================
   SEPARATOR
   ========================================================= */

.aid-hero__separator {

    display: flex;

    align-items: center;

    width: 160px;

    height: 3px;

    margin:
        31px 0 20px;

}


.aid-hero__separator span {

    display: block;

    width: 100%;

    height: 2px;

    background:
        var(--hero-orange);

    transform-origin:
        left center;

}


/* =========================================================
   SUBTITLE
   ========================================================= */

.aid-hero__subtitle {

    color:
        var(--hero-orange) !important;

    font-family:
        var(
            --font-tech,
            'Rajdhani',
            sans-serif
        ) !important;

    font-size:
        clamp(
            22px,
            2.1vw,
            32px
        ) !important;

    font-weight: 700 !important;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.aid-hero__button {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 22px;

    margin-top: 38px;

    padding:
        14px 17px;

    color: #fff !important;

    border:
        1px solid
        rgba(255,255,255,.34);

    background:
        rgba(255,255,255,.035);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    font-family:
        var(
            --font-tech,
            'Rajdhani',
            sans-serif
        );

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .22em;

    text-decoration: none !important;

    overflow: hidden;

    transition:
        color .35s ease,
        border-color .35s ease,
        background .35s ease,
        transform .35s ease;

}


.aid-hero__button::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        var(--hero-orange);

    transform:
        translateX(-102%);

    transition:
        transform .45s
        cubic-bezier(.16,1,.3,1);

}


.aid-hero__button-text,
.aid-hero__button-arrow {

    position: relative;

    z-index: 2;

}


.aid-hero__button-arrow {

    font-size: 17px;

    line-height: 1;

    transition:
        transform .35s ease;

}


.aid-hero__button:hover {

    color: #fff !important;

    border-color:
        var(--hero-orange);

    transform:
        translateY(-3px);

}


.aid-hero__button:hover::before {

    transform:
        translateX(0);

}


.aid-hero__button:hover
.aid-hero__button-arrow {

    transform:
        translate(3px,-3px);

}


/* =========================================================
   SIDE PANEL
   ========================================================= */

.aid-hero__side-panel {

    position: absolute;

    right: 80px;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 28px;

}


/* COUNTER */

.aid-hero__counter {

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.55);

    font-family:
        var(
            --font-tech,
            'Rajdhani',
            sans-serif
        );

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .15em;

}


.aid-hero__counter-current {

    color: #fff;

    font-size: 30px;

    font-weight: 700;

}


.aid-hero__counter-line {

    width: 42px;

    height: 1px;

    background:
        rgba(255,255,255,.28);

}


.aid-hero__counter-total {

    font-size: 12px;

}


/* CATEGORY */

.aid-hero__category {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 5px;

    color:
        rgba(255,255,255,.52);

    font-family:
        var(
            --font-tech,
            'Rajdhani',
            sans-serif
        );

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .18em;

}


.aid-hero__category span:first-child {

    color:
        var(--hero-orange);

    font-size: 10px;

}


/* =========================================================
   VERTICAL NAVIGATION
   ========================================================= */

.aid-hero__navigation {

    position: absolute;

    right: 0;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.aid-hero__nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    width: 55px;

    padding: 4px 0;

    border: 0;

    outline: 0;

    color:
        rgba(255,255,255,.35);

    background: transparent;

    font-family:
        var(
            --font-tech,
            'Rajdhani',
            sans-serif
        );

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .12em;

    cursor: pointer;

    transition:
        color .3s ease;

}


.aid-hero__nav i {

    display: block;

    width: 15px;

    height: 1px;

    background:
        currentColor;

    transition:
        width .4s
        cubic-bezier(.16,1,.3,1),
        background .3s ease;

}


.aid-hero__nav.is-active {

    color: #fff;

}


.aid-hero__nav.is-active i {

    width: 38px;

    background:
        var(--hero-orange);

}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.aid-hero__scroll {

    position: absolute;

    left: 0;

    bottom: 42px;

    display: flex;

    align-items: center;

    gap: 13px;

    color:
        rgba(255,255,255,.56);

    font-family:
        var(
            --font-tech,
            'Rajdhani',
            sans-serif
        );

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .2em;

}


.aid-hero__scroll-line {

    position: relative;

    width: 55px;

    height: 1px;

    overflow: hidden;

    background:
        rgba(255,255,255,.22);

}


.aid-hero__scroll-line i {

    position: absolute;

    left: 0;

    top: 0;

    width: 22px;

    height: 1px;

    background:
        var(--hero-orange);

    animation:
        aidHeroScrollLine 2s
        ease-in-out infinite;

}


@keyframes aidHeroScrollLine {

    0% {
        transform:
            translateX(-25px);
    }

    50% {
        transform:
            translateX(35px);
    }

    100% {
        transform:
            translateX(70px);
    }

}


.aid-hero__scroll-arrow {

    color:
        var(--hero-orange);

    font-size: 15px;

    animation:
        aidHeroArrow 1.7s
        ease-in-out infinite;

}


@keyframes aidHeroArrow {

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

    50% {
        transform:
            translateY(5px);
    }

}


/* =========================================================
   CORNER MARKERS
   ========================================================= */

.aid-hero__corner {

    position: absolute;

    z-index: 12;

    width: 35px;

    height: 35px;

    opacity: .55;

    pointer-events: none;

}


.aid-hero__corner::before,
.aid-hero__corner::after {

    content: "";

    position: absolute;

    background:
        rgba(255,255,255,.5);

}


.aid-hero__corner--tl {

    top: 135px;

    left: 0;

}


.aid-hero__corner--tr {

    top: 135px;

    right: 0;

}


.aid-hero__corner--bl {

    bottom: 58px;

    left: 0;

}


.aid-hero__corner--br {

    bottom: 58px;

    right: 0;

}


.aid-hero__corner--tl::before,
.aid-hero__corner--bl::before {

    left: 0;

    width: 1px;

    height: 35px;

}


.aid-hero__corner--tl::after,
.aid-hero__corner--tr::after {

    top: 0;

    width: 35px;

    height: 1px;

}


.aid-hero__corner--tr::before,
.aid-hero__corner--br::before {

    right: 0;

    width: 1px;

    height: 35px;

}


.aid-hero__corner--bl::after,
.aid-hero__corner--br::after {

    bottom: 0;

    width: 35px;

    height: 1px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .aid-hero__container {

        width:
            calc(100% - 70px);

    }

    .aid-hero__technical {

        width:
            calc(100% - 70px);

    }

    .aid-hero__side-panel {

        right: 70px;

    }

}


@media (max-width: 991px) {

    .aid-hero {

        height: 300vh;

    }


    .aid-hero__container {

        width:
            calc(100% - 50px);

    }


    .aid-hero__technical {

        width:
            calc(100% - 50px);

    }


    .aid-hero__content {

        width: 72%;

    }


    .aid-hero__title {

        font-size:
            clamp(
                52px,
                9vw,
                85px
            ) !important;

    }


    .aid-hero__side-panel {

        right: 50px;

    }


    .aid-hero__navigation {

        right: 0;

    }

}


@media (max-width: 767px) {

    .aid-hero {

        height: 270vh;

    }


    .aid-hero__stage {

        min-height: 620px;

    }


    .aid-hero__container {

        width:
            calc(100% - 32px);

    }


    .aid-hero__technical {

        width:
            calc(100% - 32px);

        font-size: 7px;

        letter-spacing: .15em;

    }


    .aid-hero__technical--top {

        top: 85px;

    }


    .aid-hero__technical--bottom {

        bottom: 27px;

    }


    .aid-hero__content {

        width: 100%;

        top: 51%;

    }


    .aid-hero__eyebrow {

        font-size: 9px;

        margin-bottom: 20px;

    }


    .aid-hero__title {

        font-size:
            clamp(
                43px,
                13vw,
                68px
            ) !important;

        line-height: .86 !important;

    }


    .aid-hero__separator {

        width: 90px;

        margin:
            24px 0 16px;

    }


    .aid-hero__subtitle {

        font-size:
            19px !important;

    }


    .aid-hero__button {

        margin-top: 28px;

        padding:
            12px 14px;

    }


    .aid-hero__side-panel {

        right: 32px;

        top: auto;

        bottom: 75px;

        transform: none;

    }


    .aid-hero__category {

        display: none;

    }


    .aid-hero__counter-current {

        font-size: 23px;

    }


    .aid-hero__navigation {

        right: 0;

        top: auto;

        bottom: 74px;

        transform: none;

        gap: 8px;

    }


    .aid-hero__nav {

        width: 40px;

    }


    .aid-hero__scroll {

        bottom: 27px;

        font-size: 7px;

    }


    .aid-hero__scroll-line {

        width: 35px;

    }


    .aid-hero__corner {

        width: 20px;

        height: 20px;

    }


    .aid-hero__corner--tl,
    .aid-hero__corner--tr {

        top: 105px;

    }


    .aid-hero__corner--bl,
    .aid-hero__corner--br {

        bottom: 45px;

    }

}


@media (prefers-reduced-motion: reduce) {

    .aid-hero__scroll-line i,
    .aid-hero__scroll-arrow {

        animation: none;

    }

}

/* =========================================================
   STANDARD PREMIUM HERO CAROUSEL — NO SCROLL PINNING
   Scoped to the home-page hero only.
========================================================= */
.aid-hero {
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: #071522;
}
.aid-hero__stage {
    height: min(100svh, 1000px);
    min-height: 660px;
}
.aid-hero__scene {
    transition: opacity .8s cubic-bezier(.22,.61,.36,1), visibility .8s;
}
.aid-hero__scene.is-active {
    pointer-events: auto;
}
.aid-hero__scene-image {
    transition: transform 7s cubic-bezier(.2,.65,.25,1);
}
.aid-hero__scene.is-active .aid-hero__scene-image {
    transform: scale(1.035);
}
.aid-hero__eyebrow,
.aid-hero__title,
.aid-hero__subtitle,
.aid-hero__button {
    transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.aid-hero.is-transitioning .aid-hero__eyebrow,
.aid-hero.is-transitioning .aid-hero__title,
.aid-hero.is-transitioning .aid-hero__subtitle,
.aid-hero.is-transitioning .aid-hero__button {
    opacity: .15;
    transform: translateY(10px);
}
.aid-hero__arrows {
    position: absolute;
    z-index: 8;
    right: 72px;
    bottom: 42px;
    display: flex;
    gap: 8px;
}
.aid-hero__arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 0;
    color: #fff;
    background: rgba(7,21,34,.28);
    backdrop-filter: blur(10px);
    font-size: 20px;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.aid-hero__arrow:hover,
.aid-hero__arrow:focus-visible {
    background: #f47c20;
    border-color: #f47c20;
    transform: translateY(-2px);
    outline: none;
}
.aid-hero__navigation { z-index: 8; }
.aid-hero__nav:focus-visible { outline: 1px solid #f47c20; outline-offset: 4px; }
.aid-hero__counter-current { font-variant-numeric: tabular-nums; }
@media (max-width: 991px) {
    .aid-hero { height: auto; }
    .aid-hero__stage { min-height: 660px; }
    .aid-hero__arrows { right: 58px; bottom: 32px; }
}
@media (max-width: 767px) {
    .aid-hero { height: auto; }
    .aid-hero__stage { height: 88svh; min-height: 640px; }
    .aid-hero__arrows { right: 46px; bottom: 24px; }
    .aid-hero__arrow { width: 36px; height: 36px; }
    .aid-hero__scroll { max-width: 58%; }
    .aid-hero__scroll > span:first-child { max-width: 130px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
    .aid-hero__scene, .aid-hero__scene-image, .aid-hero__eyebrow,
    .aid-hero__title, .aid-hero__subtitle, .aid-hero__button,
    .aid-hero__arrow { transition: none !important; animation: none !important; }
}