/* Custom styles and animations */

/* Background gradient for the hero section */


/* Modal styling */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 90%;
  width: 450px;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.5s ease-in-out;
}
.modal-container.opacity-100 .modal-content {
  transform: scale(1);
}

/* Hover effects for course cards */
.card-course img {
  transition: transform 0.5s ease;
}

.card-course:hover img {
  transform: scale(1.1);
}

/* Keyframe animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-5px);
  }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.animate-slide-in {
  animation: slideIn 1s ease-out forwards;
}

.animate-bounce-in {
  animation: bounceIn 1s ease-in-out;
}

/* Custom styles and animations */

/* Base fonts for the "cartoony" feel */
.font-bubblegum {
  font-family: 'Bubblegum Sans', cursive;
}
.font-fredoka {
  font-family: 'Fredoka', sans-serif;
}

/* Color Palette */
.bg-beige {
  background-color: #f9f5ed; /* Light beige */
}
.bg-pink-100 {
  background-color: #fce7f3; /* Very light pink */
}
.bg-pink-600 {
  background-color: #db2777; /* Deep pink */
}
.bg-pink-700 {
  background-color: #be185d; /* Even deeper pink for hover */
}
.bg-pink-900 {
  background-color: #831843; /* Darker pink for text and footer */
}
.text-pink-900 {
  color: #831843;
}
.text-pink-800 {
  color: #a42c67;
}
.text-pink-600 {
  color: #db2777;
}
.border-pink-200 {
  border-color: #fbcfe8;
}
.border-pink-700 {
  border-color: #be185d;
}

/* Background gradient for the hero section */
.bg-gradient-pink {
  background: linear-gradient(135deg, #fce7f3 0%, #fa709a 100%);
}

/* Hover effects for course cards */
.card-course img {
  transition: transform 0.5s ease;
}

.card-course:hover img {
  transform: scale(1.1);
}

/* Keyframe animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-5px);
  }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.animate-slide-in {
  animation: slideIn 1s ease-out forwards;
}

.animate-bounce-in {
  animation: bounceIn 1s ease-in-out;
}