/* Home page hero sec css */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');

.host_font h2,
.host_font h3,
.host_fonth h4,
.host_font h5,
.host_font h1 {
    font-family: "Host Grotesk", sans-serif !important;
}

.gradient_text span {
    background: radial-gradient(50% 50% at 50% 50%, #265EE6 0%, #001B5E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* For Firefox */
    color: transparent;
}

.global_btn,
p {

    font-family: "inter-display", Sans-serif !important;
}

/* Hero human animation css */
        .hero_right {
            max-width: 690px !important;
            width: 100%;
        }

        .container {
            clip-path: inset(0 0 0 -100%);
            width: 100%;
            height: 620px;
            overflow: visible;
            position: relative;
        }

        .figures-container {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            gap: 20px;
        }

        .hero-figure {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transform-origin: bottom center;
        }

        /* Hover effect - FASTER looping animation with bigger growth */
        .hero-figure.animate-hover {
            animation: hoverGrow 1s ease-in-out infinite;
        }

        /* Pause body/head animations during hover to prevent conflicts */
        .hero-figure.animate-hover .hero-body,
        .hero-figure.animate-hover .hero-head {
            animation-play-state: paused;
        }

        .hero-head {
            width: 86px;
            height: 86px;
            border-radius: 50%;
            margin-bottom: 30px;
        }

        .hero-body {
            width: 86px;
            border-radius: 100px 100px 0 0;
            height: var(--body-height);
            /* GPU accelerated grow animation */
            animation: growBodyAuto 2.5s ease-in-out infinite;
            transform-origin: bottom center;
            will-change: transform;
        }

        .hero-head {
            /* Head moves up as body grows */
            animation: moveHeadAuto 2.5s ease-in-out infinite;
            will-change: transform;
        }

        /* Staggered animation delays for wave effect */
        .hero-figure-1 .hero-body,
        .hero-figure-1 .hero-head {
            animation-delay: 0s;
        }

        .hero-figure-2 .hero-body,
        .hero-figure-2 .hero-head {
            animation-delay: 0.18s;
        }

        .hero-figure-3 .hero-body,
        .hero-figure-3 .hero-head {
            animation-delay: 0.36s;
        }

        .hero-figure-4 .hero-body,
        .hero-figure-4 .hero-head {
            animation-delay: 0.54s;
        }

        .hero-figure-5 .hero-body,
        .hero-figure-5 .hero-head {
            animation-delay: 0.72s;
        }

        .hero-figure-6 .hero-body,
        .hero-figure-6 .hero-head {
            animation-delay: 0.9s;
        }

        .hero-figure-7 .hero-body,
        .hero-figure-7 .hero-head {
            animation-delay: 1.08s;
        }

        /* Hover animation - grows height only, stacks with body animation */
        @keyframes hoverGrow {

            0%,
            100% {
                transform: scaleY(1);
            }

            50% {
                transform: scaleY(1.18);
            }
        }

        /* Base autoplay animation - body grows from bottom using scaleY */
        @keyframes growBodyAuto {

            0%,
            100% {
                transform: scaleY(1);
            }

            50% {
                transform: scaleY(1.08);
            }
        }

        /* Head moves up as body grows */
        @keyframes moveHeadAuto {

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

            50% {
                transform: translateY(-20px);
            }
        }


        /* Sizes / colors */
        .hero-figure-1 .hero-head {
            background: #D4DFFA;
        }

        .hero-figure-1 .hero-body {
            --body-height: 240px;
            background: #D4DFFA;
        }

        .hero-figure-2 .hero-head {
            background: #D4DFFA;
        }

        .hero-figure-2 .hero-body {
            --body-height: 300px;
            background: #D4DFFA;
        }

        .hero-figure-3 .hero-head {
            background: #E9F0FF;
        }

        .hero-figure-3 .hero-body {
            --body-height: 380px;
            background: #E9F0FF;
        }

        .hero-figure-4 .hero-head {
            background: #001a4d;
            z-index: 2;
        }

        .hero-figure-4 .hero-body {
            --body-height: 265px;
            background: #0066ff;
            z-index: 1;
        }

        .hero-figure-5 .hero-head {
            background: #E9F0FF;
        }

        .hero-figure-5 .hero-body {
            --body-height: 325px;
            background: #CCD1DF;
        }

        .hero-figure-6 .hero-head {
            background: #CCD1DF;
        }

        .hero-figure-6 .hero-body {
            --body-height: 382px;
            background: #D4DFFA;
        }

        .hero-figure-7 .hero-head {
            background: #aabdd9;
        }

        .hero-figure-7 .hero-body {
            --body-height: 335px;
            background: #aabdd9;
        }


        /* Satisfaction Card */
        .satisfaction-card {
            position: absolute;
            bottom: 68px;
            left: -20%;
            background: #FFFFFF29;
            border-radius: 70px;
            padding: 9px 22px;
            display: flex;
            align-items: center;
            gap: 15px;
            z-index: 2;
            border: 1px solid #ffffffde;
        }

        .avatars {
            display: flex;
            align-items: center;
        }

        .main-hero-box {
            position: relative;
        }

        .main-hero-box::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: -9px;
            width: 200%;
            height: 170px;
            z-index: 1;
            background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0) 0%,
                    #ffffff 100%);

            /* Backdrop blur */
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);

            /* SAME mask for webkit + standard */
            -webkit-mask-image: linear-gradient(to bottom,
                    transparent -5%,
                    transparent -7%,
                    black 58%,
                    black 199%);
            mask-image: linear-gradient(to bottom,
                    transparent -5%,
                    transparent -7%,
                    black 58%,
                    black 199%);

            pointer-events: none;
        }




.avatar {
    width: 59px;
    height: 59px;
    border-radius: 50%;
    border: 3px solid white;
    margin-left: -32px;
    background-size: cover;
    background-position: center;
}

        .avatar:first-child {
            margin-left: 0;
        }

        .avatar-1 {
            background: url('/wp-content/uploads/2026/01/0d6e4ed2fb4c940c0cded68c770d7f0c61c5c7a0.png');
        }

        .avatar-2 {
            background: url('/wp-content/uploads/2026/01/0fc9edb00ecc4a7a643fa1e878e17aab81664abf.png');
        }

        .avatar-3 {
            background: url('/wp-content/uploads/2026/01/6e1f744afb76a9e104887043296183a0554f752f.png');
        }

        .percentage {
            font-family: 'Host Grotesk';
            font-size: 38px;
            font-weight: 800;
            color: #00080A;
        }
.avatar {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

        .label {
            font-weight: 400;
            font-size: 16px;
            color: #00080A;
            font-family: 'Inter';
        }
.footer_human .hero-body {
    width: 46px;
}

.footer_human .hero-head {
    height: 46px;
    width: 46px;
    margin-bottom: 15px;
}

.footer_human .container {
    clip-path: inset(0 0 0 -100%);
    width: 100%;
    height: 30vh;
    overflow: visible;
    position: relative;
}

.footer_human .hero-figure-1 .hero-body {
    --body-height: 100px;
    background: #D4DFFA;
}

.footer_human .hero-figure-2 .hero-body {
    --body-height: 143px;
    background: #D4DFFA;
}

.footer_human .hero-figure-3 .hero-body {
    background: #E9F0FF;
    --body-height: 169px;
}

.footer_human .hero-figure-4 .hero-body {
    --body-height: 72px;
    background: #0066ff;
}

.footer_human .hero-figure-5 .hero-body {
    --body-height: 114px;
    background: #CCD1DF;
}

.footer_human .hero-figure-6 .hero-body {
    --body-height: 169px;
    background: #D4DFFA;
}

.footer_human .hero-figure-7 .hero-body {
    --body-height: 143px;
    background: #aabdd9;
}