/*============================================================================================
   Start Hero CSS
==============================================================================================*/
.hero.style-1 .swiper-button-next,
.hero.style-1 .swiper-button-prev {
  margin-top: -0.2rem;
  font-size: 3.3rem;
  color: #666;
  background-color: transparent;
  opacity: 0;
  transition: color 0.3s, transform 0.3s, opacity 0.3;
}
.hero.style-1 .swiper-button-next {
  right: 13.8%;
  transform: translate(400%, -50%);
}
.hero.style-1 .swiper-button-prev {
  left: 13.8%;
  transform: translate(-400%, -50%);
}
.hero.style-1 .swiper-container:hover .swiper-button-prev {
  left: 13.8%;
}
.hero.style-1 .swiper-container:hover .swiper-button-next {
  right: 13.8%;
}
.hero.style-1 .swiper-container:hover .swiper-button-next,
.hero.style-1 .swiper-container:hover .swiper-button-prev {
  transform: translate(0, -50%);
  opacity: 1;
}
.hero.style-1
  .swiper-container
  .swiper-button-next:not(.swiper-button-disabled):hover,
.hero.style-1
  .swiper-container
  .swiper-button-prev:not(.swiper-button-disabled):hover {
  color: var(--secondary-color);
  background-color: transparent;
}
.hero.style-1 .pg-inner .swiper-pagination {
  bottom: 16px;
}
/* Responsive */
@media (max-width: 767px) {
  .hero.style-1 .intro-slide {
    font-size: 0.9rem;
  }
  .hero.style-1 .intro-slide1 .banner-content {
    right: 0;
  }
  .hero.style-1 .intro-slide1 .slide-image {
    right: 50%;
  }
  .hero.style-1 .intro-slide2 .slide-image {
    right: auto;
    left: 50%;
  }
  .hero.style-1 .intro-slide3 .banner-content {
    right: 0;
  }
  .hero.style-1 .intro-section .pg-inner .swiper-pagination {
    bottom: 0;
  }
}
@media (max-width: 575px) {
  .hero.style-1 .intro-slide {
    font-size: 0.8rem;
  }
  .hero.style-1 .intro-slide {
    font-size: 0.7rem;
  }

  .hero.style-1 .intro-slide2 .banner-content {
    left: 8%;
  }
  .hero.style-1 .intro-slide3 .banner-content {
    right: 8%;
  }
}

/*============================================================================================
   End Hero CSS
==============================================================================================*/
