html,body{
  overflow-x: hidden;
  width: 100%;
}
    body {
      font-family: 'Fredoka', sans-serif;
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    .bg-pattern {
      background-color: #f9f9f9;
      background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff6b6b' fill-opacity='0.1'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(5px);
    }

    .nav-item .nav-link {
      position: relative;
      transition: all 0.3s;
    }

    .nav-item .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 3px;
      bottom: 0;
      left: 0;
      background-color: #FF6B6B;
      transition: width 0.3s;
      border-radius: 3px;
    }

    .nav-item .nav-link:hover::after {
      width: 100%;
    }

    .hero-carousel .carousel-item img {
      height: 500px;
      object-fit: cover;
      border-radius: 0 0 30px 30px;
    }

    .gallery-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4/3;
  }

  .gallery-card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }

  .gallery-item-clickable {
    cursor: pointer;
  }
  /* Optional: Ensure modal image doesn't exceed viewport height */
  #imageModal .modal-body img {
    max-height: 80vh; /* Adjust as needed */
    width: auto; /* Maintain aspect ratio */
    max-width: 100%;
  }
    .section-title {
      position: relative;
      display: inline-block;
      z-index: 1;
    }

    .section-title::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 12px;
      bottom: 5px;
      left: 0;
      background-color: rgba(255, 209, 102, 0.4);
      z-index: -1;
      border-radius: 10px;
    }

    .program-card {
      transition: all 0.3s;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .program-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

    .teacher-program {
      transition: all 0.3s;
      background: bisque;
      border-radius: 15px;
      overflow: hidden;
    }

    .teacher-program:hover {
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .testimonial-card {
      background: bisque;
      border-radius: 20px;
      transition: all 0.3s;
      margin: 40px 20px 20px;
      position: relative;
    }

    .testimonial-card::before {
      content: '\201C';
      position: absolute;
      top: -30px;
      left: 20px;
      font-size: 80px;
      color: #FFD166;
      font-family: serif;
      line-height: 1;
    }

    .testimonial-image {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 5px solid white;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      margin-top: -40px;
    }

    .form-control {
      border-radius: 15px;
      padding: 12px 15px;
      font-family: 'Fredoka', sans-serif;
      border: 2px solid #e9ecef;
      transition: all 0.3s;
    }

    .form-control:focus {
      border-color: #4ECDC4;
      box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
    }

    .contact-form-wrapper {
      background: white;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .btn-primary {
      background-color: #FF6B6B;
      border-color: #FF6B6B;
      border-radius: 15px;
      padding: 10px 25px;
      font-weight: 600;
      transition: all 0.3s;
    }

    .btn-primary:hover {
      background-color: #ff5252;
      border-color: #ff5252;
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
    }

    /* Floating shapes decoration */
    .shape {
      position: absolute;
      z-index: -1;
      opacity: 0.5;
    }

    .shape-1 {
      top: 10%;
      left: 5%;
      width: 80px;
      height: 80px;
      background-color: #FFD166;
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      animation: morph 6s linear infinite alternate;
    }

    .shape-2 {
      bottom: 10%;
      right: 5%;
      width: 100px;
      height: 100px;
      background-color: #4ECDC4;
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      animation: morph 8s linear infinite alternate;
    }

    .shape-3 {
      top: 50%;
      right: 10%;
      width: 60px;
      height: 60px;
      background-color: #FF6B6B;
      border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
      animation: morph 10s linear infinite alternate;
    }

    @keyframes morph {
      0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      }

      25% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
      }

      50% {
        border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
      }

      75% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
      }

      100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .hero-carousel .carousel-item img {
        height: 300px;
      }
    }