* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
}
#mainText{
  color:#ed7b04;
  font-weight: bold;
}
.logo_footer {
  width: 170px;
  text-align: justify;
}

.nav-link:hover {
  color: #ed7b04;
}

#app_store_id {
  width: 150px;
}

#google_play_id {
  width: 150px;
}

#app_store_id_ {
  width: 150px;
}

#google_play_id_ {
  width: 150px;
}

.hero {
  background-position: 50px top;
}

.barner-header h1 {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  height: 40px;
  font-size: 2em;
  margin-bottom: 30px;
}

.barner-description {
  width: 550px;
  /* Hauteur fixe du conteneur */
  display: flex;
  /* Utiliser le modèle de boîte flexible */
  align-items: center;
  /* Centrer verticalement le contenu */
}

.barner-description p {
  padding-top: 15px;
  margin: 0;
  /* Supprimer les marges par défaut du paragraphe */
  flex: 1;
  /* Faire en sorte que le paragraphe occupe tout l'espace disponible */
  text-align: justify;

}


.barner-controls {
  margin-top: 40px;
}

.barner-controls button {
  padding: 0;
  border-radius: 10px;
}

.barner-controls button img {
  padding: 0;
  border: 0;
  border-radius: 8px;
  margin: 0;
}

footer {
  background-color: #ed7b04;
  color: #fff;
}

footer ul {
  list-style-type: none;
  /* Supprimer les puces */
  padding: 0;
  /* Supprimer les marges intérieures */
}

footer li {
  text-align: left;
  /* Aligner le texte à gauche */
  margin-bottom: 5px;
  /* Ajouter une marge en bas pour l'espacement entre les éléments */
}

.lien_utile,
.disponible {
  font-weight: bold;
}

.tel_footer h5 {
  font-size: 1em;
  font-weight: bold;
}

.slogan_footer p,
.localisation_footer p {
  color: rgba(255, 255, 255, 0.6)
}

.description {
  padding-top: 40px;
  padding-bottom: 40px;
}

.description_header {
  font-weight: bold;
  color: #ed7b04;
}

.description .item-title .title-number {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: #ed7b04;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  margin-right: 10px;
  font-size: 0.8em;
}

.content-item {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.item-title {
  color: #333;
  font-weight: bold;
  font-size: 1.2em;
}


.item-description {
  color: #666;
  margin-top: 10px;
}

.content-item {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.full-height-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* Cela garantit que l'image conserve son rapport hauteur/largeur tout en remplissant la hauteur disponible */
}

.use_infos h2 {
  font-weight: bold;
}

.center-text {
  text-align: center;
}

/* Pupular road */
.popular_road {
  background-color: #ed7b04;
  color: #fff;
}

.popular_road h2 {
  font-weight: bold;
}

.popular_road .road_desc {
  margin-top: 70px;
  margin-left: 90px;
}

.popular_road .road_desc .price {
  font-weight: bold;
  color: #fff;
  font-size: 20px;
}

.popular_road .road_desc .track {
  color: rgba(255, 255, 255, 0.7);
}

.popular_road .road_desc2 {
  margin-top: 70px;
}

.popular_road .road_desc2 .price {
  font-weight: bold;
  color: #fff;
  font-size: 20px;
}

.popular_road .road_desc2 .track {
  color: rgba(255, 255, 255, 0.7);
}

.services h3 {
  font-weight: bold;
  font-size: 1.2em;
}

label,
.contact_header {
  font-weight: bold;
}

.contact_header {
  margin-top: 1.2em;
}

.rigth_aside {
  text-align: right;
}

.rigth_aside p {
  line-height: 15px;
  font-size: 0.8em;
  margin-bottom: -1px;
}

.rigth_aside h3 {
  color: #ed7b04;
  font-weight: bold;
  font-size: 1em;
}

.card .step_header {
  font-size: 1.2em;
  font-weight: bold;
  margin-left: 5px;
}

@media only screen and (max-width: 492px) {
  .hero{
    height: 200px;
  }
  .barner-header {
    position: relative;
  }

  .barner-header h1 {
    font-family: 'Montserrat';
    font-size: 22px;
    text-align: left;
    position: absolute;
    top: -200px;
  }

  .barner-description {
    width: 330px;
  }

  .barner-description {
    position: relative;
  }

  .barner-description p {
    font-family: 'Montserrat';
    text-align: left;
    position: absolute;
    top: -150px;
    font-size: 0.9em;
    margin-left: -8px;
  }
  
}



@media only screen and (max-width: 407px) {

  .barner-controls {
    padding-bottom: 20px;
    margin-left: 10%;
    margin-right: 10%;
  }

  #app_store_id {
    width: 120px;
  }

  #google_play_id {
    width: 120px;
  }

  /* .footer-center {
    text-align: center;
  } */

  .barner-header h1 {
    font-size: 20px;
    padding-top: 5px;
    margin-bottom: -20px;
  }

  .barner-description {
    width: 180px;
    box-sizing: border-box;
    padding-top: 10px;

  }

  .barner-description p {
    text-align: left;
  }

  .description_header {
    text-align: center;
  }

  .item-description {
    text-align: justify;
    word-spacing: -1px;
  }

  .item-title {
    text-align: center;
  }

  .use-infos {
    font-size: 1.3em;
  }

  .content-illustration h3,
  p {
    padding-left: 10px;

  }

}

@media only screen and (max-width: 365px) {
  .barner-controls {
    padding-bottom: 20px;
    margin-left: 10%;
    margin-right: 10%;
  }
  #available {
    text-align: center;
  }

  .road {
    text-align: center;
  }

  .road1 {
    margin-left: -50px;
  }

  .road h2 {
    font-size: 1.3em;
  }

}

@media only screen and (max-width: 325px) {
  .barner-controls {
    padding-bottom: 20px;
    margin-left: 10%;
    margin-right: 10%;
  }
  .barner-description {
    width: 260px;
  }
}

/* Extra Small (XS) - Téléphones portables (portrait) */
@media (max-width: 576px) {

  .barner-description {
    width: 350px;
  }
}

/* Small (SM) - Téléphones portables (paysage) */
@media (min-width: 577px) and (max-width: 768px) {
  .barner-description {
    width: 400px;
  }
}

/* Medium (MD) - Tablettes */
@media (min-width: 769px) and (max-width: 992px) {
  /* Styles pour les écrans de taille moyenne (MD) */
}

/* Large (LG) - Ordinateurs portables */
@media (min-width: 993px) and (max-width: 1200px) {
  /* Styles pour les écrans de grande taille (LG) */
}

/* Extra Large (XL) - Ordinateurs de bureau */
@media (min-width: 1201px) {
  /* Styles pour les écrans de très grande taille (XL) */
}