@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');

.ellipse-section {
  display: flex;
  justify-content: center;
  gap: 44px;
  padding: 60px 18px;
  /* background: #f0f9ff; */
  font-family: 'Baloo 2', cursive, Arial, sans-serif;
  color: #2b405d;
  flex-wrap: wrap;
  text-align: center;
}

.ellipse-card {
  position: relative;
  width: 350px;
  padding: 48px 30px 60px 30px;
  border-radius: 65% / 100%;
  background: linear-gradient(135deg, #fefeff 40%, #cae6fc 100%);
  box-shadow: 0 6px 18px rgba(52, 120, 204, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: default;
  user-select: none;
  animation: glowPulse 3.5s ease-in-out infinite alternate;
  transition: transform 0.25s ease;
}

.ellipse-card:hover {
  transform: translateY(-12px) scale(1.06);
  box-shadow: 0 12px 44px rgba(48, 119, 227, 0.44), 0 0 25px #79aaffbb;
}

.culture-ellipse {
  background: linear-gradient(135deg, #fff8fe 45%, #cce7f9 100%);
}

.curriculum-ellipse {
  background: linear-gradient(135deg, #fff9f1 40%, #ffcda6 100%);
  box-shadow: 0 7px 20px rgba(255, 168, 77, 0.25);
}

.ellipse-icon {
  font-size: 4.8rem;
  background: #5c9ded;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  color: white;
  margin: 0 auto 30px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 3px 10px #3c79caaa);
  animation: bounce 3.2s ease infinite;
}

.ellipse-title {
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 18px;
  color: #2b405d;
  text-shadow: 0 2px 5px #abc7f765;
  user-select: text;
}

.ellipse-quote {
  font-style: italic;
  color: #3f63a3;
  font-size: 1.3rem;
  margin-bottom: 28px;
  font-weight: 700;
  user-select: text;
}

.ellipse-desc {
  color: #3a5073;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.64;
  padding: 0 8px;
  user-select: text;
}

/* Animations */
@keyframes glowPulse {
  0% {
    box-shadow: 0 6px 18px rgba(52, 120, 204, 0.14);
  }
  100% {
    box-shadow: 0 20px 58px rgba(48, 119, 227, 0.36), 0 0 30px #79aaffbb;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* Responsive */
@media (max-width: 880px) {
  .ellipse-section {
    flex-direction: column;
    align-items: center;
  }
  .ellipse-card {
    width: 90vw;
    max-width: 400px;
    margin-bottom: 36px;
  }
}