body{
    margin:0;
    background: #252626;
    font-family: "aileronsemibold", serif;
}







h1{
    font-family: "heal_the_web_bregular", serif;
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
    margin-bottom: 36px;
    margin-top: 0;
}







.logo_container{
    background: #80ECF1;
    height: 85vh;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
}

.logo{
    margin: 30px;
}

.logo2ias {
    max-width: 60%;
}

.introduction{
    display: flex;
    margin-left: 50%;
    color: #252626;
    height: 100%;
    align-items: flex-end;
}

.introduction p{
    font-size: 2.8vw;
    line-height: 132%;
}



.nav_index{
    display: none;
}

.scrollmenu {
    background-color: #80ECF1;
    overflow: auto;
    white-space: nowrap;
    padding-left: 32px;
    display: flex;
}

.scrollmenu a {
    display: inline-block;
    color: #252626;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    padding-left: 0;
    padding-right: 30px;
    font-family: "aileronbold", serif;
}

.scrollmenu::before{
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 30px;
    height: 46px;
    background: linear-gradient(90deg,#80ECF1,hsl(183deg 80% 72% / 80%) 50%,hsla(0,0%,100%,0));
    pointer-events: none;
    z-index: 2;
}

.scrollmenu::after{
    content: "";
    position: absolute;
    right: 0;
    display: block;
    width: 30px;
    height: 46px;
    background: linear-gradient(90deg,hsla(0,0%,100%,0),hsl(183deg 80% 72% / 80%) 50%,#80ECF1);
    pointer-events: none;
    z-index: 2;
}






.container{
    display:flex;
    flex-direction: row;
}

#services, #contact{
    min-height: 0;
}








.about, .sells, .services, .contact{
    padding-left: 64px;
    padding-bottom: 64px;
    padding-right: 120px;
    padding-top: 55px;
    line-height: 150%;
    font-size: 1.2vw;
}

.button{
    background-color: #80ECF1;
    color: #252626;
    padding: 8px 20px;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2vw;
    cursor: pointer;
    margin-top: 20px;
    font-family: "heal_the_web_aregular", serif;
}






.boutons{
    display:flex;
}

.button2:last-of-type{
    margin-right: 0;
}




.button2{
    background-color: #252626;
    color: #80ECF1;
    text-decoration: none;
    cursor: pointer;
    width: 33%;
    padding: 2em;
    margin-right: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* position: relative;
    transition: .1s linear; */
}

.button2 h2{
    font-family: "heal_the_web_bregular", serif;
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
    margin-top: 0;
    margin-bottom: 15px;
}

.button2 h3{
    padding: 8px 16px 6px 16px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-family: "heal_the_web_aregular", serif;
    border: solid;
    border-width: 1px;
    margin: 0;
    width: 8%;
    text-align: center;
}

/*
.button2::before{
    content: "";
    position: absolute;
    inset: 0;
}

.button2:hover::before {
    animation: hover .3s linear forwards;
}

@keyframes hover {
    100% {
        top: -25%;
        bottom: -25%;
        background-color: #252626;
    }
}



.button3:hover{
    height: 500px;
}

.button3{
    background-color: #252626;
    color: #80ECF1;
    text-decoration: none;
    cursor: pointer;
    width: 33%;
    padding: 2em;
    margin-right: 1em;

    position: relative;
    transition: .3s linear;
}

.button3 h2{
    font-family: "heal_the_web_bregular", serif;
    margin-top: 0;
    margin-bottom: 15px;
} */











#image1{
    max-width: 50%;
    width:100%;
    height:100%;

}

.div_left{
    max-width: 50%;
    display:flex;
    align-items: flex-end;
    color: #80ECF1;
}





.services, .contact{
    background-color: #EEECE9;
    color: #252626;
    width: 100%;
    padding-left: 64px;
    padding-bottom: 64px;
    padding-top: 100px;
    padding-right: 64px;
}

.services p{
    width: 60%;
    margin-bottom: 70px;
    margin-top: 30px;
}




#products{
    font-size: 0.9vw;
    line-height: 145%;
    margin-top: 30px;
    font-family: "aileronregular", serif;
}


.sells_right{
    max-width: 50%;
    display: flex;
    flex-direction: column;
    background-color: #80ECF1;
}

#image2{
    width: 100%;
    height: 100%;
}

#list_sells{
    font-family: "heal_the_web_bregular", serif;
    -webkit-font-feature-settings: "ss02";
    font-feature-settings: "ss02";
    font-size: 2.8vw;
    line-height: 130%;
    color:#252626;

    margin: 40px;
    height: 50%;

    display:flex;
    align-items: center;
}

#list_sells p{
    margin: 0;
}

#sells_image{
    height: 50%;
}



@media screen and (max-width:813px){
    .sells_right{
        max-width: 100%;
    }
}






/*
.contact .button{
    margin: 0;
} */

.contact p{
    margin: 0;
}

#texte_contact{
    display:flex;
}

#texte_g{
    width: 50%;
    margin-right: 90px;
}

#texte_d{
    width: 50%;
}





@media screen and (max-width:813px) {
    .logo_container{
        height: auto;
        padding-top: 0;
    }
}


@media screen and (max-width:813px) {
    .introduction{
        margin-left: 0;
        padding-left: 32px;
        padding-right: 32px;
    }

    .nav_index{
        display: block;
    }

    .introduction p{
        font-size: 28px;
        line-height: 130%;
    }
}


@media screen and (max-width:813px){
    .container{
        flex-direction: column;
    }
}



@media screen and (max-width:813px){
    .button{
        font-size: initial;

    }

    .boutons{
        flex-direction: column;
        align-items: center;
    }

    .button2{
        width: -webkit-fill-available;
        margin-right: 0;
    }
}





@media screen and (max-width:813px) {
    .about, .sells, .services, .contact{
        font-size: initial;
        padding: 32px;
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .services p {
        width: 100%;
    }

    #list_sells{
        font-size: 30px;
        margin-left: 32px;
    }
}



@media screen and (max-width:813px){
    .div_left{
        max-width: 100%;
    }

    #image1{
        max-width: 100%;
    }
}



@media screen and (max-width:813px){
    .services, .contact{
        width: auto;
    }

    #texte_contact{
        flex-direction: column;
    }

    #texte_g, #texte_d{
        width: 100%;
    }
}



@media screen and (max-width:813px){
    #products {
        font-size: initial;
    }
}