*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}


body{
    background:hsl(0,0%,100%);
    position:relative;
    height:100vh;
}



.box{
    width:420px;
    height:700px;
    background:linear-gradient(to bottom,hsl(293,100%,63%),hsl(264,100%,61%));
    border-radius:0 0 220px 220px;
    position:absolute;
    left:-120px;
    top:0;
}

.box3{
    width:250px;
    height:530px;
    background:hsl(270, 31%, 94%);
   border-radius: 20px;
}

.box1{
    width:270px;
    height:560px;
    background:white;
    border-radius:30px;
    position:absolute;
    left:240px;
    top:80px;
    padding:10px;
    box-shadow:0 20px 40px rgba(0,0,0,.18);
    z-index:2;
}



.box1::before{
    content:"";
    width:120px;
    height:20px;
    background:white;
    border-radius:0 0 15px 15px;
    position:absolute;
    left:75px;
    top:0;
}




.header{
    width:250px;
    height:70px;
    background:linear-gradient(to right,hsl(264,100%,61%),hsl(293,100%,63%));
    border-radius:20px 20px 10px 10px;
    position:relative;
    margin-top:10px;
}

.head{
    height: 15px;
    width: 100px;
    border-radius: 05px 05px 20px 20px;
    background-color: white;
    position: absolute;
    left: 70px;
}


.icon img{
    width:30px;
    height:30px;
    border-radius:50%;
    border:2px solid white;
    position:absolute;
    left:30px;
    top:20px;
}



.container{
    position:absolute;
    left:70px;
    top:20px;
    color:white;
    text-align:left;
}

.container h4{
    font-size:13px;
}

.container p{
    font-size:10px;
    margin-top:2px;
}



.p1,
.p2,
.p5{
    width:160px;
    margin:10px;
    padding:8px;
    background:hsl(272, 29%, 90%);
    color:hsl(276,55%,52%);
    border-radius:12px;
    font-size:11px;
    text-align:left;
}



.icon2{
    text-align:right;
    margin:10px;
}

.icon2 img{
    width:40px;
    height:40px;
    border-radius:10px;
    margin-left:5px;
}



.p3,
.p4{
    width:160px;
    margin-left:90px;
    margin-top:10px;
    padding:8px;
    background:hsl(0, 100%, 100%);
    border-radius:12px;
    font-size:11px;
    text-align:left;
    color: hsl(270, 7%, 64%);
}



.area,
.a1{
    width:170px;
    height:30px;
    margin:10px;
    padding:10px;
    background:linear-gradient(to right,hsl(293,100%,63%),hsl(264,100%,61%));
    color:white;
    border-radius:10px;
    position:relative;
    text-align:left;
    font-size:12px;
}

.area h1,
.a1 h1{
    position:absolute;
    right:15px;
    top:8px;
    font-size:16px;
}



.text{
    width:240px;
    height:35px;
    background:white;
    border-radius:20px;
    line-height:35px;
    color:hsl(206,6%,79%);
    margin:5px auto;
    padding-left:5px;
    text-align:left;
    position: relative;
    top: 4px;

}



.hi{
    width:430px;
    position:absolute;
    left:400px;
    top:150px;
}

.content h1{
    color:hsl(271,36%,24%);
    font-size:42px;
    margin-bottom:20px;
}

.description p{
    color:hsl(270,7%,64%);
    font-size:16px;
    line-height:28px;
}


.box2{
    width:450px;
    height:650px;
    background:hsl(270,20%,96%);
    border-radius:220px 220px 0 0;
    position:absolute;
    right:-120px;
    top:80px;
    z-index:-1;
}
@media (max-width:480px){

    body{
        overflow-x:hidden;
        min-height:100vh;
    }

    .box{
        width:260px;
        height:520px;
        left:-130px;
        top:0;
        border-radius:0 0 180px 180px;
    }

    .box1{
        width:250px;
        height:530px;
        left:50%;
        transform:translateX(-50%);
        top:60px;
    }

    .box3{
        width:230px;
        height:510px;
    }

    .header{
        width:230px;
    }

    .head{
        left:65px;
    }

    .p1,
    .p2,
    .p5{
        width:145px;
        font-size:10px;
    }

    .p3,
    .p4{
        width:145px;
        margin-left:75px;
        font-size:10px;
    }

    .icon2 img{
        width:35px;
        height:35px;
    }

    .text{
        width:215px;
    }

    .hi{
        position:static;
        width:90%;
        margin:620px auto 60px;
        text-align:center;
    }

    .content h1{
        font-size:38px;
    }

    .description p{
        font-size:16px;
        line-height:28px;
    }

    .box2{
        width:250px;
        height:520px;
        right:-140px;
        top:650px;
        border-radius:180px 180px 0 0;
    }

}
}