/* Styles pour la section avec l'arrière-plan d'image */
section {
    background: url(Image/Entete\ du\ site.jpg) no-repeat; /* Image de fond sans répétition */
    background-position: 50% 55%;
    background-size: cover; /* Ajuste la taille de l'image de fond pour couvrir la section */
    height: calc(60vh - 150px); /* Hauteur de la section calculée */
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    margin: 20px 0;
    color:rgb(20, 19, 87);
}

h2::after {
    content: ""; /* Ajoute un pseudo-élément vide après le titre h1 */
    height: 4px; /* Hauteur de la ligne décorative */
    width: 230px; /* Largeur de la ligne décorative */
    background-color: #016901; /* Couleur verte de la ligne */
    display: block; /* Affiche le pseudo-élément comme un bloc */
    margin: auto; /* Centre la ligne horizontalement */
}

h3 {
    font-size: 1.5rem;
    text-align: center;
    margin: 20px 0;
    color:rgb(255, 255, 255);
}

/* Styles pour la section services */
.services {
    width: 85%; /* La section services prend 85% de la largeur disponible */
    display: flex; /* Utilise Flexbox pour disposer les éléments en ligne */
    justify-content: space-between; /* Espace les éléments de manière équitable */
    align-items: center; /* Centre verticalement les éléments */
    margin: 75px auto; /* Ajoute des marges extérieures pour centrer horizontalement */
    text-align: center; /* Centre le texte dans la section */
}

/* Styles pour les cartes (cards) de services */
.card {
    width: 100%; /* Les cartes prennent 100% de la largeur disponible */
    display: flex; /* Utilise Flexbox pour disposer les éléments en ligne */
    justify-content: space-between; /* Espace les éléments de manière équitable */
    align-items: center; /* Centre verticalement les éléments */
    flex-direction: column; /* Aligne les éléments en colonne */
    margin: 0px 20px; /* Ajoute des marges horizontales de 20px */
    padding: 20px 20px; /* Ajoute des marges intérieures de 20px */
    background-color:rgb(20, 19, 87); /* Couleur de fond gris clair */
    border-radius: 10px; /* Coins arrondis des cartes */
    cursor: pointer; /* Change le curseur en main au survol */
    margin-bottom: 20px; /* Ajoute une marge en bas des cartes */
}
/* Styles pour le texte des cartes */
.card p {
    font-size: 17px; /* Taille de la police */
    margin-bottom: 30px; /* Marge en bas du paragraphe */
    line-height: 1.5; /* Hauteur de ligne pour améliorer la lisibilité */
    color: rgba(255, 255, 255, 0.6); /* Couleur du texte avec une opacité de 60% */
    width: 80%;
    
}
/* Styles pour les lignes de services */
.services .row {
    display: flex; /* Utilise Flexbox pour disposer les éléments en ligne */
    flex-wrap: wrap; /* Permet aux éléments de passer sur la ligne suivante */
    justify-content: center; /* Espace les éléments de manière équitable */
    gap: 20px; /* Ajoute de l'espace entre les éléments */
    margin: 0 -10px; /* Marges horizontales négatives pour compenser l'espacement */
    align-items: center; /* Centre verticalement les éléments */
}

/* Styles pour les images dans les colonnes de services */
.services img {
    margin-top: 0; /* Supprime la marge en haut des images */
    display: block; /* Affiche les images comme blocs */
    margin-left: 50px; /* Marge à gauche des images */
    margin-right: 50px; /* Marge à droite des images */
    width: 95%; /* Largeur de 95% de la colonne */
    height: 400px; /* Hauteur fixe de 250px */
    object-fit: cover; /* Remplissage du conteneur sans déformation */
    border-radius: 5px; /* Coins arrondis des images */
}

/* Styles pour le devis */
.separator {
    flex-direction: column;
    display: flex; /* Utilise une disposition en ligne pour le séparateur */
    align-items: center; /* Centre les éléments verticalement */
    justify-content: center; /* Centre horizontalement */
    height: auto; /* Hauteur du séparateur pour centrer verticalement */
    background-color:rgb(20, 19, 87); /* Couleur de fond du séparateur */
    text-align: center;
    margin: 20px 0;
}

.separator-text {
    font-size: 30px; /* Taille de police du texte "Nos Services" */
    color: white; /* Couleur du texte */
    margin-bottom: 10px;
}

.separator p {
    margin-bottom: 20px;
    font-size: 16px;
    color: aliceblue;
}

button {
    background-color: rgb(31, 29, 127); /* Couleur de fond bleue */
    color: white; /* Couleur du texte */
    border: none; /* Supprimer les bordures par défaut */
    padding: 10px 20px; /* Espacement interne du bouton */
    font-size: 16px; /* Taille du texte du bouton */
    cursor: pointer; /* Changer le curseur au survol */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Animation de la couleur de fond au survol */
}
button:hover {
    background-color: rgb(42, 40, 171); /* Couleur bleue plus foncée au survol */
}

@media (max-width: 768px) {
    section {
        height: calc(40vh - 150px); /* Hauteur réduite pour mobile */
        background-position: center;
    }

    h2{
        font-size: 1.1rem; /* Taille de police réduite pour les titres */
    }

    h3{
        font-size: 0.8rem;
    }

    .row p{
       font-size: 0.5rem; 
    }

    h2::after{
        height: 2px; /* Hauteur de la ligne décorative */
        width: 130px; /* Largeur de la ligne décorative */
    }
    .carousel-btn{
        font-size: 1em;
        top: 80%;
        transform: translateY(-50%); /* Ajuste pour être parfaitement centré */
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    section {
        height: calc(40vh - 150px); /* Hauteur réduite pour mobile */
        background-position: center;
    }

    h2{
        font-size: 1.1rem; /* Taille de police réduite pour les titres */
    }

    h3{
        font-size: 0.8rem;
    }

    .row p{
       font-size: 0.5rem; 
    }

    h2::after{
        height: 2px; /* Hauteur de la ligne décorative */
        width: 130px; /* Largeur de la ligne décorative */
    }
}
@media only screen and (min-width: 1024px) {
    section {
        height: calc(40vh - 150px); /* Hauteur réduite pour mobile */
        background-position: center;
    }

}