/* =========================================================
   NAVAMI NATURALS - INNER HERO
========================================================= */

    .navami-inner-hero {

        --hero-green: #5db812;
        --hero-gold: #ffbb00;
        --hero-dark: #0d301a;

        position: relative;



        display: flex;
        align-items: center;

        overflow: hidden;

        background: #102419;

    }


    /* =========================================================
   BACKGROUND MEDIA
========================================================= */

    .inner-hero-media {

        position: absolute;

        inset: 0;

        overflow: hidden;

    }


    .inner-hero-image {

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center 48%;

        transform: scale(1.06);

        animation: heroImageZoom 12s ease-out forwards;

    }


    /* =========================================================
   OVERLAY
========================================================= */

    .inner-hero-overlay {

        position: absolute;

        inset: 0;

        background:
            linear-gradient(90deg,
                rgba(8, 32, 17, .91) 0%,
                rgba(10, 39, 21, .78) 42%,
                rgba(12, 40, 22, .55) 75%,
                rgba(8, 25, 14, .72) 100%);

    }


    /* Bottom cinematic gradient */

    .inner-hero-overlay::after {

        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(180deg,
                rgba(5, 20, 11, .22) 0%,
                transparent 45%,
                rgba(4, 19, 10, .62) 100%);

    }


    /* =========================================================
   LIGHT GLOW
========================================================= */

    .inner-hero-glow {

        position: absolute;

        width: 550px;
        height: 550px;

        left: 8%;
        top: 50%;

        transform: translateY(-50%);

        border-radius: 50%;

        background:
            radial-gradient(circle,
                rgba(93, 184, 18, .12),
                transparent 67%);

        filter: blur(15px);

        pointer-events: none;

        animation: heroGlow 7s ease-in-out infinite;

    }


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

    .inner-hero-content {

        position: relative;

        z-index: 10;

        max-width: 850px;

        padding: 80px 0 80px;

    }


    /* =========================================================
   LABEL
========================================================= */

    .inner-hero-label {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        margin-bottom: 18px;

        color: var(--hero-gold);

        font-size: 11px;

        font-weight: 900;

        letter-spacing: .22em;

        text-transform: uppercase;

        animation: heroFadeUp .8s ease both;

    }


    .label-line {

        width: 38px;
        height: 2px;

        background: var(--hero-gold);

    }


    .label-leaf {

        display: flex;

        align-items: center;
        justify-content: center;

        width: 25px;
        height: 25px;

        border: 1px solid rgba(255, 187, 0, .35);

        border-radius: 50%;

        font-size: 9px;

        background: rgba(255, 187, 0, .08);

    }


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

    .inner-hero-title {

        max-width: 800px;

        margin: 0;

        color: #fff;

        font-size: clamp(44px, 6vw, 52px);

        font-weight: 900;

        line-height: .98;

        letter-spacing: -.055em;

        text-shadow:
            0 8px 30px rgba(0, 0, 0, .18);

        animation: heroFadeUp .9s .08s ease both;

    }


    .inner-hero-title span {

        display: block;

        color: var(--hero-gold);

    }


    /* =========================================================
   DIVIDER
========================================================= */

    .inner-hero-divider {

        display: flex;

        align-items: center;

        gap: 9px;

        width: 165px;

        margin: 10px 0 10px;

        animation: heroFadeUp 1s .16s ease both;

    }


    .inner-hero-divider span {

        height: 1px;

        flex: 1;

        background:
            linear-gradient(90deg,
                transparent,
                rgba(255, 187, 0, .75));

    }


    .inner-hero-divider span:last-child {

        background:
            linear-gradient(90deg,
                rgba(255, 187, 0, .75),
                transparent);

    }


    .inner-hero-divider i {

        color: var(--hero-gold);

        font-size: 12px;

        animation: leafRotate 4s ease-in-out infinite;

    }


    /* =========================================================
   DESCRIPTION
========================================================= */

    .inner-hero-description {

        max-width: 600px;

        margin: 0;

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

        font-size: 16px;

        font-weight: 400;

        line-height: 1.7;

        letter-spacing: .01em;

        animation: heroFadeUp 1s .24s ease both;

    }


    /* =========================================================
   STORY BADGE
========================================================= */

    .inner-hero-badge {

        display: inline-flex;

        align-items: center;

        gap: 9px;

        margin-top: 10px;

        padding: 9px 14px;

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

        border-radius: 50px;

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

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

        backdrop-filter: blur(10px);

        font-size: 8px;

        font-weight: 900;

        letter-spacing: .16em;

        animation: heroFadeUp 1s .32s ease both;

    }


    .inner-hero-badge i {

        display: flex;

        align-items: center;
        justify-content: center;

        width: 22px;
        height: 22px;

        border-radius: 50%;

        color: #142016;

        background: var(--hero-gold);

        font-size: 8px;

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

    }


    /* =========================================================
   ORGANIC SHAPES
========================================================= */

    .hero-organic-shape {

        position: absolute;

        z-index: 3;

        pointer-events: none;

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

    }


    .hero-shape-one {

        width: 220px;
        height: 220px;

        right: -100px;
        top: 65px;

        border-radius: 42% 58% 62% 38% / 38% 44% 56% 62%;

        transform: rotate(25deg);

        animation:
            shapeFloat 9s ease-in-out infinite,
            shapeRotate 20s linear infinite;

    }


    .hero-shape-two {

        width: 110px;
        height: 110px;

        right: 14%;
        bottom: 30px;

        border-radius: 50%;

        border-color: rgba(255, 187, 0, .18);

        animation:
            shapeFloatReverse 7s ease-in-out infinite;

    }


    /* =========================================================
   FLOATING LEAVES
========================================================= */

    .hero-leaf-decoration {

        position: absolute;

        z-index: 4;

        display: flex;

        align-items: center;
        justify-content: center;

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

        pointer-events: none;

    }


    .hero-leaf-one {

        right: 7%;

        top: 28%;

        font-size: 55px;

        transform: rotate(-20deg);

        animation: leafFloat 6s ease-in-out infinite;

    }


    .hero-leaf-two {

        right: 25%;

        bottom: 15%;

        color: rgba(255, 187, 0, .17);

        font-size: 30px;

        animation: leafFloatReverse 5s ease-in-out infinite;

    }


    /* =========================================================
   BOTTOM CURVE
========================================================= */

    .hero-bottom-curve {

        position: absolute;

        z-index: 8;

        left: -2%;

        bottom: -1px;

        width: 104%;

        height: 28px;

        background: #fff;

        clip-path:
            ellipse(58% 100% at 50% 100%);

    }


    /* =========================================================
   ANIMATIONS
========================================================= */

    @keyframes heroImageZoom {

        from {
            transform: scale(1.06);
        }

        to {
            transform: scale(1);
        }

    }


    @keyframes heroFadeUp {

        from {
            opacity: 0;
            transform: translateY(22px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }


    @keyframes heroGlow {

        0%,
        100% {
            transform: translateY(-50%) scale(1);
            opacity: .7;
        }

        50% {
            transform: translateY(-50%) scale(1.12);
            opacity: 1;
        }

    }


    @keyframes leafRotate {

        0%,
        100% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(15deg);
        }

    }


    @keyframes badgeBounce {

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

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

    }


    @keyframes shapeFloat {

        0%,
        100% {
            transform: rotate(25deg) translate(0, 0);
        }

        50% {
            transform: rotate(32deg) translate(-15px, 18px);
        }

    }


    @keyframes shapeRotate {

        from {
            border-radius: 42% 58% 62% 38% / 38% 44% 56% 62%;
        }

        50% {
            border-radius: 60% 40% 35% 65% / 55% 35% 65% 45%;
        }

        to {
            border-radius: 42% 58% 62% 38% / 38% 44% 56% 62%;
        }

    }


    @keyframes shapeFloatReverse {

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

        50% {
            transform: translate(12px, -12px);
        }

    }


    @keyframes leafFloat {

        0%,
        100% {
            transform: rotate(-20deg) translateY(0);
        }

        50% {
            transform: rotate(-8deg) translateY(-13px);
        }

    }


    @keyframes leafFloatReverse {

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

        50% {
            transform: translateY(-10px) rotate(12deg);
        }

    }


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

    @media (max-width: 991px) {

        .navami-inner-hero {

            min-height: 430px;

        }

        .inner-hero-content {

            padding: 90px 0 90px;

        }

        .inner-hero-title {

            font-size: clamp(42px, 7vw, 60px);

        }

        .hero-leaf-one {

            right: 5%;

            font-size: 40px;

        }

    }


    @media (max-width: 767px) {

        .navami-inner-hero {

            min-height: 400px;

        }

        .inner-hero-content {

            padding: 105px 15px 60px;

            text-align: center;

        }

        .inner-hero-label {

            justify-content: center;

            font-size: 9px;

            letter-spacing: .17em;

        }

        .label-line {

            width: 25px;

        }

        .inner-hero-title {

            font-size: 42px;

            line-height: 1.02;

        }

        .inner-hero-divider {

            margin: 18px auto 15px;

        }

        .inner-hero-description {

            max-width: 500px;

            margin: 0 auto;

            font-size: 14px;

        }

        .inner-hero-badge {

            margin-top: 22px;

        }

        .hero-leaf-one {

            right: 4%;

            top: 17%;

            font-size: 28px;

            opacity: .6;

        }

        .hero-leaf-two {

            left: 5%;

            bottom: 18%;

            font-size: 22px;

        }

        .hero-shape-one {

            width: 140px;
            height: 140px;

            right: -75px;

        }

    }


    @media (max-width: 480px) {

        .navami-inner-hero {

            min-height: 390px;

        }

        .inner-hero-content {

            padding: 100px 12px 55px;

        }

        .inner-hero-title {

            font-size: 35px;

        }

        .inner-hero-description {

            font-size: 13px;

            line-height: 1.6;

        }

        .inner-hero-label {

            margin-bottom: 13px;

        }

        .hero-leaf-one,
        .hero-leaf-two,
        .hero-shape-two {

            opacity: .45;

        }

    }