/* Mobile styles */
    @media only screen and (max-width: 869px) {
      .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: linear-gradient(rgba(62, 15, 184, 0.906),rgba(62, 15, 184, 0.906));
        position: absolute;
        top: 30px;
        left: 0;
        padding: 15px 0;
      }
      .nav-links li {
        margin: 10px 0;
        text-align: center;
      }
      .nav-links a{
        font-size: 1rem;
      }
      .hamburger {
        display: flex;
      }
      .nav-links.active {
        display: flex;
      }
      .logo,.info{
        width: 80%;
      }
      .container{
        overflow-x: hidden;
      }
     .address{
        font-size: 1rem;
      }
      .hamburger{
            margin-right: 1rem;
        }
        .hamburger span {
            height: 1px;
        }
        .banner{
            flex-direction: column;
        }
        .swiper-slide p,.swiper-slide h5{
            font-size: 1rem;
        }
        .swiper-slide img{
        width: 70%;
        height: 200px;
        }
        .info > marquee{
            font-size: 1rem;
        }
        .program-admin{
        flex-direction: column;
        }
        .programs{
        width: 100%;
        }
        .admins{
        width: 100%;
        }
        .swiper-slide img{
        width: 50%;
        height: 300px;
        }
        #big{
            font-size: 1rem;
        }
        .carousel{
    width: 100%;
    text-align: center;
    padding: 1.5rem;
    height: auto;
  }
  .carousel img{
      height: 500px;
  }
        .infos > div{
            width: 50%;
            padding: 15px;
            border-bottom-right-radius: 100px;
            font-size: 1rem;
        }
        .alumni > small{
            font-size: 1rem;
        }
        .alumni form{
            font-size: 1rem;
        }
        .alumni input[type='text']{
            font-size: 1rem;
        }
        .alumni button[type='submit']{
            font-size: 1rem;
        }
        .facebook{
        flex-direction: column-reverse;
        height: auto;
        margin-top: 6rem;
        }
        .frame iframe{
            font-size: 1rem;
        }
        .mail{
            width: 100%;
            margin-top: 5rem;
            margin-bottom: 5rem;
        }
        .mail form{
            font-size: 1rem;
        }
        .mail :is(h5){
            text-align: center;
            font-size: 1rem;
        }
        .mail input[type='text']{
            font-size: 1rem;
        }
        .mail button[type='submit']{
            font-size: 1rem;
        }
        #message{
            width: 100%;
        }
        
        /* ============achievement===================== */
        .achievements{
        font-size: 1rem;
        }
        /* ==========achievement ends=================== */

        
        /* =======================ADMINS================================== */
        .head{
            margin-top: 1rem;
        }
        .head > p{
            font-size: 1rem;
        }
        .boldheading{
            text-align: center;
        }
        .organs{
        flex-direction: column;
        }
        .academics,.description{
        width: 100%;
        padding: 20px;
        text-align: left;
        font-size: 1rem;
        }
        #historyimage{
            margin-top: 2rem;
            margin-left: 2rem;
        }


        /* =================news======================================== */
        .news{
            padding: 15px;
            width: 100%;
        }
        .stories{
            width: 100%;
            margin-left: 0;
        }
        .read{
            width: 100%;
        }
        .stories p,.read{
            font-size: 1rem;
        }
        .flexnews{
            flex-direction: column;
        }


        /* =======================HODS================================================ */
        .staff{
            margin-left: 0;
            width: 100%;
        }
        .hods{
            flex-direction: column;
        }
        .teacher-card{
            width: 100%;
            margin-left: 0;
        }
        .teacher-card img{
            width: 170px;
            height: 170px;
        }
        .teacher-card p{
            font-size: 1rem;
        }


        /* ===============QUIZ============================================= */
        .subject{
            flex-direction: column;
        }
        .sub{
            width: 100%;
            margin-left: 0;
            font-size: 1rem;
        }
        #heading{
            font-size: 1rem;
        }
        .li{
            width: 80%;
        }

        /* =================ADMISSION MODAL AREA===================================== */
        #exampleModalToggle p,#exampleModalToggle2 p{
            font-size: 1rem;
        }
        .verifyname_container{
            flex-direction: column;
        }
        .verifyname_image,.verifyname_form_div{
            width: 100%;
        }
        .verifyname_form_div form,.verifyname_image h5{
            font-size: 1rem;
        }
        .verifyname_image img{
            margin: -1rem 0rem 1rem;
        }
        .verifyname_form_div input[type='text'],.verifyname_form_div button[type='submit']{
            font-size: 1rem;
        }

        /* =========ABOUT US MODAL================================== */
        .keys{
            width: 100%;
            flex-direction: column;
        }
        .history,.mission,.vision,.core,.departments,.anthem{
            font-size: 1rem;
            width: 100%;
        }


        /* ==========footer area============= */
        .footer{
            margin-top: 3rem;
            color: white;
        }
        .media-platforms{
            flex-direction: column;
        }
        .copyright{
            font-size: 1rem;
        }
        #i{
            font-size: 1.5rem;
        }
    
    }



    /* =============700px================================ */
    @media only screen and (max-width: 700px) {
        .container{
            overflow-x: hidden;
        }
        nav{
            margin-left: -1rem;
            width: 111%;
        }
        .address{
            font-size: 1rem;
        }
        .nav-links{
            z-index: 100;
        }
        .nav-links a{
            font-size: 1rem;
        }
        .hamburger{
            margin-right: 1rem;
        }
        .hamburger span {
            height: 1px;
        }
        .banner{
            flex-direction: column;
        }
        .logo,.info{
            width: 100%;
        }
        .logo{
            display: flex;
            flex-direction: column;
        }
        .logo img{
            aspect-ratio: 9/12;
            margin-bottom: 1rem;
        }
        .name{
            font-size: 1.8rem;
        }
        .info > marquee{
            font-size: 1rem;
        }
        .program-admin{
            flex-direction: column;
            margin-left: -2rem;
            width: 120%;
        }
        .programs{
            width: 100%;
            padding: 10px;
        }
        .admins{
            width: 100%;
            padding: 10px;
        }
        .programs h4{
            margin-top: 10rem;
        }
        #big{
            font-size: 1rem;
        }
        .swiper-slide img{
        width: 60%;
        height: 220px;
        }
        .swiper-slide p,.swiper-slide h5{
            font-size: 1rem;
        }
        .carousel{
    width: 100%;
    text-align: center;
    padding: 1.5rem;
  }
  .carousel img{
      height: 200px;
  }

        /* ===========appreciation=============================== */
        .appreciation{
            font-size: 1rem;
            margin-left: -1rem;
            width: 110%;
        }
        #quote{
            font-size: 2rem;
        }

        /* ================info area============================ */
        .infos > div{
            width: 50%;
            padding: 15px;
            border-bottom-right-radius: 70px;
            font-size: 1rem;
        }


        /* ==============alumni area============================= */
        .alumni > small{
            font-size: 1rem;
        }
        .alumni form{
            font-size: 1rem;
        }
        .alumni input[type='text']{
            font-size: 1rem;
        }
        .alumni button[type='submit']{
            font-size: 1rem;
        }
        .alummembers{
            flex-direction: column;
        }
        /* ============================================================ */


        /* ==================stem area===================================== */
        .stem{
            height: 400px;
            padding: 30px;
            margin-left: -1rem;
            width: 110%;
        }
        /* ===================================================== */
        

        /* ===============academic programs========================= */
        .academic_programs{
            margin-left: -1rem;
            width: 110%;
        }
        .flex_programs{
            flex-direction: column;
            margin-left: -1rem;
        }
        .course{
            width: 100%;
        }
        #font{
            font-size: 1.5rem;
        }
        /* ======================================================= */


        /* ================choice area================================== */
        .choice{
            height: 400px;
            margin-left: -1rem;
            width: 110%;
        }
        .number{
            font-size: 1.5rem;
        }
        .metric p{
            font-size: 0.9rem;
        }
        /* ========================================================== */


        /* ===========clubs======================================= */
        .clubs{
            margin-left: -1rem;
            width: 110%;
        }
        .clubs_container{
            flex-direction: column;
        }
        .club{
            width: 100%;
            margin-top: 2rem;
        }
        /* ======================================================== */


        /* ===============chaplaincy========================== */
        .chaplaincy{
            margin-left: -1rem;
            width: 118%;
        }
        .rev-notes{
            flex-direction: column;
        }
        .rev{
            width: 100%;
            align-items: center;
        }
        .rev img{
            height: 400px;
            width: 250px;
            border-radius: 50%;
            margin-left: 2.5rem;
        }
        .rev div{
            margin-left: 2rem;
        }
        .notes{
            width: 100%;
            margin-top: 3rem;
        }
        .chaplaincy-prefects{
            flex-direction: column;
            align-items: center;
        }
        .chaplaincy-prefects img{
            margin-top: 1.5rem;
            width: 200px;
            height: 200px;
        }
        
        /* ================================================== */



        /* ===============map area=================== */
        #map{
            width: 100%;
        }


        /* =================facebook and mail us area============= */
        
        .facebook{
        flex-direction: column-reverse;
        height: auto;
        margin-top: 6rem;
        width: 110%;
        justify-content: center;
        align-items: center;
        margin-left: -1rem;
        }
        .frame{
            width: 100%;
        }
        .frame iframe{
            font-size: 1rem;
        }
        .mail{
            width: 100%;
            padding: 15px;
            margin-top: 5rem;
            margin-bottom: 5rem;
        }
        .mail form{
            font-size: 1rem;
        }
        .mail :is(h5){
            text-align: center;
            font-size: 1rem;
        }
        .mail input[type='text']{
            font-size: 1rem;
        }
        .mail button[type='submit']{
            font-size: 1rem;
        }
        #message{
            width: 100%;
        }
        /* .whatsapp-float,.telegram-float,.youtube-float{
            margin-right: 3rem;
        } */

        /* ============achievement===================== */
        .achievements{
        font-size: 1rem;
        }
        /* ==========achievement ends=================== */

        
        /* =======================ADMINS================================== */
        .administration{
            margin-left: -1rem;
            width: 110%;
        }
        .head{
            margin-top: 1rem;
        }
        .head > p{
            font-size: 1rem;
        }
        .boldheading{
            text-align: center;
        }
        .organs{
            flex-direction: column;
        }
        .academics,.description{
            width: 100%;
            padding: 20px;
            text-align: left;
            font-size: 1rem;
        }
        .description img{
            margin-left: 5.5rem;
        }


        /* =================news======================================== */
        .news{
            padding: 15px;
            width: 110%;
            margin-left: -1rem;
        }
        .stories{
            width: 113%;
            margin-left: -1.5rem;
        }
        .read{
            width: 100%;
        }
        .read img{
            height: 200px;
        }
        #ifr{
            width: 350px;
            aspect-ratio: 9/16;
        }
        .stories p,.read{
            font-size: 1rem;
        }
        .flexnews{
            flex-direction: column;
            
        }
        .alumprograms,.alummembers{
            margin-left: -1rem;
            width: 110%;
            
        }
        .cards{
            flex-direction: column;
        }
        .card{
            width: 100%;
        }
        .newsmore-gallery img{
            width: 100%;
        }
        .cards article:nth-child(8){
            margin-bottom: 2.5rem;
        }
        .newsmore-videos video{
            width: 100%;
        }
        #sciencelab,#ictlab,#admission,#completed,#awards,#stempreparation,#wistem,
        #srcweek,#health,#cadet,#farm,#choreography,#culture,#choir{
            width: 115%;
            margin-left: -2rem;
        }
        #sciencelab p,#ictlab p,#admission p,#completed p,#awards p,#stempreparation p,
        #wistem p,#srcweek p,#health p,#cadet p,#farm p,#choreography p,#culture p,#choir p{
            font-size: 1rem;
        }


        /* =======================HODS================================================ */
        .staff{
            margin-left: 0;
            width: 100%;
        }
        .about_hods{
            width: 100%;
        }
        .hod_pictures{
            width: 100%;
            align-items: center;
            justify-content: center;
        }
        .hod_pictures img{
            width: 180px;
            height: 180px;
        }
        .src{
            width: 100%;
            flex-direction: column;
        }
        .about_src{
            width: 100%;
        }
        .src_pictures{
            width: 100%;
        }


        /* ===============QUIZ============================================= */
        .subject{
            flex-direction: column;
        }
        .sub{
            width: 100%;
            margin-left: 0;
            font-size: 1rem;
        }
        #heading{
            font-size: 1rem;
        }
        .li{
            width: 80%;
        }



        /* =================ADMISSION MODAL AREA===================================== */
        #exampleModalToggle p,#exampleModalToggle2 p{
            font-size: 1rem;
        }
        .verifyname_container{
            flex-direction: column;
            margin-left: -3rem;
            width: 125%;
            padding: 20px;
        }
        .verifyname_image,.verifyname_form_div{
            width: 100%;
        }
        .form-container{
            width: 100%;
        }
        #heading{
            margin-left: 1rem;
        }
        .verifyname_form_div form,.verifyname_image h5{
            font-size: 1rem;
        }
        .verifyname_image img{
            margin: -1rem 2rem 1rem;
        }
        .verifyname_form_div input[type='text'],.verifyname_form_div button[type='submit']{
            font-size: 1rem;
        }
        .downloads{
            flex-direction: column;
        }
        .downloads a{
            margin-top: 2rem;
        }
        #ii{
            margin-left: 2.5rem;
            margin-top: -2rem;
        }
        .dashboard{
            flex-direction: column;
            padding: 20px;
            margin-left: 1rem;
        }
        .dashboard .student{
            width: 105%;
            margin-left: -2rem;
        }
        #green{
            margin-left: 1rem;
        }


        /* =========ABOUT US MODAL================================== */
        .keys{
            width: 100%;
            flex-direction: column;
        }
        .history,.mission,.vision,.core,.departments,.anthem{
            font-size: 1rem;
            width: 100%;
        }


        /* ==========footer area============= */
        .footer{
            width: 110%;
            margin-left: -1rem;
        }
        .services{
            flex-direction: column;
            width: 100%;
            padding: 30px;
        }
        .service_one{
            width: 100%;
        }
        .service_two{
            width: 100%;
            margin-top: 3rem;
        }
        .service_three{
            width: 100%;
            margin-top: 3rem;
        }
        #i{
            font-size: 1.5rem;
        }
    }