.icon-wrap svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}
/* Root tokens */
:root{
  --accent: #4663ff;
  --muted: #6b7280;
  --radius: 12px;
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,250,255,0.92));
  --shadow: 0 10px 30px rgba(16,24,40,0.06);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Container for the right column */
#choose-right-01{
  display: flex;
  align-items: stretch;
  height: 75%;
}

/* Card wrapper */
#form-card-01{
  width: 100%;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  border: 1px solid rgba(14,22,40,0.04);
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
#form-card-01:hover{ transform: translateY(-4px); }

/* Form title */
#form-card-title-01{
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: #071033;
}

/* Each form row is a block (one control per row) */
#form-row-name,
#form-row-phone,
#form-row-email,
#form-row-class,
#form-row-message {
  display: block;
  margin-bottom: 14px;
}

/* Shared input + textarea look (target by their specific IDs) */
#input-student-name-01,
#input-phone-01,
#input-email-01,
#input-class-01 {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(14,22,40,0.07);
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  font-size: 1rem;
  outline: none;
  transition: box-shadow .16s ease, border-color .16s ease, transform .06s ease;
  box-shadow: inset 0 -1px 0 rgba(14,22,40,0.02);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #0b1220;
}

/* Placeholder color */
#input-student-name-01::placeholder,
#input-phone-01::placeholder,
#input-email-01::placeholder,
#input-class-01::placeholder {
  color: #9aa4b2;
}

/* Focus states */
#input-student-name-01:focus,
#input-phone-01:focus,
#input-email-01:focus,
#input-class-01:focus,
#textarea-message-01:focus {
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(70,99,255,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translateY(-1px);
}

/* Textarea styling by ID */
#textarea-message-01{
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(14,22,40,0.07);
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  font-size: 1rem;
  min-height: 140px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(14,22,40,0.02);
  transition: box-shadow .16s ease, border-color .16s ease, transform .06s ease;
}

/* Submit button & CTA */
#form-cta-01{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top: 8px;
}
#submit-btn-01{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 3px !important;
  border-radius: 10px;
  background: linear-gradient(90deg,var(--accent), #2b53ff);
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(70,99,255,0.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
#submit-btn-01:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px rgba(70,99,255,0.18); }

/* Form hint */
#form-hint-01{
  color: var(--muted);
  font-size: 0.82rem;
  margin-left: auto;
}

/* Visually hidden helpers (labels) */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Error state helpers (toggle .error on the element via JS or server) */
#input-student-name-01.error,
#input-phone-01.error,
#input-email-01.error,
#input-class-01.error,
#textarea-message-01.error {
  border-color: #ff6b6b;
  box-shadow: 0 10px 30px rgba(255,107,107,0.08);
}

/* Responsive: stack nicely on small screens */
@media (max-width: 880px){
  #choose-right-01{ width: 100%; }
  #form-card-01{ padding: 16px; }
  #form-hint-01{ margin-left: 0; display:block; margin-top:8px; }
}

/* make each form-row a single column */
.form-row{
  display: block;
  margin-bottom: 14px;
}

/* input base */
.form-input,
.form-textarea{
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(14,22,40,0.07); /* subtle border */
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  font-size: 1rem;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .08s ease;
  box-shadow: inset 0 -1px 0 rgba(14,22,40,0.02);
  /* more prominent look */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* optional subtle left border accent */
.form-input::placeholder,
.form-textarea::placeholder{
  color: #9aa4b2;
}

/* focus state (keyboard & mouse) */
.form-input:focus,
.form-textarea:focus{
  border-color: rgba(70,99,255,0.95);
  box-shadow: 0 8px 30px rgba(70,99,255,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translateY(-1px);
}

/* larger input for phone or email if needed (example) */
.form-input[type="tel"],
.form-input[type="email"]{
  letter-spacing: 0.2px;
  font-weight: 500;
}

/* textarea styling */
.form-textarea{
  min-height: 140px;
  resize: vertical;
  line-height: 1.45;
}

/* error (add server-side JS to toggle) */
.form-input.error,
.form-textarea.error{
  border-color: #ff7a7a;
  box-shadow: 0 6px 18px rgba(255, 122, 122, 0.08);
}

/* optionally tighten vertical spacing of CTA */
.form-cta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top: 8px;
}

:root{
  --bg-grad-1: linear-gradient(135deg, rgba(56,128,255,0.12), rgba(102, 102, 255,0.06));
  --accent: #4663ff;
  --muted: #6b7280;
  --card-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.45);
  --radius: 14px;
  --shadow: 0 8px 30px rgba(16,24,40,0.08);
  --map-height: 260px; /* <-- adjust this to change iframe height */
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.contact-section{
  padding: 56px 20px;
  background: linear-gradient(180deg,#f6f9ff 0%, #ffffff 40%);
  display: block;
}

.section-title{
  text-align: center;
  font-size: 1.6rem;
  margin: 0 0 28px;
  color: #0f172a;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* Container: two columns; all children stretch to equal heights */
#contact-container-01.contact-container{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;           /* ensures grid items stretch vertically */
  grid-auto-rows: 1fr;            /* forces rows to equal height when needed */
}

/* Left column holds map + contact stacked */
.left-column{
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  width: 510px;
}

/* Shared card base */
.card{
  border-radius: var(--radius);
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(249,250,255,0.85));
  box-shadow: var(--shadow);
  border: 1px solid rgba(14,22,40,0.04);
}

/* Map card specifics */
.map-column .card-title{
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #071033;
}

.map-address{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Make iframe responsive and set height via CSS var */
.map-iframe{
  width: 100%;
  height: var(--map-height);
  border: 0;
  border-radius: 12px;
  display:block;
}

/* Contact info card */
#contact-info-01.contact-info{
  display:flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  /* make this card stretch to match form-card height */
  flex: 1 1 auto;
}

/* contact-line & icon */
.contact-line{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  color: #0b1220;
  font-size: 1rem;
}

.icon-wrap{
  width:44px;
  height:44px;
  display:inline-grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(70,99,255,0.08), rgba(56,128,255,0.04));
  color: var(--accent);
  border-radius: 10px;
  font-size: 1rem;
  box-shadow: 0 6px 18px rgba(70,99,255,0.04);
}

/* smaller text block next to icon */
.contact-text-block{ display:flex; flex-direction:column; gap:2px; }
.contact-text{ color:#0b1220; font-weight:700; font-size:0.98rem; }
.contact-subtext{ color:var(--muted); font-size:0.9rem; font-weight:500; }

/* other lines reuse contact-line style */
.contact-link{
  color: #0b1220;
  text-decoration: none;
  font-weight: 600;
}
.contact-link:hover{ text-decoration: underline; color: var(--accent); }

.contact-extra{
  margin-top: auto;
  padding-top: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Form (right) */
#form-card-01.form-card{
  border-radius: var(--radius);
  padding: 20px;
  transition: transform .28s ease, box-shadow .28s ease;
  display:flex;
  flex-direction:column;
}

/* Ensure form-card grows to match left contact card */
.choose-right{ display:flex; align-items:stretch; height:100%; }

/* keep the hover lift */
#form-card-01.form-card:hover{
  transform: translateY(-4px);
}

/* Rows & inputs */
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-input, .form-textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(14,22,40,0.06);
  background: #fff;
  font-size: 0.96rem;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  box-shadow: inset 0 -1px 0 rgba(14,22,40,0.02);
}

.form-input:focus, .form-textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 6px 22px rgba(70,99,255,0.08);
  transform: translateY(-1px);
}

.form-textarea{
  min-height:110px;
  resize: vertical;
}

/* CTA */
.form-cta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top: 6px;
}

.btn-submit{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 3px !important;
  border-radius: 10px;
  background: linear-gradient(90deg,var(--accent), #2b53ff);
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(70,99,255,0.18);
}

.form-hint{
  color: var(--muted);
  font-size: 0.82rem;
  margin-left: auto;
}

/* Accessibility helper */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 880px){
  #contact-container-01.contact-container{
    grid-template-columns: 1fr;
  }
  .left-column{ order: 0; }
  .form-row{ grid-template-columns: 1fr; }
  .form-hint{ margin-left: 0; display: block; margin-top: 8px; }
  /* reduce map height a bit on small screens */
  :root{ --map-height: 200px; }
}