*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    transition: all .5s ease-out;
}

:root {
    --primary: rgb(4, 69, 28);
    --secondary: #f0ec00;
}

body{
    background-color: var(--primary);
}



/* ############## GLOBAL ############## */
a{
    text-decoration: none !important;
}

.fs-app{
    font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
    .fs-app{
        font-size: 1rem;
    }
}

.text-color{
    color: var(--primary);
}

.text-color-2{
    color: var(--secondary);
}

.bg-color{
    background-color: var(--primary);
}

.round-img{
    border-radius: 10px;
    box-shadow: 15px 30px 40px 0px rgba(0,0,0,0.3);
}

.img-w{
    width: 50%;
}

.text-justify{
    text-align: justify;
}

.hover-grow:hover{
    transform: scale(1.1);
}

@media screen and (max-width: 767px) {
    .img-w{
        width: 100%;
    }
}

.title{
    display: block;
    position: relative;
    width: 10%;
    height: 2px;
    margin-bottom: 2rem;
    background-color: var(--secondary);
}

.title::after{
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: #fff;
    right: -30px;
}

.title::before{
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: #fff;
    right: -45px;
}

.side-line{
    display: block;
    position: relative;
    height: 0;
    margin-right: .7rem;
    width: 0;
}

.side-line::after{
    content: "";
    position: absolute;
    height: 1.6rem;
    width: 2px;
    background-color: #fff;
    top: -18px;
}

.side-line::before{
    content: "";
    position: absolute;
    height: .6rem;
    width: 2px;
    background-color: var(--secondary);
    top: -30px;
}







/* ############## HEADER ############## */

.cevaste-navlink{
    margin-left: 1rem;
    padding-bottom: .3rem;
    color: #fff;
    text-transform: capitalize;
    text-wrap: nowrap;
}

.cevaste-navlink:hover, .cevaste-navlink.active{
    color: var(--secondary);
    font-weight: 400;
}

@media screen and (max-width: 767px) {
    .cevaste-navlink{
        color: #000;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .cevaste-navlink:hover, .cevaste-navlink.active{
        color: var(--primary);
        font-weight: 400;
    }
}

.offcanvas#mobileNav{
    background:  linear-gradient(#13994419, #13994438, #13994497), url(/asset/img/bg_leafts.webp);
    background-size: cover;
}

.hero{
    width: 100%;
    max-height: 100vh;
    min-height: 60vh;
    position: relative;
    background: url(../img/hero.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero::after{
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #03311555;
}

.citation::before{
    content: "“";
    font-size: 2rem;
    position: absolute;
    top: 20px;
    left: 0;
}

.citation::after{
    content: "”";
    position: absolute;
    top: 20px;
    right: 0;
    font-size: 2rem;
}








/* ############## OVERLAY ############## */
.overlay{
    width: 100%;
    height: 80vh;
    background: url(../img/overlay.webp) fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.overlay::after{
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 80vh;
    background-color: #03311560;
}

.overlay#testimonial{
    background: url(../img/Ecolojah_10.webp) fixed;
    width: 100%;
    height: 80vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}







/* ############## DEPARTEMENTS ############## */

#department .nav-link{
    color: #fff;
    position: relative;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
}

#department .nav-link.active{
    color: var(--secondary);
    background-color: transparent;
}

#department .nav-link.active::after, #department .nav-link.active::before{
    content: "";
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    position: absolute;
    background-color: var(--secondary);
    right: 4px;
    top: 20px;
}

#department .nav-link.active::before{
    right: auto;left: 4px;
}







/* ############## CONTACTS ############## */

.bg-contact{
    background-image: url(/asset/img/bg_leafts.webp);
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

#coordonnees{
    background-color: rgba(5, 101, 40, 0.411);
}