.hero{
    position:relative;
    width:100%;
    height:900px;
    overflow:hidden;
}

.hero-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-shape{
    position:absolute;
    left:60px;
    top:120px;
    width:780px;
    height:760px;
    background:#d0fae8;
    border-radius: 0 220px 220px 220px;
    z-index:2;
    padding:130px;
}

.hero-shape{
    border-radius:0 45% 45% 45%;
}

.hero h1{
    margin-top:40px;
    font-size:72px;
    line-height:1.05;
    color:#16345d;
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
}

.tag{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    background:white;

    border-radius:8px;

    color:#456;

    font-size:13px;

    letter-spacing:.6px;

}

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:180px;

    height:60px;

    border-radius:12px;

    background:#72e4bf;

    color:#17345f;

    text-decoration:none;

    font-weight:700;

}

.phone{

    margin-left:35px;

    font-size:22px;

    color:#17345f;

    text-decoration:none;

}

.hero-buttons{

    display:flex;

    align-items:center;

    margin-top:55px;

}

.floating-card{
    position:absolute;
    right:430px;
    bottom:45px;
    width:320px;
    height:320px;
    background:white;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:5;
    box-shadow:0 35px 80px rgba(0,0,0,.08);
    padding: 40px;
    text-align: center;
}

.floating-card h2{

    font-size:70px;

    color:#17345f;

    font-family:'Cormorant Garamond',serif;

    font-weight:500;

}

.avatars{

    display:flex;

    margin-top:25px;

}

.avatars img{

    width:52px;

    height:52px;

    border-radius:50%;

    border:4px solid white;

    margin-left:-12px;

}

.avatars img:first-child{

    margin-left:0;

}

@media(max-width:991px){

    .hero{

        height:auto;
        padding:120px 20px 80px;

    }

    .hero-img{

        position:absolute;

    }

    .hero-shape{

        position:relative;

        width:100%;

        height:auto;

        left:0;

        top:0;

        padding:50px 30px;

        border-radius:40px;

    }

    .hero h1{

        font-size:48px;

    }

    .hero-buttons{

        flex-direction:column;
        align-items:flex-start;
        gap:20px;

    }

    .phone{

        margin-left:0;

    }

    .floating-card{

        position:relative;

        right:auto;

        bottom:auto;

        margin:40px auto 0;

    }

    
}

@media (max-width: 767px) {
    .hero-shape .tag{
        margin-top: 70px;
    }
}