/* HERO SECTION */
.vd--hero {
  position: relative;
  z-index: 1;
  height: 600px;
  overflow: hidden;
}

.vd--hero [style*="background-image"] {
  background-position: left center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.vd--hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Hero gradient overlay */
.vd--hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Hero Text positioning  */
.vd--hero .richtext {
  max-width: 450px;
  margin: 80px auto 0;
  text-align: center;
  z-index: 3;
}

.vd--hero h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: white;
  font-size: 3rem;
}

/* Hero Card image */
.vd--card-image {
  width: 40%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* CARD SECTION */
.vd--card-overlap {
  position: relative;
  z-index: 2;
  margin-top: -180px;
  text-align: center;
  width: 100%;
}

/* CARD SECTION BOTTOM */
.vd--card2-overlap {
  position: relative;
  z-index: 1;
  margin-bottom: -80px;
  text-align: center;
  width: 100%;
}

/* Card image Section Bottom */
.vd--card2-image {
  width: 40%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
}

/* Ensure content below has a lower z-index */
.content-below {
  position: relative;
  z-index: 0;
}

/* Vertical centering of Grids */
.vd--children-centered [class*="col-md-"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 100px;
}

.vd--children-centered [class*="col-md-"] .image,
.vd--children-centered [class*="col-md-"] .richtext,
.vd--children-centered [class*="col-md-"] .button {
  width: 100%;
}

.vd--children-centered .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Popup styling */
.vd--pop-up,
.modal .vd--pop-up,
.modal-interstitial .vd--pop-up,
.popup-overlay .vd--pop-up {
  z-index: 5;
}

.vd--pop-up .row,
.modal .vd--pop-up .row,
.modal-interstitial .vd--pop-up .row,
.popup-overlay .vd--pop-up .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}

.vd--pop-up [class*="col-md-"],
.modal .vd--pop-up [class*="col-md-"],
.modal-interstitial .vd--pop-up [class*="col-md-"],
.popup-overlay .vd--pop-up [class*="col-md-"] {
  display: block !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
  min-height: auto !important;
  float: left !important;
}

.vd--pop-up .col-md-4 {
  width: 33.333333% !important;
}

.vd--pop-up .col-md-6 {
  width: 50% !important;
}

.vd--pop-up .col-md-12 {
  width: 100% !important;
}

/* Offset classes for popup */
.vd--pop-up .col-md-offset-2 {
  margin-left: 16.666667% !important;
}

/* Responsiveness */
@media (max-width: 768px) {
  .vd--hero {
    height: 500px;
  }
  
  .vd--hero [style*="background-image"],
  .vd--hero .card-img-bg {
    background-position: -80px center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  
  .vd--hero .richtext {
    margin-top: 28px;
  }
  
  .vd--card-overlap {
    margin-top: -160px;
  }
	
  .vd--children-centered [class*="col-md-"] {
    display: block !important;
    flex-direction: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
    min-height: initial !important;
  }
  
  .vd--children-centered .row {
    display: block !important;
    flex-wrap: initial !important;
    align-items: initial !important;
  }
  
  .vd--children-centered [class*="col-md-"] .image,
  .vd--children-centered [class*="col-md-"] .richtext,
  .vd--children-centered [class*="col-md-"] .button {
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  .vd--card2-overlap {
    margin-bottom: -50px;
  }

   /* Scrollable Modal */
  .modal.modal-screen, 
  .modal-interstitial, 
  .popup-overlay {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 60px) !important;
    top: 60px !important;
    bottom: 0 !important;
    position: fixed !important;
    display: block !important;
    align-items: flex-start !important;
  }
  
  /* Add padding to the top of the modal content */
  .modal .dls-white-bg,
  .popup-overlay .dls-white-bg {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }
  
  /* Ensure the heading at the top is visible */
  .vd--pop-up .heading-6-g,
  .vd--pop-up h3,
  .vd--pop-up h2,
  .vd--pop-up h1 {
    margin-top: 15px !important;
    display: block !important;
  }
  
  /* Adjust the first row to ensure it's not cut off */
  .vd--pop-up .row:first-child {
    padding-top: 15px !important;
  }
  
  /* Force single column layout */
  .vd--pop-up .row {
    display: block !important;
  }
  
  /* Columns full width */
  .vd--pop-up [class*="col-md-"],
  .vd--pop-up .col-md-4,
  .vd--pop-up .col-md-6,
  .vd--pop-up .col-md-offset-2,
  .vd--pop-up .col-md-offset-0 {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
    display: block !important;
  }
  
  /* Center all content */
  .vd--pop-up [class*="col-md-"] .image,
  .vd--pop-up [class*="col-md-"] .richtext,
  .vd--pop-up [class*="col-md-"] .button {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Reduce all padding */
  .vd--pop-up .pad-3-t,
  .vd--pop-up .pad-3-b,
  .vd--pop-up .pad-3-l,
  .vd--pop-up .pad-3-r,
  .vd--pop-up .pad-2-t,
  .vd--pop-up .pad-2-b,
  .vd--pop-up .pad-2-l,
  .vd--pop-up .pad-2-r,
  .vd--pop-up .pad-1-t,
  .vd--pop-up .pad-1-b,
  .vd--pop-up .pad-1-l,
  .vd--pop-up .pad-1-r {
    padding: 8px !important;
  }
  
  /* Reduce modal padding */
  .modal .dls-white-bg,
  .popup-overlay .dls-white-bg {
    padding: 15px !important;
  }
}