@font-face {
    font-family: opensansbold;
    src: url(../fonts/OpenSans-BoldItalic.ttf);
}
@font-face {
    font-family: opensansregular;
    src: url(../fonts/OpenSans-Regular.ttf);
}
body 
{
    padding: 0px;
    margin: 0px;
}

@media(max-width:550px)
{
    .back-img
    {
        display: none;
    }
}


@media(min-width:550px)
{
    .mob-img
    {
        display: none;
    }   
}

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: opensansregular;
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    overflow: hidden;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.home{
    background-image: url('../images/Site\ Plan_.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 68%;
    height: 100vh;
}

.home .links .pics{
    width: 70px;
}

.home .links .pics img{
    width: 7rem;
    transition: all .1s ease;
}

.home .links .pics img:hover{
    width: 9rem;
}
.submissions-icon 
{
    width: 6rem !important;
    position: absolute;
    top: 68%;
    left: 53%;
}
.books-icon 
{
    width: 8rem !important;
    position: absolute;
    top: 48%;
    left: 67% !important;
}
.submissions-icon:hover 
{
    width: 8rem !important;
    position: absolute;
    top: 68%;
    left: 53%;
}
.books-icon:hover
{
    width: 10rem !important;
    position: absolute;
    top: 48%;
    left: 67% !important;
}
.home .links .pics img:hover 
{
    margin-top: -10px !important;
    margin-left: -10px !important;
}

.home .links .wave {
    position: absolute;
    top: 49%;
    left: 23% !important;
}
.home .links .circles{
    position: absolute;
    top: 25%;
    left: 52.5%;
}

.home .links .rectangle{
    position: absolute;
    top: 45%;
    left: 52.5%;
}

@media(max-width:1600px){
    
    .home .links .books{
        position: absolute;
        top: 48%;
        left: 64%;
    }
    
}

@media(max-width:1500px){
    
    .home .links .pics img{
        width: 6rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 8rem;
    }

    .submissions-icon 
    {
        width: 5rem !important;
        position: absolute;
        top: 68%;
        left: 53%;
    }
    .books-icon 
    {
        width: 7rem !important;
        position: absolute;
        top: 48%;
        left: 67% !important;
    }
    .submissions-icon:hover 
    {
        width: 7rem !important;
        position: absolute;
        top: 68%;
        left: 53%;
    }
    .books-icon:hover
    {
        width: 9rem !important;
        position: absolute;
        top: 48%;
        left: 67% !important;
    }
    
    
}

@media(max-width:1400px){
    
    
    .home .links .pics img{
        width: 5.5rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 7.5rem;
    }

    .submissions-icon 
    {
        width: 4.5rem !important;
        position: absolute;
        top: 66%;
        left: 53%;
    }
    .books-icon 
    {
        width: 6.5rem !important;
        position: absolute;
        top: 48%;
        left: 67% !important;
    }
    .submissions-icon:hover 
    {
        width: 6.5rem !important;
        position: absolute;
        top: 66%;
        left: 53%;
    }
    .books-icon:hover
    {
        width: 8.5rem !important;
        position: absolute;
        top: 48%;
        left: 67% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 27%;
        left: 52.5%;
    }

    
}

@media(max-width:1300px){
    .home .links .pics img{
        width: 5.5rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 7.5rem;
    }

    .submissions-icon 
    {
        width: 4.5rem !important;
        position: absolute;
        top: 64%;
        left: 53%;
    }
    .books-icon 
    {
        width: 6.5rem !important;
        position: absolute;
        top: 48%;
        left: 67% !important;
    }
    .submissions-icon:hover 
    {
        width: 6rem !important;
        position: absolute;
        top: 64%;
        left: 53%;
    }
    .books-icon:hover
    {
        width: 8.5rem !important;
        position: absolute;
        top: 48%;
        left: 67% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 29%;
        left: 52.5%;
    }
}
@media(max-width:1150px){
    .home .links .pics img{
        width: 4.5rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 6.5rem;
    }

    .submissions-icon 
    {
        width: 4rem !important;
        position: absolute;
        top: 62%;
        left: 53%;
    }
    .books-icon 
    {
        width: 6rem !important;
        position: absolute;
        top: 47%;
        left: 40% !important;
    }
    .submissions-icon:hover 
    {
        width: 5.5rem !important;
        position: absolute;
        top: 62%;
        left: 53%;
    }
    .books-icon:hover
    {
        width: 8rem !important;
        position: absolute;
        top: 47%;
        left: 40% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 32%;
        left: 52.5%;
    }
    .home .links .rectangle{
        position: absolute;
        top: 45.5%;
        left: 52.5%;
    }
}

@media(max-width:1040px){
    .home .links .pics img{
        width: 4.5rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 6.5rem;
    }

    .submissions-icon 
    {
        width: 4rem !important;
        position: absolute;
        top: 60%;
        left: 53%;
    }
    .books-icon 
    {
        width: 6rem !important;
        position: absolute;
        top: 47%;
        left: 20% !important;
    }
    .submissions-icon:hover 
    {
        width: 5.5rem !important;
        position: absolute;
        top: 60%;
        left: 53%;
    }
    .books-icon:hover
    {
        width: 8rem !important;
        position: absolute;
        top: 47%;
        left: 20% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 34%;
        left: 52.5%;
    }
    .home .links .rectangle{
        position: absolute;
        top: 45.5%;
        left: 52.5%;
    }
}
@media(max-width:920px){
    .home .links .pics img{
        width: 4.5rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 6.5rem;
    }

    .submissions-icon 
    {
        width: 4rem !important;
        position: absolute;
        top: 60%;
        left: 53%;
    }
    .books-icon 
    {
        width: 6rem !important;
        position: absolute;
        top: 47%;
        left: 20% !important;
    }
    .submissions-icon:hover 
    {
        width: 5.5rem !important;
        position: absolute;
        top: 60%;
        left: 53%;
    }
    .books-icon:hover
    {
        width: 8rem !important;
        position: absolute;
        top: 47%;
        left: 20% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 34%;
        left: 52.5%;
    }
    .home .links .rectangle{
        position: absolute;
        top: 45.5%;
        left: 52.5%;
    }
}


@media(max-width:800px){
 .home{
        background-image: url('../images/Site_Plan_Mobile_2.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 40%;
    }
    .home .links .pics{
        width: 70px;
    }
    
    .home .links .pics img{
        width: 3rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 4.5rem;
    }

    .submissions-icon 
    {
        width: 3rem !important;
        position: absolute;
    }
    .books-icon 
    {
        width: 5rem !important;
        position: absolute;

    }
    .submissions-icon:hover 
    {
        width: 4.5rem !important;
        position: absolute;
    }
    .books-icon:hover
    {
        width: 7rem !important;
        position: absolute;
    }

    .home .links .wave {
        position: absolute;
        top: 75%;
        left: 47% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 42.5%;
        left: 33.5%;
    }
    
    .home .links .rectangle{
        position: absolute;
        top: 41%;
        left: 47%;
    }
    
    .home .links .email{
        position: absolute;
        top: 41%;
        right: 36%;
    }
    
    .home .links .books{
        position: absolute;
        top: 29%;
        left: 44%;
    }
}


@media(max-width:700px){
    .home{
        background-image: url('../images/Site_Plan_Mobile_2.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 40%;
    }
    .home .links .pics{
        width: 70px;
    }
    
    .home .links .pics img{
        width: 3rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 4.5rem;
    }

    .submissions-icon 
    {
        width: 3rem !important;
        position: absolute;
    }
    .books-icon 
    {
        width: 5rem !important;
        position: absolute;

    }
    .submissions-icon:hover 
    {
        width: 4.5rem !important;
        position: absolute;
    }
    .books-icon:hover
    {
        width: 7rem !important;
        position: absolute;
    }

    .home .links .wave {
        position: absolute;
        top: 75%;
        left: 47% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 42.5%;
        left: 33.5%;
    }
    
    .home .links .rectangle{
        position: absolute;
        top: 41%;
        left: 47%;
    }
    
    .home .links .email{
        position: absolute;
        top: 41%;
        right: 36%;
    }
    
    .home .links .books{
        position: absolute;
        top: 29%;
        left: 44%;
    }
}


@media(max-width:600px){
    .home{
        background-image: url('../images/Site_Plan_Mobile_2.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 40%;
    }
    .home .links .pics{
        width: 70px;
    }
    
    .home .links .pics img{
        width: 3rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 4.5rem;
    }

    .submissions-icon 
    {
        width: 3rem !important;
        position: absolute;
    }
    .books-icon 
    {
        width: 5rem !important;
        position: absolute;

    }
    .submissions-icon:hover 
    {
        width: 4.5rem !important;
        position: absolute;
    }
    .books-icon:hover
    {
        width: 7rem !important;
        position: absolute;
    }

    .home .links .wave {
        position: absolute;
        top: 68%;
        left: 47% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 44%;
        left: 33.5%;
    }
    
    .home .links .rectangle{
        position: absolute;
        top: 43%;
        left: 47%;
    }
    
    .home .links .email{
        position: absolute;
        top: 43%;
        right: 36%;
    }
    
    .home .links .books{
        position: absolute;
        top: 33%;
        left: 43%;
    }
}




@media(max-width:500px){
    .home{
        background-image: url('../images/Site_Plan_Mobile_2.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 68%;
        margin-top:-50px;
    }
    .home .links .pics{
        width: 70px;
    }
    
    .home .links .pics img{
        width: 3rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 4.5rem;
    }

    .submissions-icon 
    {
        width: 3rem !important;
        position: absolute;
    }
    .books-icon 
    {
        width: 4.2rem !important;
        position: absolute;

    }
    .circles-home-icon 
    {
        width: 3.7rem !important;
        position: absolute;
    }
    .submissions-icon:hover 
    {
        width: 4.5rem !important;
        position: absolute;
    }
    .books-icon:hover
    {
        width: 7rem !important;
        position: absolute;
    }

    .home .links .wave {
        position: absolute;
        top: 77.5%;
        left: 46% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 43%;
        left: 27%;
    }
    
    .home .links .rectangle{
        position: absolute;
        top: 42.7%;
        left: 46.5%;
    }
    
    .home .links .email{
        position: absolute;
        top: 43.4%;
        right: 28%;
    }
    
    .home .links .books{
        position: absolute;
        top: 28%;
        left: 41.5%;
    }
}



@media(max-width:400px){
    .home{
        background-image: url('../images/Site_Plan_Mobile_2.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 45%;
    }
    .home .links .pics{
        width: 70px;
    }
    
    .home .links .pics img{
        width: 2rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 3.5rem;
    }

    .submissions-icon 
    {
        width: 2rem !important;
        position: absolute;
    }
    .books-icon 
    {
        width: 4rem !important;
        position: absolute;

    }
    .submissions-icon:hover 
    {
        width: 3.5rem !important;
        position: absolute;
    }
    .books-icon:hover
    {
        width: 6rem !important;
        position: absolute;
    }

    .home .links .wave {
        position: absolute;
        top: 62%;
        left: 47% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 45.5%;
        left: 32%;
    }
    
    .home .links .rectangle{
        position: absolute;
        top: 44.5%;
        left: 45%;
    }
    
    .home .links .email{
        position: absolute;
        top: 45%;
        right: 34%;
    }
    
    .home .links .books{
        position: absolute;
        top: 38%;
        left: 38%;
    }
}


@media(max-width:300px){
    .home{
        background-image: url('../images/Site_Plan_Mobile_2.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 50%;
    }
    .home .links .pics{
        width: 70px;
    }
    
    .home .links .pics img{
        width: 2rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 3.5rem;
    }

    .submissions-icon 
    {
        width: 2rem !important;
        position: absolute;
    }
    .books-icon 
    {
        width: 4rem !important;
        position: absolute;

    }
    .submissions-icon:hover 
    {
        width: 3.5rem !important;
        position: absolute;
    }
    .books-icon:hover
    {
        width: 6rem !important;
        position: absolute;
    }

    .home .links .wave {
        position: absolute;
        top: 62%;
        left: 47% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 45.5%;
        left: 32%;
    }
    
    .home .links .rectangle{
        position: absolute;
        top: 44.5%;
        left: 45%;
    }
    
    .home .links .email{
        position: absolute;
        top: 45%;
        right: 34%;
    }
    
    .home .links .books{
        position: absolute;
        top: 38%;
        left: 38%;
    }
}

@media(max-width:260px){
    .home{
        background-image: url('../images/Site_Plan_Mobile_2.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 50%;
        height: 90vh;
    }
    .home .links .pics{
        width: 70px;
    }
    
    .home .links .pics img{
        width: 2rem;
        transition: all 0.3s ease;
    }
    
    .home .links .pics img:hover{
        width: 3rem;
    }

    .submissions-icon 
    {
        width: 2rem !important;
        position: absolute;
    }
    .books-icon 
    {
        width: 3.5rem !important;
        position: absolute;

    }
    .submissions-icon:hover 
    {
        width: 3.5rem !important;
        position: absolute;
    }
    .books-icon:hover
    {
        width: 5.5rem !important;
        position: absolute;
    }

    .home .links .wave {
        position: absolute;
        top: 54%;
        left: 45% !important;
    }
    .home .links .circles{
        position: absolute;
        top: 41.5%;
        left: 29%;
    }
    
    .home .links .rectangle{
        position: absolute;
        top: 41%;
        left: 45%;
    }
    
    .home .links .email{
        position: absolute;
        top: 41.5%;
        right: 28%;
    }
    
    .home .links .books{
        position: absolute;
        top: 35.5%;
        left: 37%;
    }
}



/* Circles.html */

#circles{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    min-height: 110vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    overflow: auto;
}

#circles .imgs 
{
    position: absolute;
    width: 70%;
    top:12%;
    left: 16%;
}

#circles .imgs .back-img
{
    width: 100%;
    height: 75vh;
}

#circles .previous-icon{
    position: absolute;
    top: 8%;
    left: 4%;
    width: 100px;
    padding-top: 10px;
    height: 70px;
    text-align: center;
}

#circles .previous-icon a img{
   width: 70px;
    color: black;
}

#circles i{
    font-size: 3rem;
}

.container-fluid .previous-icon{
    position: absolute;
    top: 9%;
    left: 4%;
    width: 100px;
    padding-top: 10px;
    height: 70px;
    text-align: center;
}

.container-fluid .previous-icon a img{
    width: 70px;
    color: black;
    
}

#circles .imgs .Critique-group-pic{
    position: absolute;
    top: 39%;
    left: 29%;
    width: 83px;
}

#circles .imgs .Critique-group-pic:hover{
    cursor: grab;
}

#circles .imgs .circles-pic{
    width: 220px;
    position: absolute;
    top: 28%;
    left: 44%;
}
#circles .imgs .circles-pic2{
    width: 220px;
    position: absolute;
    top: 25.5%;
    left: 41.5%;
}

 #circles .circles-heading{
    position: absolute;
    top: 65.5%;
    left: 15%;
    max-width: 70%;
}

#circles .circles-heading2{
    position: absolute;
    top: 55%;
    left: 15%;
    max-width: 70%;
}

#circles .circles-heading h4{
    font-size: 1.9rem;
    margin: 0 auto;
}

#circles .circles-heading2 h4{
    font-size: 1.9rem;
    margin: 0 auto;
}




@media(max-width: 1000px){
    #circles .imgs .Critique-group-pic{
        position: absolute;
        top: 38%;
        left: 22%;
        width: 83px;
    }
    #circles .imgs .circles-pic{
        width: 220px;
        position: absolute;
        top: 28%;
        left: 42%;
    }

}

@media(max-width: 751px){

    #circles .imgs .Critique-group-pic{
        position: absolute;
        top: 39%;
        left: 18%;
        width: 75px;
    }

    #circles .imgs .circles-pic{
        width: 200px;
        position: absolute;
        top: 28%;
        left: 40%;
    }

    #circles i{
        font-size: 2.7rem;
    }
}


@media(max-width: 650px){

    #circles .imgs .Critique-group-pic{
        position: absolute;
        top: 15%;
        left: 40%;
        width: 70px;
    }

    #circles .imgs .circles-pic{
        width: 170px;
        position: absolute;
        top: 34%;
        left: 33%;
    }

    #circles i{
        font-size: 2rem;
        font-weight: 600;
    }

    #circles .circles-heading{
        position: absolute;
        top: 67%;
        left: 14%;
        padding-bottom: 120px;
    }

} 

@media(max-width: 500px){
    #circles .imgs .Critique-group-pic{
        position: absolute;
        top: 0%;
        left: 36%;
        width: 60px;
        height: 60px;
        margin-top: 10%;
    }

    #circles .imgs .circles-pic{
        width: 170px;
        position: absolute;
        top: 60%;
        left: 20%;
        margin-top: 60%;
    }

    #circles i{
        font-size: 2rem;
        font-weight: 600;
    }

    #circles .circles-heading{
        position: absolute;
        top: 55%;
        left: 14%;
        padding-bottom: 120px;
    }

    #circles .previous-icon{
        position: absolute;
        top: 7%;
        left: 13%;
        width: 50px;
        padding-top: 10px;
        height: 50px;
        text-align: center;
    }
    #circles .imgs .circles-pic2{
        width: 220px;
        position: absolute;
        left: 12%;
        margin-top: 35%;
    }
    #circles .circles-heading2{
        position: absolute;
        top: 47%;
        left: 11%;
        max-width: 78%;
    }
}


@media(max-width: 376px){
   
    #circles .imgs .Critique-group-pic{
        position: absolute;
        top: 17%;
        left: 36%;
        width: 60px;
        margin-top: 10%;
    }

    #circles .imgs .circles-pic{
        width: 170px;
        position: absolute;
        top: 60% !important;
        left: 20%;
        margin-top: 50%;
    }

    #circles i{
        font-size: 2rem;
        font-weight: 600;
    }

    #circles .circles-heading{
        position: absolute;
        top: 55%;
        left: 14%;
        padding-bottom: 120px;
    }

} 




/* Wave-page.html */

#wave{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: auto;
}

#wave .row {
    display: flex;
    align-items: center;
    justify-content: center;
}

#wave .wave-main {
    /* background: url(/Icon\ Background.svg); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    width: 70%;
    top:13%;
    left: 16%;
}
#wave .wave-main .back-img
{
    width: 100%;
    height: 75vh;
}
#wave .wave-pic{
    width: 200px;
    height: 100px;
    position: absolute;
    top: 18%;
    left: 41%;
    padding-left: 25px;
    padding-top: 20px;
}
#wave .wave-pic img{
    width: 150px;
}

#wave .wave-heading{
    position: absolute;
    top: 47%;
    left: 21%;
    text-align: center;
    max-width: 60%;
    margin: 0 auto;
}

#wave .wave-heading p{
    font-size: 2rem;
}

@media(max-width: 850px){

    #wave .wave-pic{
        width: 200px;
        height: 100px;
        position: absolute;
        top: 29%;
        left: 37%;
        padding-left: 25px;
        padding-top: 20px;
    }

    #wave .wave-heading{
        position: absolute;
        top: 51%;
        left: 18%;
        text-align: center;
        max-width: 70%;
    }

}


@media(max-width: 550px){
    #wave .wave-main .back-img
    {
        display: none;
    }

    #wave .wave-pic{
        width: 100px !important;
        height: 100px;
        position: absolute;
        top: 0%;
        left: 23%;
        padding-top: 20px;
        margin-top: 30px;
    }

    #wave .wave-heading{
        position: absolute;
        top: 0%;
        left: 16%;
        margin-top: 130px;
        text-align: center;
        max-width: 70%;
        padding-bottom: 100px;
    }
    .mail 
    {
        margin-left: -20px !important;
    }
    #wave .wave-main {
        /* background: url(/Icon\ Background.svg); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        width: 100%;
        height: 100vh;
        top:15%;
        left: 0%;
    }
    #wave .previous-icon{
        position: absolute;
        top: 7%;
        left: 13%;
        width: 50px;
        padding-top: 10px;
        height: 50px;
        text-align: center;
    }


}

@media(max-width: 500px){

    #wave .wave-pic{
        width: 100px !important;
        height: 100px;
        position: absolute;
        top: 0%;
        left: 23%;
        padding-top: 20px;
        margin-top: 30px;
    }

    #wave .wave-heading{
        position: absolute;
        top: 0%;
        left: 16%;
        margin-top: 130px;
        text-align: center;
        max-width: 70%;
        padding-bottom: 100px;
    }
    .mail 
    {
        margin-left: -20px !important;
    }
    #wave .wave-main {
        /* background: url(/Icon\ Background.svg); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        width: 100%;
        height: 100vh;
        top:15%;
        left: 0%;
    }
    #wave .previous-icon{
        position: absolute;
        top: 7%;
        left: 13%;
        width: 50px;
        padding-top: 10px;
        height: 50px;
        text-align: center;
    }

}

@media(max-width: 380px){

    #wave .wave-pic{
        width: 100px !important;
        height: 100px;
        position: absolute;
        top: 0%;
        left: 23%;
        padding-top: 20px;
        margin-top: 30px;
    }

    #wave .wave-heading{
        position: absolute;
        top: 0%;
        left: 16%;
        margin-top: 130px;
        text-align: center;
        max-width: 70%;
        padding-bottom: 100px;
    }
    .mail 
    {
        margin-left: -20px !important;
    }
    #wave .wave-main {
        /* background: url(/Icon\ Background.svg); */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        width: 100%;
        height: 100vh;
        top:15%;
        left: 0%;
    }
    #wave .previous-icon{
        position: absolute;
        top: 7%;
        left: 13%;
        width: 50px;
        padding-top: 10px;
        height: 50px;
        text-align: center;
    }

}

/* Books.html */

#books{
    background-image: url('../images/books-page.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    height: 140vh;
    text-align: center;
    overflow: auto;
}

#books .books-main{
    text-align: center;
    max-width: 70%;
    position: absolute;
    top: 12%;
    left: 15%;
    margin-bottom: 50px;
}

#books .books-main img{
    width: 150px;
}

#books .books-main p{
    font-size: 1.9rem;
    padding: 30px 0px;
}

#books .boxes {
    margin: 0 auto; 
    padding: 0px 190px;
    position: absolute;
    top: 29%;
    left: 0%;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 120px;
}


#books .boxes .box{
    border: 2px solid black;
    width: 160px;
    height: 200px;
    margin: 0 auto;
    margin-top: 100px;
}

#books .boxes .top-left-book{
    border: none;
}

#books .boxes .top-left-book a img{
    width: 160px;
    height: 200px;
}

@media(max-width: 1100px){
    #books .boxes {
        margin: 0 auto;  
        padding: 0px 100px;
        position: absolute;
        top: 37%;
        left: 0%;
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;
        padding-bottom: 80px;
    }
    #books .boxes .top-left-book{
        border: none;
    }

}

@media(max-width: 820px){
    #books .books-main{
        text-align: center;
        max-width: 70%;
        position: absolute;
        top: 20%;
        left: 15%;
        margin-bottom: 50px;
    }

    #books .boxes {
        margin: 0 auto;  
        padding: 0px 100px;
        position: absolute;
        top: 35%;
        left: 0%;
        width: 100%;
        box-sizing: border-box;
        margin-top: 80px;
    }

    #books .boxes .top-left-book{
        border: none;
    }
}

@media(max-width: 768px){
    
    #books .books-main{
        text-align: center;
        max-width: 70%;
        position: absolute;
        top: 17%;
        left: 15%;
        margin-bottom: 50px;
    }
    
    #books .boxes {
        margin: 0 auto;  
        padding: 0px 50px;
        position: absolute;
        top: 37%;
        left: 0%;
        width: 100%;
        box-sizing: border-box;
        margin-top: 50px;
        padding-bottom: 80px;
    }

    #books .boxes .box{
        border: 2px solid black;
        width: 150px;
        height: 180px;
        margin: 0 auto;
        margin-top: 80px;
    }
    #books .boxes .top-left-book{
        border: none;
    }

}


@media(max-width: 550px){

    #books{
        background-image: url('../images/books-page.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        height: 100vh;
        text-align: center;
        overflow: auto;
        background-color: aliceblue;
    }
    
    #books .books-main{
        text-align: center;
        max-width: 70%;
        position: relative !important;
        margin-top: 300px;
        height: 350px;
        margin-top: 180px;
    }

    #books .boxes {
        margin: 0 auto;   
        padding: 0px 50px;
        position: absolute;
        top: 60%;
        left: 0%;
        width: 100%;
        box-sizing: border-box;
        word-break: break-all;  
        padding-bottom: 120px;
    }

    #books .boxes .box{
        border: 2px solid black;
        width: 150px;
        height: 180px;
        margin: 0 auto;
        margin-left: 28%;
        margin-top: 60px;
    }

    #books .previous-icon{
        position: absolute;
        top: 8%;
        left: 4%;
        width: 70px;
        padding-top: 10px;
        height: 70px;
        text-align: center;
    }
    #books .boxes .top-left-book{
        border: none;
    }
}



@media(max-width: 450px){

    #books{
        background-image: url('../images/books-page.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        height: 100vh;
        text-align: center;
        overflow: auto;
        background-color: aliceblue;
    }
    
    #books .books-main{
        text-align: center;
        max-width: 70%;
        position: relative !important;
        margin-top: 300px;
        height: 350px;
        margin-top: 180px;
    }

    #books .boxes {
        margin: 0 auto;   
        padding: 0px 50px;
        position: absolute;
        top: 60%;
        left: 0%;
        width: 100%;
        box-sizing: border-box;
        word-break: break-all;  
        padding-bottom: 120px;
    }

    #books .boxes .box{
        border: 2px solid black;
        width: 150px;
        height: 180px;
        margin: 0 auto;
        margin-left: 28%;
        margin-top: 60px;
    }

    #books .previous-icon{
        position: absolute;
        top: 8%;
        left: 4%;
        width: 70px;
        padding-top: 10px;
        height: 70px;
        text-align: center;
    }
    #books .boxes .top-left-book{
        border: none;
    }
}




@media(max-width: 376px){
    
    
    #books{
        background-image: url('../images/books-page.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        height: 100vh;
        text-align: center;
        overflow: auto;
        background-color: aliceblue;
    }
    
    #books .books-main{
        text-align: center;
        max-width: 70%;
        position: relative !important;
        margin-top: 300px;
        height: 350px;
        margin-top: 180px;
    }

    #books .boxes {
        margin: 0 auto;   
        padding: 0px 50px;
        position: absolute;
        top: 60%;
        left: 0%;
        width: 100%;
        box-sizing: border-box;
        word-break: break-all;  
        padding-bottom: 120px;
    }

    #books .boxes .box{
        border: 2px solid black;
        width: 150px;
        height: 180px;
        margin: 0 auto;
        margin-left: 28%;
        margin-top: 60px;
    }

    #books .previous-icon{
        position: absolute;
        top: 8%;
        left: 4%;
        width: 70px;
        padding-top: 10px;
        height: 70px;
        text-align: center;
    }
    #books .boxes .top-left-book{
        border: none;
    }
    
}


/* Message.html */

#message{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    height: 100vh;
    text-align: center;
    overflow: auto;

}

#message .previous-icon{
    position: absolute;
    top: 9%;
    left: 4%;
}

#message .message-main{
    position: absolute;
    width: 61%;
    top:13.2%;
    left: 21%;
}

#message .message-main .content{
    position: absolute;
    text-align: center;
    width: 100%;
    top:9.3%;
    left: 0;
}

#message .message-main .background-img
{
    width: 100%;
    margin-bottom: 100px;
}


#message .message-main p{
    font-size: 1.9rem;
    padding: 30px 0px;
}

#message .contact-form{
    padding-left: 16%;
    text-align: start;
    padding-bottom: 80px;
}

#message .contact-form label{
    font-size: 2rem;
    margin-top: 30px;
}

#message .contact-form input{
    margin-top: 20px;
    padding: 9px;
    width: 83%;
    border: 1px solid black;
    font-size: 1.5rem;
}

#message .contact-form input:focus{
    outline: none;
}

#message .contact-form .name{
    width: 42%;
}

#message .contact-form textarea{
    width: 83%;
    height: 110px;
    border: 1px solid black !important;
    resize: none;
    padding: 5px 10px;
    font-size: 1.5rem;
    margin-top: 20px;
}

#message .contact-form textarea:focus{
    outline: none;
}

#message .contact-form .submit{
    margin-top: 10px;
    padding: 8px 40px;
    font-size: 1.6rem;
    font-weight: 400;
    border: 1px solid #fff;
    width: 150px;
    background-color: #E5E5E5;
}


@media(max-width: 1250px){
    #message .contact-form{
        position: absolute;
        top: 46%;
        left: 13%;
        text-align: start;
        padding-bottom: 50px;
    }
}

@media(max-width: 1100px){
    #message .contact-form{
        position: absolute;
        top: 45%;
        left: 13%;
        text-align: start;
        padding-bottom: 100px;
    }
}



@media(max-width: 850px){

    #message .message-main{
        text-align: center;
        max-width: 65%;
        position: absolute;
        top: 20%;
        left: 15%;
    }
    
    #message .contact-form{
        position: absolute;
        top: 60%;
        left: 13%;
        text-align: start;
        padding-bottom: 130px;
    }
    #message .contact-form input{
        width: 100%;
    }

    #message .contact-form .name{
        width: 100%;
    }

    #message .contact-form textarea{
        width: 100%;
    }
}


@media(max-width: 768px){
    #message{
        overflow-x: hidden;
    }
    #message .contact-form input{
        width: 70%;
    }

    #message .contact-form .name{
        width: 70%;
    }

    #message .contact-form textarea{
        width: 70%;
    }

}

@media(max-width: 500px){
    #message
    {
        position:relative;
        top: 0;
        left: 0;
    }
    #message .message-main{
        position: relative;
        width: 100%;
        height: 87vh;
        top:0;
        left: 0;
    }

    #message .message-main .content{
        position: absolute;
        text-align: center;
        width: 160%;
        top:0%;
        left: 0%;
        height: 80vh;     
        overflow: scroll;
    }
    
    #message .message-main .background-img
    {
        display: none;
    }

    #message .contact-form{
        position: absolute;
        top: 81%;
        left: 0%;
        text-align: start;
        padding-bottom: 70px;
        width: 83%;
    }
    #message .contact-form input{
        width: 100%;
    }
    #message .contact-form .name{
        width: 100%;
    }

    #message .contact-form textarea{
        width: 100%;
    }
    #message .message-main img{
        margin-left:0%;
    }
    
    #message .message-main p{
        font-size: 1.9rem;
        margin-left:0%;
        width: 95%;
        padding-left: 12%;
        padding-right: 10%;
    }
    #message .previous-icon{
       display: none;
    }
}

@media(max-width: 376px){
    #message .message-main{
        text-align: center;
        max-width: 65%;
        position: absolute;
        top: 25%;
        left: 15%;
    }
    
    #message .contact-form{
        position: absolute;
        top: 77%;
        left: 13%;
        text-align: start;
        padding-bottom: 150px;
    }
}

/* Circles2 */

#circles2{
    background-image: url('../images/circles-page.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    min-height: 110vh;
    width: 100%;
    margin: 0px;
    text-align: center;
    overflow: auto;
    padding-bottom: 400px;
}

#circles2 .previous-icon{
    position: absolute;
    top: 8%;
    left: 4%;
    width: 100px;
    padding-top: 10px;
    height: 70px;
    text-align: center;
}

#circles2 .previous-icon a img{
   width: 70px;
}

#circles2 .imgs2 .circles-pic{
    width: 260px;
    position: absolute;
    top: 29.9%;
    left: 41.9%;
}

 #circles2 .circles-heading2{
    max-width: 70%;
    text-align: center;
    position: absolute;
    top: 64.5%;
    left: 15%;
}

#circles2 .circles-heading2 h4{
    font-size: 1.9rem;
    /* margin: 0 auto; */
}

@media(max-width:1000px){

    #circles2 .imgs2 .circles-pic{
        width: 210px;
        position: absolute;
        top: 28%;
        left: 38%;
    }

    #circles2 .circles-heading2{
        max-width: 70%;
        text-align: center;
        position: absolute;
        top: 63%;
        left: 15%;
        padding-bottom: 50px;
    }

    #circles2 .circles-heading2 h4{
        font-size: 2.4rem;
        /* margin: 0 auto; */

    }

}

@media(max-width:700px){
    #circles2 .imgs2 .circles-pic{
        width: 200px;
        position: absolute;
        top: 28%;
        left: 34%;
    }

    #circles2 .circles-heading2{
        position: absolute;
        top: 60%;
        left: 14%;
        max-width: 70%;
        text-align: center;
        padding: 0px 20px;
        word-break: break-all;
        padding-bottom: 25px;
    }
    #circles2 .circles-heading2 h4{
        font-size: 1.9rem;
        /* margin: 0 auto; */
 
    }

    #circles2 .previous-icon{
        position: absolute;
        top: 8%;
        left: 4%;
        width: 100px;
        padding-top: 10px;
        height: 70px;
        text-align: center;
    }
    
}

@media(max-width: 550px){
    #circles2 .imgs2 .circles-pic{
        width: 190px;
        position: absolute;
        top: 29%;
        left: 31%;
    }

    #circles2 .circles-heading2{
        position: absolute;
        top: 60%;
        left: 14%;
        max-width: 75%;
        text-align: center;
        padding: 0px 10px;
        word-break:normal;
        padding-bottom: 120px;
    }
}

@media(max-width: 420px){
    #circles2 .imgs2 .circles-pic{
        width: 190px;
        position: absolute;
        top: 29%;
        left: 26%;
    }

    #circles2 .circles-heading2{
        position: absolute;
        top: 60%;
        left: 14%;
        max-width: 70%;
        text-align: center;
        padding: 0px 20px;
        word-break:normal;
        padding-bottom: 120px;
      
    }
}

@media(max-width: 376px){
    #circles2 .imgs2 .circles-pic{
        width: 180px;
        position: absolute;
        top: 28%;
        left: 24%;
    }

    #circles2 .circles-heading2{
        position: absolute;
        top: 60%;
        left: 14%;
        max-width: 70%;
        text-align: center;
        padding: 0px 20px;
        word-break:normal;
        padding-bottom: 120px;
    }
}



/* Rectangle.html */
.rectangle-heading a 
{
    text-decoration:none;
    color:black;
    font-weight: 800;
}

#rectangle{
    position: relative;
    height: 110vh;
    max-width: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

#rectangle .rectangle-main{
    display: flex;
    max-width: 100%;
    margin-top: 300px;
}


#rectangle .rectangle-main .rectangle{
    max-width: 300px;
    height: 400px;
    margin: 0 auto;
    box-sizing: border-box;
}

#rectangle .rectangle-main .rectangle img{
    width: 300px;
    height: 400px;
}

#rectangle .rectangle-main .rectangle-heading{
    width: 550px;
    font-size: 1.7rem;
    text-align: start;
    padding-left: 10%;

}

#rectangle .rectangle-main .rectangle-heading h5{
    font-size: 2rem;
}

@media(max-width: 1250px){
    #rectangle{
        overflow: auto;
    }

    #rectangle .rectangle-main .ractangle img{
        width: 320px;
        height: 350px;
    }
}

@media(max-width: 1050px){
    #rectangle .rectangle-main{
       margin-top: 70px;
       padding-bottom: 30px;
    }
}

@media(max-width: 992px){
    #rectangle{
        overflow: auto;
    }
    #rectangle .rectangle-main{
        width: 100%;
        flex-direction: column;
        box-sizing: border-box;
        text-align: center;
        gap: 50px;
        overflow: auto;
        position: absolute;
        top: 25%;
        left: 0%;
        padding-bottom: 50px;
    }

    #rectangle .rectangle-main .rectangle{
        width: 400px;
        height: 500px;
        margin: 0 auto;

    }

    #rectangle .rectangle-main .rectangle img{
        width: 400px;
        height: 450px;
        margin-left: -15%;
    }
    
    #rectangle .rectangle-main .rectangle-heading{
        width: 450px;
        font-size: 1.7rem;
        text-align: start;
        padding-bottom: 70px;
        margin: 0 auto;  
        margin-top: -20px;

    }
}

@media(max-width: 550px){
    #rectangle{
        overflow: hidden;
        height: 1000px;
        margin-top: -50px;
    }
    #rectangle .rectangle-main{
        position: absolute;
        top:0%;
        left: 2%;
        width: 500px;
        margin-bottom: 80px;
    }

    #rectangle .rectangle-main .rectangle{
        width: 350px;
        height: 400px;
    }

    #rectangle .rectangle-main .rectangle img{
        width: 350px;
        height: 400px;
        margin-left: -9%;
    }

    #rectangle .rectangle-main .rectangle-heading{
        width: 350px;
        font-size: 1.7rem;
        text-align: start;
        margin-left: 13%;
        padding-top: 30px;
    }

    #rectangle .rectangle-main .rectangle-heading h5 {
        margin-left: -20px;
    }

    #rectangle .rectangle-main .rectangle-heading p{
        margin-left: -20px;
    }

    #rectangle .previous-icon{
        position: absolute;
        top: 8%;
        left: 4%;
        width: 70px;
        padding-top: 10px;
        height: 70px;
        text-align: center;
    }
}

@media(max-width: 450px){
    #rectangle{
        overflow: hidden;
        height: 1000px;
    }
    #rectangle .rectangle-main{
        position: absolute;
        top:0%;
        left: 0%;
        width: 500px;
        margin-bottom: 80px;
    }

    #rectangle .rectangle-main .rectangle{
        width: 300px;
        height: 350px;
        margin-left: 17%;
    }

    #rectangle .rectangle-main .rectangle img{
        width: 280px;
        height: 350px;
    }

    #rectangle .rectangle-main .rectangle-heading{
        max-width: 300px;
        font-size: 1.7rem;
        text-align: start;
        margin-left: 14%;
    }

    #books .previous-icon{
        position: absolute;
        top: 8%;
        left: 4%;
        width: 70px;
        padding-top: 10px;
        height: 70px;
        text-align: center;
    }
}

@media(max-width: 400px){
    #rectangle{
        overflow: hidden;
        height: 1000px;
    }
    #rectangle .rectangle-main{
        position: absolute;
        top:0%;
        left: 2%;
        width: 500px;
        margin-bottom: 80px;
    }

    #rectangle .rectangle-main .rectangle{
        width: 300px;
        height: 350px;
        margin-left: 9%;
    }

    #rectangle .rectangle-main .rectangle img{
        width: 280px;
        height: 350px;
        margin-left: 5%;
    }

    #rectangle .rectangle-main .rectangle-heading{
        max-width: 300px;
        font-size: 1.7rem;
        text-align: start;
        margin-left: 11%;
    }
}

@media(max-width: 376px){
    #rectangle{
        overflow: hidden;
        height: 1000px;
    }
    #rectangle .rectangle-main{
        position: absolute;
        top:0%;
        left: 2%;
        width: 500px;
        margin-bottom: 80px;
    }

    #rectangle .rectangle-main .rectangle{
        width: 250px;
        height: 280px;
        margin-left: 13%;
    }

    #rectangle .rectangle-main .rectangle img{
        width: 250px;
        height: 300px;
        margin-left: 2%;
    }

    #rectangle .rectangle-main .rectangle-heading{
        max-width: 250px;
        font-size: 1.7rem;
        text-align: start;
        margin-left: 14%;
        margin-top: 20px;
    }

    #rectangle .previous-icon{
        position: absolute;
        top: 8%;
        left: 4%;
        width: 70px;
        padding-top: 10px;
        height: 70px;
        text-align: center;
    }
}


/* Comming_Soon-Page */

#comming-soon{
    background-image: url('../images/comming-soon.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
    text-align: center;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commingsoon{
    font-size: 5rem;
    font-weight: 700;
    padding: 10px;
    margin-top: -11%;
}

@media(max-width: 500px){
    .commingsoon{
        font-size: 3.5rem;
        font-weight: 700;
        padding: 50px 30px;
        margin-top: -60%;
    }
    
}