/* ===============================
   GLOBAL + UTILITY CLASSES
=================================*/

#two-column-section {
  padding-left: 5%;
  padding-right: 5%;
}

.internal .content {
  padding: 0; /* Removes space below header */
}

.p-left-98 {
  padding-left: 98px !important;
}

.margin-auto > .tymbrel-col {
  margin: auto !important;
}

.text-white {
  color: #ffffff !important;
}

.bg-black {
  background: #000000 !important;
}

.bg-blue {
  background: #5F97D3 !important;
}

.padding-remove .tymbrel-col {
  padding: 0 !important;
}

.tymbrel-row:not(.cmsi-layout-container)  {
  margin: 0 !important;
}


/* ===============================
   HERO / TWO-COL BANNER SECTION
=================================*/

.tymbrel-row.two-col-banner {
  position: relative;
  width: 100%;
  background: url('https://www.cloverdalecrossingdental.com/files/landing/1400x600.svg') center center / cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding-top: 94px;
  padding-bottom: 36px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.tymbrel-row.two-col-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.tymbrel-row.two-col-banner > .tymbrel-col {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 50%;
}

.column-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  color: #fff;
  padding-right: 2rem;
}

.column-right {
  background: #fff;
  color: #000;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cms-button-primary,
.event-submit-btn-606,
.btn-black {
  background: #5F97D3 !important;
  color: #fff !important;
  cursor: pointer;
  text-decoration: none;
}

/* ===============================
   SECOND TWO-COL BANNER SECTION
=================================*/
.tymbrel-row.two-col-banner-2 {
  width: 100%;
  background: none;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding-top: 94px;
  padding-bottom: 36px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

.tymbrel-row.two-col-banner-2 > .tymbrel-col {
  flex: 1;
  max-width: 50%;
}

@media (min-width: 1400px) {
  .tymbrel-row.two-col-banner-2 {
    max-width: 1920px;
    margin: 0 auto;
  }
  .tymbrel-row.two-col-banner-2 > .tymbrel-col {
    max-width: 720px;
  }
}

.column-left-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  color: #000;
  padding-right: 2rem;
}

.column-right-2 {
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.column-right-2 input[type="text"],
.column-right-2 input[type="email"],
.column-right-2 input[type="tel"] {
  width: 100%;
  padding: 0.7rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.btn-black-2 {
  background: #000 !important;
  color: #fff !important;
  border: none;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .tymbrel-row.two-col-banner-2 {
    flex-direction: column;
    align-items: center;
    padding: 64px 24px;
  }
  .tymbrel-row.two-col-banner-2 > .tymbrel-col {
    max-width: 100%;
  }
  .column-left-2,
  .column-right-2 {
    padding: 1.5rem 1rem;
  }
  .column-right-2 {
    margin-top: 2rem;
  }
}

/* ===============================
   FORM STYLING — [FORMS]
   =============================== */

/* === FORM [FORMS] TIGHT COLUMN SPACING === */
#ifg-form-container form {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px; /* small row & column gap */
  align-items: flex-start;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Remove default spacing from form groups & Bootstrap grid */
#ifg-form-container .form-group,
#ifg-form-container .col-md-10,
#ifg-form-container .col-md-2 {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Two-column layout for first four fields */
#ifg-form-container #ifg-element-div-0,
#ifg-form-container #ifg-element-div-1,
#ifg-form-container #ifg-element-div-2,
#ifg-form-container #ifg-element-div-3 {
  flex: 1 1 calc(50% - 6px);
  min-width: 220px;
}

/* Full-width for remaining fields */
#ifg-form-container #ifg-element-div-4,
#ifg-form-container #ifg-element-div-5,
#ifg-form-container .captcha-recaptcha {
  flex: 1 1 100%;
  width: 100%;
}

/* Form controls */
#ifg-form-container input.form-control,
#ifg-form-container select.form-control,
#ifg-form-container textarea.form-control {
  width: 100%;
  height: 40px; /* ⬅️ added height */
  padding: 1px 1px; /* ⬅️ slightly more padding */
  border: 1px solid #333;
  background: #fff;
  color: #000;
  font-size: 15px;
  box-sizing: border-box;
  margin-bottom: 0 !important;
  border-radius: 0;
}


#ifg-form-container textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

/* --- Force CAPTCHA + Submit to stack vertically --- */
#ifg-form-container .captcha-recaptcha,
#ifg-form-container input[type="submit"],
#ifg-form-container [id^="f1_upload_process-"] {
  display: block !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  box-sizing: border-box;
}



/* --- Hide the loader SVG by default --- */
#ifg-form-container [id^="f1_upload_process-"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* --- reCAPTCHA spacing --- */
#ifg-form-container .captcha-recaptcha {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
}

/* --- Submit button styling --- */
#ifg-form-container input[type="submit"] {
  height: 52px !important;
  background: #5F97D3;
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

#ifg-form-container input[type="submit"]:hover {
  background: #1976BB;
}

/* === Stack captcha + all following form groups (loader, submit) === */
/* Make the captcha row full width */
#ifg-form-container #ifg-element-div-6 {
  flex: 0 0 100% !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 6px 0 !important;
  padding: 0 !important;
}

/* Make any following form-group(s) full width too (loader, submit, etc) */
#ifg-form-container #ifg-element-div-6 ~ .form-group {
  flex: 0 0 100% !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 6px 0 !important;
  padding: 0 !important;
}

/* Ensure inner bootstrap column doesn't limit width */
#ifg-form-container #ifg-element-div-6 .col-md-10,
#ifg-form-container #ifg-element-div-6 ~ .form-group .col-md-10 {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Keep the loader hidden until JS shows it */
#ifg-form-container [id^="f1_upload_process-"] {
  display: none !important;
}

/* Ensure submit button fills its parent full-width */
#ifg-form-container #ifg-element-div-6 ~ .form-group input[type="submit"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive stacking */
@media (max-width: 768px) {
  #ifg-form-container #ifg-element-div-0,
  #ifg-form-container #ifg-element-div-1,
  #ifg-form-container #ifg-element-div-2,
  #ifg-form-container #ifg-element-div-3 {
    flex: 1 1 100%;
  }
}

/* ---------- FORCE Preferred Time dropdown to full width (strong override) ---------- */

/* target wrapper + inner column + the select itself */
#ifg-form-container #ifg-element-div-4,
#ifg-form-container .ifg-sort#ifg-element-div-4,
#ifg-form-container #ifg-element-div-4 .col-md-10,
#ifg-form-container #ifg-element-div-4 select.form-control,
#ifg-form-container select[name^="ifg-formfield-"][id^="ifg-formfield-"][id$="-4"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* ensure inner column doesn't constrain (extra safeguard) */
#ifg-form-container #ifg-element-div-4 .col-md-10 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* make select visually fill */
#ifg-form-container #ifg-element-div-4 select.form-control {
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ===============================
   RESPONSIVE
=================================*/

@media (max-width: 1024px) {
  .tymbrel-row.two-col-banner {
    flex-direction: column;
    align-items: center;
    padding: 64px 24px;
  }
  .tymbrel-row.two-col-banner > .tymbrel-col {
    max-width: 100%;
  }
  .column-left,
  .column-right {
    padding: 1.5rem 1rem;
  }
  .column-right {
    margin-top: 2rem;
  }
}

  /* ===============================
   Intro Section
=================================*/
  
img.intro-img {
    height: 820px !important;
    object-fit: cover !important;
    width: 100%;
}

/* ===============================
   INTRO SECTION
=================================*/
.intro-section .tymbrel-col {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* RESPONSIVE */

/* Tablet */
@media (max-width: 1024px) {
    .tymbrel-row.two-col-banner > .tymbrel-col, .tymbrel-row.two-col-banner-2 > .tymbrel-col {
        
        width: 100% !important;
    }
    img {
        width: 100% !important;
    }
    
    .p-left-98 {
        padding-left: 35px !important;
    }
    .tymbrel-row.two-col-banner-2 {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    .tymbrel-col-6 {
        width: 100% !important;
    }
    #featured-section {
        padding-top: 90px;
        padding-bottom: 40px;
    }
    
    #blue-section {
        padding-top: 80px;
        padding-bottom: 0;
    }
    
    #cta-section {
        padding-top: 0 !important;
        padding-bottom: 60px;
    }
    #map-section {
        padding-top: 30px;
        padding-left: 0px !important;
        padding-right: 0px;
    }
    .map-sec-left {
        margin-bottom: 48px !important;
        padding-left: 30px;
        padding-right: 30px;
    }
    #cta-form-wrap, #header-form-wrap {
        padding: 48px;
    }
}

@media only screen and (max-width: 767px) {
    h2 {
        font-size: 32px !important;
        line-height: 42px !important;
    }
    #hero-section {
        padding-top: 0 !important;
        padding-bottom: 60px;
    }
    .hero-section__left {
        padding-bottom: 32px !important;
    }
    .tymbrel-col-6 {
        padding-bottom: 32px !important;
    }
    #cta-form-wrap, #header-form-wrap {
        padding: 24px !important;
    }
    br {
        display: none;
    }
    .tymbrel-row.two-col-banner-2, .tymbrel-col.tymbrel-col-6 {
        padding-top: 0;
        padding-bottom: 0;
    }
    img.intro-img {
        height: 300px !important;
    }
    .tymbrel-col.tymbrel-col-6 {
        padding-bottom: 0 !important;
    }
    #form-left-section {
        padding-bottom: 40px !important;
    }
    #featured-section {
        padding-top: 60px;
        padding-bottom: 50px;
    }
    .featured-section__left {
        margin-bottom: 32px !important;
    }
    #yellow-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .blue-section__left {
        margin-bottom: 32px !important;
    }
    .map-sec-left .row {
        flex-flow: column !important;
        margin-bottom: 32px;
    }
    .cta-title {
    font-size: 20px;
}
}