.elementor-2821 .elementor-element.elementor-element-ba345ef{--display:flex;}/* Start custom CSS for html, class: .elementor-element-831deeb *//* --- WHY US PAGE WITH MINIMAL GAP --- */
.why-us-graphic {
  font-family:'Roboto',sans-serif;
  color:#1F2A37;
  overflow:hidden;
}

/* HERO SECTION */
.hero-section {
  position: relative;
  text-align: center;
  padding:80px 20px 20px 20px; /* bottom reduced to 20px */
  background: linear-gradient(135deg,#F9FAFB,#E7EAF0);
  overflow:hidden;
}

.hero-content h1 {
  font-family:'Inter',sans-serif;
  font-size:2.8rem;
  position:relative;
  display:inline-block;
}

.underline {
  display:block;
  height:3px;
  width:0;
  background:#142B4F;
  position:absolute;
  bottom:-5px;
  left:0;
  animation:underlineDraw 2s forwards;
}

@keyframes underlineDraw { 0%{width:0;}100%{width:100%;} }

/* ICON ROW */
.icon-row {
  display:flex;
  justify-content:center;
  gap:20px; /* reduced spacing between icons */
  margin:15px 0 10px; /* tighter margin */
}

/* HERO BUTTONS */
.hero-buttons {
  margin-bottom:10px; /* minimal bottom spacing */
}

.btn {
  background:#F9FAFB;
  color:#1F2A37;
  border:2px solid #142B4F;
  border-radius:12px;
  padding:12px 28px;
  text-decoration:none;
  font-weight:600;
  display:inline-block;
  transition:all 0.4s ease;
}

.btn.primary-btn:hover {
  transform:scale(1.05);
  box-shadow:0 0 15px rgba(139,197,63,0.4);
  border-radius:50px;
}

.btn.text-btn:hover { text-decoration:underline; }

/* PHILOSOPHY SECTION */
.philosophy-section {
  text-align:center;
  max-width:700px;
  margin:10px auto 15px; /* tightened top & bottom drastically */
  padding:0 10px;
  opacity:0;
  transform:translateY(10px);
  transition: all 1s ease;
}

.philosophy-section.fade-up { opacity:1; transform:translateY(0); }

.divider {
  width:60px;
  height:2px;
  background:#8BC53F;
  margin:10px auto; /* reduced */
  transform:scaleX(0);
  animation:dividerAnim 1s forwards 0.5s;
}

@keyframes dividerAnim { 0%{transform:scaleX(0);}100%{transform:scaleX(1);} }

/* DIFFERENCE CARDS */
.difference-section {
  margin-top:20px;   /* reduced more */
  margin-bottom:40px;
}

.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
  margin-top:15px;
}

/* CARDS */
.card {
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(10px);
  padding:25px;
  border-radius:20px;
  text-align:center;
  transition:all 0.4s;
}

.card:hover {
  transform:translateY(-8px) scale(1.02);
  border:2px solid #8BC53F;
}

.card .icon {
  font-size:2rem;
  transition:transform 0.4s;
}

.card:hover .icon { transform:rotate(10deg) scale(1.1); }

/* TEACHING APPROACH */
.teaching-approach-section {
  margin-top:40px;
  margin-bottom:50px;
}

.process-steps {
  display:flex;
  gap:25px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:30px;
}

.step {
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#fff;
  padding:20px;
  border-radius:16px;
  position:relative;
  transition:transform 0.3s;
}

.step .circle {
  width:35px;
  height:35px;
  border-radius:50%;
  background:#8BC53F;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

.step.active { transform:scale(1.05); }

/* LEARNING ENVIRONMENT */
.learning-environment-section {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  padding:50px 20px;
  flex-wrap:wrap;
}

.env-graphic {
  width:300px;
  height:300px;
  background:linear-gradient(135deg,#8BC53F,#4A7CC7);
  border-radius:50%;
  animation:morph 15s infinite alternate;
}

@keyframes morph {
  0%{border-radius:50% 40% 60% 50%;}
  50%{border-radius:60% 50% 40% 50%;}
  100%{border-radius:50% 50% 50% 50%;}
}

/* FINAL CTA */
.final-cta-section {
  text-align:center;
  background:#142B4F;
  color:#fff;
  padding:60px 20px;
  position:relative;
  overflow:hidden;
}

.wave-divider {
  width:100%;
  height:60px;
  background:linear-gradient(90deg,#8BC53F,#4A7CC7);
  clip-path:polygon(0 20%,100% 0,100% 100%,0 100%);
  margin-bottom:40px;
}

.cta-buttons .btn { margin:10px; }

@keyframes pulseGlow {
  0%,100%{box-shadow:0 0 15px rgba(139,197,63,0);}
  50%{box-shadow:0 0 20px rgba(139,197,63,0.4);}
}

.primary-btn { animation:pulseGlow 8s infinite; }

/* MOBILE */
@media(max-width:768px){
  .hero-section { padding-top:60px; padding-bottom:15px; }
  .icon-row{flex-direction:column; gap:15px; margin:10px 0;}
  .process-steps{flex-direction:column;}
  .learning-environment-section{flex-direction:column;}
  .hero-content h1{font-size:2rem;}
  .philosophy-section{margin:10px auto;}
  .difference-section{margin-top:15px;margin-bottom:35px;}
  .teaching-approach-section{margin-top:20px;margin-bottom:40px;}
  .learning-environment-section{padding-top:40px;padding-bottom:40px;gap:30px;}
  .final-cta-section{padding-top:50px;padding-bottom:50px;}
}/* End custom CSS */