.container-bg {
  position: relative;
  text-align: center;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    font-size: 65px;
    line-height: 55px;
    text-transform: uppercase;
    font-weight: 800;
    font-family: Raleway, sans-serif;
    color: #fff;
}
.images{
    -webkit-filter: blur(5px);
  filter: blur(5px);
  width: auto;

}

.centered-bg {
    position: absolute;
      color:#fff; 
      text-align: center;  
      background-color:rgba(0,0,0, 0.5);
      height: 400px;
      width: 100%;
      padding-top: 150px;

}
.centered-p {
      position: absolute;
      top: 50%;
      left: 50%;
      font-family: sans-serif;
      transform: translate(-50%, -50%);
      font-size: 15;
      font-weight: bolder;
      padding-left: 25%;
      text-align: left;
      margin-left: 18px;
      margin-top: -50px;
}
.h1{
  text-align: center;
}
.h1::after{
      background-image: linear-gradient(to right, #082a4a , #fff);
      clear: both;
      display: block;
      content: "";
      position: relative;
      height: 2px;
      width: 25%;
      margin: 10px 30% 0 0;
      border-radius: 2px;
      margin-left: 38%;
}


.h1-1::after{
      background-image: linear-gradient(to right, #082a4a , #fff);
      clear: both;
      display: block;
      content: "";
      position: relative;
      height: 2px;
      width: 22%;
      margin: 10px 30% 0 0;
      border-radius: 2px;
      margin-left: 41%;
}
/*for academics page*/






/*for contact us page */

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 250px;
  border-radius: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}
.flip-card {
  background-color: transparent;
  width: 250px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  font-family:'open sans' sans-serif;
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  font-family:'open sans' sans-serif;
  background-color: #fff;
  color: black;
  transform: rotateY(180deg);
}

.img-card{
    width: 250px;
    height: 300px;
}

/*end of contact us page*/


/*for research page*/

.research {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: sans-serif;
    transform: translate(-50%, -50%);
    font-size: 35px;
    padding: 20px;
    text-align:justify;
}
.research::after{
    background-image: linear-gradient(to right, #082a4a , #fff);
    clear: both;
    display: block;
    float: left;
    content: "";
    position: absolute;
    height: 2px;
    width: 70%;
    margin: 10px 30% 0 0;
    border-radius: 2px;
    padding: 0;
}
.research-bg {
      color:#fff; 
      text-align: left;  
      background-color:rgba(255,255,255, .9);
      width: auto;
      height: auto;
      
}

/*end research */

/* for campus-life */

.campus-bg {
      position: relative;
      text-align: center;
}
.campus {
      position: absolute;
      font-family: sans-serif;
      transform: translate(-50%, -50%);
      font-size: 35px;
      color: #ffffff;;
      font-weight: bolder;
      padding-top: 80px;
      margin-left: 220px;     
}
.campus-bg1 { 
      
    background: rgba(63, 43, 36, 0.3);
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.29);
    margin-top: 120px;
    width: 320px;
    height: 260px;
  }
/* If you like this, be sure to ❤️ it. */
.wrapper {
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #585858;
  font-family: 'open sans', sans-serif;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 2;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: 800px;
  max-width: 90%;
  background: #fff;
  padding: 1em 2em;
}

.modal__footer {
  text-align: right;
  
  color: #585858;
  
    color: #d02d2c;
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}

/* for administration */
.administration-bg {
      position: relative;
      text-align: center;
}
.administration {
      position: absolute;
      font-family: sans-serif;
      transform: translate(-50%, -50%);
      font-size: 35px;
      color: #ffffff;;
      font-weight: bolder;
      padding-top: 80px;
      margin-left: 640px;      
}
.administration-bg1 { 
      
    background: rgba(63, 43, 36, 0.3);
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.29);
    margin-top: 130px;
    width: 350px;
    height: 240px;
  }
/* for Scientific staff */
.staff-bg {
      position: relative;
      text-align: center;
}
.staff {
      position: absolute;
      font-family: sans-serif;
      transform: translate(-50%, -50%);
      font-size: 35px;
      color: #ffffff;;
      font-weight: bolder;
      padding-top: 80px;
      margin-left: 1080px;     
}
.staff-bg1 { 
      
    background: rgba(63, 43, 36, 0.3);
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.29);
    margin-top: 140px;
    width: 350px;
    height: 300px;
  }
/*for schools name clr*/
.als{
    color: #fff;
}
.als:hover {
  color: #fff;
}
/* for campus-life */
.our-campuses-bg {
      position: relative;
      text-align: center;
}
.our-campuses {
      position: absolute;
      font-family: sans-serif;
      transform: translate(-50%, -50%);
      font-size: 35px;
      font-weight: bolder;
      margin-top:-100px;
      margin-left: 200px;
      color:#082a4a ;     
}
/*.our-campuses-bg1 {      
    background: rgba(63, 43, 36, 0.3);
    border-radius: 5px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.29);
    margin-top: 105px;
    width: 350px;
    height: 200px;
  }*/

/* for our history */
.history-bg {
      position: relative;
      text-align: center;
}
.history {
      position: absolute;
      font-family: sans-serif;
      transform: translate(-50%, -50%);
      font-size: 35px;
      font-weight: bolder;
      padding-top: 150px;
      margin-left: 580px;
      color:#1e87f0 ;      
}



/* CSS for IARI Footer Section*/
.head{
      color: #ffc627;
      font-weight: 800;
    }
    .head::after{
      background-image: linear-gradient(to right, #ffc627 , #fff);
      clear: both;
      display: block;
      float: left;
      content: "";
      position: relative;
      height: 2px;
      width: 70%;
      margin: 10px 30% 0 0;
      border-radius: 2px;
      padding: 0;
      line-height:1;
    }
        .a-cls {
          color: #fff;
          line-height: 1;
          font-size: 1.1rem;
          font-weight: 400;
          text-decoration: none;
        }
        .a-cls:hover{
          color: #ffc627;
          line-height: 1;
          font-size: 1.1rem;
          font-weight: 400;
          text-decoration: none;
        }
        
        @media only screen and (max-width: 600px) {
            .centr{
                text-align:center;
            }
        }
/* CSS for IARI Footer Section*/
/* CSS for IARI Schools Section*/
        .column {
            margin: 15px 15px 0;
            padding: 0;

        }
        .column:last-child {
            padding-bottom: 60px;
              
        }
        .column::after {
            content: '';
            clear: both;
            display: block;

        }
        .column div {
            position: relative;
            float: left;
            width: 300px;
            height: 200px;
            margin: 0 0 0 25px;
            padding: 0;
        }
        .column div:first-child {
            margin-left: 0;
        }
        .bg-text {
        
        background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
        color: #fff;
        font-weight: 700;
        position: absolute;
        font-size: 36px;
        letter-spacing: 1.5;
        line-height: 1.1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
/*        width: 80%;*/
        padding: 5px;
        font-family: 'open sans 'sans-serif;
      }
        figure {
            width: 325px;
            height: 325px;
            margin: 0;
            padding: 0;
            background-color: #082680;
            overflow: hidden;
        }
        figure > img{
            width: 325px;
            height: 325px;
            margin: 0;
            padding: 0;
            background: #fff;
            overflow: hidden;
            opacity: 0.8;
        }
        figure:hover+.span {
            bottom: -36px;
            opacity: 1;
        }
        /* Slide */
        .hover05 figure img {
            margin-left: 30px;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover05 figure:hover img {
            margin-left: 0;
            opacity: 0.3;
        }
        .text1{
          text-align: left;
        }
        .text2{
          margin-top:140px;
        }
        .text3{
          margin-top:120px;
        }
/* CSS for IARI Schools Section*/
        .back {
            width: 600px;
            height: 255px;
            margin: 0;
            padding: 0;
            background-color: #082680;
            overflow: hidden;

        }
        .back > img{
            width: 600px;
            height: 255px;
            margin: 0;
            padding: 0;
            background: #fff;
            overflow: hidden;
            opacity: 0.2;
        }
        .back:hover+.span {
            bottom: -36px;
            opacity: 1;
        }
        /* Slide */
        .hover05 .back img {
            margin-left: 30px;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover05 .back:hover img {
            margin-left: 0;
            opacity: 0.3;

         }
        .text1{
          text-align: left;
        }
        .text2{
          margin-top:140px;
        }
        .text3{
          margin-top:120px;
        }
       
/* CSS for news  Section*/
        .column {
            margin: 15px 15px 0;
            padding: 0;

        }
        .column:last-child {
            padding-bottom: 60px;
              
        }
        .column::after {
            content: '';
            clear: both;
            display: block;

        }
        .column div {
            position: relative;
            float: left;
            width: 300px;
            height: 200px;
            margin: 0 0 0 25px;
            padding: 0;
        }
        .column div:first-child {
            margin-left: 0;
        }
       .bg-text {
        /*background-color: rgb(0,0,0); Fallback color */
        background-color: rgba(0,0,0,0.0); /* Black w/opacity/see-through */
        color: #fff;
        font-weight: 700;
        position: absolute;
        font-size: 36px;
        letter-spacing: 1.5;
        line-height: 1.1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
/*        width: 80%;*/
        padding: 5px;
        font-family: 'open sans 'sans-serif;
      }
        .pc {
            width: 380px;
            height: 350px;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: rgb(234, 255, 0, 0.22);
        }
        .pc > img{
            width: 380px;
            height: 350px;
            margin: 0;
            padding: 0;
            background: #fff;
            overflow: hidden;
            opacity: 0.3;
        }
        .pc:hover+.span {
            bottom: -36px;
            opacity: 1;
        }
        /* Slide */
        .hover05 .pc img {
            margin-left: 30px;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover05 .pc:hover img {
            margin-left: 0;
            opacity: 0.3;

        }
        .text1{
          text-align: left;
        }
        .text2{
          margin-top:140px;
        }
        .text3{
          margin-top:120px;
        }

        .pic {
            width: 550px;
            height: 360px;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: rgb(234, 255, 0, 0.22);
        }
        .pic > img{
            width: 550px;
            height: 360px;
            margin: 0;
            padding: 0;
            background: #fff;
            overflow: hidden;
            opacity: 0.3;
        }
        .pic:hover+.span {
            bottom: -36px;
            opacity: 1;
        }
        /* Slide */
        .hover05 .pic img {
            margin-left: 30px;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover05 .pic:hover img {
            margin-left: 0;
            opacity: 0.3;
        }

/*for academics*/
        .add {
            width: 600px;
            height: 255px;
            margin: 0;
            padding: 0;
            background-color: blue;
            overflow: hidden;
            background-color: rgb(0, 91, 234, 0.3);
        }
        .add > img{
            width: 500px;
            height: 255px;
            margin: 0;
            padding: 0;
            background: #fff;
            overflow: hidden;
            opacity: 0.8;
        }
        .add:hover+.span {
            bottom: -36px;
            opacity: 1;
        }
        /* Slide */
        .hover05 .add img {
            margin-left: 30px;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover05 .add:hover img {
            margin-left: 0;
            opacity: 0.3;

        }
        .text1{
          text-align: left;
        }
        .text2{
          margin-top:140px;
        }
        .text3{
          margin-top:120px;
        }
.sec{
    background-image: linear-gradient(45deg, #082a4a 0%, #0d71ce 100%); 
    padding-top: 49px;
    padding-right: 0px;
    padding-bottom: 4px;
    padding-left: 0px;
    margin-top: 50px;
    margin-right: 0px;
    margin-bottom: 50px;
    margin-left: 0px;
}

/*for vertical hr line*/
.vl {
  border-left: 4px solid #082a4a;
  height: 100px;
  margin-left: -3px;
  top: 0;
}
.centered-text {
  position: absolute;
  bottom: 0;
  left: 2%;
  transform: translate(-2%, -50%);
  color: white;
  font-size: 0.9vw;
  font-weight:500;
  background:rgb(18, 56, 92, 0.7);
  padding:5px 5px;
  
  
/*for naac navigation*/
}
.topnav {
  overflow: hidden;
  background-color: #082a4a;
  width: 90%;
  /*margin-left:100px;
  margin-right:100px;*/
}

.topnav a {
  float:left ;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 27px;
  text-decoration: none;
  font-size: 17px;
}

.an-active {
  background-color: #ffc627;
  color: white;
}

.topnav .icon {
  display: none;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #ffc627;
  color: #082a4a;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
/*Css for Dark Mode*/  
    .btn-toggler {
      background-color: #fff;
      color: #082a4a;
      border: 2px solid #ffc627;
      padding:2px 7px;
      font-size: 13pt;
      border-radius:5px;
    }

    .dark-mode .btn-toggler {
      background-color: #082a4a;
      color: #ffc627;
      border-color: #ffc627;
      padding:2px 7px;
      font-size: 13pt;
      border-radius:5px;
    }

    .dark-mode {
      background-color: #082a4a;
      color: #ffc627;
    }

    .dark-mode .title {
      color: #ffc627;
    }
    .dark-mode h3 {
      color: #ffc627 !important;
    }
    .dark-mode .lnk1 {
      color: #ffc627 !important;
    }

    .dark-mode a {
      color: #fff; /* Light blue for better contrast */
    }

    .dark-mode a:hover {
      color: #ffc627; /* Light blue for better contrast */
    }
/*Css for Dark Mode*/
/*CSS for Fonts Increase*/
    .zoom-in{
      background-color: #ffc627;
      color: #082a4a;
      border: 2px solid #ffc627;
      padding:2px 0px;
      font-size: 13pt;
      border-radius:5px; 
    }
    .zoom-out{
      background-color: #ffc627;
      color: #082a4a;
      border: 2px solid #ffc627;
      padding:2px 0px;
      font-size: 13pt;
      border-radius:5px; 
    }
/*CSS for Fonts Increase*/