/* 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;
    transition: 0.3s;
}

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

.hero-body {
    width: 86px;
    border-radius: 100px 100px 0 0;
    transition: 0.3s;
    height: var(--body-height);
}

/* Autoplay (default) */
.hero-figure .hero-body {
    animation: growAuto 2s ease-in-out infinite;
    animation-fill-mode: both;
}

/* Hover (JS adds this class) */
.hero-figure.animate-hover .hero-body {
    animation: growHover 1s ease-in-out infinite;
}

/* Base autoplay animation */
@keyframes growAuto {

    0%,
    100% {
        height: var(--body-height);
    }

    50% {
        height: calc(var(--body-height) * 1.09);
    }

    /* small grow */
}

/* Hover enhanced animation */
@keyframes growHover {

    0%,
    100% {
        height: var(--body-height);
    }

    50% {
        height: calc(var(--body-height) * 1.18);
    }

    /* bigger grow */
}


/* 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: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid white;
    margin-left: -15px;
    background-size: cover;
    background-position: center;
}

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

.avatar-1 {
    background: linear-gradient(135deg, #8b7355, #6b5a47);
}

.avatar-2 {
    background: linear-gradient(135deg, #d4a574, #b8936a);
}

.avatar-3 {
    background: linear-gradient(135deg, #c9a882, #a89070);
}

.percentage {
    font-family: 'Host Grotesk';
    font-size: 38px;
    font-weight: 800;
    color: #00080A;
}

.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;
}