@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

* {
  font-family: 'Sora', sans-serif;
}

.fa, .fas, .far, .fal, .fab, .fa-solid, .fa-brands, .fa-regular {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  font-weight: 900 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p, a, span, li, input, textarea, button {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
}

/* ===== GLOBAL ===== */
body {
  scroll-behavior: smooth;
   background: #f8faff;
}

.contact-page {

  color: #1f2937;
}

/* ===== HERO ===== */
.contact-hero{
  text-align:center;
  margin:50px auto 20px;
}
.contact-hero h1{
  font-size:42px;
  background: #322e85;
  -webkit-background-clip:text;
  color:transparent;
  margin-bottom:10px;
}
.contact-hero p{
  font-size:16px;
  color:#374151;
  line-height:1.6;
}

/* ===== FORM CARD ===== */
.form-wrapper{
  max-width:900px;
  margin:30px auto 80px;
  background: #ffffffbd;
  border-radius:16px;
  padding:40px 30px;
  box-shadow:0 25px 70px rgba(0,0,0,0.12);
  display:flex;
  flex-direction:column;
  gap:30px;
}
form {
  display: flex;
  flex-direction: column;
  gap: 20px; 
}

/* ROWS WITH 2 COLUMNS */
.row {
  display: flex;
  gap: 20px; 
  flex-wrap: wrap;
}

/* EACH FIELD */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px; 
  flex: 1; 
}

/* LABEL */
.form-field label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0; 
}

/* INPUTS, SELECTS, TEXTAREA */
.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  outline:none;
  transition: border 0.3s, box-shadow 0.3s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color:#322e85;
  box-shadow:0 0 6px rgba(50,46,133,0.3);
}

.form-field textarea {
  resize: none;
  min-height:100px;
}

/* SUBMIT BUTTON */
form button {
  padding:12px 25px;
  border:none;
  background:#322e85;
  color:#fff;
  font-weight:600;
  border-radius:25px;
  cursor:pointer;
  transition: background 0.3s, transform 0.3s;
}

form button:hover {
  background:linear-gradient(90deg,#4f46e5,#9333ea,#f43f5e);
  transform:translateY(-2px);
}

.info-below {
  margin-bottom: 10px;
  margin-top: 0px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  gap: 10px;
}

/* First 3 lines */
.info-below span:not(.last-line) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  width: fit-content;
  margin-left: 335px;
}

/* icon fix */
.info-below span svg {
  flex-shrink: 0;
}

.info-below .last-line {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  transform: translateX(20px); 
  margin-top: 8px;
  text-align: center;
}

.g-recaptcha {
  margin: 20px 0;
}

/* RESPONSIVE */
@media(max-width:700px){
  .row {
    flex-direction: column;
  }
}

/* ===== TABLET (769px – 1024px) ===== */
@media (max-width: 1024px) {

  .contact-hero { margin: 40px auto 16px; padding: 0 24px; }
  .contact-hero h1 { font-size: 36px; }
  .contact-hero p  { font-size: 15px; }

  .form-wrapper {
    max-width: 720px;
    padding: 36px 28px;
    margin: 24px auto 60px;
  }

  .info-below span:not(.last-line) {
    margin-left: 200px;
  }
}


/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {

  .contact-hero { margin: 32px auto 14px; padding: 0 20px; }
  .contact-hero h1 { font-size: 30px; }
  .contact-hero p  { font-size: 14.5px; line-height: 1.6; }

  .form-wrapper {
    max-width: 100%;
    margin: 20px 16px 50px;
    padding: 28px 22px;
    border-radius: 14px;
    gap: 22px;
  }

  .row { flex-direction: column; gap: 0; }

  .form-field label { font-size: 13.5px; }

  .form-field input,
  .form-field select,
  .form-field textarea {
    padding: 11px 13px;
    font-size: 13.5px;
    border-radius: 7px;
  }

  form button {
    padding: 11px 22px;
    font-size: 14px;
    width: 100%;
    border-radius: 25px;
  }

  /* INFO BELOW — center everything on mobile */
  .info-below {
    align-items: center !important;
  }

  .info-below span:not(.last-line) {
    margin-left: 0 !important;
    justify-content: center;
    width: 100%;
  }

  .info-below .last-line {
    transform: none !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 13.5px;
  }

  .g-recaptcha {
    transform: scale(0.92);
    transform-origin: left center;
  }
}


/* ===== SMALL MOBILE ===== */
@media (max-width: 600px) {

  .contact-hero { margin: 24px auto 12px; padding: 0 16px; }
  .contact-hero h1 { font-size: 24px; margin-bottom: 8px; }
  .contact-hero p  { font-size: 13.5px; }

  .form-wrapper {
    margin: 16px 12px 40px;
    padding: 22px 16px;
    border-radius: 12px;
    gap: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.09);
  }

  form { gap: 16px; }

  .form-field { gap: 6px; }
  .form-field label { font-size: 13px; }

  .form-field input,
  .form-field select,
  .form-field textarea {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 7px;
  }

  .form-field textarea { min-height: 90px; }

  form button {
    padding: 11px 20px;
    font-size: 13.5px;
  }

  /* reCAPTCHA on small screens */
  .g-recaptcha {
    transform: scale(0.82);
    transform-origin: left center;
    margin: 10px 0 -8px;
  }

  /* info below */
  .info-below { gap: 8px; }
  .info-below span { font-size: 13px; }
  .info-below span svg { width: 16px; height: 16px; }
  .info-below .last-line { font-size: 12.5px; padding: 0 8px; }
}


/* ===== EXTRA SMALL (max-width: 380px) ===== */
@media (max-width: 380px) {

  .contact-hero h1 { font-size: 20px; }
  .contact-hero p  { font-size: 13px; }

  .form-wrapper {
    margin: 12px 8px 32px;
    padding: 18px 14px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    padding: 9px 11px;
    font-size: 12.5px;
  }

  .form-field label { font-size: 12px; }

  form button { font-size: 13px; padding: 10px 18px; }

  .g-recaptcha {
    transform: scale(0.75);
    transform-origin: left center;
    margin: 8px 0 -16px;
  }

  .info-below span { font-size: 12px; }
}