@media screen and (max-width: 767.78px) {
    .head {
        height: 60px;
    }
    .carousel-caption1 h1 {
        font-size: 32px;
        line-height: 41px;
    }
    .carousel-caption1{
        top: 5%;
        left: 4.5%;
    }
    .carousel-caption1 p{
        width: 100%;
    }
    .carousel-caption1 p{
        font-size: 70%;
    }
    .fl-x{
        display: none;
    }
    .btn1{
        margin-top: 50px;
        padding: 10px 45px 10px 45px;
    }
    .ban1{
        margin-top: 50px;
    }
    .ban1 .card{
        margin-bottom: 30px;
    }
    .mid-sec{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .title {
        font-size: 30px;
    }
    .btn2{
        margin-top: 20px;
        margin-left: 0px;
    }
    .carousel-control-next-icon{
        display: none;
    }
    .carousel-control-prev-icon{
        display: none;
    }
    .ban1-heading{
        font-size: 130%;
    }
    .mid-card{
        width: 100%;
        margin-top: 2rem;
    }
    .mid-card-grid{
        grid-template-columns: repeat(2, 1fr);
        
    }
    .mid1{
        padding-top: 50px;
        padding-bottom: 30px;
    }
    .mid1 .card{
        margin-bottom: 30px;
    }
    .mid2-sec{
        padding-top: 50px;
    }
    .mid2-sec1 .card{
        margin-bottom: 30px;
    }
    .ban-two{
        padding-top: 40px;
    }
    .mid5{
        padding-top: 40px; 
    }
    .port{
        width: auto;
        margin-top: 0px;
    }
    .mid6{
        padding-top: 50px;
    padding-bottom: 50px;
    }
    .mid7{
        padding-bottom: 50px;
    }
    .foo_wrap h4{
        padding-top: 20px;
    }
    .countdown{
        grid-template-columns: repeat(2, 1fr);
    }
    .mg-ikh{
        height: 350px;
    }
    .bgt{
        height: auto;
    }
    .wht-mg{
        height: auto;
    }
    .stu-mg{
        height: auto;
    }


    /* about page */

    .about{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .about-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .counter-container{
        grid-template-columns: repeat(2, 1fr);
    }
    img.img-fluid-abg{
        height: auto;
    }

    /* cousers */
    .course{
        padding-top: 50px;
    }

    .course-grd{
        grid-template-columns: repeat(1, 1fr);
     }
     h2.title.title.cut{
        font-size: 110%;
     }
     .title.abt {
        font-size: 150%;
        font-weight: 500;
    }

    /* cont */

    .cont{
        padding-top: 50px;
    }
    .cont-card{
        margin-top: 50px;
    }

    /* place */
    .place{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .place-grid{
        grid-template-columns: repeat(3, 1fr);
    }
    .place1{
        padding-top: 50px;
    }
    .place1-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    iframe#youtube-video {
        width: 100%;
        height: 200px;
    }
    .place2{
        padding-top: 50px;
    }
    .place2-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .staff{
        font-size: 75%;
    }
    /* gallery */

    .gal{
        padding-top: 50px;
        /* padding-bottom: 50px; */
    }
    .lightbox{
        grid-template-columns: repeat(1, 1fr);
    }
    .logo img {
        width: 220px;
        height: auto;
    }
    video {
        width: 100%;
    }



}

@media screen and (max-width: 320px) {
    .logo img {
        width: 190px;
        height: auto;
    }
    .head {
        height: 52px;
    }
    .banner_carosel .carousel-caption h1 {
        font-size: 35px;
        line-height: 41px;
    }
    .title {
        font-size: 26px;
    }
    .title.abt {
        font-size: 135%;
        font-weight: 500;
    }

}




@media screen and (min-device-width: 768px) and (max-device-width: 991.78px) { 
    ul.top-ng li{
        font-size: 12px;
        margin-left: 5px;
    }
    ul.top-ng li a{
        font-size: 12px;
        margin-left: 5px;
    }
    ul.top-ng.ndd li a{
        margin-left: 3px;
    margin-right: 3px;
    }
    .head {
    height: 132px;
}
    

.bor {
    color: var(--white-col);
    margin-left: 0px;
    border: 1px solid var(--white-col);
    position: absolute;
    height: 20px;
    top: 18px;
}
    ul.top-ng.ndd li a{
        font-size: 14px;
    }
    ul.top-ng {
        text-align: start;
    }
    .carousel-caption1 h1{
        font-size: 55px;
        line-height: 64px;
    }
    .ban1{
        margin-top: 60px;
    }
    .ban1-heading{
        font-size: 115%;
    }
    .mid-sec{
        padding-bottom: 60px;
        padding-top: 60px;
    }
    .title{
        font-size: 35px;
    }
    .mid-card{
        padding: 20px 20px 20px 20px;
    }
    .counter{
        font-size: 35px;
    }
    .para{
        font-size: 75%;
    }
    .mid1{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .mid2-sec{
        padding-top: 60px;
    }
    .hg{
        height: 40px;
    }
    .mid2-sec1 .card{
        margin-top: 30px;
    }
    .mid4{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .mid2-sec1 {
        margin-top: -12rem;
    }
    .mid6{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .mid7{
        padding-bottom: 60px;
    }
    .sdx {
        width: 90%;
    }
    .foo_wrap ul li a{
        font-size: 15px;
    }
    .foo_wrap ul li {
        font-size: 15px;
    }

    /* about */

    .btg{
        height: auto;
    }

     /* cousers */
     h2.title.title.cut{
        font-size: 100%;
     }

     /* contact us */
     .cont{
        padding-top: 60px;
     }
     .cont-card{
        margin-top: 60px;
    }

        /* gallery */

        .gal{
            padding-top: 60px;
            padding-bottom: 60px;
        }

}

@media screen and (min-device-width: 992px) and (max-device-width: 1200px){
    .navbar-light .navbar-nav .nav-link{
        margin-right: 0.6rem !important;
    margin-left: 0.6rem !important;
    }
    ul.top-ng li{
        margin-left: 6px;
    }
}