@media screen and (max-width: 1024px) {

  /* toggle start  */
  .side-bar .close-btn {
    font-size: 20px;
    padding: 5px;
    border: 1px solid gray;
    width: 30px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    font-weight: bold
  }

  .side-bar {
    background: white;
    backdrop-filter: blur(15px);
    width: 300px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -350px;
    overflow-y: auto;
    transition: 0.6s ease;
    transition-property: right;
    z-index: 99999;
  }

  .toggle-btn {
    display: block;
    cursor: pointer;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .toggle-btn .logo {
    margin-left: 50px;
  }

  .toggel-btn-pad {
    border: 1px solid gray;
    padding: 3px 6px;
    text-align: center;
    margin-right: 40px;
  }

  .side-bar {
    display: block;
  }

  header {
    display: none;
  }

  .vision {
    padding: 40px 30px;
  }

  .vision .col-2 h3 {
    font-size: 30px;
    margin: 10px 0;
  }

  .program {
    padding: 40px 25px;
    margin: 0;
  }

  .program .col-4 {
    width: 50%;
    margin: 0px;
    padding: 7px;
  }

  .Admissions {
    background-image: none;
    background-color: #FB5178;
    padding: 20px 25px;
    width: 100%;
  }

  .Admissions .right h2 {
    font-size: 40px;
  }

  .Admissions .right p {
    font-size: 15px;
  }

  .Innovative {
    padding: 100px 20px;
  }

  /* .Innovative .col-2{
    width: 100%;
    margin-right: 0px;
  } */
  .Innovative .col-2 h5 {
    font-size: 22px;
  }

  .Innovative .col-2 p {
    font-size: 15px;
  }

  .Innovative .col-2 .img-first {
    height: 100px;
    left: 38%;
  }

  .Innovative .col-2 .img-eight {
    left: 8%;
    height: 100px;
  }

  .Innovative .col-2 .img-sec {
    height: 100px;
    right: 0;
  }

  .Innovative .col-2 .img-sev {
    height: 100px;
    bottom: 48%;
    left: 2%;
  }

  .Innovative .col-2 .img-thired {
    height: 100px;
    bottom: 48%;
    right: -8%;
  }

  .Innovative .col-2 .img-six {
    bottom: 24%;
    height: 100px;
    left: 10%;
  }

  .Innovative .col-2 .img-four {
    bottom: 24%;
    height: 100px;
    right: -6%;
  }

  .Innovative .col-2 .img-five {
    height: 100px;
    left: 44%;
    bottom: 7%;
  }

  .Innovative .col-2 .box {
    top: 35%;
    left: 5%;
    font-size: 20px;
  }

  .Innovative .col-2 .box-eight .hidden {
    opacity: 0;
    width: 190px;
    position: absolute;
    left: 30%;
    top: 29%;
  }

  .Innovative .col-2 .box-sev .hidden {
    opacity: 0;
    width: 190px;
    position: absolute;
    left: 30%;
    top: 29%;
  }

  .Innovative .col-2 .box-six .hidden {
    opacity: 0;
    width: 190px;
    position: absolute;
    left: 30%;
    top: 29%;
  }

  .Innovative .col-2 .box-five .hidden {
    opacity: 0;
    width: 190px;
    position: absolute;
    left: 30%;
    top: 29%;
  }

  .Innovative .col-2 .box-four .hidden {
    opacity: 0;
    width: 190px;
    position: absolute;
    left: 30%;
    top: 29%;
  }

  .Innovative .col-2 .box-thired .hidden {
    opacity: 0;
    width: 190px;
    position: absolute;
    left: 30%;
    top: 29%;
  }

  .Innovative .col-2 .box-sec .hidden {
    opacity: 0;
    width: 190px;
    position: absolute;
    left: 30%;
    top: 29%;
  }

  .Innovative .col-2 .box-first .hidden {
    opacity: 0;
    width: 190px;
    position: absolute;
    left: 30%;
    top: 29%;
  }

  .Innovative .col-2 .hidden h2 {
    font-size: 18px;
  }

  .Innovative .col-2 .hidden {
    font-size: 14px;
  }

  .lets {
    margin-top: 0px;
    background-color: #DFF5F9;
    background-image: none;
  }

  .lets .col-3 {
    width: 50%;
    margin: 0;
    padding: 10px;
  }
  .video-main{
    padding: 30px 20px;
  }
  .video-main h2 {
    font-size: 40px;
  }
  .Gallery{
    padding: 30px 20px;
  }
  .Gallery .col-4{
    width: 50%;
    margin: 0;
    padding: 10px;
  }
  .Parents{
    padding: 30px 20px;
  }
  .Parents h2 {
    font-size: 30px;
  }
  .Parents .col-2 .box .for-flex img{
    height: 110px;
    width: 110px;
  }
  .Parents .col-2 .box .for-flex div h3{
    font-size: 27px;
  }
  .Parents .col-2 .box .for-flex div p{
    font-size: 16px;
  }
  .Parents .col-2 .box main {
    margin-top: 5px;
    padding: 20px 25px;
    font-size: 15px;
}
.Awards{
  padding: 30px 20px;
}
.Awards h2{
  font-size: 35px;
}
.Awards .for-flex .box-left{
  width: 100%;
  display: flex;
  justify-content: center;
}
.Awards .for-flex .box-right{
  width: 100%;
  margin-left: 0px;
}
footer{
  padding: 30px 20px;
  background-color: #DEEDF1;
  background-image: none;
}
footer .col-3 .for-flex{
  margin-top: 0px;
}
footer .col-3 ul{
  margin-top: 25px;
}
.copyrighht .for-flex {
  display: block;
  text-align: center;
}

.copyrighht .d-flex {
  justify-content: center;
  margin-top: 20px;
}
/* About page */
.about-details p {
  font-size: 16px;
}
.team-principle{
  padding: 40px 30px;
}
.team-principle .col-2 img {
  height: 500px;
}
.team-principle .col-2 p{
  font-size: 15px;
}
.team{
  padding: 30px 30px;
}
.team .col-2{
  width: 50%;
  margin-right: 0;
  padding: 10px;
}
/* contact page */
.form-contact{
  padding: 20px 30px;
}
.form-contact .col-2{
  width: 100%;
  margin-right: 0px;
  margin-top: 20px;
}
.form-contact .col-2 h2 {
  font-size: 20px;
}
.form-admission{
  padding: 30px 20px;
}
.form-admission .col-2{
  width: 100%;
  margin-right: 0px;
}
.form-admission .col-2 h1{
font-size: 2em;
}
.form-admission .col-2 p{
  font-size: 18px;
}
.form-admission .col-2 h2 {
  font-size: 30px;
}
.admission-process{
  height: auto;
}
.admission-process h2 {
  font-size: 35px;
}
.admission-process .col-4{
  width: 50%;
  margin-right: 0px;
  padding: 10px;
  margin-top: 0px;
}
.Parent-FAQ {
  padding: 50px;
}

/*  */
.join-banner{
  height: 65vh;
}
.join-banner h1 {
  font-size: 50px;
}
.join-banner .box {
  top: 15%;
  left: 6%;
}
.join-banner .box p{
 padding-top: 20px;
}
.join-banner .box a button{
  margin-top: 20px;
}
.Career
-form h2 {
  font-size: 20px;
}
.Career-Growth{
  padding: 40px 20px;
}
.Career-Growth h2 {
  font-size: 35px;
}
.Culture{
  padding: 40px 30px;
}
.Culture p {
  font-size: 20px;
}
.Culture .col-3{
  width: 50%;
  margin: 0;
}
.About-Little{
  padding: 40px 30px;
}
.About-Little .col-2 h2{
  font-size: 29px;
}
.About-Little .col-2 p {
margin-top: 20px;
  font-size: 15px;
}
.About-Little .col-2 img {
  border-radius: 10px;
}
.Trainings{
  padding: 30px 20px;
}






}

@media screen and (max-width: 767px) {

  /* toggle start */
  .side-bar .close-btn {
    font-size: 20px;
    padding: 5px;
    border: 1px solid gray;
    width: 30px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    font-weight: bold
  }

  .side-bar {
    background: white;
    backdrop-filter: blur(15px);
    width: 300px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -350px;
    overflow-y: auto;
    transition: 0.6s ease;
    transition-property: right;
    z-index: 99999;
  }

  .toggle-btn {
    display: block;
    cursor: pointer;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .toggel-btn-pad {
    border: 1px solid gray;
    padding: 3px 6px;
    text-align: center;
  }

  .side-bar {
    display: block;
  }

  header {
    display: none;
  }

  .vision {
    padding: 20px;
    background-image: none;
  }

  .vision .col-2 {
    width: 100%;
    margin-right: 0px;
    margin-top: 30px;
  }

  .vision .col-2 h3 {
    font-size: 25px;
    margin: 5px 0;
    line-height: 30px;
    /* text-align: center; */
  }

  .vision .col-2 .vision-slider {
    margin-left: 0;
  }

  .vision .col-2 img {
    height: auto;
  }

  .program {
    padding: 20px;
    margin: 0;
  }

  .program h2 {
    font-size: 30px;
    text-align: center;
    padding-bottom: 0;
  }

  .program .col-4 {
    width: 100%;
    margin-right: 0px;
    margin-top: 20px;
  }

  .program .col-4 img {
    height: auto;
    border-radius: 5px;
  }

  .Admissions {
    background-image: none;
    padding: 0px 20px;
    background-color: #FB5178;
  }

  .Admissions .left img {
    margin-top: 20px;
    border-radius: 5px;
  }

  .Admissions .left {
    width: 100%;
    margin-top: 0px;
  }

  .Admissions .right {
    width: 100%;
    margin-left: 0px;
    margin-top: 10px;
  }

  .Admissions .right h2 {
    line-height: 1;
    font-size: 30px;
    text-align: center;
  }
  .Innovative .col-2 .boz{
    width: 100%;
    text-align: center;
  }
  .Innovative .col-2 .boz img{
    position: static !important;
  }
  .Innovative .col-2 .boz .hidden{
    position: static;
    opacity: 1;
    width: 100%;
  }

  .Innovative {
    padding: 20px;
  }

  .Innovative .col-2 {
    width: 100%;
    margin: 0;
  }

  .Innovative .col-2 h3 {
    font-size: 28px;
    text-align: center;
  }

  .Innovative .col-2 h5 {
    font-size: 20px;
    text-align: center;
  }

  .Innovative .col-2 p {
    text-align: justify;
    font-size: 15px;
  }

  .side-bar .menu .item .sub-menu{
    display: block;
    opacity: 1;
    visibility: visible;
    background-color: transparent;
    position: static;
    display: none;
    padding: 0px;
    padding-left: 25px;
  }
  .side-bar .menu .item .sub-menu ul{
    background-color: transparent;
    margin: 0px;
  }
  .drop-1 ul li{
    width: 100%;
    padding: 0px;
  }
  .side-bar .menu .item .sub-menu ul a{
    padding: 0px 15px;
  }

  .lets {
    background-image: none;
    background-color: #DFF5F9;
    padding: 40px 20px;
  }

  .lets p {
    font-size: 19px;
  }

  .lets .col-3 {
    width: 100%;
    margin-right: 0px;
  }

  .video-main {
    padding: 20px;
  }

  .video-main h2 {
    margin: 0 0 20px 0;
    line-height: 20px;
    font-size: 30px;

  }

  .video-main .col-2 {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .lets .col-3 img {
    height: auto;
  }

  .Gallery {
    padding: 20px 20px;
  }

  .Gallery .col-4 {
    width: 100%;
    margin-right: 0px;
  }

  .Parents {
    padding: 40px 20px;
  }

  .Parents .col-2 {
    width: 100%;
    margin-right: 0px;
  }

  .Parents h2 {
    font-size: 34px;
  }

  .Parents .col-2 .box .for-flex img {
    height: 110px;
    width: 110px;
  }

  .Parents .col-2 .box .for-flex div h3 {
    font-size: 28px;
  }

  .Parents .col-2 .box .for-flex div p {
    font-size: 16px;
  }

  .Parents .col-2 .box main {
    padding: 10px 15px;
  }

  .Awards {
    padding: 30px 30px;
  }

  .Awards h2 {
    font-size: 30px;
    text-align: center;
  }

  .Awards .for-flex .box-left {
    width: 100%;
    margin-top: 10px;
  }

  .Awards .slick-prev:before {
    font-size: 35px;
  }

  .Awards .slick-next:before {
    font-size: 35px;
  }

  .Awards .for-flex .box-right {
    width: 100%;
  }

  .Awards .slick-prev {
    left: 68%;
  }

  .Awards .for-flex .box-left img {
    width: 100%;
  }

  .Awards .for-flex .box-right .col-2 .box span {
    font-size: 16px;
  }

  footer {
    padding: 40px 20px;
    background-image: none;
    background-color: #E1F0F4;
  }

  footer .col-3 {
    width: 100%;
    margin-right: 0px;
  }

  footer .col-3 .for-flex {
    margin-top: 0px;
    margin-left: 0px;
  }

  footer .col-3 ul {
    margin-top: 20px;
  }

  footer .col-3 h2 {
    margin-left: 0px;
  }

  .copyrighht .for-flex {
    display: block;
    text-align: center;
  }

  .copyrighht .d-flex {
    justify-content: center;
    margin-top: 20px;
  }

  /* about page */
  .about-details {
    padding: 40px 20px;
  }

  .about-details .col-2 {
    width: 100%;
    margin-right: 0px;
  }

  .about-details p {
    padding: 10px;
    font-size: 15px;
  }

  /* our-team-principle */
  .team-principle {
    padding: 20px 20px;
  }

  .team-principle .col-2 {
    width: 100%;
    margin-right: 0px;
    margin-top: 30px;
  }

  .team-principle .col-2 h2 {
    font-size: 35px;
  }

  .team-principle .col-2 p {
    font-size: 15px;
  }

  .team-principle .col-2 img {
    height: 500px;
  }

  .team {
    padding: 40px 20px;
  }

  .team h1 {
    font-size: 35px;
  }

  .team .col-2 {
    width: 100%;
    margin-right: 0px;
  }

  .team .col-3 .main img {
    height: auto;
  }

  /*admission-details  */
  .form-admission {
    padding: 40px 20px;

  }

  .form-admission .col-2 {
    width: 100%;
    margin-right: 0px;
  }

  .form-admission .col-2 h1 {
    font-size: 29px;
    margin-top: 20px;
  }

  .form-admission .col-2 p {
    font-size: 16px;
  }

  .form-admission .col-2 .main {
    margin-top: 30px;
    padding: 20px 20px;
  }

  .form-admission .col-2 h2 {
    font-size: 30px;
  }

  .admission-process {
    padding: 20px 20px;
    height: auto;
  }

  .admission-process h2 {
    font-size: 35px;
  }

  .admission-process .col-4 {
    width: 100%;
    margin-right: 0px;
    margin-top: 20px;
  }

  /* FAQ page */
  .Parent-FAQ .content {
    width: 350px;
    position: absolute;
    top: 15%;
    text-align: center;
    left: 5%;
  }

  /* Career
 page */
  .faq .collapsible {
    font-size: 15px;
  }

  .join-banner h1 {
    font-size: 40px;
    line-height: 40px;
  }

  .join-banner .box p {
    font-size: 18px;
    padding-top: 10px;
  }

  .join-banner .box a button {
    margin-top: 30px;
  }

  .join-banner .box {
    left: 0;
    top: 15%;
  }

  .join-banner {
    height: 55vh;
  }

  .Career
-form {
    padding: 30px 15px;
  }

  .Career
-form h2 {
    font-size: 18px;
  }

  .Career-Growth {
    padding: 40px 20px;
  }

  .Career-Growth p {
    font-size: 18px;
  }

  .Career-Growth h2 {
    font-size: 30px;
    padding-top: 10px;
  }

  .Career-Growth .for-flex {
    display: block;
  }

  .Culture {
    padding: 30px 20px;
  }

  .Culture p {
    font-size: 18px;
  }

  .Culture .col-3 {
    width: 100%;
    margin-right: 0px;
  }

  .About-Little {
    padding: 0px 20px;
  }

  .About-Little .col-2 {
    width: 100%;
    margin-right: 0px;
    margin-top: 25px;
  }

  .About-Little .col-2 .box {
    margin-left: 0px;
  }

  .About-Little .col-2 h2 {
    font-size: 30px;
    padding-top: 20px;
  }

  .About-Little .col-2 p {
    font-size: 16px;
    margin-top: 20px;
  }

  .Trainings {
    padding: 30px 20px;
  }

  /* contact-page */
  .form-contact {
    padding: 30px 20px;
  }

  .form-contact .col-2 {
    width: 100%;
    margin-right: 0px;
  }

  .form-contact .col-2 h2 {
    font-size: 18px;
  }
  .modal-content {
    max-width: 350px;
  }



}