body { font-family: 'Segoe UI', sans-serif; background:#F4C4B6; }
.hero { height:60vh; background:linear-gradient(45deg,#E15544,#215E56); }
.section-title { color:#215E56; font-weight:bold; }
.btn-primary { background:#E15544; border:none; }
.thankyou { height:100vh; background:linear-gradient(45deg,#E15544,#E37A8B); color:white; }
.message-box { background:white; color:#215E56; padding:30px; border-radius:10px; }
.login-box { display:flex; justify-content:center; align-items:center; height:100vh; }
/* Highlight Important Sections (3 & 4) */

.important-section {
    background: #fdeaea; /* very soft light red */
    border-left: 6px solid #E15544; /* Warm Coral */
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
}
/* =========================
   MOBILE LAYOUT POLISH (FIX)
   ========================= */

@media (max-width: 576px) {

  /* Reduce empty hero space + improve text sizing */
  .hero{
    height: auto !important;
    padding: 48px 14px 72px !important;
  }
  .hero h1{
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
  .hero p{
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Make the form card feel full-width (no skinny center column) */
  .container{
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Reduce top spacing so form feels connected to hero */
  .container.py-5{
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }

  form.card{
    width: 100% !important;
    margin: -36px auto 0 !important; /* pull card up slightly */
    border-radius: 14px !important;
    padding: 18px !important;
  }

  /* Improve readability in the highlighted sections */
  .important-section{
    padding: 16px !important;
    border-left-width: 5px !important;
  }
  .important-section p,
  .important-section label,
  .form-check-label{
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }

  /* Inputs/buttons comfort on small screens */
  input, select{
    font-size: 0.98rem !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .btn{
    padding: 12px 14px !important;
    font-size: 1rem !important;
  }
}