.form-control-qte{
    width: 20px !important;
}

.btn-success{
    background-color: #1BA1F2 !important;
}

.cad-img-favoris{
    overflow: hidden;
    height: 60px;
    width: 60px;
    border-radius: 10px;
}
.cad-img-favoris img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.form-control-contact{
    color: black !important;
    text-align: left !important;
    padding-left: 10px !important;
    font-weight: 350 !important;
    border: none !important;
}

.form-control-ps1{
    display: block !important;
    padding: 17px;
}

.btn-hover-text-success {
    --bs-btn-hover-color: #e0a312;
  }

  @media (max-width: 767px) {
    .tp-error-content {
        font-size: 30px;
        text-align: center;
    }
}


/* .header-brands img {

    object-fit: contain;
    transition: transform 0.3s ease;
    margin-top: 50px;
} */


/* .header-brands:hover img {
    transform: scale(1.5);
} */
.btn-bg-primary2 {
    background-color:#1BA1F2;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}



.btn-bg-secondary2 {
    background-color: #1BA1F2;
    /* Couleur de fond, bleu dans cet exemple */
    color: #ffffff;
    /* Couleur du texte, blanc dans cet exemple */
    border: none;
    padding: 10px 20px;
    /* Optionnel, ajuste la taille */
    border-radius: 5px;
    /* Optionnel, arrondit les coins */
    text-decoration: none;
    /* Supprime le soulignement */
}


.testimonial-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: #f8f9fa;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    font-weight: 600;
    font-size: 1rem;
}

.form-control {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #495057;
    background-color: #fff;
    border-radius: 25px;
}

textarea.form-control {
    border-radius: 15px;
}

button.btn {
    padding: 0.5rem 2rem;
    font-size: 1.125rem;
    transition: background-color 0.3s ease;
}

button.btn-primary {
    background-color: #bd9944;
    border-color: #bd9944;
}

button.btn-primary:hover {
    background-color: #bd9944;
    border-color: #bd9944;
}

.alert {
    max-width: 600px;
    margin: 1rem auto;
}

.top-left {
    position: absolute;
    top: 8px;
    right: 18px;
    color: #bd9944;
}

.top-right {
    position: absolute;
    top: -30px;
    right: 18px;
    color: #bd9944;
}

.image-center {
    display: flex;
    justify-content: center;
}
  /* Assurez-vous que les images du carrousel sont responsives */
  .carousel-inner img {
    width: 80%;
    height: auto;
}

/* Ajustez la taille du texte du carrousel pour les petits écrans */
@media (max-width: 768px) {

    .carousel-caption p,
    .carousel-caption h1 {
        font-size: 1rem;
        /* Ajustez la taille selon vos besoins */
    }

    .carousel-caption .btn {
        font-size: 0.875rem;
        /* Ajustez la taille du bouton selon vos besoins */
    }
}

/* Assurez-vous que les contrôles du carrousel sont adaptés pour les petits écrans */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    /* Ajustez la largeur des contrôles */
    height: 100%;
}
.axil-breadcrumb-item1 {
    font-size: 14px;
    color: #bd9944;

}

.axil-breadcrumb-item.active {
    font-weight: bold;
    color: #bd9944;

}

.axil-breadcrumb-item:not(.active)::after {
    content: " / ";

    color: #bd9944;
}

.fixed-image {
width: 200px;
height: 100px;
object-fit: cover; /* Conserve le ratio sans déformation */
border-radius: 8px;
}
.axil-breadcrumb-item1 {
    font-size: 14px;
    color: #bd9944; /* Default breadcrumb color */
}

.axil-breadcrumb-item.active {
    font-weight: bold;
    color: #bd9944; /* Distinct color for active item */
}

.axil-btn1 {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.btn-bg-primary1 {
    background-color: #c9aeae
    ; /* Example primary color */
    color: #fff;
    border: none;
}
.btn-bg-promotion {
    background-color: #ddc8c8
    ; /* Example primary color */
    color: #fff;
    border: none;
}

.btn-outline1 {
    background-color: transparent;
    color: #5EA13C
    ;
    border: 2px solid #5EA13C
    ;
}

.axil-btn1.btn-bg-primary1.btn-outline1:hover {
    background-color: #5EA13C
    ; /* Darker shade on hover */
    color: #fff;
}



.header-top-text {
    width: 100%; /* Prend toute la largeur */
    overflow: hidden; /* Cache le texte qui dépasse */
    background: #9c9f40; /* Couleur de fond */
    padding: 10px 0;
    text-align: center;
}

.header-top-text p {
    display: inline-block;
    white-space: nowrap; /* Empêche le texte de sauter à la ligne */
    animation: clignoter 1.5s infinite alternate, defilement 15s linear infinite; /* Clignotement + Défilement */
    color: #333; /* Couleur du texte */
    font-weight: bold;
    gap: 10px;
}

@keyframes clignoter {
    0% {
        opacity: 1; /* Visible */
    }
    100% {
        opacity: 0; /* Invisible */
    }
}

@keyframes defilement {
    0% {
        transform: translateX(100%); /* Commence à droite */
    }
    100% {
        transform: translateX(-100%); /* Va à gauche */
    }
}

.header-top-text {
    width: 100%; /* Prend toute la largeur */
    overflow: hidden; 
    background: #2C3E50; /* Couleur de fond (modifiable) */
    padding: 10px 0; /* Espace haut/bas */
}

.scroll-text {
    display: block;
    width: 100%;
    white-space: nowrap; /* Évite le retour à la ligne */
    overflow: hidden; 
    position: relative; /* Position relative pour l'animation */
}

.scroll-text p {
    display: inline-block;
    padding-left: 100%; /* Départ hors écran */
    animation: scroll 30s linear infinite; /* Animation infinie */
    font-size: 16px;
    color: #fff; 
    font-weight: bold;
    text-transform: uppercase; /* Optionnel pour le style */
}

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Pause au survol */
.scroll-text:hover p {
    animation-play-state: paused;
}


#dropdown-header-menu {
    color: #ffffff;
    /* Text color */
    background-color: #d6c1c7;
    /* Background color */
    border: 1px solid #e2890b;
    /* Border color */
    padding: 8px 12px;
    /* Padding for a better look */
    border-radius: 4px;
    /* Rounded corners */
}

/* Change styles when the dropdown is open */
#dropdown-header-menu[aria-expanded="true"] {
    background-color: #5EA13C;
    /* Darker background when active */
    color: #ffffff;
    /* Text color when active */
    border-color: #bd9944;
    /* Darker border when active */
}

/* Optional: Style the icon specifically */
#dropdown-header-menu .fa-th-large {
    font-size: 20px;
    /* Icon size */
    margin-right: 5px;
    /* Spacing between icon and text */
}

/* Hover effect */
#dropdown-header-menu:hover {
    background-color: #f3ba0e;
    /* Slightly different color on hover */
    color: #ffffff;
    /* Hover text color */
    border-color: #5EA13C;
    /* Hover border color */
}



.custom-dropdown {
    position: relative;
    display: inline-block;


}

.dropbtn {
    background-color: #f7fef7;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content .dropdown-item {
    background-color: white;
    border: none;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dropdown-content .dropdown-item img {
    margin-right: 8px;
}

.dropdown-content .dropdown-item:hover {
    background-color: #f8f3f3;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #eef4ee;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .dropbtn {
        font-size: 14px;
        padding: 8px;
    }

    .dropdown-content .dropdown-item {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* Banières */

.carousel-item img {
    height: 600px; /* Ajuste la hauteur selon ton besoin */
    object-fit: cover; /* Assure un bon recadrage sans déformation */
     
}

/* Tablettes */
@media (max-width: 992px) {
    .carousel-item img {
        height: 400px; /* Réduire la hauteur sur tablette */
    }
}

/* Mobiles */
@media (max-width: 768px) {
    .carousel-item img {
        height: 300px; /* Hauteur plus petite pour mobile */
    }
}