/*general*/
.container-about{
    width: 90%;
    margin: 0 auto;
}

.container-about2{
    width: 90%;
    margin: 0 auto;
}



.about-h2 {
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 75px;
    color: #02558B;
    position: relative;
    width: unset;
    margin-bottom: 6vh;
}


/*header*/

.about-header{
    background: url("../img/rectangle8.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 376px;
}

.about-h1{
    position: absolute;
    width: fit-content;
    height: fit-content;
    top: 168px;
    left: 20%;
    margin: auto;
    font-size: 72px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    display: inline-table;
}

.about-h1::after{
    content: "";
    position: absolute;
    width: 129px;
    height: 2px;
    background: #FFFFFF;
    bottom: 15px;
    margin-left: 20px;
}

/*Our Spirit*/

#spirit{
    margin-bottom: 10vh;
}

.image-about {
    background-color: #e2e2e285;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    z-index: 2;
    margin-top: -20vh;
    width: 100%;
    height: 81vh;
    filter: drop-shadow(0px 11px 52px rgba(0, 0, 0, 0.2));
}


.spirit-txt-container{
    margin-top: 4vh ;
    padding: 3%;
}

.ourspirit-img-container{
    height: fit-content;
}



.spirit-title{
    text-align: right;
    margin-right: 10%;
    width: unset!important;
}

.spirit-title::before{
    content: "";
    position: absolute;
    width: 129px;
    height: 2px;
    background: #D9272D;
    bottom: 15px;
    margin-left: -144px;
}

.skinny-h2{
    font-weight: 300;
}


.spirit-text p{
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    /* line-height: 18px; */
    width: 68%;
    margin: 2vh auto;
}

.spirit-image{
    margin-top: -25vh;
    right: 0;
    z-index: 2;
}

#horizontale-spirit-circles{
    left: -50px;
    bottom: -51px;
}


/*factory*/

.factory-title{
    margin-left: 5%;
    width: fit-content;
    margin-bottom: 3vh;
}

.factory-title::after{
    content: "";
    position: absolute;
    width: 200px;
    height: 2px;
    background: #D9272D;
    bottom: 15px;
    margin-left: 20px;
}

.factory-image{
    margin: 0 1%;
    width: 319px!important;
    height: 252px;
    border-top: 16px solid #9CDAEA;
}

.images-factory-container{
    width: fit-content;
    margin: 0 auto;
    justify-content: center;
}

.factory-img2{
    height: 30vh;
    width: 19vw;
    margin: 0 20px;
    border-top: 16px solid #9CDAEA;

}

.factory-text-container{
    padding: 1%;
}

.factory-text{
    width: 94%;
    text-align: justify;
    padding-left: 20px;
    padding-right: 20px;
}

/* Recherche et développement */

#recherche{
    margin: 7vh 0 16vh 0;
}

.recherche-title{
    text-align: right;
    margin-bottom: 5vh;
}

.recherche-title::before{
    content: "";
    position: absolute;
    width: 14%;
    height: 2px;
    background: #D9272D;
    bottom: 15px;
    margin-left: -16%;
}

.recherche-text{
    margin-top: 3vh;
}

.recherche-text {
    width: 90%;
    margin: 0 auto;
}

.recherche-text p{
    margin: 0 auto 2vh auto;
}

.frame-recherche{
    width: 90%;
    margin: 0 auto;
}

/* Team */

#team{
    margin-left: 5%;
    margin-bottom: 4vh;
}

.team-title::after{
    content: "";
    position: absolute;
    width: 300px;
    height: 2px;
    background: #D9272D;
    bottom: 15px;
    margin-left: 20px;
}

.team-image {
    border-top: 16px solid #9CDAEA;
    margin-top: -110px;
    z-index: 3;
    background-size: cover !important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    height: 800px;
    position: absolute;
    bottom: 0;
}


#horizontale-team-circles{
    top: -160px;
    left: -50px;
}

.member-bio-container{
    padding: 6vh 3% 0 0;
}

.name-member{
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 48px;
    line-height: 56px;
    color: #323232;
    text-align: right;
    margin-right: 4%;
}

.fonction-member{
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    text-align: right;
    text-transform: capitalize;
    color: #D9272D;
    margin-right: 4%;
}

.description-member p{
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    text-align: justify;
    color: #2B465A;
    width: 52%;
    margin-left: 44%;
}

.team-arrow-container {
    width: 15%;
    margin-left: 78%;
    margin-top: 5vh;
    margin-bottom: 2vh;
}

.miniature-img-team{
    height: 300px;
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
}

.team-miniature-container{
    position: absolute;
    bottom: 0;
}

.team-arrow{
    color: #9CDAEA;
    font-size: 72px;
}

.members-image-container{
    bottom: 0;
    right: 0;
    padding-left: 4%;
}

.membre-img{
    margin: 0 1%;
}

/* ----------------------------------- mobile */

.spirit-txt-container-mobile{
    display: none;
}

.images-factory-container-mobile{
    display: none;
}

.images-factory-container-small-mobile{
    display: none;
}

.frame-recherche-mobile{
    display: none;
}

#team-mobile{
    display: none;
}

.slick-mobile-container{
    height: max-content;
    position: relative;
}

.team-arrow-container-mobile{
    z-index: 3;
    position: absolute;
    bottom: 0vh;
    padding: 0px 0px;
    
}

.miniature-img-team-mobile{
    height: 200px;
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
}


.team-image-mobile{
    border-top: 16px solid #9CDAEA;
    z-index: 3;
    background-size: cover !important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    height: 60vh;
}


.next-mobile{
    position: absolute;
    z-index: 3;
    height: 100%;
    right: 0;
    background: linear-gradient(-90deg, rgba(0,0,0,0.8127626050420168) 7%, rgba(0,0,0,0) 100%);
    padding: 40px 10px;
}

.prev-mobile{
    position: absolute;
    z-index: 3;
    height: 100%;
    left: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.8127626050420168) 7%, rgba(0,0,0,0) 100%);
    padding: 40px 10px;
}

/*_______________________________________________ responsive*/

@media (max-width: 1401px){

    .team-image {
        height: 766px;
    }

    .team-title{
        margin-bottom: 2vh!important;
    }

    .miniature-img-team {
        height: 167px;
    }

    .team-title::after {
        width: 235px;
    }
}

@media (max-width: 1221px){
    .factory-text {
        width: 94%;
        text-align: justify;
        padding-left: 20px;
        padding-right: 0px;
    }


    .team-image {
        height: 730px;
    }

    .member-bio-container {
        padding: 2vh 3% 0 0;
    }
}

@media (max-width: 1164px){

    .about-h2 {
        font-size: 50px;
    }

    .spirit-text {
        width: 100%;
    }

    .spirit-image {
        margin-top: -7vh;
    }

    .team-image {
        height: 666px;
    }

}


@media (max-width: 992px){

    .about-h1 {
        top: 58px;
        left: 3%;
        margin: auto 0 auto 1%;
        font-size: 36px;
    }

    .about-header {
        height: 203px;
    }

    .image-about {
        height: 43vh;
        margin-top: -5vh;
    }

    .about-h2 {
        font-size: 53px;
        margin-bottom: 5vh;
        margin-top: 5vh;
    }

    .spirit-image {
        margin-top: -9vh;
        margin-bottom: 5vh;
    }

    .spirit-txt-container{
        display: none;
    }

    .spirit-txt-container-mobile{
        display: block;
    }

    #horizontale-spirit-circles{
        display: none;
    }

    #spirit{
        margin-bottom: 5vh;
    }

    .spirit-image {
        margin-top: -6vh;
        margin-bottom: 5vh;
    }

    .ourspirit-img{
        width: 80%!important;
        float: right;
    }

    .spirit-text{
        width: 90%;
        margin: 2vh auto;
        text-align: justify;
    }

    .spirit-text p{
        width: 100%;
    }

    .spirit-title {
        text-align: right;
        margin-right: 5%;
    }

    .images-factory-container{
        display: none;
    }

    .images-factory-container-mobile{
        display: block;
    }

    .empty-factory-col{
        display: none;
    }

    .factory-text p {
        text-align: justify;
        width: 100%;
        font-size: 18px;
    }

    .factory-text{
        width: 100%;
        padding-right: 0px;
    }

    .factory-img2 {
        height: 30vh;
        width: 45%;
        margin: 10px 20px;
        border-top: 16px solid #9CDAEA;
    }

    #recherche {
        margin: 5vh 0 5vh 0;
    }
    

    .recherche-text p {
        text-align: justify;
        font-size: 18px;
    }

    .frame-recherche{
        display: none;
    }

    .frame-recherche-mobile{
        display: block;
        margin: 5vh auto 10px auto;
        width: 83%;
    }

    #team {
        margin-left: 0%;
        margin-bottom: 4vh;
    }

    .team-image {
        display: none;
    }

    .members-image-container {
        bottom: 0;
        right: 0;
        padding-left: 0;
    }

    .team-image-mobile {
        border-top: 16px solid #9CDAEA;
        z-index: 3;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        height: 600px;
        object-fit: contain;
        background-color: black;
    }

    .membre-img-mobile{
        width: 25%;
    }

    #team-laptop{
        display: none;
    }

    #team-mobile{
        display: block;
    }

    .team-title{
        margin-left: 2%;
    }

    .member-bio-container {
        padding: 3vh 3% 5vh 0;
    }

    .name-member {
        text-align: left;
        margin-left: 4%;
    }

    .fonction-member {
        text-align: left;
        margin-left: 4%;
    }

    .description-member {
        width: 96%;
        margin-left: 4%;
    }

    .description-member p {
        font-family: 'Roboto', sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 21px;
        text-align: justify;
        color: #2B465A;
        width: 100%;
        margin-left: 0%;
    }

    .miniature-img-team-mobile {
        height: 230px;
    }

    .prev-mobile {
        position: absolute;
        z-index: 3;
        height: 100%;
        left: 0;
        background: linear-gradient(
    90deg
    , rgba(0,0,0,0.8127626050420168) 7%, rgba(0,0,0,0) 100%);
        padding: 81px 10px;
    }
    
    .next-mobile {
        position: absolute;
        z-index: 3;
        height: 100%;
        right: 0;
        background: linear-gradient(
    -90deg
    , rgba(0,0,0,0.8127626050420168) 7%, rgba(0,0,0,0) 100%);
        padding: 81px 10px;
    }

    

}

@media (max-width: 732px){
    .recherche-title::before {
        margin-left: -39%;
    }
}


@media (max-width: 574px){

    #inovation_homepage {
        margin: 6vh 4vw 0vh 3vw;
    }

    .header-text, .header-text p {
        color: #2B465A;
        margin: 11vh auto 5vh auto;
        font-size: 19px;
        width: 90%;
        text-align: justify;
        font-weight: 500;
        font-weight: bold;
    }

    .prev-mobile , .next-mobile{
        font-size: 35px;
        padding: 61px 10px;
    }

    .factory-img2 {
        height: 25vh;
        width: 45%;
        margin: 10px 20px;
        border-top: 16px solid #9CDAEA;
    }

    .miniature-img-team-mobile {
        height: 157px;
    }
}


@media (max-width: 480px){

    .factory-img2 {
        height: 20vh;
    }

    .spirit-image {
        margin-top: -6vh;
    }

    .about-h2 {
        font-size: 39px;
        line-height: 47px;
    }

    .images-factory-container-mobile{
        display: none;
    }
    
    .images-factory-container-small-mobile{
        display: block;
    }

    .factory-text {
        padding: 0;
    }

    .factory-img-sm{
        width: 100%;
        height: 300px;
        margin: 10px 0;
        border-top: 16px solid #9CDAEA;
    }

    .recherche-text p {
        width: 100%;
    }
}

@media (max-width: 375px){

    .factory-img2 {
        height: 16vh;
        width: 47%;
        margin: 10px 12px;
    }
}