header.sticky {

  /* background-color: #002d5a; */

  background-color: var(--main-color);

}



.active4 {

  color: var(--theme-color1) !important;

  font-weight: 600;

}



header {

  padding: 8px 0;

  position: sticky;

  left: 0;

  top: 0;

  bottom: 0;

  right: 0;

  z-index: 99999;

  transition: 0.4s;



  .logo {

    width: 85px;

    height: 85px;



    /* width: 15%; */

    img {

      width: 100%;

      height: 100%;

    }

  }



  .nav {

    /* width: 85%; */

    display: flex;



    ul {

      display: flex;



      li {

        padding: 10px 16px;



        a {

          text-transform: uppercase;

          color: #000;

          font-size: 15px;

          font-weight: 600;



          &:hover {

            color: #FE9150;

          }



        }

      }

    }

  }



  .butn {

    a {

      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

      border-radius: 30px;

      color: #fff;



      i {

        font-size: 16px;

        line-height: 40px;

        padding-left: 5px;

      }

    }

  }

}





/*-----------------------why-choose section-------------------------*/

.why-preschool {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  padding: 30px 20px;

  gap: 40px;

}



.why-image {

  flex: 1 1 400px;

  max-width: 500px;

  text-align: center;

}



.why-image img {

  max-width: 100%;

  height: auto;

}



.why-content {

  flex: 1 1 500px;

  max-width: 700px;

}



.why-content h2 {



  font-size: 32px;

  font-weight: 700;

  margin-bottom: 10px;

}



.why-content h2::after {

  content: "";

  display: block;

  width: 80px;

  height: 3px;

  background-image: linear-gradient(to right, #227be5 40%, #f74f22 40%);

  margin-top: 10px;

}



.why-content p {

  font-family: 'Roboto';

  font-size: 16px;

  color: #666;

  margin: 20px 0;

}



.features {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 30px;

}



.feature-box {

  display: flex;

  align-items: flex-start;

  gap: 15px;

  margin: 10px 0;

}



.feature-box .icon {

  font-size: 40px;

  flex-shrink: 0;

}



.feature-box .text {

  flex: 1;

}



.feature-box h4 {

  font-family: 'Roboto';

  font-size: 22px;

  font-weight: 700;

  margin: 0 0 5px 0;

}



.feature-box p {

  font-family: 'Roboto';

  font-size: 16px;

  line-height: 1.5;

  color: #555;

  margin: 0;

}



/* Colored Icons */

.orange {

  color: #f74f22;

}



.green {

  color: #d5e626;

}



.blue {

  color: #2fa9e0;

}



.yellow {

  color: #fdd835;

}



@media (max-width: 768px) {

  .why-preschool {

    flex-direction: column;

    text-align: center;

  }



  .features {

    grid-template-columns: 1fr;

  }



  .feature-box {

    justify-content: center;

    text-align: left;

  }

}



/*-----------------------why-choose section-------------------------*/

/*-----------------------courses section ---------------------------*/

.courses-section {

  padding: 70px 20px;

  background: #fff;

}



.courses-title {

  text-align: center;

  font-size: 2rem;

  color: var(--main-color);

  margin-bottom: 60px;

}



.courses-grid {

  max-width: 1200px;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;



}



.course-card {

  background: #fff;

  border-radius: 20px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  transition: all 0.3s ease;

  position: relative;

  padding: 20px;

  height: 300px;

}



.course-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);

}



.course-image {

  width: 100%;

  height: 180px;

  object-fit: cover;

}



.course-content {

  padding: 25px;

  position: relative;

  background: #fdfdfd;

}



.course-icon {

  width: 50px;

  height: 50px;

  background: #df0938;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  color: #fff;

  position: absolute;

  top: -25px;

  left: 25px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.course-title {

  font-size: 1.3rem;

  color: #f74f22;

  margin: 20px 0 10px;

}



.course-desc {

  font-size: 0.95rem;

  color: #555;

  line-height: 1.5;

}



.enroll-btn {

  display: inline-block;

  margin-top: 20px;

  padding: 10px 20px;

  background: var(--theme-color2);

  color: white;

  border-radius: 25px;

  text-decoration: none;

  transition: background 0.3s ease;

}



.enroll-btn:hover {

  background: var(--theme-color1);

}



@media (max-width: 600px) {

  .courses-title {

    font-size: 1.7rem;

  }

}



/* toggel  start*/

.toggle-btn {

  display: none;

  cursor: pointer;

  background-color: #000;

}



.toggle-btn span {

  display: block;

  width: 25px;

  height: 3px;

  margin: 5px auto;

  background-color: #b72f61;

}



.mobilenav {

  display: none;

}



.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: 999999;

}



.side-bar::-webkit-scrollbar {

  width: 0px;

}



.side-bar.active {

  right: 0;

}



.side-bar .menu {

  width: 100%;

  margin-top: 30px;

}



.side-bar .side-logo {

  background-color: #fff;

}



.side-bar .side-logo img {

  width: 200px;

  margin: 15px;

  margin-left: 70px;

}



.side-bar .menu .item {

  position: relative;

  cursor: pointer;

}



.side-bar .menu .item a {

  color: white;

  font-size: 16px;

  text-decoration: none;

  display: block;

  padding: 5px 30px;

  line-height: 40px;

}



.side-bar .menu .item a:hover {

  background: #db4242;

  transition: 0.3s ease;

  color: white;

}



.side-bar .menu .item i {

  margin-right: 15px;

}



.side-bar .menu .item a .dropdown {

  position: absolute;

  right: 0;

  margin: 20px;

  transition: 0.3s ease;

}



.side-bar .menu .item .sub-menu {

  background: #262627;

  display: none;

}



.side-bar .menu .item .sub-menu a {

  padding-left: 80px;

}





.sub-menu {

  display: none;

  padding-left: 15px;

  background: #e0e0e0;

}



.sub-menu.open {

  display: block;

}



.side-bar {

  width: 300px;

  background: #f0f0f0;

  padding: 15px;

}



/* end */



/* .home-banner {

      position: relative;

      &::after{

        content: "";

        position: absolute;

        top: 0;

        bottom: 0;

        right: 0;

        left: 0;

        background-color: #000;

        opacity: 0.8;

      }

      img {

        height: 80vh;

      }

    

      .main {

        position: relative;

        z-index: 9999;

        .img-content{

          position: absolute;

          display: inline-block;

          top: 50%;

          left: 50%;

          transform: translate(-50%,-50%);

          z-index: 9999;

          h2{

            color: #fff;

            position: relative;

            z-index: 9999;

          }

        }

      } */





.banner {

  .slick-prev {

    left: 40px;

    z-index: 999;

  }



  .slick-next {

    right: 45px;

    z-index: 999;

  }



  .slick-prev:before,

  .slick-next:before {

    font-family: 'slick';

    font-size: 37px;

    line-height: 1;

    opacity: .75;

    color: white;

    -webkit-font-smoothing: antialiased;

  }



  .slide {

    position: relative;



    &:after {

      content: "";

      position: absolute;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background-color: black;

      opacity: 0.3;

    }



    img {

      height: 90vh;

    }



    .img-content {

      display: inline-block;

      position: absolute;

      left: 50%;

      top: 50%;

      transform: translate(-50%, -50%);

      z-index: 9999;



      h2 {

        font-size: 38px;

        color: #fff;

        text-align: center;

        margin-bottom: 20px;

        line-height: 1.3;

      }

    }

  }

}





.programs {



  h2 {

    text-align: center;

    margin-top: 50px;

    /* color: #333; */

  }



  .for-flex {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    padding: 40px;

  }



  .program-box {

    background-color: #fff;

    border-radius: 20px;

    width: 250px;

    padding: 25px 20px;

    text-align: center;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    cursor: pointer;

  }



  .program-box:hover {

    transform: translateY(-10px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

  }



  .icon {

    font-size: 50px;

    margin-bottom: 15px;

    transition: color 0.3s ease;

  }



  .title {

    font-size: 22px;

    margin-bottom: 5px;

    transition: color 0.3s ease;

  }



  .age {

    font-size: 16px;

    font-weight: bold;

    margin-bottom: 12px;

    transition: color 0.3s ease;

  }



  .description {

    font-size: 14px;

    color: #555;

    transition: color 0.3s ease;

    line-height: 24px;

  }



  /* Hover effect on text and icons */

  .program-box:hover .icon,

  .program-box:hover .title,

  .program-box:hover .age,

  .program-box:hover .description {

    color: #ff6600;

  }



}



.core {

  padding: 20px 0;



  .core-values-section {

    max-width: 1200px;

    margin: 50px auto;

    padding: 0 20px;



    h2 {

      text-align: center;

      margin-bottom: 50px;

    }



    .core-values-grid {

      display: flex;

      flex-wrap: wrap;

      gap: 40px;

      justify-content: space-between;

    }



    .core-value {

      flex: 0 1 calc(50% - 20px);

      /* 2 columns on large screens */

      display: flex;

      gap: 20px;

      align-items: flex-start;

    }



    .core-value img {

      width: 135px;

      height: 130px;

      border-radius: 20px;

      object-fit: cover;

      flex-shrink: 0;

    }



    .core-value-content {

      flex: 1;

    }



    .core-value-content h3 {

      margin: 0;

      font-size: 20px;

      display: flex;

      flex-direction: column;

    }



    .core-value-content h3::after {

      content: '';

      width: 30px;

      height: 3px;

      background-color: #f7941d;

      margin-top: 8px;

      border-radius: 2px;

    }



    .core-value-content p {

      margin-top: 10px;

      font-size: 14px;

      line-height: 1.6;

      color: #666;

    }

  }

}



.events {

  padding: 40px 0;

  background-color: #0286ff;

  color: #fff;



  .events-section {

    max-width: 1200px;

    margin: 50px auto;

    padding: 0 20px;



    h2 {

      text-align: center;

      margin-bottom: 40px;

    }



    .events-grid {

      display: flex;

      flex-wrap: wrap;

      gap: 30px;

      justify-content: space-between;

    }



    .event-card {

      flex: 0 1 calc(50% - 15px);

      background-color: #0286ff;

      display: flex;

      gap: 20px;

      align-items: flex-start;

      border-radius: 15px;

      box-shadow: 4px 4px 0px #0070d9;

    }



    .event-card img {

      width: 165px;

      height: 165px;

      object-fit: cover;

      border-radius: 20px;

      flex-shrink: 0;

    }



    .event-content {

      flex: 1;

      padding: 30px 0;

    }



    .event-date {

      background-color: #f7941d;

      display: inline-block;

      padding: 4px 10px;

      font-size: 14px;

      border-radius: 5px;

      margin-bottom: 10px;

      color: #fff;

    }



    .event-title {

      font-size: 20px;

      margin-bottom: 10px;

      font-weight: bold;

    }



    .event-desc {

      font-size: 14px;

      color: #e0e0e0;

      line-height: 22px;

    }

  }

}



.class {

  padding: 40px 0;



  .classes-section {

    max-width: 1200px;

    margin: 60px auto;

    padding: 0 20px;

    text-align: center;

  }



  .classes-section h2 {

    margin-bottom: 40px;

    /* color: #333; */

  }



  .class-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

    justify-content: center;

  }



  .class-card {

    position: relative;

    width: 100%;

    max-width: 350px;

    background: #fff;

    border-radius: 25px;

    overflow: hidden;

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);

    transition: all 0.3s ease;

  }



  .class-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

  }



  .class-content {

    padding: 20px;

    text-align: left;

  }



  .class-title {

    color: #007BFF;

    font-size: 20px;

    margin-bottom: 10px;

  }



  .class-desc {

    font-size: 15px;

    color: #666;

    margin-bottom: 20px;

  }



  .class-details {

    display: flex;

    justify-content: space-between;

    border-top: 1px solid #ddd;

    padding-top: 15px;

    font-size: 14px;

  }



  .class-details span {

    display: block;

    color: #f7941d;

    font-weight: bold;

  }



  .class-footer {

    position: absolute;

    bottom: -60px;

    left: 0;

    width: 100%;

    background-color: #f7941d;

    text-align: center;

    padding: 15px 0;

    color: #fff;

    font-weight: bold;

    font-size: 18px;

    transition: all 0.3s ease;

    border-bottom-left-radius: 25px;

    border-bottom-right-radius: 25px;



    a {

      color: white;

    }

  }



  .class-card:hover .class-footer {

    bottom: 0;

  }





}



/*  */

.slick-dots li button:before {

  font-size: 15px;

  position: absolute;

  top: 15px;

  left: 0;

}



.Smarty {



  .section-wrapper {

    display: flex;

    flex-wrap: wrap;

    max-width: 1200px;

    margin: 60px auto;

    padding: 0 20px;

    gap: 40px;

  }



  .section-left {

    flex: 1 1 500px;

  }



  .section-left h2 {

    margin-bottom: 20px;

    color: #333;

  }



  .section-left p {

    margin-bottom: 20px;

    font-size: 16px;

    color: #666;

    line-height: 26px;

  }



  .learn-more-btn {

    display: inline-block;

    background: #f7941d;

    color: #fff;

    padding: 14px 25px;

    border: none;

    border-radius: 20px 0 20px 20px;

    font-size: 16px;

    text-decoration: none;

    transition: background 0.3s ease;

  }



  .learn-more-btn:hover {

    background: #e98300;

  }



  .section-right {

    flex: 1 1 500px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

  }



  .icon-box {

    background: #fff;

    border-radius: 25px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    padding: 30px 20px;

    text-align: center;

    transition: transform 0.3s ease;

  }



  .icon-box:hover {

    transform: translateY(-5px);

  }



  .icon-box i {

    font-size: 50px;

    color: #f74f22;

    margin-bottom: 15px;

  }



  .icon-box h4 {

    font-family: 'Fredoka', cursive;

    font-size: 18px;

    color: #333;

  }

}



.testimonial {

  padding: 30px 0;



  .testimonial-section {

    max-width: 1200px;

    margin: 60px auto;

    padding: 0 20px;

    text-align: center;

  }



  .testimonial-section h2 {



    margin-bottom: 50px;

    /* color: #222; */

  }



  .testimonial-wrapper {

    display: flex;

    flex-wrap: wrap;

    gap: 40px;

    justify-content: center;

  }



  .testimonial {

    flex: 1 1 45%;

    background-color: #fff;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    text-align: left;

  }



  .testimonial img {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    object-fit: cover;

  }



  .testimonial-content {

    flex: 1;

  }



  .testimonial-content h4 {

    font-size: 20px;

    margin-bottom: 10px;

    color: #222;

    margin-top: 20px;

  }



  .testimonial-content p {

    font-size: 16px;

    color: #666;

    margin-top: 15px;

    line-height: 25px;

  }

}



.signup {

  background-color: #fefefe;



  .signup-section {

    background: #0088ff;

    color: #fff;

    padding: 60px 20px;

    border-radius: 30px;

    max-width: 1100px;

    margin: 60px auto;

    text-align: center;

    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');

    /* Optional background */

  }



  .signup-section h2 {

    font-family: 'Fredoka', cursive;

    margin-bottom: 20px;

  }



  .signup-section p {

    font-size: 18px;

    max-width: 700px;

    margin: 0 auto 40px;

    line-height: 1.6;

  }



  .signup-form {

    display: flex;

    justify-content: center;

    max-width: 700px;

    margin: 0 auto;

    border-radius: 30px;

    overflow: hidden;

    background-color: white;

  }



  .signup-form input[type="email"] {

    flex: 1;

    padding: 16px 20px;

    border: none;

    outline: none;

    font-size: 16px;

    color: #555;

  }



  .signup-form button {

    background-color: #f7941d;

    color: #fff;

    padding: 16px 30px;

    border: none;

    cursor: pointer;

    font-size: 16px;

    font-family: 'Quicksand', sans-serif;

    display: flex;

    align-items: center;

    gap: 8px;

  }



  .signup-form button:hover {

    background-color: #e3830d;

  }

}



.news {

  background-color: #ff9d25;



  .news-section {

    padding: 60px 20px;

    text-align: center;

  }



  .news-section h2 {

    font-family: 'Fredoka', cursive;

    margin-bottom: 40px;

    color: white;

  }



  .news-container {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 30px;

    max-width: 1200px;

    margin: 0 auto;

  }



  .news-card {

    background-color: white;

    border-radius: 20px;

    width: 100%;

    max-width: 350px;

    overflow: hidden;

    text-align: left;

    position: relative;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  }



  .news-card img {

    width: 100%;

    display: block;

    border-top-left-radius: 20px;

    border-top-right-radius: 20px;

    height: 200px;

    object-fit: cover;

  }



  .date-badge {

    position: absolute;

    top: 170px;

    left: 20px;

    background-color: #007bff;

    color: white;

    border-radius: 50%;

    width: 50px;

    height: 50px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: bold;

  }



  .date-badge.green {

    background-color: #47b73a;

  }



  .news-content {

    padding: 20px;

  }



  .news-content h3 {

    font-family: 'Fredoka', cursive;

    font-size: 20px;

    margin-bottom: 10px;

    color: #222;

  }



  .news-content p {

    color: #555;

    font-size: 15px;

    line-height: 1.5;

  }

}





.footer {

  background: #f8f8f8;

  color: #333;

  padding: 40px 10px;



  .footer-container {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 20px;

    max-width: 1200px;

    margin: auto;

  }



  main {

    display: flex;

    align-items: center;



    i {

      margin-right: 10px;

      font-size: 20px;

      color: #FF5D00;

    }



    img {

      width: 30px;

      margin-right: 15px;

    }



  }



  .social-icons {

    text-align: center;

    margin: 20px 0;

  }



  .footer-col {

    flex: 1 1 220px;

  }



  .footer-col h3 {

    margin-bottom: 15px;

    font-size: 20px;

    color: #333;

    text-transform: uppercase;

    color: #ff5d00;

  }



  .footer-col ul {

    list-style: none;

    padding: 20px 0;



  }



  .footer-col ul li {

    margin-bottom: 15px;

    cursor: pointer;



    a {

      color: black;



      &:hover {

        color: #FF5D00;

      }

    }

  }



  .footer-col ul li i {

    margin-right: 8px;

    color: #FF5D00;



  }



  .footer-col p {

    margin: 8px 0;

    line-height: 23px;

    color: black;



    a {

      color: black;



      &:hover {

        color: #FF5D00;

      }

    }



    i {

      margin-right: 10px;

      color: gray;

    }

  }



  .logo {

    max-width: 120px;

    margin-bottom: 10px;

  }



  .social-icons i {

    font-size: 20px;

    margin-right: 10px;

    color: gray;

    cursor: pointer;



    &:hover {

      color: #FF5D00;

    }

  }



  .footer-bottom {

    text-align: center;

    padding: 15px;

    font-size: 14px;

    color: #555;

    border-top: 1px solid #ccc;

    margin-top: 20px;



    a {

      color: #FF5D00;



      &:hover {

        color: #000;

      }

    }

  }

}





.about {

  padding: 50px 0;



  h3 {

    font-size: 28px;

    padding: 15px 0;

    color: #e8e842;

  }



  p {

    line-height: 30px;

  }



  img {

    height: 380px;

    object-fit: cover;

    border-radius: 15px;

  }



}



.mission {

  padding: 40px 0;



  h2 {

    text-align: center;

    text-transform: uppercase;

    font-weight: 600;

    margin-bottom: 20px;

  }



  p {

    line-height: 30px;

    font-size: 17px;

  }

}



.Vision {

  padding: 40px 0;



  h2 {

    text-align: center;

    text-transform: uppercase;

    font-weight: 600;

    margin-bottom: 20px;

  }



  p {

    line-height: 30px;

    font-size: 17px;



    span {

      color: black;

      font-weight: 600;

    }

  }

}



.message {

  padding: 40px 0;



  h2 {

    text-align: center;

    text-transform: uppercase;

    font-weight: 600;

    margin-bottom: 20px;

  }



  p {

    line-height: 30px;

    font-size: 17px;



    span {

      color: black;

      font-weight: 600;

    }

  }



  main {

    display: flex;

    margin-top: 10px;

    justify-content: end;

    line-height: 26px;

  }

}



.about-banner {

  background-image: url(../img/about-banner4.jpg);

  background-size: cover;

  background-repeat: no-repeat;

  height: 70vh;

  position: relative;



  h2 {

    position: absolute;

    width: 500px;

    left: calc(50% - 250px);

    top: calc(50% - 38px);

    font-size: 40px;

    color: white;

    text-align: center;

  }

}







.contact {

  /* background-color: #E8E842; */

  padding: 50px 0;

  margin: 30px 0;



  .contact-container {



    .contact-info,

    .contact-form {

      /* background-color: #fce69c; */

      padding: 20px;

    }



    .contact-info h2 {

      font-size: 28px;

      margin-bottom: 20px;

      /* color: #ff5d00; */

    }



    .contact-info p {

      margin: 10px 0;

      font-size: 16px;

      margin-bottom: 20px;

      line-height: 26px;

    }



    .contact-info i {

      margin-right: 10px;



      &:hover {

        color: #ffea00;

      }

    }



    .social-icons {

      margin-top: 20px;



      a {

        margin-right: 15px;

        font-size: 20px;

        color: black;

        text-decoration: none;

      }

    }



    .contact-form {

      background-color: #fff;

      border-radius: 6px;

      padding: 30px 20px;

    }



    .contact-form h2 {

      margin-bottom: 20px;

    }



    .contact-form input,

    .contact-form textarea {

      width: 100%;

      padding: 15px;

      margin-bottom: 15px;

      border: 1px solid #ccc;

      border-radius: 4px;

    }



    .contact-form button {

      padding: 10px 20px;

      border: 1px solid #000;

      background: #fff;

      font-weight: bold;

      cursor: pointer;

    }

  }

}





.Parent {

  padding: 40px 0;



  p {

    line-height: 30px;

    margin-top: 25px;

    margin-left: 20px;

  }



  h2 {

    text-align: center;

  }



  img {

    border-radius: 10px;

    object-fit: cover;

  }

}



.staf {

  padding: 40px 0;



  h2 {

    text-align: center;

  }



  p {

    line-height: 26px;

    margin-top: 20px;

  }



  ul {

    margin-top: 20px;



    li {

      padding: 6px 0;

    }

  }



  h4 {

    margin-top: 10px;

    font-size: 20px;

  }

}



.gallery {

  padding: 50px 0;



  img {

    width: 100%;

    height: 320px;

    object-fit: cover;

    border-radius: 10px;

  }



  h2 {

    text-align: center;

    font-size: 30px;

    text-transform: uppercase;

    margin-bottom: 25px;

  }



  .main {

    border: 1px solid #8080805c;

    margin-top: 20px;

    position: relative;

    overflow: hidden;

  }



  .overlay {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    /* dark transparent background */

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.4s ease;

  }



  .overlay h2 {

    font-size: 24px;

    text-align: center;

  }



  .main:hover .overlay {

    opacity: 1;

  }



}



.form-enquiery {

  padding: 40px 0;



  form {

    max-width: 600px;

    margin: auto;

    background-color: #a1939308;

    padding: 20px;

    border-radius: 10px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;



    h2 {

      text-align: center;

    }



    label {

      display: block;

      margin-top: 15px;

      font-weight: bold;

    }



    .required {

      color: red;

    }



    .row {

      display: flex;

      gap: 10px;

      margin-top: 10px;

    }



    input,

    select {

      padding: 10px;

      width: 100%;

      border: 1px solid #ccc;

      border-radius: 6px;

      font-size: 14px;

    }



    .rows {

      display: flex;

      gap: 20px;

      /* you can increase this value if you want more space */

      margin-top: 10px;

    }



    input[type="date"] {

      color: #555;

    }



    button {

      margin-top: 20px;

      background-color: #8b5cf6;

      color: white;

      border: none;

      padding: 10px 20px;

      font-size: 16px;

      border-radius: 8px;

      cursor: pointer;

    }



    button:hover {

      background-color: #6d28d9;

    }



    .gender-group {

      display: flex;

      gap: 20px;

      margin-top: 10px;

    }



    .gender-group label {

      font-weight: normal;

    }

  }

}



.team-main {

  padding: 50px 0;

  background-color: #fff;

  border-radius: 10px;



  img {

    border-radius: 10px;

    transition: all 0.4s ease;

    height: 650px;

  }



  .main {

    margin-left: 20px;

  }



  span {

    color: #ffea00;

  }



  h2 {

    text-align: center;

    margin-bottom: 30px;

  }



  h3 {

    padding-bottom: 6px;

    margin-top: 10px;

  }



  p {

    font-size: 17px;

    line-height: 29px;

  }



  h4 {

    padding-bottom: 10px;

  }



  a {

    color: #ffea00;

  }



  ul {



    /* margin-top: 10px; */

    li {

      padding: 6px 0;

      line-height: 22px;

    }

  }



  .ican {

    margin-top: 20px;



    i {

      padding-left: 10px;

      font-size: 20px;

      cursor: pointer;

      color: #FF8909;

      transition: all 0.4s ease;



      &:hover {

        color: black;

      }

    }

  }

}



.team {

  padding: 50px;

  background-color: #80808069;



  h2 {

    text-align: center;

    padding-bottom: 20px;

  }



  ul {

    li {

      margin-bottom: 3px;

      padding: 3px 0;

    }

  }



  a {

    color: #ffea00;

    font-size: 16px;

    margin-left: 10px;

  }



  .number {

    font-size: 14px;

    color: gray;

  }



  .p1 {

    margin-top: 20px;

    line-height: 30px !important;

  }



  span {

    color: #ffea00;

  }



  h4 {

    font-size: 17px;

    margin-bottom: 8px;

  }



  .box {

    background-color: white;

    margin-top: 20px;

    margin-bottom: 20px;

    border-radius: 10px;

    height: 975px;



    .for-img {

      overflow: hidden;



      img {

        border-top-left-radius: 10px;

        border-top-right-radius: 10px;

        transition: all 0.4s ease;

        height: 350px;

        object-fit: contain;



        &:hover {

          transform: scale(1.1);

          border-top-left-radius: 10px;

          border-top-right-radius: 10px;

        }

      }

    }



    .main {

      padding: 20px;



      h3 {

        font-size: 20px;

        padding-bottom: 6px;

        margin-top: 8px;

      }



      p {

        font-size: 15px;

        color: gray;

        line-height: 26px;

      }



      .ican {

        margin-top: 20px;



        i {

          padding-left: 10px;

          font-size: 20px;

          cursor: pointer;

          color: #FF8909;

          transition: all 0.4s ease;



          &:hover {

            color: black;

          }

        }

      }

    }

  }



}



.video-section {

  padding: 40px 20px;

  background-color: #f0f0f0;

  text-align: center;

}



.video-section h2 {

  margin-bottom: 30px;

}



.video-container {

  display: flex;

  justify-content: center;

  /* gap: 20px; */

  flex-wrap: wrap;

  /* responsive ke liye */

}



.video-container video {

  width: 100%;

  height: 400px;

  border: 2px solid #ccc;

  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}





/* Responsive */

@media (max-width: 768px) {



  .team {

    padding: 0px;

    background-color: #80808069;

  }



  .team-main {

    img {

      height: 400px;

    }



    ul {

      li {

        padding: 4px 0;

        line-height: 22px;

      }

    }

  }



  .footer {

    padding: 30px 20px;

    /* .footer-container {

      flex-direction: column;

      align-items: center;

      text-align: center;

    } */



    .footer-col {

      max-width: 100%;

    }



    .footer-col ul {

      list-style: none;

      padding: 10px 0;

    }



    .footer-col ul li {

      display: block;

      padding: 3px 0;

    }



    .footer-bottom {

      p {

        line-height: 23px;

      }

    }

  }



  .news-container {

    flex-direction: column;

    align-items: center;

  }



  .signup-form {

    flex-direction: column;

  }



  .signup-form input[type="email"],

  .signup-form button {

    width: 100%;

    border-radius: 0;

  }



  .signup-form input[type="email"] {

    border-bottom: 1px solid #ddd;

  }



  .signup-form {

    border-radius: 20px;

    overflow: hidden;

  }



  .section-wrapper {

    flex-direction: column;

    text-align: center;

  }



  .section-left,

  .section-right {

    flex: 1 1 100%;

  }



  .section-right {

    grid-template-columns: 1fr 1fr;

  }





  .class-grid {

    flex-direction: column;

    align-items: center;

  }



  .class-card {

    max-width: 100%;

  }



  header {

    display: none;

  }



  /* 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: 999999;

  }



  .toggle-btn {

    display: block;

    cursor: pointer;

    width: 100%;

    margin: 0;

    padding: 0;

    background-color: #e7e7e7;

    height: 70px;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }



  .toggle-btn .logo {

    margin-left: 10px;



    img {

      height: 65px;

      width: 181px;

    }

  }



  .toggel-btn-pad {

    border: 1px solid gray;

    padding: 3px 6px;

    text-align: center;

    margin-right: 40px;

  }



  .side-bar {

    display: block;

  }



  .side-bar .menu .item a {

    color: black;

  }



  /*  */

  .side-bar .menu .item {

    position: relative;

  }



  .side-bar .menu .item i {

    position: absolute;

    right: 0;

    top: 13px;

    transition: 0.3s ease;

  }



  .side-bar .menu .item .drop-menu {

    display: block;

    opacity: 1;

    visibility: visible;

    background-color: transparent;

    position: static;

    display: none;

    padding: 0px;

    padding-left: 25px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  }



  .side-bar .menu .item .drop-menu ul {

    background-color: transparent;

    margin: 0px;



    li {

      width: 100%;

      padding: 0px;

    }



  }



  .side-bar .btn {

    margin-left: 25px;

    margin-top: 35px;

  }



  /* end */



  .core-value {

    text-align: center;

    flex: 0 1 calc(100% - 20px) !important;

  }



  .core-value img {

    margin-bottom: 10px;

  }



  .core-value-content h3::after {

    margin: 8px auto 0;

  }





  .event-card {

    flex-direction: column;

    flex: 0 1 100%;

    text-align: center;

    align-items: center;

  }



  .event-card img {

    width: 100%;

    max-width: 300px;

    height: auto;

  }



  .event-content {

    padding: 10px;

  }



  .event-title {

    font-size: 18px;

  }



  .banner {

    .slide {

      img {

        height: 50vh

      }



      .img-content {

        h2 {

          font-size: 25px;

          color: #fff;

          text-align: center;

          margin-bottom: 20px;

          line-height: 1.3;

        }

      }

    }



    .slick-next {

      right: 30px;

      z-index: 999;

    }



    .slick-prev {

      left: 20px;

      z-index: 999;

    }



  }



  .why-content h2::after {

    margin-left: 50px;

  }



  .why-content h2 {

    font-size: 28px;

  }



  h2 {

    font-size: 28px;

  }



  .courses-section {

    padding: 40px 20px;

    background: #fff;

  }



  .events {

    padding: 20px 0;



    .events-section {

      .event-card {

        flex: 0 1 calc(100% - 15px);

        display: block;

        gap: 0px;

      }

    }

  }



  .about-banner {

    height: 50vh;



    h2 {

      position: absolute;

      width: 350px;

      left: calc(50% - 175px);

      top: calc(50% - 42px);

      font-size: 35px;

      color: white;

      text-align: center;

    }

  }



  .about {

    img {

      height: 380px;

      object-fit: cover;

      border-radius: 15px;

      margin-top: 20px;

    }

  }



  .mission {

    padding: 15px 0;

  }



  .Parent {

    padding: 20px 0;

  }



  .message {

    padding: 20px 0;

  }



  .Vision {

    padding: 20px 0;

  }



  .testimonial {

    padding: 10px 0;

  }



  .class {

    padding: 20px 0;

  }



  .contact {

    /* background-color: #E8E842; */

    padding: 5px 0;

    margin: 15px 0;

  }







}



@media (max-width: 1024px) {



  .footer {

    .footer-container {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      gap: 0px !important;

      max-width: 1200px;

      margin: auto;

    }

  }



  .footer {

    .footer-col {

      width: 50% !important;

    }

  }



  header {

    display: none;

  }



  /* 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: 260px;

    height: 100vh;

    position: fixed;

    top: 0;

    right: -350px;

    overflow-y: auto;

    transition: 0.6s ease;

    transition-property: right;

    z-index: 999999;

  }



  .toggle-btn {

    display: block;

    cursor: pointer;

    width: 100%;

    margin: 0;

    padding: 0;

    background-color: #e7e7e7;

    height: 85px;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }



  .toggle-btn .logo {

    margin-left: 3px;



    img {

      width: 80px;

      height: 80px;

    }

  }



  .toggel-btn-pad {

    border: 1px solid gray;

    padding: 3px 6px;

    text-align: center;

    margin-right: 20px;

  }



  .side-bar {

    display: block;

  }



  .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;

  }



  .side-bar .menu .item a {

    color: black;

  }



  /*  */

  .side-bar .menu .item {

    position: relative;

  }



  .side-bar .menu .item i {

    position: absolute;

    right: 0;

    top: 13px;

    transition: 0.3s ease;

  }



  .side-bar .menu .item .drop-menu {

    display: block;

    opacity: 1;

    visibility: visible;

    background-color: transparent;

    position: static;

    display: none;

    padding: 0px;

    padding-left: 25px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  }



  .side-bar .menu .item .drop-menu ul {

    background-color: transparent;

    margin: 0px;





    li {

      width: 100%;

      padding: 0px;

    }

  }



  /* end */



  .banner {

    .slide {

      img {

        height: 50vh;

      }



      .img-content {

        h2 {

          font-size: 30px;

          color: #fff;

          text-align: center;

          margin-bottom: 20px;

          line-height: 1.3;

        }

      }

    }

  }



  .features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0px;

  }



  .feature-box h4 {

    font-family: 'Roboto';

    font-size: 18px;

  }



  .feature-box p {

    font-family: 'Roboto';

    font-size: 14px;

  }



  .feature-box .icon {

    font-size: 35px;

    flex-shrink: 0;

  }



  .courses-section {

    padding: 30px 20px;

    background: #fff;

  }



  .events {

    padding: 20px 0;



    .events-section {

      .event-desc {

        font-size: 13px;

        color: #e0e0e0;

        line-height: 22px;

      }

    }

  }



  .testimonial {

    padding: 10px 0;

  }



  .about-banner {

    background-image: url(../img/about-banner4.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 50vh;

    position: relative;

  }



  .about {

    padding: 30px 5px;

  }





}