/**

 * Slider Vertical

 * Slider plein écran avec navigation verticale

 *

 * @package Dioqa_Starter_Custom

 */



/* ========================================

   BASE

   ======================================== */



.slider-vertical {

  --sv-dark: var(--bs-dark, #3b3949);

  --sv-text: var(--bs-text, #6b687d);

  --sv-primary: var(--bs-primary, #4f46e5);



  width: 100%;

  height: 100vh;

  padding-top: var(--section-pt, 0);

  padding-bottom: var(--section-pb, 0);

  display: flex;

  flex-direction: column;

}



/* ========================================

   SECTION TITLE

   ======================================== */



.slider-vertical__section-title {

  text-align: center;

  padding: 60px 15px 40px;

  flex-shrink: 0;

}



.slider-vertical__section-title h1,

.slider-vertical__section-title h2,

.slider-vertical__section-title h3,

.slider-vertical__section-title h4,

.slider-vertical__section-title h5,

.slider-vertical__section-title h6,

.slider-vertical__section-title p {

  color: var(--text-bs-dark, #3b3949);

  font-family: var(--font-family-title, Figtree);

  font-size: var(--font-size-display-md, 36px);

  font-style: normal;

  font-weight: 700;

  line-height: normal;

  margin: 0;

}



/* ========================================

   BACKGROUNDS

   ======================================== */



.slider-vertical--bg-white {

  background-color: #fff;

}



.slider-vertical--bg-light {

  background-color: #f3f9fb;

}



.slider-vertical--bg-transparent {

  background-color: transparent;

}



/* ========================================

   SWIPER

   ======================================== */



.slider-vertical__swiper {

  width: 100%;

  flex: 1;

  min-height: 0;

}



.slider-vertical .swiper-slide {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 75px 0;

}



/* ========================================

   CONTAINER

   ======================================== */



.slider-vertical__container {

  max-width: 1320px;

  width: 100%;

  padding: 0 15px;

  margin: 0 auto;

}



.slider-vertical__row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

}



/* ========================================

   CONTENT

   ======================================== */



.slider-vertical__content {

  flex: 0 0 auto;

  max-width: 536px;

  display: flex;

  flex-direction: column;

  gap: 25px;

}



.slider-vertical__title {

  font-size: 36px;

  font-weight: 600;

  line-height: 1.2;

  color: var(--sv-dark);

  margin: 0;

}



.slider-vertical__text {

  font-size: 16px;

  font-weight: 400;

  line-height: 1.6;

  color: var(--sv-text);

  margin: 0;

}



/* ========================================

   IMAGE

   ======================================== */



.slider-vertical__image-wrapper {

  flex: 0 0 auto;

  max-width: 648px;

  width: 50%;

}



.slider-vertical__image,

picture.slider-vertical__image {

  width: 100%;

  height: 410px;

  border-radius: 12px;

  overflow: hidden;

}



.slider-vertical__image,

picture.slider-vertical__image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* ========================================

   PAGINATION

   ======================================== */



.slider-vertical__pagination.swiper-pagination {

  right: 30px !important;

  left: auto !important;

}



.slider-vertical__pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: #d1d5db;

  opacity: 1;

  transition: all 0.3s ease;

}



.slider-vertical__pagination .swiper-pagination-bullet-active {

  background: var(--sv-primary);

  height: 30px;

  border-radius: 6px;

}



/* ========================================

   RESPONSIVE - LG (< 992px)

   ======================================== */



@media (max-width: 991.98px) {

  .slider-vertical__row {

    flex-direction: column;

    text-align: center;

  }



  .slider-vertical__content {

    max-width: 100%;

    order: 2;

  }



  .slider-vertical__image-wrapper {

    max-width: 100%;

    width: 100%;

    order: 1;

  }



  .slider-vertical__image,

  picture.slider-vertical__image {

    height: 300px;

  }



  .slider-vertical__title {

    font-size: 28px;

  }



  .slider-vertical__pagination.swiper-pagination {

    right: 15px !important;

  }

}



/* ========================================

   RESPONSIVE - SM (< 576px)

   ======================================== */



@media (max-width: 575.98px) {

  .slider-vertical .swiper-slide {

    padding: 40px 0;

  }



  .slider-vertical__title {

    font-size: 24px;

  }



  .slider-vertical__image,

  picture.slider-vertical__image {

    height: 220px;

  }

}