body {
    width           : 100%;
    margin          : 0px;
    padding         : 0px;
    /* or */
    height          : 100%;
    background-color: whitesmoke;
    box-sizing      : border-box;
}

.header {
    text-align: center;
    box-sizing: border-box;
}

/*//////////////////////////////////////////////////////////
//////////////////----- Logo Image----//////////////////////
//////////////////////////////////////////////////////////*/



@media (min-width: 850px) {
    #logo {
        height    : 150px;
        width     : 150px;
        float     : left;
        box-sizing: border-box;
    }
}

@media (max-width: 850px) {
    #logo {
        height    : 130px;
        width     : 130px;
        box-sizing: border-box;
    }
}

@media (min-width: 850px) {
    .header .log {
        padding-left: 100px;
        box-sizing  : border-box;
    }
}


/*//////////////////////////////////////////////////////////
//////////////////----- college Name----////////////////////
//////////////////////////////////////////////////////////*/

@media (min-width: 850px) {
    #cn {
        font-size  : 45px;
        color: #e75c1f;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text-shadow: 2px 2px 5px rgb(0, 0, 0);
        box-sizing : border-box;
    }
}


@media (max-width: 850px) {
    #cn {
        font-size  : 25px;
        color: #e75c1f;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        box-sizing : border-box;
        text-shadow: 2px 2px 5px rgb(7, 7, 7);
    }
}


@media (min-width: 850px) {
    #info {
        font-size  : 25px;
        color: #e75c1f;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        box-sizing : border-box;
        text-shadow: 1px 1px 3px rgb(0, 0, 0);
    }
}


@media (max-width: 850px) {
    #info {
        font-size  : 10px;
        color: #e75c1f;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text-shadow: 2px 2px 5px rgb(0, 0, 0);
        box-sizing : border-box;
    }
}


/*//////////////////////////////////////////////////////////
//////////////////----- Nav Bar----/////////////////////////
//////////////////////////////////////////////////////////*/


@media (min-width: 850px) {
    .nev {
        height          : 2.8rem;
        width           : 100%;
        background-color: #007bff;
        border          : solid#007bff;
        font-family     : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        box-sizing      : border-box;

    }
}


@media (max-width: 850px) {
    .nev {
        padding-top     : 20px;
        padding-bottom  : 20px;
        height          : auto;
        width           : 100%;
        background-color: #007bff;
        border          : solid #007bff;
        box-sizing      : border-box;
    }
}


/*//////////////////////////////////////////////////////////
////////////////--Nev bt dropdown---////////////////////////
//////////////////////////////////////////////////////////*/


@media (min-width: 850px) {
    .drop {
        position  : relative;
        display   : inline-block;
        box-sizing: border-box;
    }
}

@media (min-width: 850px) {
    .dropbtn {
        display         : none;
        position        : absolute;
        background-color: #f9f9f9;
        min-width       : 250px;
        box-shadow      : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index         : 1;
        box-sizing      : border-box;
    }
}


@media (min-width: 850px) {
    .drop:hover .dropbtn {
        display: block;
    }
}

@media (min-width: 850px) {
    #bt {
      
          height          : auto;
        width           : auto;
        margin          : 7px 10px 0px 5px;
        background-color: #007bff;
        border          : solid#007bff;
        color           : aliceblue;
        display         : inline-block;
        text-decoration : none;
        box-sizing      : border-box;
        
    }
}


@media (min-width: 850px) {
    #dropbt {
        display        : inline-block;
        text-decoration: none;
        color          : black;
        padding        : 12px 16px;
        height         : 1.5rem;
        width          : auto;
        box-sizing     : border-box;

    }
}


/*//////////////////////////////////////////////////////////
////////////////-----Nev bt  min----////////////////////////
//////////////////////////////////////////////////////////*/


@media (max-width: 850px) {
    .drop {
        position  : relative;
        display   : inline-block;
        box-sizing: border-box;

    }
}

@media (max-width: 850px) {
    .dropbtn {
        display         : none;
        position        : absolute;
        background-color: #f9f9f9;
        min-width       : 150px;
        box-shadow      : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index         : 1;
        box-sizing      : border-box;
    }
}


@media (max-width: 850px) {
    .drop:hover .dropbtn {
        display   : block;
        box-sizing: border-box;
    }
}

@media (max-width: 850px) {
    #bt {
        height          : auto;
        width           : auto;
        padding         : 11px 5px;
        background-color: #007bff;
        border          : solid#007bff;
        color           : aliceblue;
        display         : inline-block;
        text-decoration : none;
        box-sizing      : border-box;
    }
}


@media (max-width: 850px) {
    #dropbt {
        display        : inline-block;
        text-decoration: none;
        color          : black;
        padding        : 12px 16px;
        height         : 1.5rem;
        width          : auto;
        box-sizing     : border-box;
    }
}


/*//////////////////////////////////////////////////////////
////////////////-----Nev Add----////////////////////////////
//////////////////////////////////////////////////////////*/


@media (min-width: 850px) {
    .navadd {
        height          : 3rem;
        width           : 100%;
        background-color: aliceblue;
        border          : solid aliceblue;
        color           : #007bff;
        margin          : 0px;
        box-sizing      : border-box;
    }
}


@media (max-width: 850px) {
    .navadd {
        margin          : 0px;
        padding-top     : 0px;
        padding-bottom  : 5px;
        height          : auto;
        width           : 100%;
        background-color: aliceblue;
        border          : solid aliceblue;
        font-size       : 15px;
        box-sizing      : border-box;
    }
}


/*//////////////////////////////////////////////////////////
/////////////////////-----Box----///////////////////////////
//////////////////////////////////////////////////////////*/

@media (min-width: 850px) {
    .box {
        height          : 355px;
        width           : 100%;
        background-color: aliceblue;
        box-sizing      : border-box;
    }
}



@media (max-width: 850px) {
    .box {
        padding-bottom  : 10px;
        height          : auto;
        width           : 101.5%;
        background-color: aliceblue;
        box-sizing      : border-box;
    }
}



@media (min-width: 850px) {
    .boxa {
        height          : auto;
        width           : 50%;
        background-color: aliceblue;
        float           : left;
        box-sizing      : border-box;
    }
}



@media (max-width: 850px) {
    .boxa {
        padding-bottom  : 10px;
        height          : auto;
        width           : 100%;
        background-color: aliceblue;
        box-sizing      : border-box;
    }
}




@media (min-width: 850px) {
    .boxb {
        height    : 355px;
        width     : 50%;
        float     : right;
        text-align: center;
        border    : solid rgb(223, 219, 219) 3px;
        box-sizing: border-box;
    }
}



@media (max-width: 850px) {
    .boxb {
        display: none;
    }
}


@media (min-width: 850px) {
    #imgv {
        height    : 300px;
        width     : 50%;
        box-sizing: border-box;
    }
}




@media (max-width: 850px) {
    #img1 {
        display: none;
    }
}


/*//////////////////////////////////////////////////////////
////////////////---------Table------////////////////////////
//////////////////////////////////////////////////////////*/
table {
    border-collapse: collapse;
    width          : 100%;
    box-sizing     : border-box;
}

th,
td {
    border    : solid rgb(223, 219, 219) 1px;
    padding   : 10px;
    text-align: left;
}

tr:hover {
    background-color: #D6EEEE;
}


/*//////////////////////////////////////////////////////////
////////////////-----Box  1  ----////////////////////////
//////////////////////////////////////////////////////////*/


@media (min-width: 850px) {
    .box1 {
        padding-bottom: 10px;
        padding-top   : 50px;
        height        : auto;
        width         : 100%;
        box-sizing    : border-box;
    }
}



/*//////////////////////////////////////////////////////////
////////////////-----      Add    ---////////////////////////
//////////////////////////////////////////////////////////*/



@media (min-width: 850px) {
    .add {
        text-align      : center;
        color           : antiquewhite;
        font-family     : Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        margin-bottom   : 10px;
        padding-top     : 10px;
        padding-bottom  : 10px;
        height          : auto;
        width           : 100%;
        background-color: #007bff;
        box-sizing      : border-box;
    }
}

@media (max-width: 850px) {
    .add {
        text-align      : center;
        color           : antiquewhite;
        font-family     : Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        margin-bottom   : 50px;
        height          : auto;
        width           : 100%;
        background-color: #007bff;
        box-sizing      : border-box;
    }
}


/*//////////////////////////////////////////////////////////
////////////////-----  Msg Box  ----////////////////////////
//////////////////////////////////////////////////////////*/

@media (min-width: 850px) {
    .msg {
        float        : left;
        padding-left : 30px;
        padding-right: 10px;
        width        : 20%;
        height       : 430px;
        box-sizing   : border-box;
    }
}


@media (max-width: 850px) {
    .msg {
        height          : auto;
        width           : 87.5%;
        margin          : 25px;
        padding         : 15px;
        background-color: silver;
        border          : solid silver 5px;
        text-decoration : none;
        box-sizing      : border-box;
    }
}


/*//////////////////////////////////////////////////////////
////////////////--------Msg Bt------////////////////////////
//////////////////////////////////////////////////////////*/


@media (min-width: 850px) {
    #msgbt {
        text-decoration: none;
        margin-top     : 10px;
        box-sizing     : border-box;
    }
}


@media (max-width: 850px) {
    #msgbt {
        text-decoration: none;
        font-size      : 1.2rem;
        box-sizing     : border-box;
    }
}




/*//////////////////////////////////////////////////////////
////////////////-----Notic Box -----////////////////////////
//////////////////////////////////////////////////////////*/


@media (min-width: 850px) {
    .box1 .note {
        border          : solid white;
        height          : 460px;
        width           : 25%;
        float           : right;
        background-color: white;
        color           : #000000;
        padding         : 8px;
        text-align      : justify;
        overflow        : auto;
        margin-right    : 20px;
        padding-left    : 45px;
        box-shadow      : 0 16px 24px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
        border-radius   : 20px;
        box-sizing      : border-box;
    }
}



@media (max-width: 850px) {
    .box1 .note {
        border          : solid #ffffff;
        height          : 500px;
        width           : 94%;
        background-color: #ffffff;
        color           : #000000;
        padding         : 15px;
        margin-left     : 10px;
        text-align      : justify;
        overflow        : auto;
        box-shadow      : 0 16px 24px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
        border-radius   : 20px;
        box-sizing      : border-box;
    }
}



/*//////////////////////////////////////////////////////////
////////////////----Img 1 Box   ----////////////////////////
//////////////////////////////////////////////////////////*/


@media (min-width: 850px) {
    #img1 {
        height     : 430px;
        width      : 50%;
        margin-left: 15px;
        box-sizing : border-box;
    }
}

@media (max-width: 850px) {
    #img1 {
        display: none;
    }
}


@media (min-width: 850px) {
    #imgz {
        display: none;
    }
}




@media (max-width: 850px) {
    #imgz {
        height       : 225px;
        width        : 100%;
        border-radius: 8px;
        margin-bottom: 15px;
        margin-top   : 10px;
        box-sizing   : border-box;
    }
}


/*//////////////////////////////////////////////////////////
////////////////-----Box 2----////////////////////////
//////////////////////////////////////////////////////////*/


@media (min-width: 850px) {
    .box2 {
        height          : auto;
        padding         : 50px;
        padding-left    : 50px;
        width           : 100%;
        margin-top      : 50px;
        background-color: aliceblue;
        border          : solid whitesmoke;
        font-family     : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text-align      : justify;
        overflow        : auto;
        box-sizing      : border-box;
    }
}


@media (max-width: 850px) {
    .box2 {
        height          : auto;
        padding         : 10px;
        padding-left    : 10px;
        width           : 100%;
        margin-top      : 20px;
        background-color: aliceblue;
        border          : solid whitesmoke;
        font-family     : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text-align      : justify;
        overflow        : auto;
        box-sizing      : border-box;
    }
}

/*//////////////////////////////////////////////////////////
////////////////-----Img 2 ----/////////////////////////////
//////////////////////////////////////////////////////////*/




@media (min-width: 850px) {
    #img2 {
        height       : 450px;
        width        : 30%;
        float        : right;
        border-radius: 8px;
        border       : solid #ddd 3px;
        box-shadow   : 0 16px 24px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
        margin-left  : 50px;
        box-sizing   : border-box;
    }
}


@media (max-width: 850px) {
    #img2 {
        margin-left  : 40px;
        height       : 22rem;
        width        : 80%;
        margin-bottom: 40px;
        border-radius: 8px;
        border       : solid paleturquoise;
        box-shadow   : 0 16px 24px 0 rgba(0, 0, 0, 0.2), 0 10px 24px 0 rgba(0, 0, 0, 0.19);
        box-sizing   : border-box;
    }
}


/*//////////////////////////////////////////////////////////
////////////////-----Footer Box ----////////////////////////
//////////////////////////////////////////////////////////*/

@media (min-width: 850px) {
    .footer {
        height          : auto;
        width           : 100%;
        background-color: rgb(0, 0, 0);
        font-size       : 25px;
        color           : antiquewhite;
        margin-top      : 100px;
        padding-left    : 70px;
        text-align      : center;
        overflow        : auto;
        box-sizing      : border-box;
    }

}


@media (max-width: 850px) {
    .footer {
        height          : auto;
        width           : 100%;
        background-color: rgb(0, 0, 0);
        font-size       : 15px;
        color           : antiquewhite;
        margin-top      : 50px;
        padding-left    : 7px;
        text-align      : center;
        overflow        : auto;
        box-sizing      : border-box;
    }
}


@media (min-width: 850px) {
    .ft1 {
        float     : right;
        width     : 48%;
        text-align: left;
        box-sizing: border-box;
    }

}


@media (max-width: 850px) {
    .ft1 {
        float     : right;
        width     : 45%;
        text-align: left;
        box-sizing: border-box;
    }

}

@media (min-width: 850px) {
    .ft2 {
        float     : left;
        width     : 48%;
        text-align: left;
        box-sizing: border-box;
    }

}


@media (max-width: 850px) {
    .ft2 {
        float     : left;
        width     : 45%;
        text-align: left;
        box-sizing: border-box;
    }

}

@media (min-width: 850px) {
    #ftc {
        padding-top: 250px;
        box-sizing : border-box;
    }
}

@media (max-width: 850px) {
    #ftc {
        margin-top : 50px;
        padding-top: 150px;
        box-sizing : border-box;
    }
}