@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

/* Header */




.header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, #e59600 5%, rgba(198, 204, 207,0.5) 100%);
    color: white;
    margin-bottom: 100px;
}

    .header .logo {
        width: 420px;
        fill: white;
        padding-right: 15px;
        display: inline-block;
        vertical-align: middle;
    }

    .header .inner-header {
        height: 45vh;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .header .flex { /*Flexbox for containers*/
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .header .waves {
        position: relative;
        width: 100%;
        height: 15vh;
        margin-bottom: -4px; /*Fix for safari gap*/
        min-height: 100px;
        max-height: 150px;
    }

    .header .content {
        position: relative;
        height: 20vh;
        text-align: center;
        background-color: white;
    }

/* Animation */

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

    .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }

    .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }

    .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }

    100% {
        transform: translate3d(85px,0,0);
    }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }

    .content {
        height: 30vh;
    }

    h1 {
        font-size: 24px;
    }
}



.ContainerALL {
    margin: auto;
    margin-bottom: 60px;
}

.HeaderTitle {
    /*width: 55%;
    margin: auto;*/
    font-size: 2.9em;
    line-height: 1.5;
    font-weight: 900;
    text-align: left;
    margin-bottom: 70px;
    font-family: 'Roboto', sans-serif;
}


.HeadTitleYell {
    color: #f0b840;
}

.HeadTitleNrm {
    color: #0065a5;
}

.SousHeadTitle {
    display: block;
    font-size: 0.6em;
    margin-left: 22%;
}

/*intro*/

.IndroducContainer {
    /*background-color: #f0f0f0;*/
    padding-bottom : 60px ; 
    padding-top : 60px ; 
}

.Intoduc {

    display: flex;
    flex-wrap: wrap;
    align-items: center;
   justify-content : center ; 

  
}



    .Intoduc .coll1 {
        flex: 0 0 42%;
        max-width: 42%;
        min-width : 250px ; 
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
    }

      
    .Intoduc .coll2 {
        flex: 0 0 42%;
        max-width: 42%;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;

        margin-left : 8% ; 

    }



    .Intoduc .coll1 img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        height: auto;
        border-image: round;
        border-radius: 3%;
        border: 2px solid #0065a5;
    }

    .Intoduc .coll2 p {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1em;
        font-weight: 400;
        line-height: 1.8em;
        text-align: justify;
    }



@media(max-width :772px)

{
    .Intoduc .coll1 {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 250px;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 1%;
        margin-bottom: 30px;
    }


    .Intoduc .coll2 {
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 1%;
    }
}




.DeuxConfig {

   
}

.DeuxConfigContainer {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
     

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.8em;
    text-align: justify;
}



.DeuxConfig .intocol1 {
    flex: 0 0 42%;
    align-self: center;
    max-width: 42%;
    min-width: 250px;
    position: relative;
    width: 100%;
    margin: auto;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 8%;
}

.DeuxConfig .intocol2 {
    flex: 0 0 42%;
    max-width: 42%;
    position: relative;
    width: 100%;
    margin: auto;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 8%;
}


@media(max-width :772px) {
    .DeuxConfig .intocol1 {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 250px;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 1%;
        margin-bottom: 30px;
    }


    .DeuxConfig .intocol2 {
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 1%;
    }
}







.DeuxConfig .DeuxConfigTtitles {
    font-size: 1.3em;
    font-weight: 700;
}


    .DeuxConfig ul{
        margin-left : 40px ;
        line-height : 1.6em ; 
    }
    /*Fonctionnalités*/
    .FuncHeader {
        /*width: 65%;
        margin: auto;
        margin-top: 60px;*/
    }


    .FuncHeader p {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.7em;
        font-weight: 600;
        text-align: justify;
        margin-top: 20px;
    }

.funcList {
    /*width: 65%;
    margin: auto*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    font-weight: 400;
    text-align: justify;
    margin-top: 20px;
    line-height: 2.6em;
}

    .funcList li {
        margin-left: 40px;
    }

/* end Header */


/* COnfiguration et services*/

.ConfigAndServiceContainer {
    margin-top : 40px ; 
    padding: 20px 20px;
    /*background-color: #f0f0f0;*/
}


.configandservHeader {
    /*width: 65%;
    margin: auto;*/
    margin-top: 70px;
}

    .configandservHeader p {
        font-size: 1.7em;
        display: inline;
        font-weight: 700;
    }

.configandserv {
    /*width: 65%;
    margin: auto;*/
    margin-top: 20px;
}


.configandserv p{
 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    font-weight: 400;
    text-align: justify;
    line-height: 2.6em;
    padding-left : 5px ; 
}

/*end config and sercice*/


.SynoContainer {
    /*width: 100%;
    padding: 20px;
    margin-top: 40px;*/
}

.SynoHeader {
    width: 90%;
    margin: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2em;
    font-weight: 700;
    margin-top: 50px;
    text-align: center;
}


.Syno {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.8em;
    text-align: justify;
}


    .Syno .SynoCol1 {
        flex: 0 0 42%;
        align-self: center;
        max-width: 42%;
        min-width: 250px;
        position: relative;
        width: 100%;
        margin: auto;
        padding-right: 10px;
        padding-left: 10px;
        
    }

        .Syno .SynoCol1 img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            height: auto;
            border-image: round;
            border-radius: 3%;
            border: 2px solid #0065a5;
            
        }



    .Syno .SynoCol2 {
        flex: 0 0 42%;
        align-self: center;
        max-width: 42%;
        min-width: 250px;
        position: relative;
        width: 100%;
        margin: auto;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 8%;
    }


@media(max-width :772px) {
    .Syno .SynoCol1 {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 250px;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 1%;
        margin-bottom: 30px;
    }


    .Syno .SynoCol2 {
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 1%;
    }
}
















/*Tacti*/
.tact {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.8em;
    text-align: justify;
    
}


    .tact .SynoCol1 {
        flex: 0 0 42%;
        align-self: center;
        max-width: 42%;
        min-width: 250px;
        position: relative;
        width: 100%;
        margin: auto;
        padding-right: 10px;
        padding-left: 10px;
    }

        .tact .SynoCol1 img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            height: auto;
            border-image: round;
            border-radius: 3%;
        }


    .tact .SynoCol2 {
        flex: 0 0 42%;
        align-self: center;
        max-width: 42%;
        min-width: 250px;
        position: relative;
        width: 100%;
        margin: auto;
        padding-right: 10px;
        padding-left: 10px;
    }

@media(max-width :772px) {
    .tact .SynoCol1 {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 250px;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 1%;
        margin-bottom: 30px;
    }


    .tact .SynoCol2 {
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
        margin-left: 1%;
    }
}

















.Mainten {
    width: 100%;
    margin: auto;
    margin-top: 90px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: center;
    padding: 20px 20px;
    /*background-color: #f0f0f0;*/
}

.Mainten p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2.1em;
    font-weight: 700;
    text-align : center ; 
}




.Myimg{
    align-self : center ; 
    margin-top : 40px ; 
}

.Mainten .Myimg img {
    max-width: 100%;
    margin-top: 20px;

}

.MainTxt{
    align-self : center ; 
}


.MainTxt p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    margin-top : 30px ; 
    text-align: center;
}

.MainTxt ul {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    font-weight: 500;
    text-align: left;
    margin-left : 40px ; 
    line-height : 2.1em ; 
}