@font-face{
	font-family: "Satoshi Variable";
	src: url('../font/Satoshi-Variable.ttf') format('truetype')
}

main{
    margin:0;
    display: flex;
    flex-direction: row;
    padding: 0;
    gap:0;
}

@media(max-width: 1080px){
    main{
        font-size: 0.5rem;
    }
}

a {
    color: #1C3855;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.25rem;
    font-weight: 700;
}

p, li{
    font-family: "Satoshi Variable";
    color: #1C3855;
    hyphens: none;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: 0.03rem;
}
b{
    font-weight: 700;
}

html{
    font-size: 16px
}

@media(max-width:850px){
    html{
        font-size: 15px
    }
}

@media(max-width:550px){
    html{
        font-size: 14px
    }
}



/*COLUMNE DE NAVIGATION*/
#column{
    display: flex;
    width: 18.75rem;
    height: 100vh;
    padding: 2.5rem 1.875rem;
    justify-content: space-between;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    align-self: stretch;
    background: #E4F3F3;
    position: sticky;
    top:0px;
}

@media(max-width: 1050px){
    #column{
        width: 15rem;
    }
}



#columnContainer{
    display:flex;
}

#dropbtn, #upbtn, #rightbtn, #leftbtn{
    display: none;
    cursor:pointer; 
}

#leftbtn img{
    width: 100%;
}



#pictureProject{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1.1rem;
}

#pictureProject img{
    display: flex;
    height: 8.52931rem;
    align-items: center;
    gap: 0.33581rem;
    flex: 1 0 0;
}

#pictureProject p{
    color: #1C3855;
    text-align: center;
    font-family: "Satoshi Variable";
    font-size: 1.46rem;
    font-weight: 400;
}
#pictureProject .leger{
    color: #1C3855;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 300;
    font-family: "Satoshi Variable";
}

#pictureProjectText{
    display: flex;
    flex-direction: column;
}

#summary{
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    align-self: stretch;
    border-radius: 1.46rem;
    background: #F8FFFF;
}

.summaryTitle{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.73rem;
    align-self: center;
    
}

.summaryTitle p{
    color: #1C3855;
    text-align: center;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.752rem;
    font-weight: 700;
}

#summaryTitle{
    cursor:pointer;
}

.encartTitle{
    display: flex;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.9375rem;
    background: #F7FBFB;
}

.encartTitle img{
    width: 1.5rem;
    height: 1.5rem;
}

.encartTitle p{
    color: #1C3855;
    text-align: center;
    font-family: "Cabinet Grotesk Variable";
    font-size:  1.25rem ;
    font-style: normal;
    font-weight:  700 ;
    line-height:  normal ;
}



#summaryNav{
    display: flex;
    padding-left: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

#summaryNav a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    align-self: stretch;
    color: #1C3855;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.125rem;
    font-weight: 500;
}

#summaryNav a:hover{
    color: #1C3855;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.125rem;
    font-weight: 800;
}



#summaryButtons{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.73rem;
    align-self: stretch;
}

.button{
    display: flex;
    padding: 0.5rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    align-self: stretch;
    border-radius: 1.46rem;
    background: #1C3855;
    text-align: center;
    cursor:pointer;

}

.button:hover{
    background: #34567A;
}

#buttonSec{
    border: 2px solid #1C3855;
    background: #FFF;
}

#buttonSec:hover{
    border: 2px solid #34567A;
    background: #F3F4F4;
}



.button p{
    color: #FFF;
    font-family: "Satoshi Variable";
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.62rem; /* 158.514% */
    letter-spacing: 0.10219rem;
    text-transform: uppercase;
}

#buttonSec p{
    color: #1C3855;
}

@media(max-width:850px){
    #column{
        display: flex;
        width: 2.6875rem;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border-radius: 0rem 1.25rem 1.25rem 0rem;
    }

    #pictureProject,#summary, #summaryButtons{
        display: none;
    }

    #rightbtn{
        display: flex;
        background-color: #E4F3F3;
        border: none;
    }
}

@media(max-width:665px){
    main{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .mainBloc{
        padding-top: 1.75rem;
    }

    #column{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 2.8125rem;
        justify-content: flex-start;
        align-items: center;
        gap: 1.25rem;
        flex-shrink: 0;
        position: sticky;
        top:3.686rem;
        overflow: hidden;
        border-radius: 0%;
        padding: 0;
        transition: height 0.3s linear;
    }

    #column.open{
        height: fit-content;
        padding-top:1.25rem;
    }

    #column.open button img, #column.open button svg{
        transform: rotate(180deg);
    }

    #column.open #upbtn{
        display: flex;
        border: none;
        background-color: #E4F3F3;
        transform: rotate(180deg);
    }

    #column.scrolled{
        top:0px;
    }

    #pictureProject{
        display: none;
    }

    .leger{
        display:none;
    }

    .swipeZone{
        width:100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #summary{
        display: flex;
        flex-direction: column;
        align-self: auto;
        background-color: #E4F3F3;
        padding-top: 0;
    }

    .summaryTitle{
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .summaryTitle p{
        color: #000;
        text-align: center;
        font-family: "Cabinet Grotesk Variable";
        font-size: 1rem;
        font-weight: 700;
    }
    

    #summaryNav{
        display: flex;
        width: 10.4375rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    
    #summaryButtons{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.73rem;
    }
    

    .button{
        display: flex;
        padding: 0.3rem 1.25rem;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        align-self: center;
        border-radius: 1.46rem;
        background: #1C3855;
        width:14rem;
    }
        
    #dropbtn{
        display: flex;
        background-color: #E4F3F3;
        border: none;
        
    }

    #rightbtn, #leftbtn{
        display:none;
    }
    
}

@media(max-width:400px){
    #column{
        width: auto;
        left:3.125rem;
    }

    a, p{
        font-size: 1rem;
    }
}

@media(max-width:367px){
    #column{
        left:2rem;
        right:2rem;
    }
}

@media(max-width:335px){
    #column{
        left:1rem;
        right:1rem;
    }
}


/*MAIN BLOC*/

.mainBloc{
    display: flex;
    padding: 3.75rem 4.5rem 3.75rem 4.5rem;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

@media(min-width:1280px){
    .mainBloc{
        padding: 3.75rem 0 3.75rem 0;
        width:100%;

    }
}



@media(max-width:850px){
    .mainBloc{
        padding-top: 1.25rem;
        gap: 1.875rem;
    }
}

@media(max-width:665px){
    .mainBloc{
        padding: 3.75rem 3.125rem 3.75rem 3.125rem;
    }
}


.mainContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rem;
}

@media(min-width:1280px){
    .mainContent{
       width:51.56rem;
        align-self: center;
    }
}


h1{
    margin:0;
    max-width: 51.56rem;
}

#intro{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    align-self: stretch;
}

#introContent{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
align-self: stretch;
}


h2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    align-self: stretch;
    color: #1C3855;
    text-align:center;
    font-family: "Cabinet Grotesk Variable";
    font-size: 2.25rem;
    font-weight: 700;
    margin:0;
}

@media(max-width:850px){
    h2{
        font-size: 1.8rem;
    }
}

.plainImage{
    display:flex;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
}
.plainImage img{
    width: 100%;
    height: auto;
}


.keyPoints{
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9375rem;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 1.25rem;
    background: #E4F3F3;
}

.keyPointsText{
    display: flex;
    padding: 0.625rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
}

@media(max-width:660px){
    .keyPointsText{
        gap:1rem;
    }
}

.keyPointsLine{
    display: flex;
    align-items: center;

}

.keyPoints p{
    color: #11286D;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6rem;
}

@media(max-width:850px){
    .keyPoints p{
        font-size: 1.125rem;
        font-weight:700;
    }
}

.keyPoints b{
    color: #11286D;
    text-align: right;
    font-feature-settings: 'liga' off;
    
    /* 123 liste */
    font-family: "Cabinet Grotesk Variable";
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 900;
    line-height: 2.1875rem; /* 100% */
    margin-right: 0.94rem;
}

.identityCard{
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 1.25rem;
    background: #E4F3F3;
    flex-wrap: wrap;
    justify-content: space-around;
}



.idSousTitre{
    color: #11286D;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5rem;
}

#idCarac{
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 1rem;
    align-self: stretch;
    flex-wrap: wrap;
}

#carac{
    display: flex;
    width: 4.6875rem;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    justify-content: center;
}

#carac img{
    width: 100%;
}

#carac p{
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 0.75rem; 
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
    align-self: center;
    color: #11286D;
    text-align: center;
}

#prestas{
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    gap: 0.5rem;
    align-self: stretch;
    flex-wrap: wrap; 
}

#prestas p{
    display: flex;
    padding: 0.1rem 0.75rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 1.7rem;
    border: 1.5px solid #11286D;
    font-family: "Satoshi Variable";
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.075rem;
    text-transform: uppercase;
}

#strategy{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    align-self: stretch;
}

#activityContent{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

@media(max-width: 950px){
    #activityContent{
        flex-direction: column;
    }
}

.presentationMission{
    display: flex;
    flex-grow:3;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    flex-basis: 30.69rem;
    align-self: stretch;
}

.strategyColumn{
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

.websiteText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

.client{
    display: flex;
padding: 1.25rem;
flex-direction: column;
align-items: flex-start;
gap: 1.5625rem;
align-self: stretch;
border-radius: 1.25rem;
background: #5194A0;
}

.client p{
    color: white;
}

.briefConstraint{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

@media(max-width:950px){
    .briefConstraint{
        flex-direction: column;
    }
}

.brief{
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5625rem;
    border-radius: 1.25rem;
    background: #E4F3F3;
    flex-grow: 3;
    flex-basis: 30.69rem;
    align-self: stretch;
}

@media(max-width:950px){
    .brief{
        flex-basis: auto;
    }
}

.brief p{
    color: #1C3855;
}

#briefColumn{
    flex-basis: auto;
}

#imgSchema{
    width: 100%;
    max-width: 20rem;
    height: auto;
    align-self: center;
}

#stratMission{
    flex-basis: auto;
}

.constraint{
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5625rem;
    align-self: stretch;
    border-radius: 1.25rem;
    background: #E4F3F3;
    flex-grow: 2;
    flex-basis: 20.19rem;
}

@media(max-width:950px){
    .constraint{
        flex-basis: auto;
    }
}

.constraint li, .constraint p{
    color:#1C3855;
}

.constraint li{
    margin-bottom: 1rem;
    margin-left: 1rem;
}

#download{
    display: flex;
    padding: 0.5rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    align-self: stretch;
    border-radius: 1.46rem;
    background: #1C3855;
    border: none;
}

#download:hover{
    background-color: #34567A;
}

#download p{
    color: #FFF;
    font-family: "Satoshi Variable";
    font-size: 1.022rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.62rem; /* 158.514% */
    letter-spacing: 0.10219rem;
    text-transform: uppercase;
}

#Rlogo{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.5rem;
align-self: stretch;
}

.demo{
    display: flex;
    padding: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
    align-self: stretch;
    border-radius: 1.25rem;
background: #F2F2F2;
max-width: 100%;
}

.demoTitle{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    align-self: stretch;
}

.demoTitle p{
    display: flex;
    padding: 0.625rem 0.9375rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    border-radius: 0.9375rem;
    background: #FFF;
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 8%;
}

.demoContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
    align-self: stretch;
}

#table{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
}

@media(max-width: 600px){
    #table{
        grid-template-columns: 80%;
        align-items: center;
        justify-content: center;
        gap:7rem;
    }
}

@media(max-width: 500px){
    #table{
        grid-template-columns: 100%;
    }
}

.tableElement{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2.5rem;
    flex: 1 0 0;
    align-self: stretch;
}

.tableElement p{
    border-radius: 1.25rem;
    background: #FFF;
    display: flex;
    padding: 1.25rem;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.625rem;
    align-self: stretch;
    height: 100%;
}

.tableElement img{
    width: 100%;
    height: auto;
}

.mediumImage{
    display: flex;
    align-items: center;
}

.mediumImage img{
    width: 100%;
}



#demoContentTypo{
    justify-content: center;

}


#typoDemo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
}

#typoDemo img{
    width: 100%;
    height: auto;
}

@media(max-width:450px){
    #demoContentTypo{
        flex-direction: column;
        margin-top:1rem;

    }
    #typoDemo{
        flex-basis: auto;
    }
    #demoContentTypo .demoTextLine{
        flex-basis: auto;
    }
}

.colors{
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 0.58644rem;
    flex-wrap: wrap;
}

.color{
    display: flex;
    width:23%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.58644rem;
}
.color4{
    display: flex;
    width:23%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.58644rem;
}

.color4 img{
    width:100%;
}
@media(max-width:500px){
    .color4{
        width: 45%;
    }
}
#colorMultiple{
    width:30%;
}

.threeColors{
    width: 30%;
}
@media(max-width:450px){
    .threeColors{
        width: 40%;
    }
}


@media(max-width:400px){
    .color{
        width: 47%;
    }

    #colorMultiple{
        width:40%;
    }
    
}

.color p{
    line-height: 1.5rem;
}

.color img{
    width: 100%;
    height: auto;
}


#textJaune{
    line-height: normal;
}


.typo{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #000;
    font-family: "Satoshi Variable";
    font-size: 2.8985rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.22913rem; /* 76.905% */
    margin-left: 1.5rem;
}

.demoPlainPage{
    display: flex;
    align-items: center;
    border-radius: 0.9375rem;
}

.demoPlainPage img{
    width: 100%;
    height: auto;
}

.differentColorsLogo{
    display: flex;
    gap: 1.25rem;
    width: 100%;
    justify-content: space-between;
    align-self: stretch;
}



@media(max-width:550px){
    .differentColorsLogo{
        flex-direction: column;
    }
}

.threeBlackLogos{
    display: flex;

    gap: 3.19275rem;
}
@media(max-width:660px){
    .threeBlackLogos{
        flex-direction: column;
    }
}

@media(max-width:550px){
    .threeBlackLogos{
        align-items: center;
        width:100%;
        gap : 1rem;
    }
}

#groupBlackLogos{
    display: flex;

    gap: 3.19275rem;
}


.colorLogo{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.27256rem;

}



.colorLogo img{
    max-width: 100%;
}

.colorLogoText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8125rem;
}

.colorLogoText p{
    color: #11286D;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1rem;
    font-weight: 500;
}

#groupLogo{
    display: flex;
    align-items: center;
    gap: 1.1875rem;
    align-self: stretch;
}

@media(min-width:1180px){
    #groupLogo{
        width:23.42rem;
    }
}

.transparent{
    padding:0;
   
}

.demoClose{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
}

 
.ecoColumn{
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.5rem;
    flex: 2 0 0;
    border-radius: 1.25rem;
    background: #E4F3F3;
    align-self: stretch;
}

.ecoColumn article{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.ecoColumn b{
    margin-bottom: 1rem;
}

.articleTitle{
    color: #1C3855;
    font-family: "Cabinet Grotesk Variable";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.1875rem; /* 100% */
}

.articleTitle b{
    text-align: right;
    font-feature-settings: 'liga' off;
    font-family: "Cabinet Grotesk Variable";
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 900;
    line-height: 2.1875rem;
    margin-right: 0.94rem;
}

article li{
    margin-left: 1rem;
}

#audit{

    flex: 1 0 0;
}

@media(max-width:950px){
    #audit{
        order:0;
    }
    #demarche{
        order:1;
    }

}


#audit em{
    margin-bottom: 3rem;
}

#ecoColumnContainer{
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    gap:3.5rem;
}

.logoCreation{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
}
.logoCreation img{
    width: 100%;
    height: auto;
}

.logoCreationText{
    display: flex;
    padding: 1.25rem;
    justify-content: center;
    gap: 1rem;
    border-radius: 1.25rem;
    background: #FFF;
    width: calc(66.67% + 5rem);
    flex-direction: column;
}


.demoTextLine{
    display: flex;
    padding: 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 1.25rem;
    background: #FFF;
    width: calc(66.67% + 5rem);
}





.context{
    display: flex;
    padding: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5625rem;
    align-self: stretch;
    border-radius: 1.25rem;
    background: #5194A0;
}

.context p{
    color: white;
}

.demoMotifs{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9375rem;
    align-self: stretch;
}

.threeMotifs{
    display: flex;
    align-items: flex-start;
    gap: 0.94rem;
}

@media(max-width:550px){
    .threeMotifs{
        flex-direction: column;
        width:100%;
    }
}

.motifColor{
    display: flex;
    align-items: center;
}

.motifColor img{
    width: 100%;
    height: auto;
}


.motifColorLien{
    display: flex;
    align-items: center;
}

.motifColorLien img {
    width: 100%;
    height: auto;
}

@media(max-width:550px){
    .motifColorLien{
        width:100%;
    }
}

#backgroundGReen{
    background-color: #81BFB7;
    border-radius: 1.25rem;
}

.blackMotif{
    display: flex;
    align-items: center;
}

.blackMotif img{
    width: 100%;
    height: auto;
}

.demoLineTwo{
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    align-self: stretch;
}

.demoImage{
    display: flex;
    align-items: center;
}

.demoImage img{
    width: 100%;
    height: auto;
}






#website{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    align-self: stretch;
}

.demos{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    max-width: 100%;
}

.demoImageSolo{
    display: flex;
    align-items: center;
}

.demoImageSolo img{
    width: 100%;
    height: auto;
}

#ecoconception{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    align-self: stretch;
}

#ecoContainer{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

@media(max-width:950px){
    #ecoContainer{
        flex-direction: column;
    }
}

.backgroundWhite{
    background-color: white;
    border-radius: 15.841px;
    padding: 1.875rem;
    gap: 2.5rem;
}

.backWhite{
    background-color: white;
    border-radius: 15.841px;
}


#backgroundGreen{
    background-color: #B3DABA;
    border-radius: 15.841px;
}

#backgroundOcre{
    background-color: #E7BB97;
    border-radius: 15.841px;
}

#app{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    align-self: stretch;
}

.differentColorPivert{
    display: flex;
    align-items: flex-start;
    gap: 1.10688rem;
}

@media(max-width:450px){
    .differentColorPivert{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}


.colorPivert{
    display: flex;
    padding: 1.27256rem;
    align-items: center;
    gap: 1.27256rem;
}
.colorPivert img{
    width:100%;
}
.radius img{
    border-radius: 10px;
}

.demoText{
    color: #1C3855;
font-family: "Satoshi Variable";
font-size: 17.694px;
font-style: normal;
font-weight: 555;
line-height: 26.542px; /* 150% */
display: flex;
padding: 22.118px;
justify-content: center;
align-items: center;
gap: 11.059px;
align-self: stretch;
border-radius: 22.118px;
background: #FFF;
}

.pictureShow{
    display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}

.twoColumns{
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.twoColumns img{
    width:100%;
    height:auto;
}

.demo img{
    border-radius: 10px;
}

.ecoindex{
    display: flex;
    width: 200px;
    height: 200px;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 300px;
    background: #579A63;
}

.ecoindex p{
    color: #FFF;
text-align: center;
font-family: "Helvetica Neue";
font-size: 128px;
font-weight: 700;
line-height: 1; /* 18.75% */
display: flex;
align-items: center;
justify-content: center;
height:100%;



}