/* ==== 
 --------- (4.02) banner styles start ---------
 ==== */

// hero section styles
.hero {
    padding-block: 180px 100px;
    position: relative;
    z-index: 1;
    overflow: hidden;

    .hero__intro {
        max-width: 900px;
        margin-inline: auto;
        margin-bottom: 60px;

        .sub-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        img {
            margin-inline-start: 4px;
            margin-top: -2px;
            animation: ring 6s 0s ease-in-out infinite;
        }

    }



    .hero__content-left {
        text-align: center;
    }

    .hero__content-right {
        margin-top: 60px;
    }

    .counter__content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 30px;
        flex-direction: column;
        text-align: center;

        br {
            display: none;
        }

        &:nth-of-type(2) {

            .title-lg {
                color: var(--tertiary-color);
            }
        }

        &:nth-last-of-type(1) {
            margin-bottom: 0px;
        }

        p {
            margin-top: -5px;
        }

        .odometer-digit {
            width: 24px;
        }
    }

    .hero__content-cta {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero__thumb {
        position: absolute;
        bottom: 0px;
        left: 48%;
        transform: translateX(-48%);
        z-index: -1;

        span {
            position: absolute;
            top: 12%;
            left: 55%;
            z-index: -2;
            width: 400px;
            height: 800px;
            background-color: var(--tertiary-color);
            border-radius: 700px 700px 0px 0px;
            transform: translateX(-50%) rotate(-39.28deg);
        }

        img {
            max-width: 35vw;
        }
    }

    .shape-one {
        position: absolute;
        inset-inline-start: 8%;
        top: 23%;
        z-index: -1;

        img {
            max-width: 8vw;
            min-width: 45px;
            animation: rotation 8s linear infinite;
        }
    }

    .shape-two {
        position: absolute;
        inset-inline-end: 10%;
        top: 22%;
        z-index: -1;

        img {
            max-width: 9vw;
            min-width: 50px;
            animation: moveLeftRight 8s linear infinite;
        }
    }
}

// hero section two styles
.hero-two {
    padding-block: 180px 100px;
    position: relative;
    z-index: 1;
    overflow: hidden;

    .hero-two__wrapper {
        position: relative;
        z-index: 1;
    }


    .sub-title {
        display: flex;
        align-items: center;
        gap: 4px;

        img {
            margin-inline-start: 4px;
            margin-top: -2px;
            animation: ring 6s 0s ease-in-out infinite;
        }
    }

    .hero__two-cta {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .users {
        display: flex;
        align-items: center;
        gap: 0px;
        padding-inline-start: 12px;

        .single-user {
            margin-inline-start: -12px;

            img {
                width: 50px;
                height: 50px;
                min-width: 50px;
                border-radius: 50%;
            }

        }

        .user-count {
            margin-inline-start: 16px;

            h3 {
                display: flex;
                align-items: center;
                margin-bottom: -4px;
                direction: ltr;

            }

            .prefix {
                padding-bottom: 2px;
                margin-inline-start: 0px;
            }
        }
    }

    .hero-two__group {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .hero-two__left {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;

        .btn-anim {
            width: 140px;
            height: 140px;
            min-width: 140px;
        }

        img {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            animation: rotation 10s linear infinite;
        }
    }

    .hero-two__right {
        p {
            max-width: 280px;
        }
    }

    .hero-two-thumb {
        position: absolute;
        bottom: -100px;
        inset-inline-end: -160px;
        padding-inline: 50px;

        span {
            position: absolute;
            inset-inline: 0px;
            inset-block-end: 0px;
            background-color: var(--secondary-color);
            width: 100%;
            height: 100%;
            max-height: 580px;
            z-index: -1;
            border-top-left-radius: 12px;
            clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 50%);
        }

        img {
            max-width: 40vw;
        }
    }

}

// hero section three styles
.hero-three {
    padding-block: 180px 100px;
    position: relative;
    z-index: 1;
    overflow: hidden;

    .hero-three__intro {
        h1 {
            font-family: var(--kumbh);
            text-transform: uppercase;
            font-weight: 800;
            font-size: 30px;
            line-height: 40px;
        }

        span {
            display: block;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke-color: #FFF;
            -webkit-text-stroke-width: 1px;
        }
    }

    .hero-three__cta {
        text-align: center;
    }

    .users {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0px;
        padding-inline-start: 12px;

        .single-user {
            margin-inline-start: -12px;

            img {
                width: 50px;
                height: 50px;
                min-width: 50px;
                border-radius: 50%;
            }

        }

        .user-count {
            margin-inline-start: 16px;

            h3 {
                display: flex;
                align-items: center;
                margin-bottom: -4px;
                direction: ltr;

            }

            .prefix {
                padding-bottom: 2px;
                margin-inline-start: 0px;
            }
        }
    }


    .hero-two__group-thumb {
        max-width: 280px;
        margin-inline: auto;
        text-align: center;
    }

    .bg-img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        inset-block: 0px;
        width: 100%;
        max-width: 800px;
        height: 100%;
        z-index: -3;
        background: linear-gradient(180deg, rgba(118, 144, 255, 0.08) 0%, rgba(118, 144, 255, 0.00) 100%);
        opacity: 0.7;
        clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%, 0% 0%);

        &::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            inset-block: 0px;
            width: calc(100% - 100px);
            height: 100%;
            z-index: -2;
            background: linear-gradient(180deg, rgba(118, 144, 255, 0.05) 0%, rgba(118, 144, 255, 0.00) 100%);
            opacity: 0.8;
            clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%, 0% 0%);
        }

        &::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            inset-block: 0px;
            width: calc(100% - 200px);
            height: 100%;
            z-index: -1;
            background: linear-gradient(180deg, rgba(118, 144, 255, 0.05) 0%, rgba(118, 144, 255, 0.00) 100%);
            opacity: 0.9;
            clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%, 0% 0%);

        }
    }

    .hero-three-thumb {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;

        img {
            max-width: 48vw;
        }
    }

    .hero-three__social {
        position: absolute;
        top: 50%;
        inset-inline-end: 60px;
        transform: translateY(-50%);
        z-index: 1;

        .social {
            flex-direction: column;
        }

        a {
            border-color: var(--template-color);
            color: var(--template-color);

            &:hover {
                border-color: var(--secondary-color);
                color: var(--secondary-color);
            }
        }
    }

}

// hero section four styles
.hero-four {
    padding-block: 180px 100px;
    position: relative;
    z-index: 1;
    overflow: hidden;

    .sub-title {
        color: #00bc91;
        font-size: 16px;
    }

    .hero__two-cta {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    h1 {
        font-size: 34px;
        line-height: 44px;
    }

    h1,
    h3,
    p {
        color: var(--white) !important;
    }

    .hero-four__content {
        p {
            max-width: 500px;
        }
    }


    .users {
        display: flex;
        align-items: center;
        gap: 0px;
        padding-inline-start: 12px;

        .single-user {
            margin-inline-start: -12px;

            img {
                width: 50px;
                height: 50px;
                min-width: 50px;
                border-radius: 50%;
            }

        }

        .user-count {
            margin-inline-start: 16px;

            h3 {
                display: flex;
                align-items: center;
                margin-bottom: -4px;
                direction: ltr;

            }

            .prefix {
                padding-bottom: 2px;
                margin-inline-start: 0px;
            }
        }
    }

    .hero-two__group {
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .hero-two__left {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;

        .btn-anim {
            width: 140px;
            height: 140px;
            min-width: 140px;
        }

        img {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            animation: rotation 10s linear infinite;
        }
    }

    .hero-two__right {
        p {
            max-width: 280px;
        }
    }

    .hero-four-bg {
        position: absolute;
        inset: 0px;
        z-index: -1;

        img {
            width: 100%;
            height: 100%;

        }
    }

    .parallax-image-wrap,
    .parallax-image-inner {
        width: 100%;
        height: 100%;
    }
}

// hero section five styles
.hero-five {
    padding-block: 180px 100px;
    position: relative;
    z-index: 1;
    overflow: hidden;

    .hero__two-cta {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .hero-five__right {
        max-width: 320px;

        img {
            width: 100%;
            min-height: 80px;
            object-fit: fill;
        }

        .video-image {
            position: relative;

        }

        .video-btn {
            position: absolute;
            inset-inline-start: 10px;
            top: 50%;
            transform: translateY(-50%);

            a {
                width: 60px;
                height: 60px;
                min-width: 60px;
                background-color: #F20101;
                color: var(--white);
                font-size: 20px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .counter__content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
        flex-wrap: wrap;

        .title-lg {
            direction: ltr;
        }


        p {
            margin-top: -5px;
        }
    }

    .hero-five__content {
        max-width: 360px;
    }

    .shape-four {
        img {
            width: 160px;
            height: 160px;

        }
    }

    .hero-five__cta {
        a {
            text-transform: uppercase;
            font-weight: 400;
            color: #F20101;

            i {
                font-size: 20px;
                transition: var(--transition);
            }

            &:hover {
                color: var(--octonary-color);

                i {
                    transform: rotate(45deg);
                }
            }
        }
    }

    .shape-three {
        max-width: 320px;

        img {
            width: 100%;
        }
    }

    .hero-five__thumb {
        position: absolute;
        max-width: 460px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0px;

        img {
            width: 100%;
            max-width: 30vw;
            border-radius: 1000px 1000px 0 0;
        }
    }

    .hero-five__thumb-cta {
        position: absolute;
        top: 0px;
        inset-inline-end: 40px;

        a {
            width: 110px;
            height: 110px;
            min-width: 110px;
            border-radius: 100%;
            background-color: #F20101;
            font-size: 36px;
            color: var(--white);
            align-items: center;
            justify-content: center;
            border: 10px solid var(--template-bg);

            &:hover {
                background-color: var(--octonary-color);
                color: var(--black);
            }
        }
    }

    .hammer {
        position: absolute;
        width: 100%;
        max-width: 1296px;
        text-align: end;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;

        img {
            max-width: 10vw;
            min-width: 40px;
            animation: moveLeftRight 10s linear infinite;
        }
    }
}

// banner section styles
.banner {
    padding-block: 200px 100px;
    background-color: var(--quaternary-color);
    position: relative;
    z-index: 1;
    overflow: hidden;


    .banner-bg {
        position: absolute;
        inset-inline-end: 0px;
        inset-block: 0px;
        z-index: -2;

        img {
            height: 100%;
            object-position: right top;
        }
    }

    .banner-shape {
        position: absolute;
        inset: 0px;
        z-index: -1;

        img {
            width: 100%;
            height: 100%;
            object-position: center;
        }
    }
}

/* ==== 
 --------- (4.02) banner styles end ---------
 ==== */