html {
    scroll-behavior: smooth;
  }
  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #dad8cdcc, #dad8cdcc);
    z-index: 1;
  }
  .course-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
  }
  .course-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
  .slide-animation {
    animation: fadeInUp 1s ease-in-out;
  }
  @keyframes fadeInUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .social-icons a {
    transition: transform 0.3s;
  }
  .social-icons a:hover {
    transform: scale(1.2);
  }
  
  @keyframes bounceSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  .animate-bounce-slow {
    animation: bounceSlow 3s infinite;
  }

  @keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  .animate-float-slow {
    animation: floatSlow 6s ease-in-out infinite;
  }

  @keyframes bounceSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }
  .animate-bounce-slow {
    animation: bounceSlow 4s ease-in-out infinite;
  }

  .story-btn {
    padding: .75rem;
  }

  /* mobile (up to 640px): 0.3rem */
  @media (max-width: 640px) {
    .story-btn {
      padding: 0.3rem !important;
    }
  }
#gallery-image {
      transition: transform 1.5s linear;
      transform-style: preserve-3d;
    }
    .classroom {
      width: 80%;
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }