.navbar-toggler{
  border-radius: 10px;
}

@media only screen and (max-width: 419px) {
  .p_footer{
    font-size: 1.1em !important;
  }

  .footer.commercial {
    background-image: none;
    background-color: #504779;
    padding-top: 50px;
  }

  .footer__title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-family: Montserrat;
    opacity: 1;
    color: #FFF !important;
  }

  .footer__link {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.9;
  }

  .footer_email{
    margin-bottom: 20px;
  }

  .footer__copyrights {
    color: #FFF;
    width: 100%;
    font-size: 12px;
    opacity: 0.7;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  ul.custom-list {
    margin-left: -25px; 
    color: white; 
    font-size: 20px;
    list-style-type: none; /* Enlève les puces par défaut */
  }
  ul.custom-list li::before {
    content: "■"; /* Utilise un carré comme puce */
    color: #76c9be; /* Définit la couleur des carrés */
    font-size: 20px; /* Assure que la taille du carré correspond à celle du texte */
    margin-right: 10px; /* Ajoute de l'espace entre le carré et le texte */
  }

  .footer_texte{
    margin-top: 0px !important;
  }

  .custom-col {
    margin-right: 21px !important;
    margin-bottom: 20px;
    padding: 15px 5px !important;
  }

  .col_osteodispo{
    margin: 0 auto;
    padding: 10px !important;
    text-align: center;
  }

  .custom-col2 {
    flex: 0 0 35%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 35%; /* Ajustez cette valeur à celle désirée */
  }

  .img_footer{
   display: none;
  }

  .row .col-md-8 .custom-input{
    font-size: 0.9em !important;
    height: 45px !important;
    width: 100% !important;
  }

  .row_services{
    margin-left: 2px !important;
    margin-bottom: 15px !important;
  }

  .btn_abonne{
    font-size: 1em !important;
    padding: 10px 20px !important;
    margin-left: 0px;
    width: 100% !important;
    margin-top: 20px;
  }

  .footer_ul{
    font-size: 15px !important;
  }

  .footer_ad{
    font-size: 15px;
  }

  .footer_texte{
    font-size: 19px;
  }

  .footer_icons{
    width: 25px !important;
    height: 25px !important;
  }

  .navbar-brand img{
    width: 50px;
  }
}

@media only screen and (min-width: 420px) and (max-width: 600px) 
{
  .p_footer{
    font-size: 1.1em !important;
  }

  .footer.commercial {
    background-image: none;
    background-color: #504779;
    padding-top: 50px;
  }

  .navbar-brand img{
    width: 50px;
  }

  .footer__title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-family: Montserrat;
    opacity: 1;
    color: #FFF !important;
  }

  .footer__link {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.9;
  }

  .footer__copyrights {
    color: #FFF;
    width: 100%;
    font-size: 12px;
    opacity: 0.7;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  ul.custom-list {
    margin-left: -25px; 
    color: white; 
    font-size: 20px;
    list-style-type: none; /* Enlève les puces par défaut */
  }
  ul.custom-list li::before {
    content: "■"; /* Utilise un carré comme puce */
    color: #76c9be; /* Définit la couleur des carrés */
    font-size: 20px; /* Assure que la taille du carré correspond à celle du texte */
    margin-right: 10px; /* Ajoute de l'espace entre le carré et le texte */
  }

  .custom-col {
    margin-right: 21px !important;
    margin-bottom: 20px;
  }

  .col_osteodispo{
    margin: 0 auto;
  }

  .custom-col2 {
    flex: 0 0 35%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 35%; /* Ajustez cette valeur à celle désirée */
  }

  .img_footer{
   display: none;
  }

  .row .col-md-8 .custom-input{
    font-size: 0.9em !important;
    height: 45px !important;
    width: 100% !important;
  }

  .row_services{
    margin-left: 2px !important;
    margin-bottom: 15px !important;
  }

  .btn_abonne{
    font-size: 1em !important;
    padding: 10px 20px !important;
    margin-left: 30px;
    width: 85% !important;
    margin-top: 20px;
  }

  .footer_ul{
    font-size: 15px !important;
  }

  .footer_ad{
    font-size: 15px;
  }

  .footer_texte{
    font-size: 19px;
  }

  .footer_icons{
    width: 25px !important;
    height: 25px !important;
  }
}
@media only screen and (min-width: 601px) and (max-width: 767px)
  {
    .p_footer{
      font-size: 1.1em !important;
    }
  
    .footer.commercial {
      background-image: none;
      background-color: #504779;
      padding-top: 50px;
    }
  
    .footer__title {
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 2.4px;
      font-size: 12px;
      font-family: Montserrat;
      opacity: 1;
      color: #FFF !important;
    }
  
    .footer__link {
      color: #FFF;
      font-size: 14px;
      margin-bottom: 4px;
      opacity: 0.9;
    }
  
    .footer__copyrights {
      color: #FFF;
      width: 100%;
      font-size: 12px;
      opacity: 0.7;
      padding-top: 20px;
      padding-bottom: 20px;
    }
  
    ul.custom-list {
      margin-left: -25px; 
      color: white; 
      font-size: 20px;
      list-style-type: none; /* Enlève les puces par défaut */
    }
    ul.custom-list li::before {
      content: "■"; /* Utilise un carré comme puce */
      color: #76c9be; /* Définit la couleur des carrés */
      font-size: 20px; /* Assure que la taille du carré correspond à celle du texte */
      margin-right: 10px; /* Ajoute de l'espace entre le carré et le texte */
    }
  
    .custom-col {
      margin-right: 21px !important;
      margin-bottom: 20px;
    }
  
    .col_osteodispo{
      margin-left: 22%;
    }
  
    .custom-col2 {
      flex: 0 0 35%; /* Pour Bootstrap 4 et plus avec Flexbox */
      max-width: 35%; /* Ajustez cette valeur à celle désirée */
    }
  
    .img_footer{
     display: none;
    }
  
    .row .col-md-8 .custom-input{
      font-size: 0.9em !important;
      height: 45px !important;
      width: 100% !important;
    }
  
    .row_services{
      margin-left: 2px !important;
      margin-bottom: 15px !important;
    }
  
    .btn_abonne{
      font-size: 1em !important;
      padding: 10px 20px !important;
      margin-left: 40px;
      width: 85% !important;
      margin-top: 20px;
    }
  
    .footer_ul{
      font-size: 15px !important;
    }
  
    .footer_ad{
      font-size: 15px;
    }
  
    .footer_texte{
      font-size: 19px;
    }
  
    .footer_icons{
      width: 25px !important;
      height: 25px !important;
    }
  }

@media only screen and (min-width: 768px) and (max-width: 991px)
{
  .fluid-footer{
    width: 100% !important;
  }

  .p_footer{
    font-size: 1.1em !important;
  }

  .footer.commercial {
    background-image: none;
    background-color: #504779;
    padding-top: 50px;
  }

  .footer__title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-family: Montserrat;
    opacity: 1;
    color: #FFF !important;
  }

  .footer__link {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.9;
  }

  .footer__copyrights {
    color: #FFF;
    width: 100%;
    font-size: 12px;
    opacity: 0.7;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  ul.custom-list {
    margin-left: -25px; 
    color: white; 
    font-size: 20px;
    list-style-type: none; /* Enlève les puces par défaut */
  }
  ul.custom-list li::before {
    content: "■"; /* Utilise un carré comme puce */
    color: #76c9be; /* Définit la couleur des carrés */
    font-size: 20px; /* Assure que la taille du carré correspond à celle du texte */
    margin-right: 10px; /* Ajoute de l'espace entre le carré et le texte */
  }

  .custom-col {
    flex: 0 0 30.5%;
    max-width: 30.5%;
    margin-right: 21px !important;
    padding: 20px 0px !important;
  }

  .col_osteodispo{
    margin-left: 265px;
  }

  .custom-col2 {
    flex: 0 0 35%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 35%; /* Ajustez cette valeur à celle désirée */
  }

  .img_footer{
    margin-top: -190px;
    width: 195px !important;
    margin-left: -30px;
  }

  .row .col-md-8 .custom-input {
    font-size: 0.9em !important;
    height: 45px !important;
    width: 467px !important;
  }

  .row_services{
    margin-left: 2px !important;
    margin-bottom: 15px !important;
  }

  .btn_abonne{
    font-size: 1em !important;
    padding: 10px 20px !important;
    margin-left: 120px;
    width: 227px !important;
  }

  .footer_ul{
    font-size: 15px !important;
  }

  .footer_ad{
    font-size: 15px;
  }

  .footer_texte{
    font-size: 19px;
  }

  .footer_icons{
    width: 25px !important;
    height: 25px !important;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1280px)
{
  .fluid-footer{
    width: 95% !important;
  }

  .p_footer{
    font-size: 1.1em !important;
  }

  .footer.commercial {
    background-image: none;
    background-color: #504779;
    padding-top: 50px;
  }

  .footer__title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-family: Montserrat;
    opacity: 1;
    color: #FFF !important;
  }

  .footer__link {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.9;
  }

  .footer__copyrights {
    color: #FFF;
    width: 100%;
    font-size: 12px;
    opacity: 0.7;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  ul.custom-list {
    margin-left: -25px; 
    color: white; 
    font-size: 20px;
    list-style-type: none; /* Enlève les puces par défaut */
  }
  ul.custom-list li::before {
    content: "■"; /* Utilise un carré comme puce */
    color: #76c9be; /* Définit la couleur des carrés */
    font-size: 20px; /* Assure que la taille du carré correspond à celle du texte */
    margin-right: 10px; /* Ajoute de l'espace entre le carré et le texte */
  }

  .custom-col {
    flex: 0 0 22.5%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 22.5%; /* Ajustez cette valeur à celle désirée */
    margin-right: 20px !important;
    padding: 20px 0px !important;
  }

  .custom-col2 {
    flex: 0 0 35%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 35%; /* Ajustez cette valeur à celle désirée */
  }

  .img_footer{
    margin-top: -190px;
    width: 240px !important;
    margin-left: -25px;
  }

  .row .col-md-8 .custom-input{
    font-size: 0.9em !important;
    height: 45px !important;
    width: 110% !important;
  }

  .btn_abonne{
    font-size: 1em !important;
    padding: 10px 20px !important;
    margin-left: 55px;
  }

  .footer_ul{
    font-size: 15px !important;
  }

  .footer_ad{
    font-size: 15px;
  }

  .footer_texte{
    font-size: 19px;
  }

  .footer_icons{
    width: 25px !important;
    height: 25px !important;
  }
}
@media only screen and (min-width: 1281px) and (max-width: 1600px) {

  .footer.commercial {
    background-image: none;
    background-color: #504779;
    padding-top: 50px;
  }

  .fluid-footer{
    width: 1225px !important;
  }

  .footer_ul{
    font-size: 16px !important;
    margin-left: -35px !important;
  }

  .footer__title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-family: Montserrat;
    opacity: 1;
    color: #FFF !important;
  }

  .footer__link {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.9;
  }

  .footer__copyrights {
    color: #FFF;
    width: 100%;
    font-size: 12px;
    opacity: 0.7;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  ul.custom-list {
    margin-left: -25px; 
    color: white; 
    font-size: 20px;
    list-style-type: none; /* Enlève les puces par défaut */
  }
  ul.custom-list li::before {
    content: "■"; /* Utilise un carré comme puce */
    color: #76c9be; /* Définit la couleur des carrés */
    font-size: 20px; /* Assure que la taille du carré correspond à celle du texte */
    margin-right: 10px; /* Ajoute de l'espace entre le carré et le texte */
  }

  .custom-col {
    flex: 0 0 22%;
    max-width: 22%;
    margin-right: 25px !important;
  }

  .custom-col2 {
    flex: 0 0 35%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 35%; /* Ajustez cette valeur à celle désirée */
  }

  .img_footer{
    margin-top: -125px;
    width: 275px !important;
    margin-left: -22px;
  }

  .footer_ad{
    font-size: 16px;
  }

  .footer_texte{
    font-size: 20px;
  }

  .footer_icons{
    width: 27.5px !important;
    height: 27.5px !important;
  }

  .navbar-brand img{
    width: 45px;
    margin-top: -5px;
  }

  .col_footer_osteo{
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }

  .custom-input{
    width: 100% !important;
    height: 55px !important;
  }

  .p_footer{
    font-size: 19px !important;
    margin-bottom: 30px;
  }

  .bi-instagram{
    margin-left: 15px !important;
  }

  .bi-youtube{
    margin-left: 15px !important;
  }
}

@media only screen and (min-width: 1601px) and (max-width: 1920px) {

  .footer.commercial {
    background-image: none;
    background-color: #504779;
    padding-top: 50px;
  }

  .fluid-footer{
    width: 1425px !important;
  }

  .a_header{
    color: #798BFD;
  }

  .col_footer_osteo {
    flex: 0 0 58% !important;
    max-width: 58% !important;
  }

  .footer__title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-family: Montserrat;
    opacity: 1;
    color: #FFF !important;
  }

  .footer_ul{
    font-size: 17px !important;
  }

  .footer__link {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.9;
  }

  .footer__copyrights {
    color: #FFF;
    width: 100%;
    font-size: 12px;
    opacity: 0.7;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  ul.custom-list {
    margin-left: -25px; 
    color: white; 
    font-size: 20px;
    list-style-type: none; /* Enlève les puces par défaut */
  }
  ul.custom-list li::before {
    content: "■"; /* Utilise un carré comme puce */
    color: #76c9be; /* Définit la couleur des carrés */
    font-size: 20px; /* Assure que la taille du carré correspond à celle du texte */
    margin-right: 10px; /* Ajoute de l'espace entre le carré et le texte */
  }

  .custom-col {
    flex: 0 0 22.7% !important;
    max-width: 22.7% !important;
}

  .custom-col2 {
    flex: 0 0 35%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 35%; /* Ajustez cette valeur à celle désirée */
  }

  .img_footer{
    margin-top: -125px;
    width: 275px !important;
    margin-left: 50px;
  }
}

@media only screen and (min-width: 1921px) {

  .footer.commercial {
    background-image: none;
    background-color: #504779;
    padding-top: 50px;
  }

  .fluid-footer{
    width: 1950px !important;
  }

  .footer__title {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-size: 12px;
    font-family: Montserrat;
    opacity: 1;
    color: #FFF !important;
  }

  .footer__link {
    color: #FFF;
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.9;
  }

  .footer__copyrights {
    color: #FFF;
    width: 100%;
    font-size: 12px;
    opacity: 0.7;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  ul.custom-list {
    margin-left: -25px; 
    color: white; 
    font-size: 20px;
    list-style-type: none; /* Enlève les puces par défaut */
  }
  ul.custom-list li::before {
    content: "■"; /* Utilise un carré comme puce */
    color: #76c9be; /* Définit la couleur des carrés */
    font-size: 20px; /* Assure que la taille du carré correspond à celle du texte */
    margin-right: 10px; /* Ajoute de l'espace entre le carré et le texte */
  }

  .custom-col {
    flex: 0 0 22.5%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 22.5%; /* Ajustez cette valeur à celle désirée */
  }

  .custom-col2 {
    flex: 0 0 35%; /* Pour Bootstrap 4 et plus avec Flexbox */
    max-width: 35%; /* Ajustez cette valeur à celle désirée */
  }

  .img_footer{
    margin-top: -125px;
    width: 275px !important;
    margin-left: 180px;
  }

  .col_osteodispo{
    padding-left: 82px !important;
    text-align: center;
    margin-right: 0px;
    flex: 0 0 25.5% !important;
    max-width: 25.5% !important;
  }

  .a_header{
    color: #798BFD;
  }
}

/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxheW91dHMvX2Zvb3Rlci5zY3NzIiwidXRpbGl0aWVzL192YXJpYWJsZXMuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQTtFQUNFLDBCQ0lxQjtFREhyQixrQkFBaUI7Q0EwQmxCOztBQXpCQztFQUNFLGtCQUFpQjtFQUNqQiwwQkFBeUI7RUFDekIsc0JBQXFCO0VBQ3JCLGdCQUFlO0VBQ2Ysd0JDUHVCO0VEUXZCLFdBQVU7RUFDVix1QkFBd0I7Q0FDekI7O0FBQ0Q7RUFDRSx1QkFBd0I7RUFDeEIscUNBQW9DO0VBQ3BDLGdCQUFlO0VBQ2YsbUJBQWtCO0VBQ2xCLGFBQVk7Q0FDYjs7QUFDRDtFQUNJLFlDaEJNO0VEaUJOLGVBQWM7RUFDZCx5QkFBd0I7RUFDeEIsZ0JBQWU7RUFDZixhQUFZO0VBQ1osa0JBQWlCO0VBQ2pCLHFCQUFvQjtDQUN2QiIsImZpbGUiOiJmb290ZXIuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gRm9vdGVyXG4uZm9vdGVyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHByaW1hcnktY29sb3I7XG4gIHBhZGRpbmctdG9wOiA1MHB4O1xuICAmX190aXRsZSB7XG4gICAgZm9udC13ZWlnaHQ6IGJvbGQ7XG4gICAgdGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbiAgICBsZXR0ZXItc3BhY2luZzogMi40cHg7XG4gICAgZm9udC1zaXplOiAxMnB4O1xuICAgIGZvbnQtZmFtaWx5OiAkc2Vjb25kYXJ5LWZvbnQ7XG4gICAgb3BhY2l0eTogMTtcbiAgICBjb2xvcjogJHdoaXRlICFpbXBvcnRhbnQ7XG4gIH1cbiAgJl9fbGluayB7XG4gICAgY29sb3I6ICR3aGl0ZSAhaW1wb3J0YW50O1xuICAgIGZvbnQtZmFtaWx5OiAnT3BlbiBTYW5zJywgc2Fucy1zZXJpZjtcbiAgICBmb250LXNpemU6IDE0cHg7XG4gICAgbWFyZ2luLWJvdHRvbTogNHB4O1xuICAgIG9wYWNpdHk6IDAuNztcbiAgfVxuICAmX19jb3B5cmlnaHRzIHtcbiAgICAgIGNvbG9yOiAkd2hpdGU7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIGZvbnQtZmFtaWx5OiAnT3BlbiBTYW5zJztcbiAgICAgIGZvbnQtc2l6ZTogMTJweDtcbiAgICAgIG9wYWNpdHk6IDAuNztcbiAgICAgIHBhZGRpbmctdG9wOiA0MHB4O1xuICAgICAgcGFkZGluZy1ib3R0b206IDIwcHg7XG4gIH1cbn1cbiIsIi8vIEZvbnRzXG4kcHJpbWFyeS1mb250OiBMYXRvO1xuJHNlY29uZGFyeS1mb250OiBNb250c2VycmF0O1xuXG4vLyBDb2xvcnNcbiR3aGl0ZTogI0ZGRjtcbiRwcmltYXJ5LWNvbG9yOiAjNTI4M2ZmO1xuJHNlY29uZGFyeS1jb2xvcjogIzIyMzc0NDtcbiRzdWNjZXNzLWNvbG9yOiAjNWNjYWNjO1xuJGRhbmdlci1jb2xvcjogcmdiYSgyMDgsIDIsIDI3LCAwLjYpO1xuLy8gQnJlYWtwb2ludHNcblxuJGJya3BvaW50LS14cyAgICA6IDM2MHB4O1xuIl19 */
.footer {
  background-image: linear-gradient(45deg, #504779, #3e346b) !important;
  padding: 10px 0;
}