body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to right, #E2F3FB, #F4F5FF);
}

/* Accent Color */
.text-accent {
  color: #2196F3;
}

/* Inputs */
.custom-input {
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 10px 12px;
  font-size: 14px;
}

/* Sign Up Button */
.btn-signup {
  height:32px;
  width: 75px;
  background-color: #009688;
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  border-radius: 25px;
  padding: 0;
  transition: 0.2s;
}

.btn-signup:hover {
  background-color: #00796b;
  color: #fff;
}

/* Google Button */
.custom-google {
  background-color: #fff;
  border-radius: 6px;
  font-weight: 500;
  color: #444;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

.custom-google img {
  vertical-align: middle;
}

/* Apple Button */
.custom-apple {
  background-color: #fff;
  border-radius: 6px;
  font-weight: 500;
  color: #444;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

.custom-apple img {
  vertical-align: middle;
}

.custom-row {
  width: 1123px;
  height: 767px;
  margin: 0 auto; 
}

.heading {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  margin: 0;
}

.heading .bold {
  font-weight: 800;   /* Bold */
}

.heading .light {
  font-weight: 100;   /* Light */
}

.heading .accent {
  color: #05847D;
}

.subtext {
  font-family: 'Inter', sans-serif;
  font-weight: 100;
  font-size: 20px;
  color: #2c2c2c;
  line-height: 1.4;
  margin-top: 12px;
}

label {
  display: block;
  margin-bottom: 0.7rem;
}

.copy{
  color: #6e6e6e;
  margin-top: 80px;
  font-size: 12px;
}

/* Checkbox tick color */
.form-check-input:checked {
  background-color: #00796b;
  border-color: #00796b;
}

/* --------- Tablet (768px to 1023px) --------- */
@media (max-width: 1023px) {

    .container-fluid {
    padding: 20px 10px; /* top-bottom space, reduce left-right space */
  }

  .custom-row {
    width: 90%;
    height: auto;
  }

  .heading {
    font-size: 20px;
  }

  .subtext {
    font-size: 16px;
  }

  .copy {
    margin-top: 40px;
    font-size: 11px;
  }

  .illustration img {
    margin: 0 auto;
    display: block;
    max-width: 75%;
  }

    .copy {
    margin-top: 30px;
    font-size: 11px;
    text-align: center;
  }

    #signupForm .row .col {
    margin-bottom: 1rem;
  }

}

/* --------- Mobile (≤767px) --------- */
@media (max-width: 767px) {
  .container-fluid {
    padding: 40px 10px !important;
  }

  .custom-row {
    flex-direction: column;
    width: 94% !important;
    height: auto;
    border-radius: 6px;
    margin: 0 auto;
  }

  /* Left section (text + image) */
  .col-md-6 {
    padding: 20px;
    text-align: center;
    margin-left: 22px;
  }

  .heading {
    font-size: 18px;
  }

  .subtext {
    font-size: 14px;
  }

  .illustration img {
    margin: 0 30px !important;
    display: block;
    max-width: 60%;
  }

  .copy {
    margin-top: 20px;
    font-size: 10px;
    text-align: center;
    margin-left: 14px;
  }

  /* Right section (form) */
  .col-md-5 {
    width: 100%;
    padding: 20px;
  }

  /* Stack first/last name one by one */
  #signupForm .row .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  

  label {
    font-size: 12px;
  }

  .custom-input {
    font-size: 13px;
    padding: 8px 10px;
  }

  .btn-signup {
    width: 100%;
    height: 36px;
    font-size: 13px;
  }

  .custom-google,
  .custom-apple {
    font-size: 12px;
    padding: 8px;
  }
}