/* Start Banner */
.banner {
  background-image: url("../imgs/banner.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: top;
}
/* End Banner */

/* Start Intro */
.intro {
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: 50px 0;
}
.intro p {
  font-size: 20px;
  max-width: 75%;
  line-height: 2;
  text-align: center;
  margin: 0 auto;
}
/* End Intro */

/* Start Gallery */
.interior-gallery {
  color: #fff;
  background-color: #333;
}
.gallery {
  padding: 50px 0;
}
.gallery .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gallery .content,
.gallery .carousel {
  width: 47.5%;
}
.gallery .content h2 {
  font-size: 30px;
  text-align: center;
}

/* Slider */
.carousel {
  position: relative;
  height: 50vh;
  display: flex;
  justify-content: flex-start;
  border-radius: 5px;
  overflow: hidden;
}
.carousel .controls .next,
.carousel .controls .prev,
.preview .controls .next,
.preview .controls .prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 100%;
  display: grid;
  place-items: center;
  z-index: 11;
}
.carousel .controls .next,
.preview .controls .next {
  right: 0;
}
.carousel .controls .prev,
.preview .controls .prev {
  left: 0;
}
.carousel .controls i,
.preview .controls i {
  font-size: 35px;
  color: #FFF;
  cursor: pointer;
}
.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.25s ease-in-out;
  z-index: 1;
  cursor: pointer;
}
.slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  z-index: 1;
  cursor: pointer;
}
@media screen and (max-width: 991px) {
  .interior-gallery .container {
    flex-direction: column-reverse;
  }
  .exterior-gallery .container,
  .exterior-video .container {
    flex-direction: column;
  }
  .interior-gallery .content,
  .interior-gallery .carousel,
  .exterior-gallery .content,
  .exterior-gallery .carousel,
  .exterior-video .content,
  .exterior-video .video-content {
    width: 100%;
  }
  .interior-gallery .content,
  .exterior-gallery .content,
  .exterior-video .content {
    margin-bottom: 25px;
  } 
}
/* End Gallery */

/* Start Preview Popup */
.exterior-preview,
.interior-preview {
  position: fixed;
  top: 10px; left: 50%;
  width: 100%;
  max-width: 750px;
  height: auto;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 10px 0px #0000002b;
  z-index: 9999999;
  transform: translateX(-50%) scale(0);
  transition: var(--main-transition);
}
.exterior-preview.show,
.interior-preview.show {
  transform: translateX(-50%) scale(1);
}
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
}
.preview-header .current-img {
  color: red;
  font-weight: 700;
  margin: 0 3px;
}
.preview-header .close-preview {
  font-size: 22px;
  color: #333;
  cursor: pointer;
}
.img-preview {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.img-preview .previewImg {
  width: 100%;
  height: calc(100% - 44px);
  object-fit: contain;
  border-radius: 3px;
  z-index: 9;
}
/* End Preview Popup */

/* Start Exterior & Interior & Construction Videos */
.interior-video {
  color: #fff;
  background-color: #333;
}
.video-section {
  padding: 50px 0;
}
.video-section .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.video-section .content,
.video-section .video-content {
  width: 47.5%;
}
.video-section .content h2  {
  font-size: 30px;
  text-align: center;
}
.video-section .video-content video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
}
@media screen and (max-width: 991px) {
  .interior-video .container {
    flex-direction: column-reverse;
  }
  .exterior-video .container,
  .construction-video .container {
    flex-direction: column;
  }
  .video-section .content,
  .video-section .video-content {
    width: 100%;
  }
  .video-section .content {
    margin-bottom: 25px;
  } 
}
/* Start Exterior & Interior & Construction Videos */

/* Start Events & Mapping */
.events {
  color: #fff;
  background-color: #333;
}
.events, .mapping {
  padding: 50px 0;
}
.events .container,
.mapping .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.events .content,
.events .image-box,
.mapping .content,
.mapping .image-box {
  width: 47.5%;
}
.events .image-box img,
.mapping .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.events .content h2,
.mapping .content h2 {
  font-size: 30px;
  text-align: center;
}
@media screen and (max-width: 991px) {
  .events .container {
    flex-direction: column-reverse;
  }
  .mapping .container {
    flex-direction: column;
  }
  .events .content,
  .events .image-box,
  .mapping .content,
  .mapping .image-box {
    width: 100%;
  }
  .events .content,
  .mapping .content {
    margin-bottom: 25px;
  } 
}
/* End Events & Mapping */