/* Images responsives */
.img-fluid {
    width: 100%;
    height: auto;
}

/* Réduction des images dans la deuxième colonne (ligne 1) à 30% de leur taille initiale */
/* Réduction des images dans la deuxième colonne à 30% */
.image-row .col img {
max-width: 30% !important; /* Réduction de la taille des images à 30% */
margin: 0 auto;
display: block;
}

/* Réduire la taille des images du 2ème col (1ère ligne) */
.row:nth-child(1) .col-6 img {
width: 70% !important; /* Ajuste la taille à 70% */
height: auto;
}


/* Espacement entre les images */
.image-row .col {
    padding: 0.5rem;
}

/* Supprimer le background des colonnes */
.no-bg {
    background-color: transparent;
}
/* Réinitialisation globale */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Enlève tout espacement globalement */
.image-row {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}

/* Contrôle individuel des colonnes */
.image-row .col-6 {
padding: 0;
margin: 0;
}

/* Diminue la marge gauche de chaque image */
.image-row .col-6:nth-child(2), 
.image-row .col-6:nth-child(4), 
.image-row .col-6:nth-child(6) {
margin-left:-45px; /* Ajustez cette valeur pour corriger les espacements */
}

/* Style des images */
.image-row .col-6 img {
display: block;
width: 100%;
height: auto;
}

.mt-5 {
margin-top: 21rem !important;
}
@media (min-width: 1200px) {
.h3, h3 {
font-size: 3.5rem;
}
}


@media (max-width: 768px) {
.mt-5 {
margin-top:1rem !important;
}
}


@media (min-width: 992px) {
    .row:nth-child(1) .col-12.col-md-6:first-child p {
        margin-top: 80px;
        margin-left: 74px;
    }
}

/* Abaisser le texte dans la première colonne (col-1) sur les grands écrans sans chevauchement */
@media (min-width: 992px) {
.row:nth-child(1) .col-12.col-md-6:first-child p {
    margin-top: 80px; /* Ajustez cette valeur pour abaisser davantage */
    margin-left: 74px;
}

/* Ajustement des images dans la troisième colonne (ligne 2) pour éviter le chevauchement */
.row:nth-child(2) .col-4 img {
    transform: translateY(-135px); /* Lever les images légèrement */
}

/* Ajouter de l'espace entre les lignes */
.row:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 135px; /* Ajout d'espace pour éviter le chevauchement */
}

/* Réduire l'espacement entre les colonnes pour éviter le chevauchement */
.row .col-md-6 {
    margin-bottom: 10px;
}
}

/* Ajustement pour les tablettes (768px à 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.row:nth-child(2) .col-4 img {
    transform: translateY(-80px); /* Lever légèrement les images */
}

.row:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 80px; /* Ajouter de l'espace pour éviter le chevauchement */
}

.row .col-md-6 {
    margin-bottom: 10px; /* Réduire l'espacement entre les éléments */
}
}

/* Ajustement pour les petites tailles d'écran */
@media (max-width: 767px) {
.row .col-6 {
    margin-bottom: 15px; /* Espacement plus petit entre les colonnes */
}
}
/* Ajustements pour les tablettes (1024px) */
/* Ajustements pour les tablettes (1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
/* Ajuster les images dans la troisième colonne (ligne 2) */
.row:nth-child(2) .col-4 img {
    transform: translateY(-70px); /* Ajuster pour éviter chevauchement */
}

/* Ajouter un espacement supplémentaire pour éviter les chevauchements */
.row:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 80px; /* Un peu plus d'espace en bas */
}

/* Abaisser le texte de la première colonne pour un meilleur alignement */
.row:nth-child(1) .col-12.col-md-6:first-child p {
    margin-top: 40px; /* Ajuster la position du texte */
    
}

/* Réduire l'espacement entre les colonnes */
.row .col-md-6 {
    margin-bottom: 15px; /* Espacement plus léger entre les colonnes */
}

/* Ajustement de la taille des images de la deuxième colonne */
.row:nth-child(1) .col-6 img {
    width: 70%; /* Ajuster à 70% */
    height: auto;
}
}
@media (max-width: 320px) {
/* Correction du margin pour les colonnes spécifiques */
.image-row .col-6:nth-child(2), 
.image-row .col-6:nth-child(4), 
.image-row .col-6:nth-child(6) {
    margin-left: -14px; /* Ajuste le décalage horizontal */
}
}













    /* Styles généraux */
    * {      font-family: 'Poppins', sans-serif;

        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Section team */
    .team {
        background-image: url('C:/Users/elala/Desktop/trend assets/resrve/images/noir.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 656px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        padding: 50px 0;
        position: relative; /* Important pour que les éléments absolus soient relatifs à .team */
    }

    .team h1 {
        position: absolute;
        top: 20px; /* Positionnement depuis le haut de l'image */
        left: 220px; /* Positionnement depuis la gauche de l'image */
        font-size: 2rem;
        font-weight: bold;
        color: red;
        background-color: white;
        /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); */
        margin: 0;
        border-radius: 50px;
        font-family: poppins;
        padding: 6px 19px;
    }

    @media (min-width: 1400px) {
        /* .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
            max-width: 1190px;
        } */
    }

    /* Quand les colonnes deviennent verticales */
    @media (max-width: 768px) {
        .team {
            height: 1061px;
            background-size: cover;
        }

        .team h1 {
            font-size: 1.8rem;
            top: 15px;
            left: 15px;
        }
    }

    @media (max-width: 480px) {
        .team {
            height: 900px;
            background-size: cover;
        }

        .team h1 {
            font-size: 1.5rem;
            top: 10px;
            left: 10px;
        }
    }