/* ==========================================================
   BOOK A CALL  (form layout · Calendly)
   ========================================================== */

.formDiv{
  width: 100%;
  background-color: #ff3b1f;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form{
  background-color: #f0ece2;
  width: 99.5%;

}
.formHeading p{
  font-family: 'font1medium';
  font-size: 4rem;
}
.formHeading{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 2vw;
  padding-top: 5vh;
  border-bottom: 1px solid black;
}

.mainForm{
  width: 100%;
  display: flex;
  margin-bottom: 5vh;
  box-sizing: content-box;
  border-bottom: 1px solid black;
}
.formInfo{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.contactForm{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-right: 2vw;
}
.formInput{
  background-color: #ff3b1f;
  width: 95%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.formInfo{
  padding: 3rem;
}
.formInfo h3{
  font-family: 'font1medium';
  font-size: 3rem;
  line-height: 1;
  width: 70%;
  text-transform: uppercase;
  margin-bottom: 3vh;
}
.formInfo p{
  font-family: 'poppins';
  font-size: 1rem;
  width: 60%;
  line-height: 1.2;
}
.btnFormInfo{
  height: 100%;

}
.btnFormInfo p{
  font-family: 'poppins';
  font-size: 0.9rem;
  background-color: #ff3d1f;
  color: #f7f7ea;
  display: inline;
  padding: 1vh 1vw;
  border-radius: 2px
}
/* RED CALENDLY CONTAINER */

.formInput {
  width: 100%;

  background-color: #ff3b1f;

  padding: 2rem;

  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: auto;
}


/* CALENDLY */

.formInput .calendly-inline-widget {
  width: 100% !important;
  min-width: 0 !important;

  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  flex-shrink: 0;

  box-sizing: border-box;
}


/* ==========================================================
   TABLET + PHONE  (≤900px)

   The desktop layout is a two-column split whose height is
   locked to the viewport (js/form.js). Below 900px the two
   halves stack, the height lock is released, and the
   Calendly widget gets its own comfortable height:

     ( LET's TALK )            heading, left aligned
     ───────────────────────
     [ BOOK A CALL ]           label
     TALK TO AN EXPERT,        headline
     NOT SALES
     intro copy…
     ┌─────────────────────┐
     │ red frame           │
     │  ┌───────────────┐  │   Calendly – fixed 700px tall,
     │  │   calendar    │  │   scrolls inside itself
     │  └───────────────┘  │
     └─────────────────────┘
   ========================================================== */

@media (max-width: 900px) {

  .formHeading {
    justify-content: flex-start;
    padding: 5vh 5vw 2.5vh;
  }

  .formHeading p {
    font-size: clamp(2rem, 7.4vw, 3rem);
    line-height: 1;
  }

  /* release the viewport-height lock set by form.js */
  .mainForm {
    flex-direction: column;
    height: auto !important;
    margin-bottom: 0;
  }

  .formInfo {
    width: 100%;
    justify-content: flex-start;
    padding: 2rem 5vw 1.75rem;
  }

  .btnFormInfo {
    height: auto;
    margin-bottom: 1.1rem;
  }

  .formInfo .btnFormInfo p {
    display: inline-block;
    width: auto;
    max-width: none;
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    line-height: 1;
  }

  .formInfo h3 {
    width: 100%;
    max-width: 16em;
    font-size: clamp(1.8rem, 6.6vw, 2.7rem);
    margin-bottom: 1.1rem;
  }

  .formInfo p {
    width: 100%;
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  .contactForm {
    width: 100%;
    margin: 0;
    padding: 0 5vw 2rem;
    align-items: stretch;
  }

  .formInput {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0.9rem;
    overflow: hidden;
  }

  .formInput .calendly-inline-widget {
    height: 700px !important;
    min-height: 700px !important;
  }
}


/* =========================
   PHONE  (≤600px)
========================= */

@media (max-width: 600px) {

  .formHeading {
    padding: 4.5vh 5vw 2vh;
  }

  .formHeading p {
    font-size: clamp(1.7rem, 8.4vw, 2.2rem);
  }

  .formInfo {
    padding: 1.6rem 5vw 1.4rem;
  }

  .formInfo h3 {
    font-size: clamp(1.55rem, 7.4vw, 2rem);
  }

  .formInfo p {
    font-size: 0.92rem;
  }

  /* let the calendar use almost the full screen width */
  .contactForm {
    padding: 0 2.5vw 2.5vw;
  }

  .formInput {
    padding: 8px;
  }

  .formInput .calendly-inline-widget {
    height: 680px !important;
    min-height: 680px !important;
  }
}