@media only screen and (min-width: 1575px) {
    #book{
        background-image: url("../../courses/img/book.png");
        width: 100%;
        height: 1000px;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }
    #book #innerbook{
        position: absolute;
        top: 15%;
        left: 20%;
        width: 70%;
        height: 650px;
        overflow-y: auto;
    }
    #book p {
        font-size: 1.5rem;
        margin-right: 3px;
        color: black;
    }
    
    ::-webkit-scrollbar {
        width: 12px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #9304e1;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }
}

@media only screen and (min-width: 940px) and (max-width: 1574px){
    #book{
        background-image: url("../../courses/img/book.png");
        width: 100%;
        height: 1000px;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }
    
    #book #innerbook{
        position: absolute;
        top: 14%;
        left: 11%;
        width: 84%;
        height: 770px;
        overflow-y: auto;
    }
    #book p {
        font-size: 1.5rem;
        margin-right: 3px;
        color: black;

    }
    ::-webkit-scrollbar {
        width: 12px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #9304e1;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }
}
@media only screen and (min-width: 510px) and (max-width:939px) {
    #book{
        background-image: url("../../courses/img/book.png");
        width: 100%;
        height: 695px;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }
    .formshower form{
        width:440%;
    }
    #book #innerbook{
        position: absolute;
        top: 15%;
        left: 14%;
        width: 76%;
        height: 530px;
        overflow-y: auto;
    }
    #book p {
        font-size: 1rem;
        color: black;
    }}
@media only screen and (min-width: 413px) and (max-width:509px) {
    #book{
        background-image: url("../../courses/img/book.png");
        width: 100%;
        height: 565px;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }
    .formshower form{
        width:310%;
    }
    #book #innerbook{
        position: absolute;
        top: 12%;
        left: 14%;
        width: 80%;
        height: 390px;
        overflow-y: auto;
    }
    #book #innerbook p span{
        font-size: 1rem;
    }
    #book p {
        font-size: 1rem;
        color: black;
    }}
@media only screen and (min-width: 330px) and (max-width:412px) {
    #book{
        background-image: url("../../courses/img/book.png");
        width: 100%;
        height: 405px;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }
    .formshower form{
        width:300%;
    }
    #book #innerbook{
        position: absolute;
        top: 12%;
        left: 14%;
        width: 70%;
        height: 340px;
        overflow-y: auto;
    }
    #book #innerbook p span{
        font-size: 1rem;
    }
    #book p {
        font-size: 0.5rem;
        color: black;
    }}
@media only screen and (min-width: 375px) and (max-width:1280px) {
    .hero-img{
        height: 45rem;
    }
}
@media only screen and (min-width: 319px) and (max-width:750px) {
    .zgrid{
        display: grid;
    }
    .display-4{
        font-size: 2.5rem !important;
        text-align: center;
    }
    .lead{
        text-align: center;
    }
    .zgrid .btn{
        margin-left: auto;
        margin-right: auto;
    }
    .hero-content{
        margin-top: -2rem !important;
        display: flex;
        flex-direction: column-reverse;
    }
    .imgheader{
        margin-left: auto;
        margin-right: auto;
    }
}
@media only screen and (max-width: 329px) {
    #book{
        background-image: url("../../courses/img/book.png");
        width: 100%;
        height: 345px;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }
    .formshower form{
        width:265%;
    }
    #book #innerbook{
        position: absolute;
        top: 13%;
        left: 15%;
        width: 78%;
        height: 271px;
        overflow-y: auto;
    }
    #book #innerbook p span{
        font-size: 1rem;
    }
    #book p {
        font-size: 0.75rem;
        color: black;
    }
    .logotext{
        font-size: 1rem !important;
    }
    .zgrid{
        display: grid;
    }
    .hero-img{
        height: 40rem;
    }
}
.mainpara{
    background-color: #6584A3;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 10px;
    max-width: 95%;
}
.formshower form{
    width:100%;
}
.blur {
    padding:85px;
    width: 100%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    position: absolute;
    height: 100%;
    z-index: 99;
    top: -15px;
    left: 0;
}