*{
    margin:0px;
    padding:0px;
}
.main{
    width:100%;
    /* background-color: rgb(255, 193, 244); */
    padding:130px 100px 80px 100px;
}
.box1{
    width:auto;
    /* background-color: chartreuse; */
    display: flex;
}
.left-sec1{
    height:500px;
    width:50%;
    background-color:white;
    position: relative;
}
.shape1{
    height:400px;
    width:50%;
    background-color: blueviolet;
    border-radius: 150px 0px 0px 150px;
    opacity: 0.2;
    position: absolute;
    left:110px;
}
.shape2{
    height:300px;
    width:300px;
    background-color: blue;
    border-radius: 50%;
    bottom:-20px;
    left:100px;
    z-index: 1;
    position: absolute;
    box-shadow: -5px 1px 30px -10px rgb(0, 0, 0);
}
.shape2 img{
    height:100%;
    width:100%;
    border-radius: 50%;
    /* border: 1px solid black; */
}
.shape3{
    height:450px;
    width:50%;
    position: absolute;
    right:0px;
    bottom: 0px;
    background-color: chartreuse;
    /* border: 1px solid black; */
    box-shadow: 1px 1px 30px 0px rgb(0, 0, 0);

}
.shape3 img{
    height:100%;
    width:100%;
}
.right-sec1{
    height:500px;
    width:50%;
    /* background-color: blueviolet; */
    padding:10px 50px;
}
.box2 p{
    font-size: 12px;
}
.box3{
    margin-top: 50px;
    margin-left: 10%;
}

@media only screen and (min-width:320px) and (max-width:480px)
{
    .box1{
        display: block;
        margin-top: 70px;
    }
    .main{
        padding:10px;
        width:auto;
    }
    .right-sec1{
        height:auto;
        width:100%;
        padding:10px;
    }
    .left-sec1{
        width:100%;
    }
    .shape1{
        display: none;
    }
    .shape2{
        display: none;
    }
    .shape3{
        width:100%;
    }
    .nav2 button{
        display: block;
    }
}

@media only screen and (min-width:481px) and (max-width:768px)
{
    .box1{
        display: block;
        margin-top: 70px;

    }
    .main{
        padding:10px;
        width:auto;
    }
    .right-sec1{
        height:auto;
        width:100%;
        padding:10px;
    }
    .left-sec1{
        width:100%;
    }
    .shape1{
        display: none;
    }
    .shape2{
        display: none;
    }
    .shape3{
        width:500px;
        margin: auto;
        position: initial;
    }
    .shape3 img{
        margin: auto;
    }
    .nav2 button{
        display: block;
    }
}

@media only screen and (min-width:769px) and (max-width:1024px)
{
    .box1{
        display: block;
        margin-top: 70px;

    }
    .main{
        padding:10px;
        width:auto;
    }
    .right-sec1{
        height:auto;
        width:100%;
        padding:10px;
    }
    .left-sec1{
        width:100%;
    }
    .shape1{
        display: none;
    }
    .shape2{
        display: none;
    }
    .shape3{
        width:500px;
        margin: auto;
        position: initial;
    }
    .shape3 img{
        margin: auto;
    }
    .nav2 button{
        display: block;
    }
}

@media only screen and (min-width:1025px) and (max-width:1200px)
{
    .box1{
        display: block;
        margin-top: 70px;

    }
    .main{
        padding:10px;
        width:auto;
    }
    .right-sec1{
        height:auto;
        width:100%;
        padding:10px;
    }
    .left-sec1{
        width:100%;
    }
    .shape1{
        display: none;
    }
    .shape2{
        display: none;
    }
    .shape3{
        width:500px;
        margin: auto;
        position: initial;
    }
    .shape3 img{
        margin: auto;
    }
    .nav2 button{
        display: block;
    }
}