.info-rectangle {
    background-color: #20212B; 
    border: 1px solid #FDBE33;
    color: #FDBE33; 
    padding: 20px; 
    margin-bottom: 20px;
    border-radius: 5px; 
    font-size: 20px; 
    text-align: center; 
    width: 50%;
    margin: 0 auto;
    margin-bottom: 20px;
}
/* Style pour la categorie de bouttons */
.custom-category-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.custom-category-button {
    padding: 10px 20px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    background-color: #FDBE33;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.custom-category-button:hover {
    background-color: #f8bc3b;
    color: white;
}

.custom-services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.custom-service-item {
    position: relative;
    width: 350px; /* Match the image width */
    height: auto;
    display: none; /* Hide by default, will be shown based on button click */
}

.custom-image-container img {
    width: 100%;
    border-radius: 8px;
    border:2px solid #FDBE33 ;
}

.custom-service-name {
    position: absolute;
    bottom: 10%;
    left: 5%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
}

.custom-services-container.custom-particulier-shown .custom-service-item {
    display: none;  /* Cacher tous les éléments */
}

.custom-services-container.custom-particulier-shown .custom-particulier {
    display: block; /* Montrer seulement les éléments "Particulier" */
}

.custom-services-container.custom-professionnel-shown .custom-service-item {
    display: none;  /* Cacher tous les éléments */
}

.custom-services-container.custom-professionnel-shown .custom-professionnel {
    display: block; /* Montrer seulement les éléments "Professionnel" */
}