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

/* Use the Roboto font for the body */
#main {
    font-family: 'Roboto', sans-serif !important;
}
*,  *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.table td, .table th {
    vertical-align: middle;
  }
a{
  text-decoration: none;
}
.mc{
  margin-bottom: -5px !important;
}
.pricing-header {
  
  background: #bcbfff57;
  border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #0000001a;

}
.titre{
  font-size: 40px !important;
  color: #000 !important;
}
.souTitre{
  color: rgba(79, 79, 79, .7) !important;
  font-weight: 500 !important;
  font-size: 25px;
}
.fshint{
  font-weight: bold !important;
  font-size: 11px !important;
  margin-top: 20px;
  /* text-align: center; */
}
.bg{
  background-color: #ffffff;
  color: #FFF;
  /* height: 140px; */
  margin-top: 85px;
  margin-bottom: 70px;
}
.bg h1{
  font-weight: 600;
  font-size: 45px !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;	
}
.fretrial{
  margin-top: 0px;
}

table{
  border-collapse: collapse !important;
}

#tableHeader{
  background-color: #FFF;
  position: -webkit-sticky  ;
  position: sticky !important;
  top: 84px !important;
   z-index: 1 !important; 
  border-top: 1px solid #dee2e6 !important;
}
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 {
  color: #281f5f !important;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}
.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: -15px;
  font-size: 26px !important;
}
.svp{

  min-height: 409px;
}
.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 {
  
  max-width: 1300px  !important;
  margin: auto;
  background-color: #a79de71c;
  border-radius: 12px;

}
.page-id-22009 .col-full{
  max-width: 1300px  !important;
}
#tablecontainerdiv{
  
  max-width: 1300px  !important;
  margin: auto;

  
}
.svpjaltest{
  min-height: 568px;
}
.jaltestpackname{
  font-size: 24px !important;
}

/* Adjust the padding as needed */
.btn-try {
  padding: 10px 20px;
}

.custom-margin-right {
    margin-right: 10px;
}

.clT{
  border-right: 1px solid #dee2e6;
  width: 200px;
}

.mg{
  margin-top: 24px !important;
}
#Features{
  color: #000000;
 
  border-left: 1px solid #dee2e6;
  text-align :center !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; */
    
  }
  

  @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 (min-width: 993px){
  
  #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;
    font-size : 29px;
  }
  .souTitre{
      font-size : 19px ;
  }

  .informations{
    padding-top: 20px;
  }
  
}
@media screen and (max-width: 386px) {
    #fullpack{
            margin-top: 33px !important;
    }
}