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

@media only screen and (max-width: 419px) {
    .fluid-footer {
        width: 345px !important;
    }

    .navbar_logo{
      font-size: 23px;
    }
    
      .custom-input{
        height: 30px !important;
        width: 91% !important;
      }

      .footer-bar {
        padding: 10px 0px !important;
      }
    
      .footer-left {
        font-size: 15.3px;
        margin-bottom: 20px !important;
      }
    
      .a_header{
        color: #798BFD;
      }

      .footer-right {
        font-size: 14.8px;
      }
    
      .col_footer_osteo{
        flex: 0 0 56.666667% !important;
        max-width: 56.666667% !important;
      }
    
      .custom-col {
        flex: 0 0 18.5% !important;
        max-width: 18.5% !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.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-bottom: 20px;
      }
  
      .img_footer_2{
          margin-top: 0px;
      }
  
      .div_footer_1{
          background-color: #ECEDEA;
          width: 295px;
          margin: 0 auto;
          padding: 23px;
          border-radius: 20px;
      }
  
      .div_footer_2{
          width: 310px;
          margin: 0 auto;
          padding: 23px;
          text-align: center;
      }
  
      .col_footer_2{
          flex: 0 0 45.4%;
          max-width: 45.4%;
          margin-top: -160px;
      }
  
      .p_footer_2{
          color: white;
          font-size: 33px;
      }
  
      .img_footer_apple {
        width: 145px;
        margin-top: 15px;
      }
  
      .img_footer_play {
        width: 170px;
        margin-top: 15px;
        margin-left: 20px;
      }
  
      .btn_footer{
          color: #385591;
          background-color: #daa0b3;
          font-size: 20px;
          padding: 8px 33px;
          border-radius: 15px;
          margin-top: 30px;
      }  
}

@media only screen and (min-width: 420px) and (max-width: 600px) {
    .fluid-footer {
        width: 345px !important;
    }

    .footer-bar {
      padding: 10px 0px !important;
    }
  
    .footer-left {
      font-size: 15.3px;
      margin-bottom: 20px !important;
    }

    .footer-right {
      font-size: 14.8px;
    }

    .navbar_logo{
      font-size: 23px;
    }
    
      .custom-input{
        height: 30px !important;
        width: 91% !important;
      }
    
      .a_header{
        color: #798BFD;
      }
    
      .col_footer_osteo{
        flex: 0 0 56.666667% !important;
        max-width: 56.666667% !important;
      }
    
      .custom-col {
        flex: 0 0 18.5% !important;
        max-width: 18.5% !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.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-bottom: 20px;
      }
  
      .img_footer_2{
          margin-top: 0px;
          margin-bottom: 30px;
      }
  
      .div_footer_1{
          background-color: #ECEDEA;
          width: 295px;
          margin: 0 auto;
          padding: 23px;
          border-radius: 20px;
      }
  
      .div_footer_2{
          width: 310px;
          margin: 0 auto;
          padding: 23px;
          text-align: center;
      }
  
      .col_footer_2{
          flex: 0 0 45.4%;
          max-width: 45.4%;
          margin-top: -160px;
      }
  
      .p_footer_2{
          color: white;
          font-size: 33px;
      }
  
      .img_footer_apple{
          width: 150px;
          margin-top: 40px;
      }
  
      .img_footer_play{
          width: 180px;
          margin-top: 40px;
          margin-left: 5px;
      }
  
      .btn_footer{
          color: #385591;
          background-color: #daa0b3;
          font-size: 20px;
          padding: 8px 33px;
          border-radius: 15px;
          margin-top: 30px;
      }  
}

@media only screen and (min-width: 601px) and (max-width: 767px)
{
  .fluid-footer {
      width: 345px !important;
  }

  .navbar_logo{
    font-size: 23px;
  }
  
    .custom-input{
      height: 30px !important;
      width: 91% !important;
    }
  
    .a_header{
      color: #798BFD;
    }
  
    .col_footer_osteo{
      flex: 0 0 56.666667% !important;
      max-width: 56.666667% !important;
    }
  
    .custom-col {
      flex: 0 0 18.5% !important;
      max-width: 18.5% !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.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-bottom: 20px;
    }

    .img_footer_2{
        margin-top: 0px;
        margin-bottom: 30px;
    }

    .div_footer_1{
        background-color: #ECEDEA;
        width: 295px;
        margin: 0 auto;
        padding: 23px;
        border-radius: 20px;
    }

    .div_footer_2{
        width: 310px;
        margin: 0 auto;
        padding: 23px;
        text-align: center;
    }

    .col_footer_2{
        flex: 0 0 45.4%;
        max-width: 45.4%;
        margin-top: -160px;
    }

    .p_footer_2{
        color: white;
        font-size: 33px;
    }

    .img_footer_apple{
        width: 150px;
        margin-top: 40px;
    }

    .img_footer_play{
        width: 180px;
        margin-top: 40px;
        margin-left: 5px;
    }

    .btn_footer{
        color: #385591;
        background-color: #daa0b3;
        font-size: 20px;
        padding: 8px 33px;
        border-radius: 15px;
        margin-top: 30px;
    }  
}
  
@media only screen and (min-width: 1601px) and (max-width: 1920px) {

    .fluid-footer{
      width: 1300px !important;
    }
  
    .custom-input{
      height: 30px !important;
      width: 91% !important;
    }
  
    .a_header{
      color: #798BFD;
    }
  
    .col_footer_osteo{
      flex: 0 0 56.666667% !important;
      max-width: 56.666667% !important;
    }
  
    .custom-col {
      flex: 0 0 18.5% !important;
      max-width: 18.5% !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.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-bottom: 20px;
    }

    .img_footer_2{
        margin-top: 0px;
        margin-bottom: 30px;
    }

    .div_footer_1{
        background-color: #ECEDEA;
        width: 340px;
        margin: 0 auto;
        padding: 23px;
        border-radius: 20px;
    }

    .div_footer_2{
        width: 375px;
        margin: 0 auto;
        padding: 23px;
    }

    .col_footer_2{
        flex: 0 0 45.4%;
        max-width: 45.4%;
    }

    .p_footer_2{
        color: white;
        font-size: 33px;
    }

    .img_footer_apple{
        width: 150px;
        margin-top: 40px;
    }

    .img_footer_play{
        width: 180px;
        margin-top: 40px;
        margin-left: 30px;
    }

    .btn_footer{
        color: #385591;
        background-color: #daa0b3;
        font-size: 20px;
        padding: 8px 33px;
        border-radius: 15px;
        margin-top: 30px;
    }    

    .footer-columns{
      display: flex;
      width: 100%;
    }
}

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

    .fluid-footer{
      width: 1300px !important;
    }
  
    .custom-input{
      height: 30px !important;
      width: 91% !important;
    }
  
    .a_header{
      color: #798BFD;
    }
  
    .col_footer_osteo{
      flex: 0 0 56.666667% !important;
      max-width: 56.666667% !important;
    }
  
    .custom-col {
      flex: 0 0 18.5% !important;
      max-width: 18.5% !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.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-bottom: 20px;
    }

    .img_footer_2{
        margin-top: 0px;
        margin-bottom: 30px;
    }

    .div_footer_1{
        background-color: #ECEDEA;
        width: 340px;
        margin: 0 auto;
        padding: 23px;
        border-radius: 20px;
    }

    .div_footer_2{
        width: 375px;
        margin: 0 auto;
        padding: 23px;
    }

    .col_footer_2{
        flex: 0 0 45.4%;
        max-width: 45.4%;
    }

    .p_footer_2{
        color: white;
        font-size: 33px;
    }

    .img_footer_apple{
        width: 150px;
        margin-top: 40px;
    }

    .img_footer_play{
        width: 180px;
        margin-top: 40px;
        margin-left: 30px;
    }

    .btn_footer{
        color: #385591;
        background-color: #daa0b3;
        font-size: 20px;
        padding: 8px 33px;
        border-radius: 15px;
        margin-top: 30px;
    }    

    .footer-columns{
      display: flex;
      width: 100%;
    }
}

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    padding: 10px 20px;
    flex-wrap: wrap;
  }
  
  .footer-left {
    color: white;
    margin: 0;
  }
  
  .footer-right {
    display: flex;
    gap: 20px;
  }
  
  .footer-right a {
    color: white;
    text-decoration: none;
  }