@media only screen and (max-width: 768px) {
    body{
    
   background-image: url("images/j1.png");
   background-position:-1rem 5rem;
  
   background-size: contain;
   padding-bottom: 0rem;height: 60vh;
   background-repeat: no-repeat;
   background-color: #1a4ba3;   }
     .main{
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -webkit-flex-direction:column;
          -ms-flex-direction:column;
              flex-direction:column;
   }
   #Facilities{
      z-index: 1;
   }
   a.logoxdc{
      margin-top: 0;
    }  
  .dropdown{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-right: 1.5rem;
      font-size: 1.5rem;
    }
  
    .nav2{
      margin-right: 1rem;
      width: 50vw;
      height: 100vh;
      padding: 1%;
      display: none;
      /* margin-top: 62.5rem; */
      -ms-grid-column-align: left;
      justify-self: left;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      background-color: #010059d9;
      -webkit-backdrop-filter: blur(15px);
      backdrop-filter: blur(15px);
      border-radius: .5rem;
      -webkit-border-radius: .5rem;
      -moz-border-radius: .5rem;
      -ms-border-radius: .5rem;
      -o-border-radius: .5rem;
      text-decoration: none;
      color: #252424;
      position: absolute;
      z-index: 110;
      left: 0;
      top: 100%;
      border-top-left-radius:0rem;
      border-bottom-left-radius: 0rem;
    }
  
    nav{
     display: none;
    }
  ul{
      list-style: none;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      gap: 1.7rem;
      font-size: 1.7rem;
      }
     ul li a{
     list-style: none;
  
          text-decoration: none;
          list-style: none;
          color:#ffffff;
          font-family: Arial, Helvetica, sans-serif;
      font-weight: 600;        }
   
  
    header {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      padding: 0;
      background-color: #010059d9;
      -webkit-backdrop-filter: blur(15px);
              backdrop-filter: blur(15px);
      width: 100%;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      padding-left: .5rem;
  position: absolute;    
  z-index: 106;
  }
      .hero {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column;
          text-align: center;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
              -ms-flex-align: center;
                  align-items: center;
          height: auto;
          height: 100%;
          margin-top: 5.5rem;
          background-color: hsla(0, 0%, 100%, 0.171);
          -webkit-backdrop-filter: blur(5px);
                  backdrop-filter: blur(5px);
          border-radius: 1rem;
          -webkit-border-radius: 1rem;
          -moz-border-radius: 1rem;
          -ms-border-radius: 1rem;
          -o-border-radius: 1rem;
  }
    
      .motto {
          margin-bottom: 2rem;
          margin-left: 0rem;
          h4{
           margin-top: 1rem;
           color: #ffffff; text-align: center;
           font-size: 1.3rem;
          }
      }
    
      .student-image {
         
          display: none;
  
      }
  
  .heroback{
   
  z-index: 1;
   
  }
  .counter-section {
   margin-top: 0vh;
   width: 85%;
   display: -ms-grid;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10rem, 0fr));
   -ms-grid-rows: minmax(1rem, 7rem);
   grid-template-rows: minmax(1rem, 7rem);
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;}
  
   .counter-item {
     text-align: center;
     height: -webkit-min-content;
     height: -moz-min-content;
     height: min-content;
     .count {
         font-size: 3rem;
         font-weight: bold;
         color: #ffffff;
        
     }
  }
  .fb_iframe_widget span {
      display: inline-block;
      position: relative;
      text-align: justify;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .footer-section ul {
   list-style-type: disc;
   padding: 0;
   gap: 0;}
   .footer-section h3{
      margin-top: 0rem;
   }
   .footer-section address{
      margin-top: 4rem; }
      .footer-section:last-child {
          margin-right: 0;
          margin-top: 4rem;
      }
  
  
      .facard .text {
          border-radius: .8rem;
          -webkit-border-radius: .8rem;
          -moz-border-radius: .8rem;
          -ms-border-radius: .8rem;
          -o-border-radius: .8rem;
          height: auto;
             text-overflow: ellipsis;
  }
  }