@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Use the Roboto font for the body */
#main,body {
    font-family: 'Roboto', sans-serif !important;
}


*,  *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a{
  text-decoration: none;
}

.pricing-header {
  background: #bcbfff57;
  border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #0000001a;
}
.titletab{
  font-size:32px;
}
.titre{
  font-size: 45px !important;
  color: #000 !important;
}

.souTitre{

  color: rgba(79, 79, 79, .7) !important;

  font-weight: 500 !important;

}

.fshint{

  font-weight: bold !important;

  font-size: 11px !important;

  margin-top: 20px;

  /* text-align: center; */

}

.bg{

  background-color: #ffffff;

  color: #FFF;

  margin: 70px 0;

}

.bg h1{

  font-weight: 600;

  font-size: 44px !important;

}

.fa-circle-xmark{

  text-align: center;

  color: red;

}

.btm{

  margin-bottom: 7px;

}

.form-switch{

align-items: center;

    display: flex;

margin-right: 10px;

}

.form-check-input{

margin-right: 10px !important;	

}
.Descfree{
  margin-bottom: 20px !important;
}
.stx{
  margin-bottom: 3px;
}
.fretrial{

  margin-top: 0px;

  min-height: 435px;

}
table{
  border-collapse: collapse !important;
}
#tableHeader{

  background-color: #FFF;

  position: -webkit-sticky  ;

  position: sticky !important;

  top: 70px !important;

   z-index: 1 !important; 

  /* border-top: 1px solid #dee2e6; */

}

i{

  font-size: 20px;

}



.lightrow th,.darkrow th {

  font-weight: normal;

  font-size: 14px;

}

#tableHeader th {

  font-size: 18px;

}







tr td{

  text-align: center;

  padding: 20px !important;

}

th{

  border-right: none;

  padding: 8px !important;

}

table>:not(caption)>*>*{

  background-image: none !important;

}

.fa-circle-check{

  text-align: center;

  color: #007BFF;

}

.lightrow{

  background-color: #FFF  !important;

  color: black !important;

}

.darkrow{

  background-color: #f5f4fc  !important;

  color: black !important;

}

.icn{

  margin-right: 6px;

}

.dis{

  text-decoration: line-through;

}

.titre{
  
  color: #281f5f;

}



.btn-color {

height: 50px;  

font-weight: 500;

background-color: #383c42 !important;

color: white !important; 

}



.btn-color:hover {

  background-color: none !important; /* Use 'initial' to reset to the default background color */

}



.btn-color-subscribe{

  background-color: #1E69B8;

   color: white !important;

}

.btn-color-table{

    background-color: #281f5f;

    color: white !important; 

    width: 100%;

   

}

.btn-color-subscribe a{

  text-decoration: none !important;

  color: white !important;



}



.pressedButton{

  background-color: #1E69B8 !important;

  color: white !important; 

}

.pricing-border {

  border: 1px solid rgb(208, 215, 255);

  border-radius: 10px;

  padding: 12px

}



.price {

  text-align: center;
  color: #281f5f !important;
  font-size: 2em;
  font-weight: bold;

}

.checkicon {

  color: #007BFF;

  font-size: 1em;

  font-weight: bold;

}



.price  span {

  font-size: 0.5em;

  /* color: #5D48DF; */

  color: #281f5f;

}



.strike-through {

  text-decoration: line-through;

  color: #6C757D;

}



.features {

  list-style: none;

  padding: 0;

  margin: 0;

}



.features li {

  padding: 5px 0;

}



.check-icon {

  color: #007BFF;

}

.packagename{
  margin-top: 0;
  margin-bottom: -11px !important;
  font-size: 25px !important;

}

.svp{

  min-height: 378px;

  

}

.svpf{

  min-height: 767px;

}

.see-all {

  color: #007BFF;

}

.savoirplus{

  color: #281f5f !important;

  text-decoration: none;

}

.savoirplus:hover{

  cursor: pointer;

  color :#5D48DF !important;

}

.tsbsize{

  font-size: 15px;

}

.custom-box {

  background-color: #a79de71c;

  border-radius: 12px;

}



/* Adjust the padding as needed */

.btn-try {

  padding: 10px 20px;

}



.custom-margin-right {

    margin-right: 10px;

}



.clT{

  width: 200px;

  border-right: 1px solid rgb(208, 215, 255);

}





#Features{

  color: #000000;

  height: 100px !important;

  /* background-color: black; */

  display: flex;

  align-items: center;

  border-right :none !important;

}



.reduction{
    margin-left: 10px;
    position: absolute;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    
    
  }
  .badge{ 
    font-size: 14px;
    position: absolute;
    /* transform: rotate(50deg); */
    background: #F00;
    right: 2px;
    top: 70%;
    border-radius: 8px;
    /* padding: 5px 20px; */
    
    
  }
  .mc{
    margin-bottom: 14px;
  }
  
@media screen and (max-width: 991px){

  .pricing-box{

    margin-top: 30px ;

  }
  #btnscon{

    position: sticky;
    top: 70px;
    background-color: #f5f4fc;
    z-index: 1;
  }

}

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

    th ,td{

    padding: 1px !important ;

    font-size: 10px;

    }



    tbody tr th{

    

    width: 150px !important;

    }

    



    .lightrow th,.darkrow th {

      width: 100%;

      display: flex;

      align-items: center;

      font-size: 10px !important;

      border-right:none;

      height: 62px;

    }



    #tableHeader th {

      font-size: 12px !important;

    }



    #tableHeader{

      top: 70px !important;  

    }

    

    .btn-color-table{

      /* width: 80px; */

    }

    #Features{

      border-right:none;

    }

    /* .clT{

      

      padding:0 3px !important;

      

    } */

}
@media screen and (max-width : 768px) {
  .badge{
    top: 63%;
  }
}

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

  #dirdown{

    display: none !important ;

  }

  #buttonsContainer{

    display: block !important ;

  }  

  

}

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

  #btnscon{

    position: sticky;
    top: 70px;
    background-color: #f5f4fc;

  }

  .bg h1{

    margin-top: 50px !important;

  }

  .informations{

    padding-top: 20px;

  }

}