body {
   transform: scale(0.9);  
    transform-origin: top left;
    width: 115%; 
    overflow-x: hidden;
    max-height : 150vh ;
}


.custom-col {
    max-width: 25%; /* This forces 6 columns per row */
    flex: 0 0 24%;
    


}

.icon-tarif  {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 75px;
    min-height: 75px;
    font-size: 35px;
    color: #fff;
    background: var(--accent-color);
    margin-right: 15px;
    line-height: 0;
    border-radius:11px;
  }
  


.card {
   
  
    border : 5px solid rgb(240, 240, 240) ;
    display: flex;
    flex-direction: column;
   justify-content: space-between;
   height : 90%;
  }

  
.card-head {
border-radius: 10px ;
padding: 12px ;
background-color: #1C1C1C;
text-align: center;
font-size: medium;
font-size: 16px;
min-height: 90px; /* Ajustez cette valeur en fonction de la hauteur souhaitée */
display: flex;
flex-direction: column;
justify-content: center; /* Centre verticalement le contenu */


}

.vip-card {
    background-color: #1C1C1C;
}

.btn-vip {  
background-color: #ffc107; 
color : black ; 
 font-weight: 450; 
border:1px solid #fac905;
}

.card-head h5 {
    color : #fac905 ;
    font-size: 16px;   

}
.card-head h4 {
    color : white ;
    font-size: 16px;

}
.card-body {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    align-items: center;
}

.card-text {
    font-weight: 600;
    padding: 0px;
    font-size: 12px;
    margin-bottom : 12px ; 
}

.list-unstyled li i {
    margin-right : 6px ;
    background-color: #fac905;
    border-radius : 14px;
    font-size: 8px;
    padding: 3px;
    color : black ;
    font-weight: bolder;

  }


  .premium-list li .fa-check {

    background-color: #003956;

    color : white ;
   
  }
  .premium-list li {
    color : #003956 ;
  }
  .standard-list li .fa-check {
   background-color:  #434343 ;
   color: white ;
  }

  .list-unstyled li  .fa-times {
 background-color: rgb(230, 230, 230) ;
color : white ;



border-radius : 14px;
font-size: 8px;
padding: 3px 4px;

font-weight: bolder;

  }

  .list-unstyled li  {
    padding-bottom: 10px ;
    font-size: 13px;
    font-weight: 600;
 
   }
   
   .list-unstyled .option-none {
    color : rgb(211, 211, 211);
    }
 
 
   .vip-list li  {
    color : white  ;
 
 }
 
 .premium-list li {
     color :#030303 ;
 
 }
 .btn:hover {
    color : white ;
    background-color: #003956;
 }






@media (max-width: 1300px) { /* Large screens */
    .custom-col {
        max-width: 25%; /* 4 cartes par ligne sur les grands écrans */
        flex: 0 0 25%;
        margin-top: 12px;
    }
}

@media (max-width: 991.98px) { /* Medium screens */
    .custom-col {
        max-width: 50%; /* 3 cartes par ligne sur les écrans moyens */
        flex: 0 0 50%;
        margin-top: 12px;
    }
}

@media (max-width: 767.98px) { /* Small screens */
    .custom-col {
        max-width: 60%; /* 2 cartes par ligne sur les petits écrans */
        flex: 0 0 60%;
        margin-top: 12px;
    }
}

@media (max-width: 575.98px) { /* Extra small screens */
    .custom-col {
        max-width: 100%; /* 1 carte par ligne sur les très petits écrans */
        flex: 0 0 100%;
        margin-top: 12px;
    }
}


.my-icon-text {
    padding: 10px;
}

.icon-custom {
    font-size: 2rem;
    color: #003956;
}

.text-title {
    margin: 0;
    font-size: 1.5rem;
    color: #003956;
}

.text-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: #777;
}
.badge-price {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #FFC107; /* Couleur de fond jaune */
    color: #333;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 10px;
}
.price {
 font-size: 1.5rem;    
}
.centered-hr {
    
    border: none; /* Remove default border */
    border-top: 2px solid #000; /* Customize the line style */
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .icon-custom {
        font-size: 1.5rem;
    }

    .text-title {
        font-size: 0.9rem;
    }

    .text-subtitle {
        font-size: 0.75rem;
    }
}
.btn {
   
    padding : 7px 23px ;
    border-radius : 10px ;  
}

.btn-premium , .badge-premium , .icon-premium {
    background-color: #003956;
    color :#9BEAFC ;
    border-color: #003956;
}

.btn-standard , .icon-standard , .badge-standard {
    background-color: #434343;
    color: white;
}
.icon-goldn {
    color : balck ;
}

.line {

    border: 0.001em solid #b3b3b3 ;
     width:75% ;
     
     margin: auto;
}