/* ===== COLORS & FONT =====
tagline teal:   #5EA69E
form bg mint:   #d9edeb
button teal:    #5EA69E
footer teal:    #6EAFA6
inputs border:  #d0d7d6
text muted:     #444
*/

:root{
  --tagline: #5BA09F;
  --form-bg: #d9edeb;
  --cta: #5EA69E;
  --cta-hover: #4d958a;
  --footer: #6EAFA6;
  --muted: #656565;
  --input-border: #d0d7d6;
  --white: #ffffff;
  --max-width: 720px;
  --card-radius: 6px;
  --gutter: 20px;
}

/* Global */
*{box-sizing:border-box}
body{
  margin:0;
  font-family: 'Gotham', 'Helvetica Neue', Arial, sans-serif;
  color: #222;
  background: #fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* visually hidden label */
.sr-only{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* top logo spacing */
.page-top{ text-align:center; padding:10px 0 6px; }
.site-logo{ height:44px; }

/* Tagline bar */
.tagline-bar{
  background: var(--tagline);
  color: white;
  text-align:center;
  padding:28px 12px;
}
.tagline-inner{
  font-weight:700;
  letter-spacing:0.6px;
  font-size: 35px;
}
.tagline-sub{
  margin-top:8px;
  font-size: 25px;
  opacity:0.9;
  font-weight:500;
}

/* Main layout */
.main{ padding: 28px 16px 40px; display:flex; justify-content:center; }
.interest-section{ width:100%; max-width:1000px; }

:root{
    --card-bg:#dbeee9;
    --mint-accent:#5EA69E; /* button/bg */
    --input-border:#cfe3df;
    --muted:#48605d;
    --card-radius:8px;
    --max-card-width:780px;
  }

  /* container */
  .form-wrapper-centered {
    display:flex;
    justify-content:center;
    padding:28px 18px;
  }

  .form-card {
    width:var(--max-card-width);
    max-width:calc(100% - 48px);
    background:var(--card-bg);
    border-radius:12px;
    padding:34px 40px;
    box-shadow:0 8px 28px rgba(11,35,33,0.06);
    border:1px solid rgba(0,0,0,0.03);
  }

  .form-card h2{ text-align:center; margin:0; font-size:20px; font-weight:800; color:#0d2a29; }
  .form-card .sub{ text-align:center; margin:8px 0 22px; color:var(--muted); font-size:13px; }

  /* form grid: name+phone row, email row, button row */
  form#interestForm {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    align-items:start;
  }

  /* Input wrapper to hold icon + input */
  .input-with-icon {
    position:relative;
    width:100%;
  }
  .input-with-icon svg {
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    width:16px; height:16px;
    fill: #6b7d7a;
    opacity:0.95;
    pointer-events:none;
  }
  .input-with-icon input,
  .input-with-icon select {
    width:100%;
    padding:10px 12px 10px 38px; /* left padding for icon */
    border-radius:6px;
    border:1px solid var(--input-border);
    background:#fff;
    font-size:13px;
    color:#0d2a29;
    outline:none;
    box-shadow:none;
    -webkit-appearance:none;
  }

  /* Country select is narrower visually but in same grid column as phone input */
  select.country-code {
    padding:10px 8px 10px 12px;
    padding-left: 33px;
    border-radius:6px;
  }

  /* Place country select in first column and phone input in second column,
     but visually we want name to be full width above — we'll span name across columns */
  form#interestForm input[name="last_name"] {
    grid-column: 1 / -1;
    margin-bottom:0;
    padding-left: 35px; /* no icon for name row since we add icon wrapper separately below */
  }

  /* For the Name input with icon we will wrap it in .input-with-icon (see HTML) */
  /* Ensure email spans both columns */
  form#interestForm input[type="email"] {
    grid-column: 1 / -1;
    padding-left:38px; /* email has icon */
  }

  /* Submit button spans both columns and matches input padding */
  form#interestForm button[type="submit"] {
    grid-column: 1 / -1;
    margin-top:12px;
    padding:10px 12px;
    width:68%;           /* visually like screenshot */
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
    border-radius:6px;
    background:var(--mint-accent);
    border:none;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(74,155,147,0.12);
  }

  form#interestForm button[type="submit"]:hover{ transform: translateY(-2px); }

  /* smaller screens: stack inputs */
  @media (max-width:520px){
    form#interestForm { grid-template-columns: 1fr; }
    /* Name/email full width already; make country + phone stack */
    .country-cell, .phone-cell { grid-column:1 / -1; }
    form#interestForm button[type="submit"] { width:100%; }
  }

  /* focus states */
  .input-with-icon input:focus, .input-with-icon select:focus, form#interestForm input:focus {
    border-color: #7ab1a6;
    box-shadow: 0 8px 22px rgba(74,155,147,0.10);
    transform: translateY(-1px);
  }

  /* small RERA text */
  .rera-small { text-align:center; margin-top:18px; font-weight:700; color:#0b2a29; letter-spacing:0.3px; }

  /* visually-hidden label */
  .sr-only{ position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px; }

/* RERA small line under form */
.rera{
  margin-top:12px;
  font-size:15px;
  color: black;
  letter-spacing:0.3px;
  font-weight: bold;
}

/* Footer */
.site-footer{
  background: var(--tagline);
  color: #fff;
  padding: 28px 20px;
  margin-top:36px;
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  text-align:center;
}
.marketed{ font-size:12px; font-weight:700; opacity:0.95; margin-bottom:8px; letter-spacing:0.6px; }
.houzbay-logo{ width:120px; display:block; margin:6px auto 14px; }
.disclaimer{
  max-width:900px;
  margin: 8px auto 10px;
  font-size:11px;
  line-height:1.35;
  opacity:0.95;
}
.rera-bottom{ margin-top:8px; font-size:12px; opacity:0.95; }
.footer-bottom{ margin-top:12px; font-size:11px; opacity:0.9; }
.footer-bottom a{ color: rgba(255,255,255,0.95); text-decoration:underline; }

/* Responsive tweaks */
@media (max-width:720px){
  .two-cols{ flex-direction:column; }
  .country-code{ max-width:100%; }
  .form-card{ padding:20px; }
  .tagline-inner{ font-size:16px; }
  .site-logo{ height:38px; }
}

/* HERO SECTION */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero picture,
.hero img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-img {
    width: 100%;
    height: auto;
}

/* TEXT ON BANNER */
.hero-content {
    position: absolute;
    top: 5%; /* adjust to match screenshot */
    width: 100%;
    text-align: center;
    color: white;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 46px;
    font-weight: 700;
    margin: 0;
}

.hero-content h3 {
    font-size: 20px;
    margin-top: 10px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 30px;
    }

    .hero-content h3 {
        font-size: 16px;
    }

    .hero-content {
        top: 18%;
    }
}