/* slider carousel sur le header home page */
    
    .header-carousel-swiper {
      width: 100%;
      height: auto;
      position:relative;
    }

    .slide__content{
        width:80%;
        display:flex;
        margin:150px 0;
    }

    .carousel__header__logo{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        & .baseline{
            position: relative;
            color: white;
            font-size: 2.3rem;
            letter-spacing:0;
            width:100%;
            text-align:left;
            margin:30px 0;
            line-height: 1;
            text-shadow: rgba(0, 0, 0, 0.10) 0px 3px 15px;
        }
    }

    #logo__carousel{
        width:250px;
        position: relative;
        object-fit: contain;
        aspect-ratio: auto;
}

.content__carousel{
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    & h3{
        color:white;
        width:100%;
        max-width:650px;
        font-size: 2.5rem;
        line-height: 1.1;
        text-align:left;
        font-family:'PoppinsBold';
        text-shadow: rgba(0, 0, 0, 0.20) 0px 3px 15px;
    }
}

#carousel__button{
  width:100%;
  max-width:400px;
  & button{
    color:white;
    font-family:'PoppinsBold';
      border:1px solid var(--orange);
  }
}

#carousel__button button:hover, #carousel__button button:focus{
        color:var(--orange);
        border:1px solid white;
}

#carousel__button button:active{
  background-color:var(--orange);
  color:white;
  border:1px solid var(--orange);
}

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

    .carousel__image {
      width: 100%;
      object-fit: cover;
      position:absolute;
    }

    .overlay__carousel{
      position:absolute;
    }

       .carousel__slider .swiper-pagination-bullet {
      width: 10px;
      height: 10px;
      opacity: 1;
      background: none;
      border: 3px solid white;
      
    }

    .carousel__slider .swiper-pagination-bullet-active {
      background: white !important;
    }


    #carousel__arrow__right{
    background-image: url("../../images/icons/arrow.svg");
    scale:1.2;
    right:20px !important;
    rotate: 180deg;
}

    #carousel__arrow__left{
    background-image: url("../../images/icons/arrow.svg");
    scale:1.2;
    left:20px !important;
  
}

@media screen and (max-width:1200px){
  .carousel__header__logo{
    width:40%;
  }
  
  .content__carousel{
    width:60%;
    & h3{
        font-size: 2.3rem;
    }
}
}

    @media screen and (max-width:1024px){
      .header-carousel-swiper{
        height:85vh;
      }

      .slide__content{
        flex-direction: column;
        margin:0;
      }

      .carousel__header__logo{
        width:100%;
        & #logo__carousel{
          width:200px;
        }
        & .baseline{
          font-size:1.8rem;
          width:100%;
          max-width:400px;
          margin:10px 0;
        }
      }
      .content__carousel{
        width:100%;
        align-items: start;
        & h3{
          font-size: 1.8rem;
          text-align:left;
          max-width:fit-content;
        }
      }

      #carousel__button {
        max-width:300px;
          & button {
          padding:15px;
          }
        }

      .carousel__image {
      height: 100%;
    }

    .overlay__carousel{
      height:100%;
    }
      }

@media screen and (max-width:768px){
  #carousel__arrow__right{
    display:none;
  }

  #carousel__arrow__left{
    display:none;
  }
  
  .slide__content{
    gap:0px;
    margin:0;
  }

  .carousel__header__logo{
    & #logo__carousel{
      width:180px;
    }
  }

  .content__carousel{
    & h3{
      font-size: 1.6rem;
    }
  }
}

@media screen and (max-width:480px){
  .header-carousel-swiper{
    height:80vh;
  }

  .carousel__header__logo{
    & #logo__carousel{
      width:160px;
    }
    
    & .baseline{
      font-size:1.6rem;
      margin: 15px 0;
    }
  }
  
  .content__carousel{
    & h3{
      font-size: 1.4rem;
    }
  }

      #carousel__button {
        max-width:300px;
          & button {
          padding:15px;
          }
        }

        .slide__content{
          margin:0;
          gap:0;
        }
      }

@media screen and (max-width:350px){
  .content__carousel{
    & h3{
      font-size:1.2rem;
      }
  }

        #carousel__button{
          & button{
            padding:10px;
            font-size:12px;
          }
        }


}