body 
{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    
}


#welcome {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    min-height: 1080px;
    /* UI Properties */
    background: transparent linear-gradient(246deg, #643AB9 0%, #0AB47A 100%) 0% 0% no-repeat padding-box;

    opacity: 1;
}

#welcome .container
{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 1600px;
    margin: auto;
    top: 20%;
    z-index: 1;
}

#welcome .container .welcome-text
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 800px;
    height: 500px;
    margin-top: auto;
}

#welcome .container .welcome-text h1
{
    text-align: left;
    font: normal normal 600 80px/120px Poppins;
    color: #FFFFFF;
    opacity: 1;
    margin: 0px;
}

#welcome .container .welcome-text p
{
    text-align: left;
    font: normal normal 300 32px/48px Poppins;
    color: #FFFFFF;
    opacity: 1;
    margin: 0px;
}

#welcome .container .button-container
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 700px;
}

#welcome .container .button-container button
{
    border-radius: 60px;
    opacity: 1;
    text-decoration: none;
    border: none;
    text-align: center;
    width: 300px;
    height: 100px;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    transition: 0.5s ease;
    font: normal normal 600 32px/48px Poppins;
    cursor: pointer;
}


#welcome .container .button-container #more
{
    background: transparent linear-gradient(73deg, #643AB9 0%, #8458DC 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 27px #00000029;
}

#welcome .container .button-container #more:hover
{
    filter: brightness(104%) hue-rotate(-10deg);
}

#welcome .container .button-container #contact
{
    background: transparent linear-gradient(74deg, #0AB47A 0%, #45D689 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 27px #00000029;
}

#welcome .container .button-container #contact:hover
{
    filter: brightness(100%) hue-rotate(-10deg);
}

#welcome #rectangle0
{
    position: absolute;
    bottom: 0px;
    width: 40%;
    height: 40%;
    background: #FFFFFF;
    opacity: 0.05;
    z-index: 0;
}

#welcome #rectangle1
{
    position: absolute;
    width: 30%;
    height: 55%;
    background: #FFFFFF;
    opacity: 0.05;
    bottom: 0px;
    z-index: 0;
}


#concept
{
    position: relative;
    margin: auto;
    max-width: 2200px;
    height: 100%;
    min-height: 1080px;
    overflow: hidden;

}

#concept #cloud1
{
    position: absolute;
    top: -550px;
    left: 1000px;
    z-index: 0;
}

#concept .container
{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 1600px;
    margin: auto;
    top: 20%;
    z-index: 1;
}

#concept .container #concept-left
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    height: 250px;
}

#concept .container #concept-left #title-concept
{
    display: flex;
    flex-direction: row;
}

#concept .container #concept-left #title-concept #rectangle2
{
    position: relative;
    width: 20px;
    height: 79px;
    background: #0AB47A 0% 0% no-repeat padding-box;
    border-radius: 16px;
    opacity: 1;
}

#concept .container #concept-left #title-concept h1
{
    text-align: left;
    font: normal normal 600 80px/0px Poppins;
    margin-top: 42px;
    margin-left : 42px;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

#concept .container #concept-left p
{
    text-align: left;
    font: normal normal 200 32px/48px Poppins;
    letter-spacing: 0px;
    color: #000000;
    margin-top: 52px;
}

#concept .container #concept-left p span
{
    font: normal normal 600 32px/48px Poppins;
    letter-spacing: 0px;
    color: #0AB47A;
}


#team
{
    position: relative;
    margin: auto;
    width: 100%;
    height: max-content;
    min-height: 1080px;
    background: transparent linear-gradient(66deg, #643AB9 0%, #0AB47A 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
}

#team .container
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 1600px;
    margin: auto;
    top:10%;
    z-index: 1;
}

#team .container #title-team
{
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    width: 50%;
    margin: auto;

}

#team .container #title-team h1
{
    text-align: center;
    margin-bottom: 80px;
    font: normal normal 600 80px/0px Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

#team .container #title-team #rectangle3
{
    position: relative;
    margin: auto;
    width: 155px;
    height: 20px;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    /* UI Properties */
    background: #0AB47A 0% 0% no-repeat padding-box;
    border-radius: 16px;
    opacity: 1;
}

#team .container #team-content
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}

#team .container #team-content .team-member
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 475px;
    height:max-content;
    margin-bottom: 100px;
}
#team .container #team-content .team-member .image
{
    margin: auto;
    height: 475px;
    width: 475px;
    border-radius: 30px;
}


#team .container #team-content .team-member  #mBarro
{

    background-image: url("/img/index/Photo 2 BARRO Michel.png");
    background-size: cover;
    background-position-y: -50px;
}

#team .container #team-content .team-member  #eHalimi
{
    background-image: url("/img/index/Photo 2 HALIMI Eric.jpg");
    background-size: cover;
    background-position-y: -50px;
}

#team .container #team-content .team-member  #nMenadi {
    background-image: url("/img/index/Photo Naoufel  Menadi.JPG");
    background-size: cover;
}



#team .container #team-content .team-member .name
{
    position: absolute;
    padding-top: 20px;
    background: transparent linear-gradient(255deg, #45D689 0%, #0AB47A 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 44px;
    opacity: 1;
    width: 340px;
    height: 70px;
    max-height: 90px;
    top: 425px;
    left:67px;
}

#team .container #team-content .team-member .name h1
{

    text-align: center;
    font: normal normal 600 32px/0px Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
}

#team .container #team-content .team-member h2
{
    text-align: center;
    font: normal normal normal 29px/0px Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin-top: 70px;
}

#team .container #team-content .team-member p
{
    text-align: center;
    font: normal normal 200 29px/35px Poppins;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}



#research
{
    position: relative;
    margin: auto;
    width: 100%;
    height: max-content;
    min-height: 1080px;
    opacity: 1;
}

#research .container
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 1600px;
    margin: auto;
    top:10%;
    z-index: 1;
}

#research .container #title-research
{
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    width: 50%;
    margin: auto;

}

#research .container #title-research h1
{
    text-align: center;
    font: normal normal 600 80px/100px Poppins;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

#research .container #title-research #rectangle4
{
    position: relative;
    margin: auto;
    width: 155px;
    height: 20px;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    /* UI Properties */
    background: #0AB47A 0% 0% no-repeat padding-box;
    border-radius: 16px;
    opacity: 1;
}

#research .container #research-content
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}

#research .container #research-content .research-card
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 475px;
    height: max-content;
    margin-bottom: 100px;
}

#research .container #research-content .research-card h2
{
    text-align: center;
    font: normal normal 600 32px/35px Poppins;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    margin-top: 50px;
}

/* responsive: */
@media (max-width: 1600px) {
    #welcome .container {
        height: 90%;
        width: 100%;
        top: 90px;
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;
    }

    #welcome .container .welcome-text {
        width: 100%;
        margin: 0;

    }

    #welcome .container .welcome-text h1 {
       text-align: center;
    }

    #welcome .container .welcome-text p {
        max-width: 80%;
        margin: auto;
        text-align: center;
    }

    #welcome .container .button-container {
        width: 80%;
        margin: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

    }
    #concept
    {
        height: max-content;
    }
    #concept .container {
        padding-top: 50px;
        width: 100%;
        top: 0px;
        flex-direction: column-reverse;
        justify-content: space-around;
        align-items: center;
    }

    #concept .container #concept-left {
        width: 80%;
        height: max-content;
        margin: auto;
        text-align: center;
    }

    #concept .container #concept-right
    {
        display: none;
    }
    #team
    {
        height: max-content;
        padding-bottom: 50px;
    }

    #team .container {
        padding-top: 50px;
        width: 100%;
        height: max-content;

    }
    #team .container #title-team {
        width: 100%;
        margin: auto;
    }
    #team .container #team-content
    {
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
       #research
    {

        height: max-content;
        padding-bottom: 50px;
    }

    #research .container {
        padding-top: 50px;
        width: 100%;
        height: max-content;
    }

    #research .container #title-research {
        width: 100%;
        margin: auto;
    }

    #research .container #research-content
    {
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

}