/* ===== Hero Section ===== */
.herov {
  position: relative;
  padding: 220px 20px;
  text-align: center;
  color: #021c29;
  border-radius: 0 0 50% 50% / 10%;
 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.herov h2 {
  font-weight: 900;
  font-size: 48px;
  color: white;
  margin-bottom: 15px;
  text-shadow: 
    0 0 10px rgba(0,129,199,0.9),
    0 0 20px rgba(0,129,199,0.6),
    0 0 30px rgba(0,129,199,0.4);
}

.herov p {
  font-weight: 600;
  font-size: 18px;
  color: #ffffff;
  opacity: 0.9;
  text-shadow: 
    0 0 8px rgba(0,166,255,0.82),
    0 0 15px rgba(0,129,199,0.9);
}



/* ========================================================= */
/* ===================== RESPONSIVE FIX ==================== */
/* ========================================================= */

/* Tablet (768px–1024px) */
@media (max-width: 1024px) {
  .herov {
    padding: 180px 20px;
    border-radius: 0 0 40% 40% / 8%;
  }

  .herov h2 {
    font-size: 40px;
  }

  .herov p {
    font-size: 17px;
  }
}

/* Mobile Large (425px–767px) */
@media (max-width: 767px) {
  .herov {
    padding: 150px 20px;
    border-radius: 0 0 35% 35% / 8%;
  }

  .herov h2 {
    font-size: 32px;
  }

  .herov p {
    font-size: 15px;
    width: 90%;
  }
}

/* Mobile Small (320px–424px) */
@media (max-width: 424px) {
  .herov {
    padding: 130px 20px;
    border-radius: 0 0 30% 30% / 6%;
  }

  .herov h2 {
    font-size: 28px;
    line-height: 1.2;
  }

  .herov p {
    font-size: 14px;
    width: 92%;
  }
}