/* Le slider en arrière plan: il y a une autre partie dans css/banner.css.css */
/* logo */
.navbar-brand img{
    width: 60px;
    height: 60px;
    margin-left: 50px;
}
/* début */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .carousel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease;
  }
/* fin */

/* le slider qui presente les différentes marques */
/* debut */
.slider{
    position: relative;
    margin-top: 0px;
    margin-left:60% ;
    width: 50%;
    height: 600px;
    overflow: hidden;
}
.item{
    position: absolute;
    width: 200px;
    height: 1000px;
    padding: 100px;
    transition: 1s;
    left: calc(-1% - 215px);
    top: 0;

}
.item-img{
    rotate: -35deg;
    margin-left: 160px;
    width: 550px;
    height: 530px;
}

#next{
    position: absolute;
    right: 50px;
    top: 40%;
}
#prev{
    position: absolute;
    left: 50px;
    top: 40%;
}
#prev, #next{
    color: #fff;
    background: none;
    border: none;
    font-size: xxx-large;
    font-family: monospace;
    font-weight: bold;
    opacity: 0.5;
    transition: opacity 0.5s;
}
#prev:hover,
#next:hover{
    opacity: 1;
}
/* fin */

/* section des textes et presentation des marques */
/* section de texte */
/* début */
  .text-section{
    position: absolute;
    top: 170px;
    left: 90px;
    text-align: center;
    color: #fff;
  }
  /* fin */
  /* section de présentation des marques */
  .presentation-title{
     margin-top: 60px;
     font-size: x-large;
  }
  .text-section .text{
   width: 800px;
  }
  .line-marque{
    width: 150px;
    height: 3px;
    margin-left: 325px;
    background-color: #fff;
    border-radius: 10px;
  }
.marque-sect{
    display: flex;
}
  /* .marque{
    border: 1px solid #E92124;
    border-radius: 100px;
    background-color: #f8c1c1;
    width: 120px;
    height: 120px;
    margin-left: 60px;
    margin-top: 50px;
  } */

  .marque img{
    border-radius: 100px;
    background-color: #fde9e9;
    width: 120px;
    height: 120px;
    margin-left: 60px;
    margin-top: 50px;
  }

  .sprite img{
    border: 2px solid #075800;
    background-color: #d6fad6;
  }

  .coca img{
    border: 2px solid #E92124;
    background-color: #fde9e9;
  }

  .shwepps img{
    border: 2px solid #fffb00;
    background-color: #feffd8;
  }

  .fanta img{
    border: 2px solid #ff9900;
    background-color: #ffe1aa;
  }

  .marque-name{
    margin-left: 55px;
  }

  /* section pour gérer la responsivité de cette page */
  @media (max-device-width: 480px) {
    /* Styles pour les petits écrans */
    .banner-title {
      margin-top: 200px;
      margin-left: 100px;
      justify-content: space-between;
      font-size: xx-large;
      line-height: 50px;
    }

    .banner-title  h1{
        font-size: 100px;
    }
    .banner-title {
        font-size: 30px;
    }
    .slider-section {
      margin-top: 30vh;
      margin-left: -1390px;
    }
     .slider{
        height: 900px;
     }

    .item-img {
      rotate: 0deg;
      width: 850px;
      height: 800px;
    }

    .marques{
        margin-top: 900px;
        width: 160%;
        margin-left: -80px;
        line-height: 70px;
    }
    .marque img{
        border-radius: 100px;
        background-color: #fde9e9;
        width: 120px;
        height: 120px;
        margin-left: 10px;
        margin-top: 50px;
      }
    .presentation-title .text{
        font-size: 90px;
    }
    /* .marque{
        margin-left: 100px;
        margin-left: 100px;
    } */
  }