/**
 * @file homepage.css
 * @description Homepage-specific styles for Inda Consulting Due Diligence website.
 *              Covers the hero Swiper carousel, scroll-triggered animations
 *              (zoomIn, fadeInUp), the about section background, and the
 *              contact CTA section with overlay.
 * @version 2.0.0
 */

/* --- Hero Swiper Carousel --- */

.swiper .swiper-slide .swiper-content .container h2,
.swiper .swiper-slide .swiper-content .container p {
  max-width: 900px;
}

.swiper .swiper-button-container .swiper-button-prev,
.swiper .swiper-button-container .swiper-button-next {
  text-align: center;
  background: #fff;
  color: #333;
  font-size: 20px;
  transition: all 0.3s ease;
  background-image: none;
}

.swiper .swiper-button-prev {
  left: 5%;
}

.swiper .swiper-button-next {
  right: 5%;
}

.swiper .swiper-pagination {
  z-index: 9;
}

.swiper-pagination-bullet {
  background: #fff;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  width: 20px;
  opacity: 1;
  background: #ffffff;
  border-radius: 8px;
}

.swiper-slide.active .fadeInUp {
  animation: fadeInUp 1s ease;
}

/* --- Scroll Animations --- */

.animation-zoomIn {
  opacity: 0;
}

.animation-zoomIn.active {
  animation: zoomIn 1s ease forwards;
}

.animation-fadeInUp {
  opacity: 0;
}

.animation-fadeInUp.active {
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* --- About Section --- */

.about-container {
  background: url(../images/about-bg.png) center no-repeat;
  background-size: cover;
}

@media (min-width: 1024px) {
  .about-container2::after {
    content: "";
    width: 60%;
    height: 100%;
    background: #040498;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .about-container2 .txt {
    width: calc(100% - 80px);
  }
}

@media (max-width: 1024px) {
  .about-container2 .txt {
    width: calc(100% - 50px);
  }
}

/* --- Contact CTA Section --- */

.contact-container {
  padding: 100px 0;
  background-image: url(../images/contact.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.contact-container::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #040498;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}