@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kumbh+Sans:wght,YOPQ@100..900,300&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #19A1AE;
    font-family: "Kumbh Sans", sans-serif;
    overflow: hidden;
    align-items: center;
}

.bg-wrapper {
    width: 2358px;
    height: 2266px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;

    
        .circle-1 {
            width: 978px;
            height: 978px;
            border-radius: 50%;
            background: linear-gradient(15deg,#0989B400,#53FFEE);
            opacity: 20%;
            z-index: 1;
            left: 250px;
            top: 150px;
            position: absolute;

        }
        .circle-2 {
            width: 978px;
            height: 978px;
            border-radius: 50%;
            background: linear-gradient(280deg,#0989B400,#53FFEE);
            opacity: 25%;
            z-index: 2;
            right: 250px;
            bottom: 150px;
            position: absolute;
        }
    
}

.card {
    width:350px;
    height: 374px;
    background-color: #FFFFFF;
    border-radius: 15px ;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;

    .card-bg {
        width: 100%;
        height: 37%;
        border-radius: 15px 15px 0px 0px;
        position: absolute;
        background-image: url(./assets/images/Oval.png);
        
    }

    }


    figure {
        width: 100%;
        height: 100%;
        position: relative;
        display: inline-block;
        
        img {
            width: 96px;
            height: 96px;
            border: #FFFFFF 5px solid;
            border-radius: 50%;
            position: absolute;
            top: 120px;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
        }

        figcaption {
            position: relative;


            h3 {
                position: absolute;
                font-size: 18px;
                font-weight: 700;
                color: #2E3349;
                top: 200px;
                left: 108.5px;
                z-index: 2;
                text-align: center;
            }

            .age {
                color: #6B7082;
                font-size: 18px;
                font-weight: 400;
                position: absolute;
                padding-left: 5px;

            }

            p {
                color: #6B7082;
                font-size: 18px;
                font-weight: 400;
                top: 230px;
                left: 150px;
                position: absolute;

            }
            hr {
                position: absolute;
                color: #E8E9EC;
                font-weight: 100;
                height: 1px;
                width: 100%;
                top: 281px;
                z-index: 100;
            }
        } 
    }
    .counter {
        width: 100%;
        position: relative;
        bottom: -290px;
        

        .followers {
            position: absolute;
            left: 15%;
            display: inline-block;
            text-align: center;

            h3 {
                font-size: 18px;
                font-weight: 700;
                color: #2E3349;
                z-index: 100;
                
            }
            span {
                color: #6B7082;
                font-size: 10px;
                font-weight: 400;
                letter-spacing: 1.5px;
                z-index: 10;
                text-transform: capitalize;
            }
        }

        .likes {
            position: absolute;
            left: 45%;
            display: inline-block;
            text-align: center;

            h3 {
                font-size: 18px;
                font-weight: 700;
                color: #2E3349;
                z-index: 100;
                
            }
            span {
                color: #6B7082;
                font-size: 10px;
                font-weight: 400;
                letter-spacing: 1.5px;
                z-index: 10;
                text-transform: capitalize;
            }
        }

        .photos {
            position: absolute;
            right: 15%;
            display: inline-block;
            text-align: center;

            h3 {
                font-size: 18px;
                font-weight: 700;
                color: #2E3349;
                z-index: 100;        
            }
            
            span {
                color: #6B7082;
                font-size: 10px;
                font-weight: 400;
                letter-spacing: 1.5px;
                z-index: 10;
                text-transform: capitalize;
            }
        }
        
    }
}