:root {
  --couleur-principale: #00DFDE;
  --couleur-secondaire: #16A2A2;
  --couleur-noir: #000000;
  --couleur-clair: #ffffff;
  --couleur-gris: #EFEFEF;
}
@font-face {
    font-family: 'VisbyCF';
    src: url('../font/VisbyCF-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
} 



/************************************************
* TITLE SECTION
************************************************/
#title {
    text-align: center;
}

#subtitle {
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
    width: 100%;
}

#subtitle p {
    margin: 0;
}


.section {
    width: 90%;
    margin: auto;
    font-size: 20px;
    text-align: center;
}

/************************************************
* TEAM SECTION
************************************************/
.section_team_image {
    width: 100%;
    margin: auto;
}

.section_team_image img {
    width: 100%;
}

.section_team_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.section_team_item {
    width: 100%;
    margin-top: 30px;
}

.section_team_item+.section_team_item {
    margin-top: 40px;
}

.section_team_item_name {
    text-align: center;
    color: var(--couleur-principale);
    font-size: 24px;
    font-family: 'VisbyCF', sans-serif;
    margin-bottom: 20px;
}

.section_team_item_desc {
    text-align: justify;
    font-size: 16px;
}

.section_team_experience {
    font-weight: 600;
    font-size: 20px;
    margin-top: 50px;
}

.section_team_customer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
}

.section_team_customer_image {
    width: 50%;
    margin: auto;
}

.section_team_customer_image img {
    width: 100%;
}

/************************************************
* OFFER SECTION
************************************************/
#section_offer_title {
    font-size: 24px;
    text-align: center;
    color: var(--couleur-clair);
    font-weight: 500;
}

.section_offer_container {
    display: flex;
    flex-direction: column;
    color: var(--couleur-clair);
    gap: 50px;
    margin-top: 30px;
}

.section_offer_item_icon {
    width: 50%;
    margin: auto;
    margin-left: 27%;
}

.section_offer_item_icon img {
    width: 100%;
}

.section_offer_item_title {
    font-size: 20px;
    width: 50%;
    margin: auto;
    font-weight: 600;
    text-align: center;
}


@media screen and (min-width: 992px) {

    #title {
        text-align: left;
    }
    #section_title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 90%;
        margin: auto;
        align-items: center;
        text-align: left;
    }

    #subtitle {
        font-size: 27px;
        text-align: left;
    }

    /************************************************
    * TEAM SECTION
    ************************************************/
    .section_team_image {
        width: 80%;
    }

    .section_team_content {
        flex-direction: row;
        margin-top: 30px;
    }

    .section_team_item {
        width: 45%;
        margin-top: 0px;
    }

    .section_team_item+.section_team_item {
        margin-top: 0px;
    }

    .section_team_item_name {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .section_team_item_desc {
        font-size: 22px;
    }

    .section_team_experience {
        font-size: 25px;
        width: 80%;
        margin: auto;
        margin-top: 50px;
    }

    .section_team_customer {
        flex-direction: row;
        justify-content: space-between;
        gap: 0px;
    }

    .section_team_customer_image {
        width: 15%;
    }

    /************************************************
    * OFFER SECTION
    ************************************************/
    #section_offer_title {
        font-size: 28px;
    }

    .section_offer_container {
        flex-direction: row;
        gap: 0px;
        margin-left: 100px;
    }

    .section_offer_item {
        width: 25%;
    }

    .section_offer_item+.section_offer_item {
        margin-left: -100px;
    }

    .section_offer_item_icon {
        width: 80%;
        margin: auto;
        margin-left: 15%;
    }
    
    
}


@media screen and (min-width: 1200px) {
    #section_title {
        width: 90%;
    }
    
    
}

@media screen and (min-width: 1400px) {
   
    
}

@media screen and (min-width: 1600px) {
   
    
}

@media screen and (min-width: 1800px) {
    
}