/* plus-jakarta-sans */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
.plusJakartaSans-font {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
body {
    font-family: "Plus Jakarta Sans", sans-serif;
}

a {
    text-decoration: none;
}

.bgColor3FA227 {
    background-color: #3FA277;
}
.color0d8a2b {
    color: #0d8a2b;
}
.color53811 {
    color: #053811;
}
.color266248 {
    color: #266248;
}
.bgColorC7E8DA {
    background-color : #C7E8DA;
}
.textUpperCase {
    text-transform: uppercase;
}

#header-nav {
    background-color : #C7E8DA;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 60px;
    align-items: center;
    transition: height 200ms ease-in-out;
}
#top-info-left a {
    color: white;
    font-weight: bold;
    font-size: 16px;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
}
#top-info-left button:first-child {
    margin-right: 30px;
}
#top-info-right {
    display: flex;
    flex-direction: row;
    width: 400px;
    justify-content: space-around;
}

#recrutementBtn {
    width: 160px;
    height: 30px;
    border-color: #3FA277;
    padding: 0px;
    border-width: 0px;
    transition: 0.4s all ease-in-out;
}
#devisBtn {
    padding: 0px;
    width: 160px;
    height: 30px;
    /*border-radius: 10px;*/
    border-color: #6974BA;
    background-color: #6974BA;
    border-width: 0px;
    transition: 0.4s all ease-in-out;
}
#devisBtn:hover, #recrutementBtn:hover {
    opacity: 0.8;
}
#top-info-phone {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 0px 20px;
    height: 20px;
    width: 175px;
    align-self: center;
}

#top-info-phone p {
    margin-left: 20px;
    font-weight: 700;
    font-size: 20px;
}
#top-info-rs a:first-child{
    margin-right: 20px;
}
#top-info-rs a:hover {
    color: #154ab1;
}
#top-info-rs a {
    color: #053811;
    transition: 0.3s color ease-in-out;
}
.fontWeight500 {
    font-weight: 500;
}
.tDecoNone {
    text-decoration: none;
}
#nav-container {
    /*background-color: #f2f2f3;*/
    background-color: #ffffff;
    justify-content: space-between;

}
#nav-logo {
    align-items: center;
    padding: 5px;
}
#nav-logo img {
    height: 120px
}
#nav-logo, #connexion-nav, #nav-container-left, #nav-container, #connexion-nav ul,
#main-nav ul, #desktop-nav-container {
    display: flex;
}
#main-nav ul li:first-child a:hover {
    color: #154ab1;
}
#nav-container-left {
    align-items: center;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
}
.desktopSubNav {
    display: flex;
}
.ul-none-nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-left: -30px !important;
}
#mobile-nav ul.ul-none-nav li:first-child {
    margin-top: 40px;
}
#mobile-sub1 {
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100%;
    z-index: 3;
    width: 100%;
    background-color: white;
    transition: transform 0.3s ease; /* Add transition effect */
    padding-top: 20px;
    background-color: ghostwhite;
}
.arrow {
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    transition: transform 0.3s ease; /* Add transition property */
}
.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
#desktop-nav-container {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;

    flex-direction: column;

    z-index: 2;
}
.height0 {
    height: 0px;
    padding: 15px 60px;
}
.height0AndPadding0 {
    height: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.height60 {
    height: 60px;
}
#main-nav {
    height: 75px;
    /*margin-left: 50px;*/
}
.marginTopToggle1 {
    margin-top: 260px;
}

#main-nav li {
    margin: 0px 15px;
}

#main-nav li a {
    width: 160px;
    line-height: 75px;
    text-align: center;
    display: block;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    color: #316756;
    transition: 0.3s color ease-in-out;
}

.ul-none-nav {
    list-style-type: none;
    padding: 0px;
}
#mobile-nav ul.ul-none-nav li:first-child {
    margin-top: 40px;
}
/* Initially hide the burger menu */
.hide {
    display: none;
}
#burger-menu {
    cursor: pointer;
    align-self: center;
    font-size: 25px;
    /* Add more styling as needed */
    transition: transform 0.1s ease; /* Add transition effect */
}
#burger-menu.active {
    transform: rotate(90deg); /* Rotate the burger menu icon */
}
.desktopSubNav {
    background-color: white;
    /*height: 300px;*/
    height: 100%;
   /* width: 60%;*/
    width: 100%;
    padding: 20px;

    transition: opacity 2s ease-out;
    opacity: 0;

    justify-content : space-around;
    align-items: center;
    font-size: 18px;
    text-transform: uppercase;
}
.dontShow {
    opacity: 0;
    transition: all 0.1s ease-out; /* Apply transition for opacity */

    display: none;
}
#mobile-nav-container {
    /*overflow: hidden;*/
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 55%;
    z-index: 2;
    background-color: white;
    transition: transform 0.3s ease; /* Add transition effect */
    padding-left: 80px;
    padding-right: 20px;
    padding-top: 20px;
}
.overFlow {
    overflow: auto;
}
.translate100 {
    transform: translateX(100%);
}
.translate0 {
    transform: translateX(0%);
}
#mobile-nav-header {
    display: flex;
    justify-content: space-between;
}
#mobile-nav-header {
    display: flex;
    justify-content: space-between;
}
#mobile-nav-logo a {
    height: 100%;
    display: inline-block;
}
/* Style for the cross container */
#mobile-nav-cross-container {
    width: 30px; /* Adjust the size as needed */
    height: 30px; /* Adjust the size as needed */
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    z-index: 10;

    margin: 20px;
}
/* Style for each line */
.line {
    position: absolute;
    width: 100%;
    height: 2px; /* Adjust the thickness as needed */
    background-color: black; /* Adjust the color as needed */
    top: 50%;
    transform: translateY(-50%);
    /*transition: rotate 0.3s ease; /* Add transition effect */
}

/* Style for the horizontal line */
.line.horizontal {
    transition: transform 0.3s ease;
    transform: rotate(45deg);

}

/* Style for the vertical line */
.line.vertical {
    transition: transform 0.3s ease;
    transform: rotate(-45deg);
}
#mobile-nav svg {
    color: #316756;
}
#mobile-nav ul.ul-none-nav li:first-child {
    margin-top: 40px;
}
#mobile-nav ul li{
    margin-top: 40px;
}
#mobile-nav ul li a {
    color: black;
}
#mobile-nav ul li a:hover {
    text-decoration: underline;
    text-underline-offset: 8px;
}
.backMobileMenu {
    width: 75px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 10;

    margin: 20px;
    text-align: center;
    line-height: 40px;
}
.backMobileMenu a {
    text-decoration: none;
    color: black;
    height: 100%;
    display: inline-block;
    width: 100%;
}
.mobile-sub-nav {
    margin-top: 100px;
    margin-right: 80px;
}
.mobile-sub-nav-column {
    width: 100%;
    border-bottom: 1px solid grey;
    margin-left: 50px;
    margin-top: 40px;
}
.remove-border {
    border: none !important;
}
.mobile-sub-nav-title {
    margin-bottom: 40px;
}
.sub-nav-link {
    height: 60px;
    line-height: 60px;
    width: 100%;
}
.sub-nav-link a {
    text-decoration: none;
    color: black;

    width: 100%;
    display: inline-block;
}
.sub-nav-link a:hover {
    text-decoration: underline;
    text-underline-offset: 8px;
}
#modal-background {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* background-color: rgba(0, 0, 0, 0.5); */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0.66) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-out;

}
.toggleZIBG {
    z-index: 1 !important;
}


.greyColor {
    color: grey !important;
}
.borderGreyColor {
    border-color: grey !important;
}

.defaultNavColor {
    color: #316756 !important;
}
.borderDefaultNavColor {
    border-color: #316756 !important;
}

.no-click {
    pointer-events: none;
    cursor: none;
}
.body-dark-bg {
    opacity: 1 !important;
}
.showFlex {
    opacity: 1;
    transition: all 0.1s ease-out; /* Apply transition for opacity */
}
.dontShow {
    opacity: 0;
    transition: all 0.1s ease-out; /* Apply transition for opacity */

    display: none;
}

#banner {
    display: flex;
    flex-direction: column;
    justify-content: center;

    background-image: url("../img/piscine.jpg");
    background-size: cover;
    background-position: center;
    height: auto;
    color: white;
    padding: 20px;
    filter: brightness(1.15);
}
#banner-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
}
#banner h1 {
    text-transform: uppercase;
    text-align: center;
    line-height: 60px;

    /*
    font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    font-weight: 900;
     */
    font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
    font-weight: 900;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 10px;
}
#banner-info {
    background-color: rgba(17, 15, 15, 80%);
    text-align: center;
    border-radius: 15px;
    padding: 35px;
}
#banner-info p {
    letter-spacing: 1.5px;
}
#banner-buttons {
    display: flex;
    justify-content: space-evenly;
    border-top: 4px solid #3EA055;
}
#banner-buttons button {
    width: 250px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 20px;
    padding: 0px;
    height: 30px;
    border-width: 0px;
}
#banner-buttons a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 30px;
}
#enSavoirPlusBtn a {
    color: white;
}
#contactBtn  a {
    color: black;
}
#enSavoirPlusBtn {
    background-color: rgba(62, 160, 85, 1);
    transition: background-color 0.3s ease;
}
#enSavoirPlusBtn:hover {
    background-color: rgba(62, 160, 85, 0.8);
}
#servicesP-ctn {
    align-self: flex-end;

    background-color: #3EA055;
    border-radius: 10px;
    width: 200px;
    padding: 0px 30px;
    opacity: 0.9;
    margin-top: 20px;
}

.highlight {
    text-decoration: underline;
}
.titleHightlight {
    text-decoration: underline;
    color: #3EA055;
    font-size: 28px;
    text-transform: uppercase;
}
.colorHightLight1{
    color: #145624;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.h2Style1 {
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 25px;
}

#section1 {
    display: flex;
    flex-direction: row;
    width: 50%;
    position: relative;
    border-left: 20px solid #C7E8DA;
    padding-left: 40px;
    margin-top: 100px;
    z-index: 0;
}

#presentationEntreprise {
    display: flex;
    flex-direction: row;
}

#presentationEntrepriseMain {
    display: flex;
    flex-direction: column;
    z-index: 1;

    width: 450px;
    height: 350px;
}
#presentationEntrepriseMain h2 {
    margin-top: 0px;
}
#presentationEntreprise1 {
    background-color: #FEFDFD;
    width: 450px;
    height: 350px;
    padding: 40px;
    border-radius: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 25px;
    -webkit-box-shadow: 2px 6px 15px -1px #000000;
    box-shadow: 2px 6px 15px -1px #000000;
}
#presentationEntreprise1 p:first-child {
    border-bottom: 10px solid #C72C2C;
    padding-bottom: 20px;
}
#presentationEntreprise2 {
    position: absolute;
    z-index: 0;
    margin-left: 410px;
}
#presentationEntreprise2 img {
    border-radius: 5px;
    box-shadow: 6px 6px 15px -5px rgba(0,0,0,0.58);
    margin-top: 40px;
    padding-top: 5px;
}

#section2, #mainPageContactForm, #formPart1, #mainPageContactForm form, #formPart2 {
    display: flex;
    flex-direction: column;
}
#section2 {
    margin-top: 250px;
    border-right: 20px solid #C7E8DA;
    padding-right: 80px;
}

#formPart1Ctn0 {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;;
}

#mainPageForm {
    -webkit-box-shadow: 5px 5px 15px 5px #0a7523;
    box-shadow: 5px 5px 15px 5px #0a7523;
}
#mainPageForm label {
    font-weight: 400;
}
.highLightRed {
    color: red;
}
#mainPageForm input, #mainPageForm textarea {
    margin: 5px 0px;
}
#formPart2 {
    margin-top: 50px;
}
#mainPageForm {
    border: 2px solid black;
    padding: 50px;
}
#objet {
    margin-top: 10px;
}
#mainPageForm input[type=submit]:hover {
    cursor: pointer;
    background-color: rgba(62, 160, 85, 80%);
}
#mainPageForm input[type=submit] {
    margin-top: 30px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    background-color: rgba(62, 160, 85, 1);
    border-radius: 5px;
    border: none;
    padding: 5px;
    transition: 0.3s background-color ease-in-out;
}
#mainPageContactForm h2 {
    text-align: end;
}

#section3, #prestationsMainContainer {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}
#prestationsMainContainer {
    position: relative;
}
#prestationsMainContainer p {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 30px;
}
#prestationsContainer1, #prestationsContainer2 {
    display: flex;
    flex-direction: row;

    padding: 30px 0px;
}


#presta1, #presta2, #presta3, #presta4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 625px;
    height: 455px;
}
#prestationsTitleContainer {
    position: absolute;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    height: 100%;

    pointer-events: none;
}
#prestationsTitleContainer h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    align-self: center;
    text-transform: uppercase;
    border-radius: 50%;
    width: 300px;
    height: 250px;
    background-color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #00620b;
}
#presta1 {
    background-image: url("../img/tondeuse.jpg");
    background-size: cover;
    background-position: center;
    border-top-left-radius: 40px;
    margin-right: 60px;
    position: relative;
    cursor: pointer;
}
#presta1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    filter: brightness(60%); /* Change the value to adjust the brightness */
    border-top-left-radius: 40px;
    pointer-events: none;
}
#prestaCalc1 {
    width: 100%;
    height: 100%;
    position: absolute;
    border-top-left-radius: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
    transition: opacity 0.5s ease;
    background-color: rgba(10, 117, 35, 0.7); /* Set the background color with transparency */
    padding: 20px;
    box-sizing: border-box;
}
#prestaCalc1:hover {
    opacity: 1;
    pointer-events: auto; /* Enable hover events on the calculation div */
}
/* Change the color of the h2 element when #prestaCalc3 is hovered */
#presta1:hover .prestaTitleStyle {
    transition: 0.5s text-decoration-color ease-in-out;
    text-decoration-color: rgb(255, 255, 255);
}

#presta2 {
    background-image: url("../img/cloturesPortails.jpg");
    background-size: cover;
    background-position: center;
    border-top-right-radius: 40px;
    position: relative;
    cursor: pointer;
}
#presta2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    filter: brightness(60%); /* Change the value to adjust the brightness */
    border-top-right-radius: 40px;
    pointer-events: none;
}
#prestaCalc2 {
    width: 100%;
    height: 100%;
    position: absolute;
    border-top-right-radius: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
    transition: opacity 0.5s ease;
    background-color: rgba(10, 117, 35, 0.7); /* Set the background color with transparency */
    padding: 20px;
    box-sizing: border-box;
}
#prestaCalc2:hover {
    opacity: 1;
    pointer-events: auto; /* Enable hover events on the calculation div */
}
/* Change the color of the h2 element when #prestaCalc3 is hovered */
#presta2:hover .prestaTitleStyle {
    transition: 0.5s text-decoration-color ease-in-out;
    text-decoration-color: rgb(255, 255, 255);
}

#presta3 {
    background-image: url("../img/man-working.jpg");
    background-size: cover;
    background-position: center;
    border-bottom-left-radius: 40px;
    margin-right: 60px;
    position: relative;
    cursor: pointer;
}
/* un pseudo élément qui permet d'appliquer un filter uniquement sur le background image */
#presta3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    filter: brightness(60%); /* Change the value to adjust the brightness */
    border-bottom-left-radius: 40px;
    pointer-events: none;
}
#prestaCalc3 {
    width: 100%;
    height: 100%;
    position: absolute;
    border-bottom-left-radius: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
    transition: opacity 0.5s ease;
    background-color: rgba(10, 117, 35, 0.7); /* Set the background color with transparency */
    padding: 20px;
    box-sizing: border-box;
}
#prestaCalc3:hover {
    opacity: 1;
    pointer-events: auto; /* Enable hover events on the calculation div */
}
/* Change the color of the h2 element when #prestaCalc3 is hovered */
#presta3:hover .prestaTitleStyle {
    transition: 0.5s text-decoration-color ease-in-out;
    text-decoration-color: rgb(255, 255, 255);
}
#presta4 {
    background-image: url("../img/terrassement.jpg");
    background-size: cover;
    background-position: center;
    border-bottom-right-radius: 40px;
    position: relative;
    cursor: pointer;
}
/* un pseudo élément qui permet d'appliquer un filter uniquement sur le background image */
#presta4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    filter: brightness(60%); /* Change the value to adjust the brightness */
    border-bottom-right-radius: 40px;
    pointer-events: none;
}
#prestaCalc4 {
    width: 100%;
    height: 100%;
    position: absolute;
    border-bottom-right-radius: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
    transition: opacity 0.5s ease;
    background-color: rgba(10, 117, 35, 0.7); /* Set the background color with transparency */
    padding: 20px;
    box-sizing: border-box;
}
#prestaCalc4:hover {
    opacity: 1;
    pointer-events: auto; /* Enable hover events on the calculation div */
}
/* Change the color of the h2 element when #prestaCalc3 is hovered */
#presta4:hover .prestaTitleStyle {
    transition: 0.5s text-decoration-color ease-in-out;
    text-decoration-color: rgb(255, 255, 255);
}


.prestaTitleStyle {
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    text-decoration: 5px underline #3EA055;
    z-index: 1;
    text-align: center;
}

.calcPresBtn {
    width: 260px;
    height: 45px;
    text-transform: uppercase;
    color: white;
    background-color: #103D1B;
    transition: background-color 0.3s ease-in-out;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    align-self: center;
}
.calcPresBtn:hover {
    background-color: rgb(129, 126, 199);
}

#section4 {
    justify-content: center;
    margin-top: 100px;

    max-width: 1690px;
    border-bottom: 20px solid #ADF3D5;
    padding-bottom: 50px;
    /*padding: 50px;*/
}

#realisation1, #realisation1 img {
    height: 100%;
}
#realisationsInnerContainer {
    display: flex;
    flex-direction: row;
}
#realisationsContainer1, #section4, #realisationsContainer2, #moreRealisation {
    display: flex;
    flex-direction: column;
}
#realisationsContainer2 {
    margin-left: 20px;
}
#realisation2et3 {
    margin-bottom: 20px;
}
#realisation2et3, #realisation4{
    display: flex;
    flex-direction: row;
}
#realisation2 {
    margin-right: 20px;
}
#realisation4 img {
    width: 70%;
}
#moreRealisation {
    text-transform: uppercase;
    color: white;
    background-color: rgba(0, 0, 0, 40%);
    text-align: center;
    padding: 40px;
    margin-bottom: 20px;
}
#moreRealisation button {
    text-transform: uppercase;
    transition: 0.3s background-color ease-in-out;
    background-color: #0a7523;
    width: 200px;
    height: 50px;
    color: white;
    margin: 0 auto;
    border: none;
    border-radius: 7px;
}
#realisationsInstaBtn:hover {
    background-color: rgba(10, 117, 35, 0.5);
    cursor: pointer;
}
/* zoom effect (start) */
#section4 img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
}

.realisation {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.realisation img:hover {
    transform: scale(1.1);
}
#realisation1, #realisation2, #realisation3, #realisation4 img {
    -webkit-box-shadow: 5px 5px 15px -6px #000000;
    box-shadow: 5px 5px 15px -6px #000000;
}
/* zoom effect (end) */
#section4 h2 {
    margin-left: 10%;
    margin-bottom: 5px;
}
#moreRealisation h2 {
    padding-bottom: 20px;
}
#realisationsInstaBtn {
    margin-top: 20px;
}
#realisation4, #realisation4 a {
    width: 100% !important;
}
.deco {
    border-top: 20px solid #ADF3D5;
    width: 40%;  margin-bottom: 20px;
}


#section5 {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    background-color: #F9FAF9;
}
#actualiteMainContainer {
    display: flex;
    flex-direction: row;
    margin: 0px 10px 0px 10px;
}
#actu1 {
    align-content: center;
}

#actu1Content {
    background-color: #FEFDFD;
    box-shadow: 2px 6px 15px -1px #000000;
    padding: 20px;
    margin-right: 20px;
}
#actu1Content p {
    letter-spacing: 1px;
}
#actu1Content span  {
    color: #1877F2;
}
#actu2 {
    z-index: 1;
}
#actu1 {
    z-index: 1;
}
#actu1 h2 {
    margin-bottom: 80px;
}
#actualiteMainContainer {
    position: relative;
}
#section5Deco {
    position: absolute;
    width: 120%;
    background-color: #0A7523;
    height: 300px;
    top: 342px;
    margin-left: -10%;
    border-radius: 5px;
}
#actu2 img {
    min-height: 600px;
}

#mainPageFooter {
    margin-top: 120px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #B4E7C0;
    padding-top: 50px;
}
footer ul {
    padding: 0px;
    margin: 0px;
}
footer ul li {
    list-style: none;
}
#mainFooterContainer {
    padding: 10px;
}
#mainFooterContainer, #topFooterContainer {
    display: flex;
    flex-direction: column;
}

#topFooterP1, #logoFooterContainer, #bottomFooterContainer, #linksFooterContainer {
    display: flex;
    flex-direction: row;
}
#logoFooterContainer {
    align-self: flex-end;
    /*margin-right: 50px;*/
}
#logoFooterContainer img:first-child {
    margin-right: 50px;
}
#bottomFooterContainer {
    border-top: 3px solid black;
    justify-content: space-between;
    padding: 20px;
}
#bottomFooterContainer li {
    display: inline-block;
    margin-right: 20px;
}
#bottomRsContainer a:first-child {
    margin-right: 20px;
}
#bottomRsContainer a, #mentionsContainer li a{
    color: #053811;
}
#mentionsContainer a {
    font-weight: 700;
}
#entrepriseInfoFooter p {
    text-transform: uppercase;
    color: #4B4B4B;
    font-weight: bold;
    line-height: 30px;
    letter-spacing: 0.3px;
}
#entrepriseInfoFooter img {
    width: 100%;
}
#entrepriseInfoFooter {
    width: 30%;
    margin-right: 20px;
}
#linksFooterContainer {
    width: 70%;
    justify-content: space-around;
}
#linksFooterContainer ul {
    letter-spacing: 1px;
    line-height: 30px;
}
#linksFooterContainer li a, #footerContact {
    color: #000;
    font-size: 16px;
    font-weight: 500;
}
#linksFooterContainer h3 {
    text-transform: uppercase;
    color: #074115;
}
#footerActivites, #footerRealisation {
    min-width: 193px;
}
#footerActivites, #footerRealisation, #footerSupport {
    margin-right: 20px;
}
@media screen and (max-width: 1365px) {
    #section1 {
        align-self: flex-start;
    }
    #presentationEntreprise1 {
        width: 380px;
        padding: 30px;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
        border-radius: 15px;
        font-weight: 700;
    }
}

#mainPageForm input,
#mainPageForm textarea {
    width: 100%;
    padding: 0.5em;
    box-sizing: border-box;
}



@media screen and (max-width: 1342px) {
    #presta1, #presta2, #presta3, #presta4 {
        width: 500px;
        height: 450px;
    }
    #prestationsTitleContainer h2 {
        width: 220px;   height: 185px;
    }
}
@media screen and (max-width: 1235px) {
    #section5Deco {
        width: 100%;
    }
}


@media screen and (max-width: 1080px) {
    #topFooterP1 {
        flex-direction: column;
        align-items: center;
    }
    #entrepriseInfoFooter {
        margin-right: 0px;
    }
    #linksFooterContainer {
        width: 100%;
    }

}
@media screen and (max-width: 1045px) {
    #presentationEntreprise2 img {
        width: 400px;
        height: 280px;
    }
    #presta1, #presta2, #presta3, #presta4 {
        width: 400px;
        height: 550px;
    }
    #presta3 h2 {
        width: 300px;
    }
}
@media screen and (max-width: 1045px) {
    #realisation2et3, #realisation4 {
        display: flex;
        flex-direction: column;
    }
    #realisation2 {
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 600px) {
    #realisationsInnerContainer {
        flex-direction: column;
    }
    #realisationsContainer2 {
        margin : 20px 0 20px 0;
    }
    #realisation1, #realisation2, #realisation3, #realisation4 img {
        min-height: 500px;
    }
}

@media screen and (max-width: 900px) {
    #presentationEntreprise2 {
        margin-left: 300px;
    }
}

@media screen and (max-width: 880px) {
    #presta1, #presta2, #presta3, #presta4  {
        width: 100% !important;
    }
}
@media screen and (max-width: 880px) {
    #prestaCalc1 p:first-child, #prestaCalc3 p:first-child {
        margin-top: 75px;
    }
}

@media screen and (max-width: 835px) {
    #section2 {
        padding-right: 0px;
        border-right: none;
    }
    #mainPageForm {
        padding: 10px;
    }
}
@media screen and (max-width: 800px) {
    #linksFooterContainer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #footerActivites, #footerRealisation, #footerSupport {
        margin-right: 0px;
    }
    #footerActivites, #footerRealisation, #footerSupport, #footerContact {
        width: 193px;
    }
    #entrepriseInfoFooter {
        width: 70%;
        text-align: center;
    }
    #logoFooterContainer {
        align-self: center;
    }
    #logoFooterContainer img  {
        width: 100%;
    }
}
@media screen and (max-width: 780px) {
    #presentationEntreprise2 {
        margin-left: 200px;
        margin-top: 35px;
    }
    #presta3, #presta1 {
        margin-right: 30px;
    }
    #presta4 h2  {
        margin-top: 30px;
    }
    #actualiteMainContainer {
        align-items : center;
        flex-direction: column;
    }
    #actu2 {
        margin-top: 20px;
    }
    #section5Deco {
        background-color: #075;
    }
    #actu1Content {
        margin:0px;
    }
}
@media screen and (max-width: 740px) {
    #presta1, #presta3 {  margin-right: 0px  }
    #presta1, #presta2, #presta3, #presta4 {
        height: 630px;
    }
    .prestaTitleStyle {
        margin-top: 50px !important;
    }
}
@media screen and (max-width: 710px) {
    #section3 {
        width: 100% !important;
    }
    #prestationsContainer1, #prestationsContainer2 {
        flex-direction: column;

        width: 100% !important;
        padding-right: 0px !important;
        padding-left: 0px !important;
    }
    #presta1, #presta2, #presta3, #presta4 {
        width: 100%;
    }

    #presta1, #presta1::before, #prestaCalc1  {
        border-top-left-radius: 0px;
    }
    #presta2, #presta2::before, #prestaCalc2 {
        border-top-right-radius: 0px;
    }
    #presta3, #presta3::before, #prestaCalc3  {
        border-bottom-left-radius: 0px;
    }
    #presta4, #presta4::before, #prestaCalc4 {
        border-bottom-right-radius: 0px;
    }
    .prestaTitleStyle {
        margin-top: 65px !important;
    }
}

@media screen and (max-width: 680px) {
    #section1 {
        display: flex;
        flex-direction: row;
        width: 100%;
        position: relative;
        border-left: 0px solid #C7E8DA;
        margin-top: 100px;
        justify-content: center;
        padding-left: 0px;
    }
    #presentationEntrepriseMain {
        z-index: initial;
    }

    #presentationEntreprise1 {
        width: 380px;
        padding: 30px;
        padding-top: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
        border-radius: 15px;
        font-weight: 700;
        z-index: 1;
        margin-top: 117px;
    }

    #presentationEntreprise2 {
        margin-left: 0px;
    }
}
@media screen and (max-width: 540px) {
    #section5Deco {
        width: 100%;
    }
    #actu2 img {
        width: 100%;
    }
    #bottomFooterContainer {
        flex-direction: column;
        align-items: center;
    }
    #bottomRsContainer {
        margin-top: 20px;
    }
}
@media screen and (max-width: 480px) {
    #section1 {
        border-left: 0px solid #C7E8DA;
        padding-left: 0px;
        margin-left: 0px;
    }
}
@media screen and (max-width: 450px) {
    #section1 {
        text-align: center;
    }
    #presentationEntreprise1 {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }
    #presentationEntrepriseMain {
        width: 100%;
    }
    #presentationEntreprise2 {
        width: 100%;
    }
    #presentationEntreprise2 img {
        width: 100%;
    }
}

@media screen and (max-width: 1185px) {
    #top-info-left {

    }
    #top-info-right {
        flex-direction: column;
        align-items: center;
        width: auto;
    }
    #top-info-phone {
        width: 180px;
    }
    #top-info-rs {
        width: 250px;
        display: flex;
        justify-content: space-evenly;
    }
    #top-info-phone {
        margin-bottom: 5px;
    }
    #recrutementBtn {
        margin-bottom: 10px;
    }
    #top-info-left button:first-child {

    }
}
@media (max-width: 840px) {
    #sub1 {
        display: none;
    }
    #burger-menu {
        display: flex;
        order: 1;
    }
    #main-nav {
        display: none;
    }
    #header-logo {
        order: 1;
    }
    #header-logo img {
        width: 150px;
        height: 100px;
        margin-bottom: 0px;
    }
    #desktop-nav-ctn {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 0px;
        padding-right: 0px;
    }
    #nav-container-left {
        width: auto;
    }
    #nav-container {
        justify-content: space-around;
    }
}
@media screen and (max-width: 650px) {
    #header-nav {
        flex-direction: column;
        padding: 15px 0px;
        text-align: center;
        height: 130px;

    }
    #top-info-phone {
        margin-top: 0px;
    }
    #top-info-left {
        width: auto;
    }
    #top-info-left button:first-child {
        margin-right: 0px;
    }
    #banner-buttons {
        flex-direction: column;
        align-items: center;
    }
}
@media (max-width: 600px) {
    #servicesP-ctn {
        align-self: center;
    }
}
@media (max-width: 420px) {
    #nav-logo img {
        width: 200px;
        height: 80px;
    }
    #nav-container {
        height: 130px !important;
    }
}

@media screen and (max-width: 332px) {
    #top-info-left button:first-child {
        margin: 0px;
        margin-bottom: 5px;;
    }
}