:root {
  --tw-primary: #324697;
  --tw-secondary: #FDC40F;
  --tw-tertiary: #F07F56;
  --tw-grey-18p: rgba(216, 216, 216, 0.18);
  --tw-grey-100p: #f8f8f8;
}

#why .splide__pagination {
  bottom: -1.5rem !important;
}

#more-slider2 .splide__pagination{
    left: 75% !important;
    transform: translateX(-50%) !important;

}
#more-slider2 .splide__pagination__page.is-active{
    background-color: white !important;
    transform: scale(1.3) !important;
    border-color: white !important;
}
 .g-recaptcha>div {
  width: 100% !important;
}

.g-recaptcha iframe {
  width: 100% !important;
}

select {
  padding: 12px;
  /* Adds padding inside */
  appearance: none;
  /* Removes default styling */
  -webkit-appearance: none;
  /* For Safari */
  -moz-appearance: none;
  /* For Firefox */
  background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23333"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>') no-repeat right 12px center;
  background-size: 14px;
}

button,
input,
optgroup,
select,
textarea {
  font-family: 'Montserrat' !important;
}

/****************LOADING******************/
.wrapper {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;


}

.img-load {
  width: 14.9rem;
}

.loader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.linear-activity {
  overflow: hidden;
  width: 50%;
  height: 4px;
  background-color: #B3E5FC;
  margin: 20px auto;
}


.indeterminate {
  position: relative;
  width: 100%;
  height: 100%;
}

.indeterminate:before {
  content: '';
  position: absolute;
  height: 100%;
  background-color: rgb(241, 141, 10);
  animation: indeterminate_first 1.5s infinite ease-out;
}

.indeterminate:after {
  content: '';
  position: absolute;
  height: 100%;
  background-color: rgb(241, 141, 10);
  animation: indeterminate_second 1.5s infinite ease-in;
}

@keyframes indeterminate_first {
  0% {
    left: -100%;
    width: 100%;
  }

  100% {
    left: 100%;
    width: 10%;
  }
}

@keyframes indeterminate_second {
  0% {
    left: -150%;
    width: 100%;
  }

  100% {
    left: 100%;
    width: 10%;
  }
}

/**********************************/
.text-primary {
  color: var(--tw-primary);
}

.bg-primary {
  background-color: var(--tw-primary);
}

.border-primary {
  border: 1px solid var(--tw-primary);
}

.text-secondary {
  color: var(--tw-secondary);
}

.bg-secondary {
  background-color: var(--tw-secondary);
}

.border-secondary {
  border: 1px solid var(--tw-secondary);
}

.text-tertiary {
  color: var(--tw-tertiary);
}

.bg-tertiary {
  background-color: var(--tw-tertiary);
}

.border-tertiary {
  border: 1px solid var(--tw-tertiary);
}

.fill-primary {
  fill: var(--tw-primary);
}

.fill-secondary {
  fill: var(--tw-secondary);
}

.fill-tertiary {
  fill: var(--tw-tertiary);
}

.font-montserrat>* {
  font-family: 'Montserrat' !important;
}

.bg-grey-18p {
  background-color: var(--tw-grey-18p);
}

.bg-grey-100p {
  background-color: var(--tw-grey-100p);
}

.hover_text-primary:hover {
  color: var(--tw-primary);
}

.hover_text-secondary:hover {
  color: var(--tw-secondary);
}

.hover_text-tertiary:hover {
  color: var(--tw-tertiary);
}

.hover_bg-primary:hover {
  background-color: var(--tw-primary);
  color: white;
}

.hover_bg-secondary:hover {
  background-color: var(--tw-secondary);
  color: white;
}

.hover_bg-tertiary:hover {
  background-color: var(--tw-tertiary);
  color: white;
}

/* Default pagination dots */
.splide__pagination__page {
  background: var(--tw-grey-18p) !important;
  border: 1px solid black !important;

}

/* Active pagination dot */
.splide__pagination__page.is-active {
  background-color: var(--tw-tertiary) !important;
  transform: scale(1.3) !important;
  border-color: var(--tw-tertiary) !important;
}

.soolvit-slider {
  position: static !important;
}

.splide__pagination {
  bottom: 2rem !important;
}

#slide .splide__pagination,
#programme-slider .splide__pagination,
#splide-ressources .splide__pagination {
  bottom: -2rem !important;
}

/****************************VITRINE********************************/
.banner {
  background-image: url(../img/LandingPages/home/banner\ mapping.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.opp_bg {
  background-image: url(../img/LandingPages/home/opprt_desc.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.opp_bg1 {
  /* background-image: url(../img/LandingPages/home/opprt_desc1.png); */
  background-repeat: no-repeat;
  background-size: cover;
}

.swiper {
  width: 100%;
  padding: 0px 0;
  background: white;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
}

.swiper-slide img {
  /* height: 80px; */
  /* Ajuste la hauteur des logos */
  /* max-width: 100%; */
  max-width: 100%;
  height: auto;
  display: block;
  /* To prevent extra space below inline images */
  margin: 0 auto;
  /* Center the image within the slide if needed */
  object-fit: contain;
  /* Or 'cover' */
  max-height: 80px;
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out;
}

.swiper-slide img:hover {
  filter: grayscale(0%);
}

.splide__track {
  overflow: visible !important;
}

.splide__slide {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0.5;
}

.splide__slide.is-visible {
  opacity: 1;
  visibility: visible;
}

.testa_card_active {
  transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.1) scaleY(1.1) !important;
  padding: 2.5rem;
}

/* .testa_card_active>div:nth-child(1){
    border: 1px solid var(--tw-primary) !important;
  }*/


/*******************************LIST CHALLENGES**************************/
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

.progm__logo_div {
  width: 5rem;
  height: 5rem;
  /* flex: 1 1 5rem; */
  border-radius: 50%;
  box-shadow: 0px 9px 10px -2px rgb(0 0 0 / 10%);
  margin-top: -41px;
  background: white;
  padding: 1rem;
  flex: none;
}

/******************************************ABOUT US****************************************/
.about-banner {
  background-image: url(../img/LandingPages/about/hero.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.about-banner2 {
  background-image: url(../img/LandingPages/about/mession.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.enter_card_active {
  transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.1) scaleY(1.1) !important;
}

.contact-banner {
  background-image: url(../img/LandingPages/about/banner.png);
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width:1024px) {
  .opp_bg1 {
    background-image: url(../img/LandingPages/home/opprt_mbbg.png);
  }

  .web_bg1 {
    background-image: url(../img/LandingPages/home/web_mbbg.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@media screen and (max-width:768px) {
  .banner {
    background-image: unset;
    background-color: var(--tw-primary);
  }

  .opp_bg,
  .opp_bg1 {
    background-image: url(../img/LandingPages/home/opprt_mbbg.png);
  }

  .web_bg1 {
    background-image: url(../img/LandingPages/home/web_mbbg.png);
  }

  .about-banner {
    background-image: unset;
    background-color: var(--tw-primary);
  }

  .contact-banner {
    background-image: unset;
    background-color: var(--tw-primary);
  }
  #more-slider2 .splide__pagination{
    left: 50% !important;
  }
}