/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */
@media (min-width:1px) {

    /* general */
    body {
        padding-top: 4rem;
    }

    .section-clients h1 {
        text-align: center;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 42px;
    }

    .section-clients {
        background: #fdfdfd;
        padding: 2rem 2rem 4rem 2rem;
    }

    .carte-client {
        background: #ffffff;
        border-radius: 3px;
        box-shadow: 0px 1px 8px rgb(0 0 0 / 8%);
        padding: 1.5rem 2rem;
        margin: 0 1rem 3rem 1rem;
        min-width: 18rem;
        max-width: 45%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }

    .col-img {
        display: flex;
        margin-bottom: 1rem;
    }

    .col-txt {
        flex-grow: 1;
        width: 100%;
    }

    .carte-client h3 {
        font-family: 'Kanit', sans-serif;
        font-size: 20px;
        color: #2C373F;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
    }

    .carte-client a {
        width: -moz-fit-content;
        width: fit-content;
        margin: auto auto auto 0px;
    }

    .carte-client img {
        width: auto;
        height: 85px;
    }

    .carte-client p {
        font-family: 'Biryani', sans-serif;
        font-size: 14px;
        color:#697077;
        margin: 0;
    }

    .voir-plus {
        padding: 0.7rem 1.2rem;
        border-radius: 6px;
        border: none;
        background-color: #FF9933;
        color: #ffffff;
        font-size: 16px;
        font-family: 'Kanit', sans-serif;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.1s ease-in-out;
        max-width: -moz-fit-content;
        max-width: fit-content;
    }

    .voir-plus:hover {
        background-color: #F07E13;
    }

    /* style section expériences */

    .section-experience {
        background: #fdfdfd;
        padding: 3rem 1rem 4rem 1rem;
    }

    .section-experience h2 {
        text-align: center;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 42px;
    }

    .section-subtitle {
        text-align: center;
        font-size: 18px;
        color: #2C373F;
        font-family: 'Kanit', sans-serif;
        margin-bottom: 3rem;
        font-weight: 500;
    }

    .col-exp {
        width: 100%;
        padding: 0rem;
        margin: 0 0 2rem 0;
    }

    .col-exp h3 {
        font-size: 26px;
        color: #2C373F;
        margin-bottom: 1rem;
        text-align: left;
    }

    .col-exp p {
        font-size: 15px;
    }

    .row-arguments {
        justify-content: space-evenly;
        margin-top: 1.5rem;
    }

    .argument-exp {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: start;
        padding: 0 1rem;
        margin-bottom: 1.5rem;
    }

    .argument-exp img {
        display: none;
        height: auto;
        width: 50px;
    }

    .dot {
        height: 7px;
        width: 7px;
        background-color: #f07e13;
        border-radius: 50%;
        display: inline-block;
        margin: 0.38rem 0.5rem auto 0;
      }

    .argument-exp p {
        margin: 0;
        width: 100%;
        height: 100%;
        text-align: left;
        font-weight: 600;
        font-size: 16px;
        color:#F07E13;
    }

    .banner-container {
        width: auto;
        height: 10rem;
        margin: 0rem 2rem;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #banner01 {
        background-image: url("../img/banner-exp-01.jpg");
    }

    #banner02 {
        background-image: url("../img/banner-exp-02.jpg");
    }

    #banner03 {
        background-image: url("../img/banner-exp-03.jpg");
    }

    #banner04 {
        background-image: url("../img/banner-exp-04.jpg");
    }

    #banner05 {
        background-image: url("../img/banner-exp-05.jpg");
    }

    #banner06 {
        background-image: url("../img/banner-exp-06.jpg");
    }


    .text-exp-container {
        padding: 1rem 2rem 2rem 2rem;
    }

    /* style CTA */

    .exp-cta {
        justify-content: center;
    }

    .exp-cta p {
        text-align: center;
        color:#2C373F;
        font-weight: 600;
        margin-bottom: 2rem;
    }

    .exp-cta a {
        width: -moz-fit-content;
        width: fit-content;
    }

    .exp-cta button {
        padding: 0.7rem 1.2rem;
        border-radius: 6px;
        border: none;
        background-color: #FF9933;
        color: #ffffff;
        font-size: 16px;
        font-family: 'Kanit', sans-serif;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.1s ease-in-out;
    }

    .exp-cta button:hover {
        background-color: #F07E13;
    }


}




/* ----------------------------------------------- */
/* ---------- PETIT TABLETTE SM - 576px ---------- */
@media (min-width:576px) {

    .carte-client {
        min-width: 20rem;
        max-width: 70%;
        flex-wrap: nowrap;
        text-align: left;
    }

    .col-img {
        display: flex;
        margin-right: 2rem;
        margin-bottom: 0; 
    }

    .col-txt {
        width: auto;
    }

    /* style exp SM */
    .section-experience {
        padding: 3rem 2rem 4rem 2rem;
    }

    .col-exp h3 {
        font-size: 32px;
        text-align: center;
    }

    .col-exp p {
        font-size: 16px;
    }

    .row-arguments {
        margin-top: 2.5rem;
    }

    .argument-exp {
        width: 32%;
        padding: 0 1rem;
        margin-bottom: 0rem;
        flex-wrap: wrap;
    }

    .argument-exp img {
        display: block;
        margin: 0 auto 1rem auto;
    }

    .dot {
        display: none;
      }

    .argument-exp p {
        text-align: center;
        font-size: 14px;
        color: #242424;
    }
    
}

/* ----------------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {

    .carte-client {
        min-width: 20rem;
        max-width: 45%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        text-align: left;
    }

    /* style exp MD */
    .col-exp {
        width: 90%;
        padding: 0rem;
        margin: 0 3rem 5rem 3rem;
        border: 3px solid #F07E13;
        background: #ffffff;
        box-shadow: 0px 1px 8px rgb(255 141 0 / 30%);
    }

    .banner-container {
        width: 100%;
        height: 12rem;
        margin: 0rem;
    }
    
}

/* ----------------------------------------------- */
/* ---------- PETIT ECRAN LG - 992px ---------- */
@media (min-width:992px) {

    .section-clients {
        padding: 4rem 2rem 3rem 2rem;
    }

    .carte-client {
        min-width: 25rem;
        max-width: 45%;
    }

    .carte-client h3 {
        font-size: 24px;
        margin-bottom: 0.7rem;
    }

    .carte-client p {
        font-size: 16px;
    }

    .carte-client img {
        height: 100px;
    }

    /* style exp LG */
    .col-exp {
        width: 80%;
    }

    
}



/* --------------------------------------------- */
/* ---------- ECRAN MOYEN XL - 1200px ---------- */
@media (min-width:1200px) {

    .carte-client {
        min-width: 23rem;
        max-width: 30%;
    }

    /* style exp XL */

    .col-exp {
        width: 40%;
        transition: transform 0.2s ease-in-out;
        transform: scale(1) translateZ(0);
        backface-visibility: hidden;
        -webkit-font-smoothing: subpixel-antialiased;
    }

    .col-exp:hover {
        transform: scale(1.024);
        box-shadow: 0px 1px 8px rgb(255 141 0 / 40%);
    }

}



/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {

    .carte-client {
        min-width: 20rem;
        max-width: 22%;
    }

}

/* ---------------------------------------------- */
/* ---------- CAS PARTICULIER - 1900px ---------- */
@media (min-width:1900px) {


}