@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: white;
}

.main-hero {
  background-color: #F6FAF6;
  min-height: calc(100vh - 73.5px);
  display: flex;
  align-items: center;
}

.main-hero .intro-wrapper .row>* {
  margin-top: 0;
}

.main-hero .display-5 {
  font-size: 4rem;
}

.download-cta {
  margin-top: 3rem;
}

.inner-section-title {
  font-size: 3rem;
}

.atouts .vstack {
  margin-top: 2rem;
}

.section-py-8 {
  padding: 8rem 0;
}

.section-py-6 {
  padding: 6rem 0;
}

.section-py-4 {
  padding: 4rem 0;
}

.dwl-banner-img {
  position: relative;
}

.download-img {
  width: auto;
  height: 450px;
  position: absolute;
  bottom: 0;
  right: 8rem;
}

.atouts .hstack {
  align-items: flex-start;
}

.square-icon-group {
  background: #046DB5;
  border-radius: 18px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.features-list-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5rem;
}

.feature-list-title {
  font-weight: 600;
  margin-top: 10px;
}

.feature-list-description {
  font-size: 15px;
}

.icon-group-content-wrapper {
  padding-top: 0;
}

.bi {
  font-size: 2rem;
  color: #ffffff
}

.apercu {
  background-color: #F8F8FA;
}

.weebi-text-primary-color {
  color: #046DB5;
}

.weebi-bg-color {
  background-color: #046DB5;
}

.bg-weebi {
  background-color: #046DB5;
}

.btn-weebi {
  color: #fff;
  background-color: #046DB5;
}

.utilisations {
  background-color: #F6FAF6;
}

.clay-bg {
  background-color: #F6FAF6;
}

.bg-feature {
  background-color: #F8F8FA !important;
}

.reportage-item {
  border-radius: 18px;
  padding: 12px;
}

.reportage-item .content-wrapper {
  padding: 1.2rem 0 .5rem;
}

.content-wrapper .card-title {
  font-weight: 600;
}

.btn-black-weebi {
  background-color: #191C1F;
  color: #fff;
  border-color: #191C1F;
}

.btn-black-weebi:hover {
  background-color: #fff;
  color: #191C1F;
  border-color: #191C1F;
}

.btn-black-weebi:hover .bi {
  color: #191C1F;
}

.centered-btn {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.centered-btn .bi {
  margin-right: 10px;
}

.h-100 {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* ========================================== */
/* Swiper */
/* ========================================== */

/* 1 */

.swiper {
  width: 100%;
  height: 400px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* background: #fff; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide:nth-child(2n) {
  width: 60%;
}

.swiper-slide:nth-child(3n) {
  width: 40%;
}

.swiper-pagination-bullet {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.swiper .swiper-pagination {
  text-align: left !important;
  padding-left: 3.5rem;
  padding-bottom: 1rem;
}

.tuto-content-wrapper {
  padding-left: 3rem;
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: #046DB5;
}


/* 2 */

.swiper-slide2 {
  text-align: left;
  font-size: 18px;
  background: #E8F5E9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination2-bullet-active {
  color: #046DB5;
  background: #fff;
}

.app-preview-img {
  width: 250;
  height: 400
}

.utilisations img {
  max-width: 100%;
  height: auto;
}

/* ========================================== */
/* End */
/* ========================================== */

.presse-color {
  background-color: #F5F5F5;
}

.bg-temoignages {
  background-color: #0A1831;
}

.red-color {
  color: #FF3A44;
}

.bg-red-color {
  background-color: #FF3A44;
}

.temoignages-card {
  background-color: #E8F5E9;
  border-radius: 1rem !important;
}

.quote-color {
  color: #046DB5 !important;
}

.love {
  color: #FF3A44;
}

.accordion-button {
  background-color: #fff !important;
  color: black !important;
}

/* ========================================== */
/* Responsive: XL Screen */
/* ========================================== */

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .bi {
    font-size: 1.5rem;
  }

  .btn-lg {
    font-size: 14px;
  }

  .main-hero .intro-wrapper {
    padding: 1rem 0;
  }

  .section-py-8 {
    padding: 6rem 0;
  }

  .section-py-6 {
    padding: 4rem 0;
  }

  .main-hero .container {
    max-width: 1140px;
    margin: auto;
  }

}


@media (max-width: 1399.98px) {
  .btn-lg {
    font-size: 14px;
  }

  .bi {
    font-size: 1.5rem;
  }

}


/* ========================================== */
/* Responsive: lg Screen */
/* ========================================== */

@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-hero .display-5 {
    font-size: 3rem;
  }

  .section-py-8 {
    padding: 5rem 0;
  }

  .download-cta {
    display: flex !important;
    flex-wrap: wrap;
  }

  .h-100 {
    width: 100%;
    object-fit: cover;
  }

  .section-py-6 {
    padding: 3rem 0;
  }

  .inner-section-title {
    font-size: 2rem;
  }

}

@media (min-width: 768px) and (max-width: 991.98px) {
  .main-hero {
    padding: 3rem 0;
  }

  .main-hero .align-items-center {
    gap: 2rem;
  }

  .main-hero .intro-wrapper .align-items-center.row {
    justify-content: center;
    text-align: center;
  }

  .main-hero .display-5 {
    font-size: 2.8rem;
  }

  .download-cta {
    margin-top: 1rem;
    flex-wrap: wrap;
  }

  .main-hero .intro-wrapper .align-items-center.row .justify-content-md-start {
    justify-content: center !important;
  }

  .section-py-8 {
    padding: 5rem 0;
  }

  .atouts .row {
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .inner-section-title {
    font-size: 2.6rem;
  }

  .section-py-6 {
    padding: 2rem 0;
  }

  .utilisations-en-magasin .g-5,
  .gx-5 {
    --bs-gutter-x: 1rem;
  }

  .features-list-wrapper {
    gap: 2rem;

  }

  .feature-screen {
    order: 3;
    padding: 4rem 0;
    text-align: center;

  }

  .download-img {
    right: 4rem;
  }

}

@media (max-width: 767.98px) {
  .main-hero .display-5 {
    font-size: 2.3rem;
  }

  .main-hero {
    padding: 3rem 0;
  }

  .main-hero .align-items-center {
    gap: 2rem;
  }

  .main-hero .intro-wrapper .align-items-center.row {
    justify-content: center;
    text-align: center;
  }

  .section-py-8 {
    padding: 5rem 0;
  }

  .atouts .row {
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .inner-section-title {
    font-size: 2.4rem;
  }

  .section-py-6 {
    padding: 2rem 0;
  }

  .main-hero .intro-wrapper .d-grid {
    justify-content: center;
  }

  .app-preview-img {
    width: 100%;
  }

  .preview-img-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .preview-img-wrapper .col {
    flex: 0 1 calc(50% - .5rem)
  }

  .feature-screen {
    order: 3;
    padding: 4rem 0;
    text-align: center;

  }

  .utilisations .tuto-content-wrapper .col-md-6 {
    margin-bottom: 1rem;
  }

  .utilisations .tuto-content-wrapper {
    padding-left: 1rem;
  }

  .swiper .swiper-pagination {
    padding-left: 1.5rem;
  }

  .section-py-4 {
    padding: 2rem 0;
  }

  .download-img {
    position: relative;
    margin: auto;
    right: 0;
    padding-top: 2rem;
  }

  .telechargement .col-12.col-md-5 img {
    margin: auto;
  }

  .utilisations img {
    max-width: 100%;
    height: auto;
  }

}