#home-product-feature {
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
}

#a_titre_day {
    color: black; /* Couleur du texte du lien en noir */
    text-decoration: underline; /* Ajoute une ligne sous le texte du lien */
}

#home-product-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

#home-product-title {
    margin-bottom: 10px;
}

#home-product-description {
    margin-bottom: 15px;
}

#home-add-to-cart {
    background-color: #007bff;
    border-color: #007bff;
}

#home-introduction {
    text-align: justify;
}

#home-container{
    margin-top: 2%;
}

#home-container .text-justify {
    text-align: justify;
}

#home-delivery-conclusion-section h2 {
    margin-bottom: 1rem;
}

#home-delivery p,
#home-conclusion p {
    text-align: justify;
    margin-bottom: 1rem;
}


#home-container p {
    text-align: justify;
}

/* Spacing for bottom of sections */
#home-delivery-conclusion-section,
#home-conclusion {
    margin-bottom: 2rem;
}

.contact-preference {
    /* Styles pour la préférence de contact */
    margin-top: 1rem;
    margin-bottom: 1rem;
}


.logo-distrimania {
    /* Styles pour le logo Distrimania */
    width: auto; /* ou une taille spécifique */
    height: 50px; /* ou une taille spécifique */
}

 #carouselExampleIndicators .carousel-inner img {
     width: 100%;
     max-height: 88vh; /* Adjust the max height as needed */
     object-fit: cover; /* This will cover the area without stretching the image */
 }


/* Styles pour centrer le contenu dans le carousel */
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    text-align: center;
    color: #FFFFFF;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.carousel-caption h1 {
    font-size: 3vw;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    white-space: nowrap;
}

.carousel-caption p {
    font-size: 1.5vw;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.caption-content {
    margin-bottom: 20px; /* Espacement entre le contenu du texte et les boutons */
}

.carousel-caption a.btn {
    font-size: 1.2vw; /* Taille de police en fonction de la largeur de la fenêtre */
    padding: 10px 20px; /* Padding plus grand pour les boutons */
    transition: background-color 0.3s ease; /* Transition pour l'effet de survol */
}

.carousel-caption a.btn:hover {
    background-color: #D9534F; /* Changement de couleur au survol */
}

/* Ajoute un espace personnalisé entre les paires de colonnes */
@media (min-width: 768px) { /* S'applique uniquement aux écrans md et plus grands */
    #home-container .row>[class*='col-md-']:nth-of-type(odd) {
    padding-right: 25px;
    }

    #home-container .row>[class*='col-md-']:nth-of-type(even) {
        padding-left: 25px;
    }
}

@media (max-width: 767px) {
    .carousel-caption {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .carousel-caption h1 {
        font-size: 2.5vw;
    }

    .carousel-caption p {
        font-size: 2vw;
    }

    .carousel-caption a.btn {
        font-size: 2vw;
        padding: 5px 10px;
    }
}


.carousel-item .scroll-indicator {
    bottom: 20px;
    left: 50%;
    display: flex;
    justify-content: center;

    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.carousel-item .scroll-down {
    cursor: pointer;
    animation: blink 1.5s step-start 0s infinite;
    color: #fff;
    font-size: 2vw;
}

/* Animation pour faire clignoter la flèche */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}