@font-face {
  font-family: navbarFont;
  src: url(../fonts/LoveYaLikeASister-Regular.ttf);
}
@font-face {
  font-family: headingFont;
  src: url(../fonts/YeonSung-Regular.ttf);
}
@font-face {
  font-family: contentFont;
  src: url(../fonts/Dosis-Regular.ttf);
}
.navbar {
  background-color: #71a1e1;
  font-family: navbarFont;
}

.transition-effect {
  background: linear-gradient(45deg, #007bff, #0056b3);
  border: none;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease-in-out;
}

.transition-effect:hover {
  background: linear-gradient(45deg, #0056b3, #007bff);
  transform: translateY(-3px);
  box-shadow: 0px 8px 15px rgba(0, 123, 255, 0.3);
}

#navbarItems ul li a {
  color: azure;
}

#navbarItems ul li a:hover {
  color: rgba(41, 6, 33, 0.491);
  font-size: 24px;
}

#navbarItems ul li a.active {
  color: rgba(41, 6, 33, 0.491);
  font-size: 24px;
}

.banner {
  background-color: #c9ebe2bd;
  margin-top: 90px;
}

.col-md-6.left_banner {
  border-bottom-right-radius: 10cm;
  background-color: #e4edea;
  height: 29vw;
}

.col-md-6.left_banner p {
  font-family: navbarFont;
  margin-top: 1px;
  font-size: 30px;
  color: rgb(62, 145, 247);
  margin-left: 2px;
}

.col-md-6.right_banner {
  height: 29vw;
}

.col-md-6.right_banner img {
  margin-left: 10%;
}

.col-md-6.right_banner img.admission_image {
  margin-top: 10px;
  height: 90%;
}

.container .row h1{
  font-family: headingFont;
  color: #274ad7;
  margin-top: 3px;
  text-align: center;
}
.container .programs div{
  height: 430px;
  border: 2px solid rgb(50, 24, 243);
  border-radius: 10px;
}

.admission_programs{
  font-family: contentFont;
  font-size: 20px;
}
.safety.admission_new{
  font-family: contentFont;
  font-size: 20px;
}
.enqueryForm{
  background-color: #274ad7;
  border-radius: 10px;
  color: white;
}
.cocaricular_main div p{
  font-family: contentFont;
  font-size: 20px;
}
.cocaricular-sport p{
  font-family: contentFont;
  font-size: 20px;
}
.cocaricular-sport .container .row div img{
  border-radius: 50%;
}

.container .programs div:hover{
  background-color: #274ad7;
  animation: bounce;
  animation-duration: 1s;
}

.container .programs div p{
  text-align: justify;
  font-family: contentFont;
  font-size: large;
}

.container .programs div h4{
  color: rgb(240, 45, 45);
  text-align: center;
}

.container .programs div h5{
  text-align: center;
  color: #274ad7;
}

.container .programs div:hover h5{
  color: #ffea00;
}

.container .programs div:hover p{
  color: #e1efe4bd;
}

.container-fluid .row h1{
  font-family: headingFont;
  color: #274ad7;
  margin-top: 10px;
  text-align: center;
}

.container-fluid .row.cocaricular{
  height: 100%;
  background-color: rgb(225, 220, 209);
}

.container-fluid .row h5{
  font-family: headingFont;
  color: #444be0;
  margin-top: 1px;
  text-align: center;
}
.journey h5{
  font-family: headingFont;
  color: #444be0;
  margin-top: 1px;
  text-align: center;
}
.journey p{
  text-align: justify;
  text-decoration: double;
  font-family: contentFont;
  font-size: 20px;
}
.principal_desk p{
  text-align: justify;
  text-decoration: double;
  font-family: contentFont;
  font-size: 20px;
}
.principal_desk p img{
  float: right;
  margin-left: 10px;
}

.members div h3{
  text-align: center;
  color: red;
  font-weight: 700;
  font-family: contentFont;
}

.members div img{
  border-radius: 10px;
}
.cocaricular .row .event{
  /* background-color: rgb(255, 255, 255); */
  margin: 4%;
}

.cocaricular .row .event img{
  border: 3px dashed rgb(144, 33, 235);
  box-shadow: 12px 5px 2px 1px rgba(0, 0, 255, .2);
  width: 190px;
  height: 190px;
  border-radius: 150%;
  padding: 1%;
}
.cocaricular .row .event p{
  font-family: contentFont;
  color: #ff2600;
  font-size: 25px;
  text-overflow: clip;
  text-align: center;
}

.container-fluid .row.safety .col-md-3 img{
  border: 2px solid black;
  width: 190px;
  height: 190px;
  border-radius: 40%;
}
.container-fluid .row.safety .col-md-3 img{
  width: 100%;
}
.panel1_col2{
  margin-left: 10%;
}
.panel1_col3{
  margin-left: 10%;
}
.container-fluid .row.safety.panel2 .col-md-3{
  margin-top: 5px;
}

.container-fluid .row.safety.panel2 .col-md-3.panel2_col1{
  margin-left: 20%;
}

.container-fluid .row.safety.panel2 .col-md-3.panel2_col2{
  margin-left: 5%;
}

.container-fluid .row.safety .col-md-3 p{
  font-family: contentFont;
  font-size: larger;
  font-weight: bold;
  text-align: center;
}

.contact .container .row div div h4{
  font-family: headingFont;
  font-weight: bold;
}
.contact .container .row div div p{
  font-family: contentFont;
  font-size: 18px;
}

.container-fluid.testimonial{
 background-color: azure;
}
.testimonial.faq{
  font-family: contentFont;
}
.accordion .accordion-item{
  margin: 10px;
}

.container-fluid.testimonial h1{
  font-family: headingFont;
  color: #274ad7;
  margin-top: 3px;
  text-align: center;
}

.testimonial .container .item{
  height: 100%;
  transform:
    perspective(100em)
    rotateX(18deg);
  box-shadow:
    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color:
    rgb(213, 220, 226)
    rgb(213, 220, 226)
    rgb(184, 194, 204);
}
.staff .containe{
  font-family: contentFont;
}
.staff .containe h4{
  color: #ff0051;
  font-weight: bold;
}
.testimonial .container .item .row .col-md-3 img{
  border-radius: 30%;
}
.testimonial .container .item .row .col-md-9 h4{
  font-family: contentFont;
  text-align: left;
  color: #414db8;
}
.testimonial .container .item .row .col-md-9 h5{
  font-family: contentFont;
  text-align: left;
  color: #535ba4;
}
.testimonial .container .item .row .col-md-9 p{
  font-family: contentFont;
  text-align: left;
  color: #535ba4;
}
.testimonial .container .item{
  font-family: contentFont;
  padding-left: 5%;
}

.footer{
  background-color: #414db8;
  color: white;
  font-family: contentFont;
}

.importantLinks ul{
  list-style: none;
}
.importantLinks li a{
  position: relative;
  display: inline-block;
  color: inherit;
  transition: all 300ms ease;
}

.importantLinks a{
  cursor: pointer;
  text-decoration: none;
}
.importantLinks a:hover{
  color: #ff2600;
}
.footer hr{
  width: 70%;
  border: solid;
  color: white;
}

#spinner-div {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 2;
}

.foot_dev .dev{
  text-align: right;
}

.foot_dev .dev{
  margin-bottom: 3px;
}
/*screen wise stylling-->*/

@media only screen and (max-width: 600px) {
  .navbar {
    font-size: 15px;
  }
  .banner{
    height: 350px;
  }
  .col-md-6.left_banner{
    height: 200px;
  }
  .col-md-6.left_banner p{
    font-size: 20px;
    margin-top: 30px;
  }
  .col-md-6.right_banner img {
    height: 40vw;
    margin-left: 30%;
  }
  .container .programs div{
    height: 500px;
  }
  .cocaricular .row .event img{
    margin-left : 25%;
  }
 .panel1_col2{
    margin-left: 0%;
  }
  .panel1_col3{
    margin-left: 0%;
  }
  .container-fluid .row.safety.panel2 .col-md-3.panel2_col1{
    margin-left: 0%;
  }
  
  .container-fluid .row.safety.panel2 .col-md-3.panel2_col2{
    margin-left: 0%;
  }

  .members div img{
    margin-left: 25%;
    margin-right: auto;
    width: 50%;
  }
  .foot_dev{
    text-align: center;
  }
  .foot_dev .dev{
    margin-top: 3px;
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .navbar {
    font-size: 18px;
  }

  .col-md-6.left_banner p{
    font-size: 20px;
    margin-top: 30px;
  }

  .col-md-6.right_banner img {
    height: 28vw;
    margin-left: 30%;
  }

  .container .programs div{
    height: 500px;
  }


}

@media only screen and (max-width: 918px) {
  .navbar {
    font-size: 20px;
  }

  .col-md-6.right_banner img {
    height: 28vw;
  }

  .col-md-6.left_banner p{
    font-size: 20px;
    margin-top: 20px;
  }
  .admission_programs{
    font-family: contentFont;
    font-size: 16px;
  }
}

@media only screen and (max-width: 1199px) {
  .navbar {
    font-size: 22px;
  }

  .col-md-6.left_banner p{
    font-size: 20px;
    margin-top: 20px;
  }
  .col-md-6.right_banner img {
    height: 30vw;
  }
  .col-md-6.left_banner p.inst-name{
    margin-top: 50px;
  }
}

@media only screen and (min-width: 1200px) {
  .navbar {
    font-size: 22px;
  }

  .col-md-6.right_banner img {
    height: 31vw;
  }

  .col-md-6.left_banner p.inst-name{
    margin-top: 50px;
  }

}