* {
 
  margin-top: 0px;
  margin-left: 0px;
  box-sizing: border-box;
  margin-right: 0px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


#gallary123,
#gallary123:after,
#gallary123:before {
  padding: 0;
  margin: 0;
  font-family: Arial;
}


#gallary123 {

  margin-left: 2vw;

  list-style: none;

  height: 30vw;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 1px 1px 3px 1px;

}


#gallary123 li {
  position: relative;
  width: 30vw;
  height: 30vw;
  float: left;
  border-left: 1px solid white;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all 0.7s;
  box-shadow: -2px 0 10px 2px;
}

#gallary123 li:first-child {
  border: none;
}

#gallary123 span {
  display: block;
  position: absolute;
  bottom: 0;
  width: 50%;
  font-size: 1.8vw;
  padding: 1vw;
  color: white;
  white-space: nowrap;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C */


}

#gallary123 img {
  width: 50vw;
  height: 30vw;
  cursor: pointer;
}

#gallary123:hover li {
  width: 4vw;
}


#gallary123 li:hover {
  width: 49vw;
}

.images {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 1;
  visibility: visible;
  transition: opacity 2s ease, visibility 2s ease;

}

.col-4:hover .images {
  opacity: 0;
  visibility: hidden;
}


.know-more {
  background-color: #1eb2a6;
  border: none;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: .7vw;
  border-radius: 0.2vw;
  position: absolute;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 0.9vw;
}

.know-more:hover {
  background-color: grey;
}

/* ...........................admin section  starts here .............................. */

#floatingWindow {
  left: 50%;
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
  z-index: 9999;
}

#closeButton {

  position: absolute;
  margin-top: 2vw;
  margin-top: 1vw;
  right: 10.4vw;
  cursor: pointer;

}

#container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-around;
}

#floatingContent2 {
  width: 88%;
  background-color: #f0f0f0;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-around;
  border-radius: 0.6vw;
  margin-left: 2vw;
}

#floatingWindow2 {
  position: absolute;

}

/* ...................................hoverable button that apperas on hovering over nav list item starts here................................. */
.admin {
  list-style: none;
  background-color: lightgrey;
  font-size: 2vw;
  padding: 1vw;
  padding-left: 1vw;
  border: 0.5vw solid lightgrey;
  /* Grey border */
  text-align: center;

}

.hoverable-button {
  padding: 8px 12px;
  background-color: #1eb2a6;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  position: relative;
  font-size: 1.2vw;

}

.hoverable-button:hover {
  background-color: #0056b3;
}

.info-box {
  position: absolute;
  z-index: 10000;
  background-color: #1eb2a6;
  color: #fff;
  padding: 10px;
  border-radius: .2vw;
  width: 16vw;
  left: 15vw;
  font-size: 1.3vw;
  /* Blue border on the left side */
  display: none;

}

#infoBox2 {
  left: 34vw;
}

.info-box a {
  color: #fff;
  text-decoration: none;
  display: block;
  margin-bottom: 5px;
}

.info-box a:hover {
  text-decoration: underline;
}

.container1 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  /* border: .3vw solid white;  */
  transition: 0.5s;
}

#infoBox1,
#infoBox2 {
  display: none;
}

#main {
  top: 0;
  width: 100%;
  height: 80%;
  background-size: cover;
  position: absolute;
}

nav li {
  display: inline-flex;
}
ul li a {
  text-decoration: none; /* Remove underline */
}

/* body{
    width: 100%;
  } */
/* ...................................hoverable button that apperas on hovering over nav list item starts here................................. */



/* ....................................admin section ends here.................................. */

/* ...................................animation css............................ */



/* ...................................animation css ends here..................................... */

#main {
  width: 100%;
  height: 100vh;
  background-size: cover;
}

/* Style for the dropdown button */

.chart-container {
  width: 50%;
  max-width: 600px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 8px;
  margin-left: 2vw;
  margin-right: 2vw;

  /* position: absolute; */

}

#barChart {
  display: block;
  box-sizing: border-box;
  height: 400px;
  width: 1000px;
}

.chartjs-render-monitor {
  animation: chartjs-render-animation 0.2s;
}

#myChart {
  width: 50%;
  height: 45%;
  display: block;
}


canvas #myChart {
  width: 20vw !important;
  height: 40vw !important;
}








select:focus {
  background-color: blue;
  color: white;
  padding: 2vw;
  cursor: pointer;
}

.container {
  height: 2.3vw;
  font-size: 1.9vw;
  background-color: transparent;
  color: white;
  width: 50%;
  margin-top: -5vw;
  margin-left: 15vw;
  display: block;
  overflow: hidden;
  /* text-shadow:.3vw .1vw .1vw black; */
  font-weight: 600;
  display: block;
  color: black;
}

#map {
  font-size: 1.4vw;
  display: inline-block;
  margin-left: 60vw;
  margin-top: -3vw;
  margin-bottom: 3vw;
}

.line {
  animation: changeLine 7s infinite;
  font-family: 'Poppins', sans-serif;
}

@keyframes changeLine {
  0% {
    transform: translateY(0);
  }

  33.33% {
    transform: translateY(-180%);
  }

  66.66% {
    transform: translateY(-471%);
  }

  100% {
    transform: translateY(-13%);

  }
}

.container1 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: .3vw solid white;
  transition: 0.5s;
}

.wrapper {
  width: 100%;
  display: flex;
  animation: slide 20s steps(1) infinite;
  transform-origin: 50% 50% 0px;
  z-index: 5;
  transform: scale(1.15);

}

.image1 {
  opacity: .7;
  width: 100%;
  height: 100%;
  /* padding-left:1.3vw; */

}

.image2 {
  opacity: .7;
  width: 100%;
  height: 100%;

}


@keyframes slide {
  0% {
    transform: translateX(0);
    transform: scale(1);
  }

  25% {
    transform: translateX(0);
    transform: scale(1.7);
    color: red;

  }

  25% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(-100%);
  }

  75% {
    transform: translateX(-198%);
  }

  75% {
    transform: translateX(-198%);
  }

  100% {
    transform: translateX(-296%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.fa-solid {
  color: white;
  margin-left: 2vw;
  margin-top: .3vw;
}

.top {
  height: 8vw;
  background-image: linear-gradient(180deg, black, white);
}

.top img {
  width: 8vw;
  height: 8vw;
  margin-left: 4.5vw;
  position: relative;
}

#pass {
  color: white;
  position: relative;
  margin-top: -3vw;
  margin-bottom: 2vw;
  font-weight: 100;
  font-size: 1vw;
  margin-left: 10vw;

}

#pass2 {
  margin-left: 14.5vw;
  color: white;
  font-weight: 1000;
  position: relative;
  font-size: 1vw;
}

#pass1 {
  color: red;
  position: absolute;
  font-size: 4vw;
  margin-top: -2.7vw;
  margin-left: 0.4vw;
}



/* nav {
      background-color: transparent; 
      overflow: hidden; 
      position: relative;
    }
     */

nav li {
  display: inline-block;
}

nav li a {
  display: block;
  color: black;
  text-align: center;
  font-size: 1.4vw;
  padding: .9vw 2vw;
  text-decoration: none;
  font-weight: 900;
  font-family: 'Gloock', serif;
  font-family: 'Roboto Slab', serif;


}

nav li a:hover {
  background-color: green;
  border-radius: .5vw;
  color: white;

}

/* autotyping section  */
.autotyping {
  margin-left: 18vw;
  justify-content: center;
  margin-top: 13%;
  text-align: center;
  width: 78%;

}

.dynamic-txts li span {
  line-height: 90px;
 
  font-family: cursive;
  text-shadow: .4vw .1vw .1vw white;
  font-weight: 900;
  font-size: 4vw;
  margin-left: 9vw;
  color: black;
  padding-left: 6vw;

}


.wrapper1 .dynamic-txts {

  height: 90px;
  line-height: 20px;
  overflow: hidden;
  margin-left: -15vw;
  width: 82vw;
  text-align: left;
}

.dynamic-txts li {
  margin-left: -2vw;
  list-style: none;
  color: white;
  position: relative;
  top: 0;
  margin-left: -17vw;
  animation: slide1 20s steps(4) infinite;
}

@keyframes slide1 {
  100% {
    top: -360px;
    /* color:green;  */

  }
}

/* ...................................get call section starts from here ...................... */
.admission-container {
  background-color: #fff;
  /* border-radius: 10px; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1.6vw;
  text-align: center;
  position: absolute;
  max-width: 400px;
  width: 23vw;
  top: 19vw;
  right: 3vw;

}

.education-icon {
  width: 3.9vw;
  height: 3.7vw;
  background-color: #3498db;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vw;
  font-size: 3vw;
}

#floatingWindow .know-more {
  margin-top: -1rem;
}

#floatingWindow {
  margin-top: -1rem;
}


.call-to-action {
  font-size: 1.7vw;
  color: #333;
  margin-bottom: 1vw;
}

.get-call-button {
  background-color: #1eb2a6;
  color: #fff;
  padding: 1vw 2vw;
  border: none;
  border-radius: .3vw;
  cursor: pointer;
  font-size: 1.7vw;
  transition: background-color 0.3s ease;
}

.get-call-button:hover {
  background-color: #218c53;
}

.mobile-form {
  display: none;

}

.mobile-form label {
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}

.mobile-form input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.submit-button {
  background-color: #27ae60;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: #218c53;
}


/* ...............................get call ends here .................................... */
/*.................................. director section starts here ....................................  */
.director {
  background-color: rgba(128, 128, 128, 0.126);
  display: flex;
}

.directorimage {
  width: 25vw;
  height: 25vw;
  margin: 2vw;
}

.aboutdirector {
  width: 50vw;
  height: 10vw;
  margin-left: 11vw;
  margin-top: 3vw;
  font-size: 2vw;
}

.directorimage img {
  width: 25vw;
  height: 25vw;
  border-radius: 1.2vw;
  margin-left: 3vw;
}

/* .............................director section ends here .......................... */


.row {
  padding: 9vw;
  background-color: #d3d3d333;
  display: flex;
  margin-top: 3vw;
  margin-top: .9rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 44vw;
  width: 98vw;
  padding-top: 5vw;
}


.col-4 {
  padding: 0;
  height: 16vw;
  margin-top: 25px;
  overflow: hidden;
  position: relative;
  flex-basis: 30%;
  text-align: center;
  justify-content: space-between;
  border-radius: 0.2vw;
  box-sizing: border-box;
  bottom: 20px;
}

.feature {
  display: flex;
  margin: auto;
  width: 100%;
  justify-content: center;
  align-items: centre;
}

.eventsname {
  color:#15645d;
  font-size: 1.5vw;
}

.para {
  color: white;
  position: absolute;
  margin-top: -20%;
  opacity: 0;
  transition: 1s;
}

.para p {
  font-size: 14px;
  background-origin: 8px;
  font-size: 1.7vw;
}

#redirect {
  text-decoration: none;
  color: white;
}


hr {
  background-color: white;
  height: 2px;
  margin: 2px auto;
  width: 45%;

}

.col-4:hover .para {
  margin-top: 6%;
  opacity: 1;
}


.background {
  width: 47vw;
  height: 47vw;
  position: absolute;
  /* top: 10px; */
  margin: 0px;
  background: linear-gradient(#000000,rgba(205, 109, 7, 0.9));
  opacity: 0;
  transition: 1s;
  cursor: pointer;
}

.col-4:hover .background {
  opacity: 1;
  cursor: pointer;

}











/*...................................responsiveness.................................*/
@media (max-width:720px) {

  .container1 {
    height: 29vh;
  }

  .row {
    padding-bottom: 4vw;
    height: 113vw;
    margin: auto;
    display: flex;
    /* display: block; */
    align-content: space-between;
    flex-direction: row;
    flex-basis: 50%;
    justify-content: flex-end;
    align-items: center;
  }

  .col-4 {
    flex-basis: 49%;
    margin-bottom: -4%;
    height: 29vw;
    padding-right: 3vw;
    margin: 4.vw;
  }

  .para {
    color: white;
    position: absolute;
    margin-top: -20%;
    opacity: 0;
    transition: 1s;
  }

  .para h1 {
    font-size: 5vw;
    margin-top: 3vw;
  }

  .para p {
    font-size: 14px;
    background-origin: 8px;
    font-size: 2.7vw;
  }

  .background {
    width: 37vw;
    height: 30vw;
    border-radius: 2.3vw;
  }

  .know-more {

    font-size: 1.2vw;
    width: 7vw;
    border-radius: 0.2vw;
    padding: 0.5vw;
  }


  #main {
    height: 32vh;
  }

  .col-2 img {
    margin-left: 4rem;
  }

  .features-desc {
    flex-basis: 101%;
    margin-bottom: -30px;
    margin-top: 8vw;
  }

  .social-media {
    margin-top: 20px;
    width: 300px;
    margin-left: 3rem;
  }

  .dynamic-txts li span {

    margin-left: 9vw;
    color: black;
    padding-left: 2vw;

  }

  .chart-container {
    width: 90%;
    max-width: 600px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 8px;
    margin-left: 1vw;
    margin-top: 8vh;
    margin-right: 2vw;
    margin: auto;
    margin-top: 5vw;
  }

  .container5 {
    display: none;
  }

}

.info-container123 {
  max-width: 600px;
  margin: 50px auto;
  box-shadow: 23px 15px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 8px;
  background-color: #f5f5f5f0;;
  width: 37vw;

  right: 6vw;
  margin-top: 1vw;
 
}

.info-container123 img {
  width: 30%;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 1vw;
  border-radius: 50%;
}

#myChart {
  width: 10vw;
}

.information {
  padding: 20px;
}

.information h2 {
  color: #333;
}

.information p {
  color: #666;
}
#director_detail{
  font-weight: 900;
}

.charta {
  display: flex;
  background-color:#d3d3d336;
  background-image: url("image/Screenshot\ \(1244\).png");
  background-size: cover;
  background-repeat: no-repeat;

}

@media (max-width:900px) {
  .info-container123 {
    display: none;
  }
}

@media (max-width:720px) {
  .reviews {
    flex-direction: column;
  }

  .footer-col-2 {
    flex-basis: 100%;
  }

  .footer-box {
    height: 95vh;
    width: 96%;
  }

  .features {
    flex-direction: column;

  }

  .feature-image img {
    margin-left: -8rem;
    flex-basis: 100%;
    width: 180%;
    border-radius: 10px;
  }

  .copyright {
    margin-top: 30vh;
    flex-direction: right;
    font-size: .5rem;
  }

}



/*.................................responsiveness ends here.........................*/




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

.footer-box {
  width: 100%;
  border-bottom-left-radius: 16rem;
  background: linear-gradient(white, black);
  margin: auto;
  text-align: center;
  align-items: center;


}

.footerback {
  background-color: rgb(11, 12, 11);

}

.footer {
  padding-bottom: 2rem;
  display: flex;
  width: 90%;

  height: 23rem;
  margin: auto;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  padding-top: 20px;
}

.footer-col-1 {
  flex-basis: 24%;
  padding-top: 3rem;
  color: white;
}

.footer-col-1 h2 {
  padding-bottom: 2rem;
}

.footer-col-2 {

  flex-basis: 46%;
  height: 7rem;
  color: white;
}

.footer-col-3 {
  padding-top: 1rem;
  flex-basis: 25%;
  color: white;
}

.footer-col-3 img {
  width: 8vw;
  height: 3vw;

}

.copyright {
  margin-top: .8vw;
  font-size: 1.7vw;
}

.social-media {
  margin-top: 20px;

}

.social-media i {
  padding: .2rem .2rem;
  font-size: 2rem;

}

.social-media i:hover {
  color: white;
}


/* .....................................Leave Contact Detail .........................*/
.query-box {
  width: 100%;
  /* background: linear-gradient(rgb(168, 66, 66) ,white); */

}

.query {
  width: 80%;
  margin: auto;
  font: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */


}

.query input {
  display: block;

}

.button {
  height: 4rem;
}

.button button {
  width: 2px;
  display: flex;
  margin: auto;
  border-radius: 2rem;
  background: linear-gradient(skyblue, yellow);
  color: black;
  font-size: 20px;
  font-weight: 600;
  margin-top: 1rem;
  padding-top: .7rem;
  padding-bottom: 1%;
  padding-right: 9rem;
  padding-left: 5rem;
  cursor: pointer;
}

.query input {

  width: 17rem;
  height: 2.3rem;
}

.query input::placeholder {

  color: red;
  padding-left: 23%;
  font-weight: 400;
  font-size: 1.1rem;


}

/* ...........................................notice section starts here ........................................... */

.image123 {
  animation: blink 1s infinite;
  margin-top: -3vw;
  margin-bottom: 1vw;
  margin-left: 10vw;
  width: 3vw;
  height: 3vw;
  border-radius: 4vw;
}

@keyframes blink {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.notice-para {
  padding-top: 1vw;
  width: 30vw;
  color: black;
  margin-bottom: -2vw;
  font-size: 1.4vw;
  padding-left: 1vw;
  background-color: #1eb2a647;
}

.noticehead {
  display: flex;
  margin-top: -3.2vw;
  background-image: url("images/students-3518726__480");
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: -4vw;
}


.upcomingevents {
  width: 25vw;
  height: 52vw;
  border-left: dotted;
  padding: 1.3vw;
  margin: 4vw;
}

@media (max-width:720px) {
  .upcomingevents {
    font-size: 1vw;
    height: 53vw;
    margin-top: 3vw;
    margin-left: 0;
  }

  .events {
    margin-left: -10vw;
  }
}


.notice {
  width: 65vw;
  height: 52vw;
  /* margin: auto; */
  margin-top: auto;
  margin-top: auto;
  background-color: rgba(255, 0, 0, 0.253);
  margin-top: 4vw;
  display: flex;
  margin-left: 2vw;

}


.ug {
  width: 51%;
  height: 100%;
  background-color: #1eb2a68f;

}

.ugheading,
.pgheading {
  margin-left: 12vw;
  font-size: 3vw;
  font-weight: 900;
  margin-top: 1vw;
}

.ugnotice,
.pgnotice {
  margin-top: 0vw;
  font-size: 2vw;
  /* line-height: 3vw; */
  overflow: hidden;
  animation: slide2 25s steps(5) infinite;
  margin-right: 0vw;


}

.ugnotice:hover,
.pgnotice:hover {
  animation-play-state: paused;
  cursor: pointer;
}

.ugheight,
.pgheight {
  margin-top: 1.4vw;
  overflow: hidden;
  height: 41vw;
  width: 35.5vw;
  line-height: 2.5vw;
  background-color:whitesmoke;
  margin-right: 28vw;
  padding-right: 3vw;
  border-left: 1px solid #3a9c94e8;



}

.pg {
  background-image: url(image/abstract-1264071__480.jpg);
  width: 100%;
}

@keyframes slide2 {
  0% {
    margin-top: 40vw;
  }

  15% {
    margin-top: 25vw;
  }

  30% {
    margin-top: 10vw;
  }

  45% {
    margin-top: -5vw;
  }

  60% {
    margin-top: -20vw;
  }

  75% {
    margin-top: -35vw;
  }

  90% {
    margin-top: -50vw;
  }

  100% {
    margin-top: -65vw;
  }
}

/* ............................notice section resposivness................................... */
@media(max-width:720px) {
  .notice {
    height: 52vw;
    width: 85%;
  }

  .ugheading,
  .pgheading {
    margin-left: 5vh;
  }

  .ugheight,
  .pgheight {
    margin-left: 1vw;
    width: 39.7vw;
    height: 40vw;
    border-block-end-style: groove;
    border-end-start-radius: 5vw;
    border-block-start-style: outset;
  }

  .pg {
    width: 68%;
  }
}

/* .........................................notice section ends here ................................. */
/* .........................................counter animation section starts ............................. */
.counter {
  text-align: center;
  margin-top: 2vw;
  width: 21vw;

}

h1 #count {
  font-size: 5vw;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

#count1,
#count2,
#count3,
#count4 {
  font-size: 5vw;
  padding-top: 3.5vw;
  color: black;
  /* border: 1px solid; */
}

.counter p {
  margin: 2vw;
  width: 19vw;

  position: absolute;
  margin-top: 13vw;
  margin-left: 3vw;
  height: 4vw;
  border-bottom-right-radius: 3.5vw;
  border-top-left-radius: 3vw;
  background-color: white;
  font-size: 1.9vw;
  color: black;
  padding-top: 1vw;
  border: 1px solid #1eb2a6;

}

.counterheading {
  display: flex;
  justify-content: center;
  padding: 2vw;
}

.circle {
  width: 11vw;
  height: 11vw;
  background-color: #33a39a7d;
  display: block;
  margin-left: 7vw;
  position: absolute;
  border-top-left-radius: 8vw;
}

.counterheading {
  position: relative;
  height: 24vw;
  margin-top: 2vw;
  right: 0vw;
  width: 98.5vw;
}

.counterheading::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .7;
  /* background-image: url('image/students-3518726__480.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover; */
  background-color: #d3d3d347;
}

.demo-content {
  position: relative;
}

/* ..................................................counter animation section ends here.............. */
/* ...................................................placement section starts here ................................... */

.container3 {
  /* background-color: rgba(196, 22, 184, 0.151); */
  width: 89vw;
  overflow: hidden;
  justify-content: center;
  margin: auto;
  height: 29vw;
  margin-top: 2vw;
}

.subcontainer {
  display: flex;
  width: 400%;
  animation: slide4 10s infinite;
  transition: 2s;
  flex-wrap: wrap;
}

@keyframes slide4 {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(-25%);
  }

  50% {
    transform: translateX(-25%);
  }

  55% {
    transform: translateX(-50%);
  }

  75% {
    transform: translateX(-50%);
  }

  80% {
    transform: translateX(-75%);
  }

  100% {
    transform: translateX(-75%);
  }
}

.subcontainer:hover {
  animation-play-state: paused;
  cursor: pointer;
}

.under {
  width: 85vw;
  /* height: 25vw; */
  background-color: #d3d3d336;
  /* border-radius: 2vw; */
  margin: 2vw;
  display: flex;
  padding: 2vw;
}

.under div {
  font-size: 2vw;
  justify-content: center;
  margin: 1vw;
}

.image {
  width: 18vw;
  height: 23vw;
  background-color: #1eb2a659;
  margin: 2vw;

}

.image img {
  width: 100%;
  height: 84%;
  margin-top: 2vw;
}

#description {
  width: 44vw;
  height: 17vw;
  margin-left: 7vw;
  /* padding-left: 2vw;
        padding: 1vw; */
}

#midheading {
  display: block;
  margin-left: 40%;
  font-size: 3.4vw;
  margin-top: 2.1vw;
  color: #1eb2a6;
}

/* .........................................................placement section ends here............................................... */
/* ..........................................................our recruiter section ..................................................*/

.container5 {
  width: 92vw;
  margin-top: -4vw;
  overflow: hidden;
  height: 16vw;
  margin-top: 4vh;
  /* padding-top: 13vw; */
}

.subcontainer2 {

  display: flex;
  width: 95vw;
  animation: slide5 20s infinite;
  transition: 10s;
}

@keyframes slide5 {
  0% {
    transform: translateX(-0%);
  }

  100% {
    transform: translateX(-100%);
  }

}

.subcontainer2 img {
  width: 10vw;
  height: 10vw;
  margin: 4vw;
  border-radius: 50%;
}

/* .....................................................gallary section starts from here........................................... */

/* ....................................footer section........................... */

.footersection {
  flex-basis: 30.3%;
  padding-left: 2vw;
  margin-bottom: 5vw;

  margin-left: 2vw;
  width: 27%;
  margin-top: 4vw;
}

.footersection p,
.footersection li {
  font-size: 2vw;
  list-style: none;
  text-align: -moz-center;

}

.footersection h1 {
  font-size: 3vw;
  margin-left: 5vh;
  text-align: -moz-center;
  margin-top: 6vw;
}


/* ...............................animation ............................. */