/* Common CSS */
#header {
  background-color: transparent;
  transition: background-color 0.5s;
}

#header.active {
  background-color: var(--dark-background);
}

#main {
  padding-top: 0;
  padding-bottom: 0;
}

/* End Common CSS */

/* Block Hero Video */
.block-hero-video {
  width: 100%;
  height: 100vh;
  position: relative;
}

.block-hero-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* End Hero Video */

/* Block Hero Banner */
.block-hero-banner {
  padding-top: 0;
  padding-bottom: 0;
}

.swiperHeroBanner {
  width: 100%;
  height: 100vh;
}

.swiperHeroBanner .field-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.swiperHeroBanner .field-image::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.swiperHeroBanner .field-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.swiperHeroBanner .field-content {
  display: flex;
  height: 80%;
  align-items: end;
  justify-content: space-between;
}

.swiperHeroBanner .field-content .row {
  align-items: end;
}

.swiperHeroBanner .field-content__heading {
  order: 2;
  margin-bottom: 0;
  color: #fff;
  font-style: italic;
  font-weight: 400;
  font-size: 3rem;
  font-family: "Noto Serif Display";
  text-transform: uppercase;
}

.swiperHeroBanner .field-content__description {
  order: 1;
  color: #fff;
  font-weight: 400;
  font-size: 1.125rem;
}

.swiperHeroBanner .swiper-btn {
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  z-index: 1;
}
/* End Block Hero Banner */

/* Block About Us */
.block-about-us {
  background-color: #f2f2f2;
}

.block-about-us .block-subtitle {
  text-align: left;
}

.block-about-us .block-title {
  text-align: left;
  margin-bottom: 0;
}

.block-about-us .field-desc {
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

.block-about-us .row-1 {
  margin-bottom: 3.75rem;
}

.block-about-us .row-2 {
  align-items: center;
}

.block-about-us .field-image {
  box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
}

/* End Block About Us */

/* Block Why Choose Us */
.block-why-choose-us {
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 15rem;
  margin-top: -15rem;
}
/* End Block Why Choose Us */

/* Block Highlight */
.block-highlight {
  padding-bottom: 22rem;
}

.block-highlight .block-content {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}
/* End Block Highlight */

/* Block Testiomonial */
.block-testimonial {
  margin-top: -15rem;
  padding-top: 0;
  padding-bottom: 0;
}

.block-testimonial .block-subtitle,
.block-testimonial .block-title {
  color: #fff;
}

.block-testimonial .block-title-line {
  background-color: #fff;
}
/* End Block Testimonial */

/* Block Testiomonial Video */
.block-testimonial-video {
  margin-top: -15rem;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.block-testimonial-video .block-subtitle,
.block-testimonial-video .block-title {
  color: #fff;
}

.block-testimonial-video .block-title-line {
  background-color: #fff;
}

.block-testimonial-video .col:last-child {
  margin-top: 1rem;
}

.block-testimonial-video .field-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px;
}

.block-testimonial-video .field-video a {
  display: block;
  position: relative;
  overflow: hidden;
}

.block-testimonial-video .field-video a::before {
  content: "";
  background: url("../images/icon/icon-play.svg") no-repeat center center transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.5rem;
  height: 7.5rem;
  z-index: 1;
}

.block-testimonial-video .field-video img {
  transition: all ease-in-out 0.5s;
}

.block-testimonial-video .field-video:hover img {
  transform: scale(1.1);
}

.block-testimonial-video .col-second {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
/* End Block Testimonial Video */

@media (max-width: 1399.98px) {
}

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
  /* Block Hero Banner */
  .swiperHeroBanner .swiper-btn {
    bottom: 5%;
  }

  .swiperHeroBanner .swiper-btn .swiper-btn-wrapper {
    justify-content: center;
  }

  .swiperHeroBanner .field-content {
    height: 88%;
  }

  .swiperHeroBanner .field-content .row {
    align-items: unset;
    gap: 2rem;
  }

  .swiperHeroBanner .field-content__heading {
    order: 1;
    font-size: 3.5rem;
  }

  .swiperHeroBanner .field-content__description {
    order: 2;
    font-size: 1rem;
  }
  /* End Block Hero Banner */

  /* Block About Us */
  .block-about-us .block-title {
    font-size: 3.5rem;
    margin-bottom: 2rem;
  }

  .block-about-us .field-btn .btn {
    width: 100%;
  }

  .block-about-us .row-2 {
    gap: 2rem;
  }

  .block-about-us .row-2 .col-xl-1 {
    order: 2;
  }

  .block-about-us .swiper-btn .swiper-btn-wrapper {
    justify-content: center;
  }

  .block-about-us .row-2 .col-xl-10 {
    order: 1;
    padding-left: 0;
    padding-right: 0;
  }
  /* End Block About Us */

  /* Block Why Choose Us */
  .block-why-choose-us {
    margin-top: 0;
    padding-top: 3.75rem;
  }
  /* End Block Why Choose Us */

  /* Block Highlight */
  .block-highlight {
    padding-bottom: 0;
  }

  .block-highlight .block-content {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
  /* End Block Highlight */

  /* Block Testiomonial */
  .block-testimonial {
    margin-top: 0;
    padding-top: 3.75rem;
  }

  .block-testimonial .block-subtitle {
    color: var(--button-background);
  }

  .block-testimonial .block-title {
    color: var(--heading);
  }

  .block-testimonial .block-title-line {
    background-color: var(--text);
  }
  /* End Block Testimonial */

  /* Block Testiomonial Video */
  .block-testimonial-video {
    margin-top: 0;
    padding-top: 3.75rem;
  }

  .block-testimonial-video .block-subtitle {
    color: var(--button-background);
  }

  .block-testimonial-video .block-title {
    color: var(--heading);
  }

  .block-testimonial-video .block-title-line {
    background-color: var(--text);
  }

  .block-testimonial-video .field-video a::before {
    width: 5rem;
    height: 5rem;
    background-size: cover;
  }
  /* End Block Testimonial Video */
}

@media (max-width: 767.98px) {
}

@media (max-width: 575.98px) {
}