/* Styles personnalisés pour le banner uniforme - Desktop uniquement */

/* Conteneur principal du banner avec hauteur fixe - Desktop uniquement */
@media (min-width: 992px) {
  .banner-4 {
    height: 700px !important;
    overflow: hidden;
    position: relative;
  }
}

/* Conteneur du slider - Desktop uniquement */
@media (min-width: 992px) {
  .banner-active {
    height: 100% !important;
  }

  .banner-active .swiper-wrapper {
    height: 100% !important;
  }

  .banner-active .swiper-slide {
    height: 100% !important;
  }

  /* Item du banner */
  .banner-item-4 {
    height: 100% !important;
    display: flex !important;
    align-items: center;
  }

  /* Conteneur de l'image avec taille fixe */
  .banner-thumb-wrapper-4 {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Image du banner avec object-fit pour un rendu uniforme */
  .banner-thumb-4 {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
  }

  .banner-thumb-4 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease;
  }

  /* Effet hover pour l'image */
  .banner-thumb-4:hover img {
    transform: scale(1.05);
  }

  /* Contenu du banner */
  .banner-content-4 {
    padding: 20px 0;
  }

  /* Assurer que le contenu reste centré verticalement */
  .banner-item-4 .container {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .banner-item-4 .row {
    height: 100%;
    align-items: center;
  }
}

/* Animation de transition pour les slides */
.banner-active .swiper-slide {
  transition: opacity 0.5s ease-in-out;
}

/* Amélioration de la pagination */
.banner-dot-inner {
  z-index: 60;
}

.banner-dot .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.banner-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #eb753b;
  transform: scale(1.2);
}