/* START HERO */
.hero {
    min-height: auto;
    height: auto;
    display: flex;
    align-items: flex-end;
}

.hero .uniformSpacing .introText {
    position: relative;
    z-index: 1;
    width: 50%;
    gap: 2.5em;
}

.hero .uniformSpacing .introText .descLink {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 70%;
}

.hero .uniformSpacing .bgImg_hero {
    height: auto;
    width: 55%;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media screen and (max-width: 1000px) {
    .hero{
        padding: 0;
    }

    .hero .uniformSpacing {
        display: flex;
        flex-direction: column;
        gap: 2.5em;
    }

    .hero .uniformSpacing .introText {
        width: 100%;
        padding: calc(var(--defaultSpacing) / 2) var(--defaultSpacing);
    }

    .hero .uniformSpacing .bgImg_hero {
        width: 100%;
        position: initial;
        bottom: 0;
        right: 0;
    }
}

@media screen and (max-width: 700px) {
    .hero .uniformSpacing .introText{
        padding: var(--defaultSpacing) calc(var(--defaultSpacing) / 2)
    }
    .hero .uniformSpacing .introText .descLink{
        width: 100%;
    }
}
/* END HERO */

/* START bandeauIconeText */
.bandeauIconeText .uniformSpacing{
    display: flex;
    flex-wrap: wrap;
    padding: 2.5em 3em;
    justify-content: center;
    gap: 0;
}

.bandeauIconeText .uniformSpacing .element{
    width: calc(100% / 5);
    padding: 0 1.5em;
    border-right: 1px solid var(--basicColor2);
    display: flex;
    gap: .5em;
    align-items: flex-start;
}

.bandeauIconeText .uniformSpacing .element:first-child{
    padding-left: 0;
}

.bandeauIconeText .uniformSpacing .element:last-child{
    padding-right: 0;
    border-right: initial;
}

.bandeauIconeText .uniformSpacing .element span{
    display: flex;
}

.bandeauIconeText .uniformSpacing .element span svg{
    width: 2.5em;
    height: 2.5em;
}

@media screen and (max-width: 1400px) {
    .bandeauIconeText .uniformSpacing{
        gap: 1em 0;
    }

    .bandeauIconeText .uniformSpacing .element{
        width: calc(100% / 2);
    }

    .bandeauIconeText .uniformSpacing .element:nth-child(3){
       padding-left: 0;
    }

    .bandeauIconeText .uniformSpacing .element:nth-child(2){
        border: none;
    }
}

@media screen and (max-width: 600px) {
    .bandeauIconeText .uniformSpacing .element{
        border: none;
        width: 100%;
        padding: 0;
    }
}


/* END bandeauIconeText */

/* START pagesCards */
.pagesCards .uniformSpacing .introText{
    width: 25%;
}

.pagesCards .uniformSpacing .wrapper{
    width: 75%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
}

.pagesCards .uniformSpacing .wrapper .element{
    width: calc((100% - 1.5em * 2) / 3);
    height: auto;
    aspect-ratio: 3/4;
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: space-between;
}



.pagesCards .uniformSpacing .wrapper .element > *{
    position: relative;
    z-index: 1;
}

.pagesCards .uniformSpacing .wrapper .element .containerText{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.pagesCards .uniformSpacing .wrapper .element .containerText .containerSvg{
    width: 4em;
    height: 4em;
    border-radius: 100%;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagesCards .uniformSpacing .wrapper .element .containerText .containerSvg span{
    display: flex;
}

.pagesCards .uniformSpacing .wrapper .element .containerText .containerSvg span svg{
    width: 100%;
    height: 100%;
}

.pagesCards .uniformSpacing .wrapper .element > span{
    display: flex;
    justify-content: flex-end;
    width: 2.5em;
    height: 2.5em;
    border: 3px solid var(--basicColor1);
    border-radius: var(--basicRadius);
    background: var(--basicColor4);
    transition: ease all .3s;
}

.pagesCards .uniformSpacing .wrapper .element > span svg{
    width: auto;
    height: 100%;
    padding: .5em;
    transition: ease all .3s;
}

.pagesCards .uniformSpacing .wrapper .element:hover > span {
    width: 4em;
}

.pagesCards .uniformSpacing .wrapper .element:hover > span svg{
    transform: rotate(180deg);
}

.pagesCards .uniformSpacing .wrapper .element > img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    height: auto;
    z-index: 0;
    border-bottom-right-radius: var(--basicRadius);
}

@media screen and (max-width: 1200px) {
    .pagesCards .uniformSpacing{
        flex-direction: column;
    }

    .pagesCards .uniformSpacing .introText,
    .pagesCards .uniformSpacing .wrapper{
        width: 100%;
    }
}

@media screen and (max-width: 900px) {
    .pagesCards .uniformSpacing .wrapper .element{
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .pagesCards .uniformSpacing .wrapper .element > img{
        opacity: .5;
    }

    .pagesCards .uniformSpacing .wrapper .element .containerText{
        background-color: var(--basicColor4);
        border-bottom-right-radius: var(--basicRadius);
        padding-bottom: 1em;
    }
}



/* END pagesCards */

/* START bandeauImgText */
.bandeauImgText .uniformSpacing{
    align-items: center;
}

.bandeauImgText .introText {
    width: 25%;
}

.bandeauImgText .imgContainer {
    width: 75%;
}

.bandeauImgText .imgContainer img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1200px) {
    .bandeauImgText .uniformSpacing{
        flex-direction: column;
    }

    .bandeauImgText .introText,
    .bandeauImgText .imgContainer{
        width: 100%;
    }
}

/* END bandeauImgText */

/* START imgText */
.imgText .uniformSpacing{
    align-items: center;
}

.imgText .uniformSpacing > div{
    width: 50%;
}

.imgText .uniformSpacing .imgContainer img{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.imgText .uniformSpacing .imgContainer .svgVideo span {
    display: flex;
}

.imgText .uniformSpacing .imgContainer .svgVideo span svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .5em;
    width: 3em;
    height: 3em;
    cursor: pointer;

}

@media screen and (max-width: 1200px) {
    .imgText .uniformSpacing{
        flex-direction: column;
    }

    .imgText .uniformSpacing > div{
        width: 100%;
    }
}

/* END imgText*/

/* START contactList */
.contactList .uniformSpacing{
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
}

.contactList .uniformSpacing .element{
    width: calc((100% - 3em * 3) / 4);
    display: flex;
    gap: 1em;
}

.contactList .uniformSpacing .element .containerSvg{
    width: 5em;
    min-width: 5em;
    height: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 2px solid var(--basicColor1);
    padding: 1.5em;
}

.contactList .uniformSpacing .element .containerSvg span{
    display: flex;
}

.contactList .uniformSpacing .element .containerSvg span svg{
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1600px) {
    .contactList .uniformSpacing{
        gap: 1em;
    }

    .contactList .uniformSpacing .element {
        width: calc((100% - 1em * 3) / 4);
    }
}

@media screen and (max-width: 1500px) {
    .contactList .uniformSpacing{
        gap: 1em;
    }

    .contactList .uniformSpacing .element {
        width: calc((100% - 1em) / 2);
    }
}

@media screen and (max-width: 900px) {
    .contactList .uniformSpacing .element {
        width: 100%;
    }
}


/* END contactList */