/* defs */
:root{
    --color-primary: #0D9A48;
    --color-accent: #2A5631;
    --color-secondary: #BC5E49;
    --bg-cream: #ede8da;
}
/* fonts */

@font-face {
    font-family: 'Arista Pro Bold';
    src: url('../fonts/Arista-Pro-Bold.woff2') format('woff2'),
}
body{
    font-family: "Roboto";
    font-size: 16px;
    color: #101e1e;
    word-spacing: 0.4em;
    overflow-x: hidden;
    max-width: 100vw;
    word-spacing: normal;
}
.bg-cream{
    background-color:var(--bg-cream);
}
.bg-blue{
    background-color: transparent;
    background-image: linear-gradient(180deg, #C2CBD2 50%, #FFFFFF 65%, #FFFFFF 100%);
}
.bg-green{
    background-color: #EBF0DC;
}
.bg-coffee{
    background-color: transparent;
    background-image: linear-gradient(180deg, #B17355 50%, #FFFFFF 65%, #FFFFFF 100%);
}
.container{
    max-width: 1380px;
    --bs-gutter-x: 4.5rem;
}
.relative{
    position: relative;
}
.container-1920{
    max-width: 1920px;
    margin: 0 auto;
}
.mt-l{
    margin-top: 5vw;
}
.py-section{
    padding-top: 5rem;
    padding-bottom: 5rem;
}

h1,h2,h3,h4{
    font-family: "Arista Pro Bold", Sans-serif;
    color: var(--color-accent);
    margin-bottom:15px;
}
h2{
    margin-bottom: 1rem;
}
b, strong{
    color: var(--color-accent);
}
section img{
    border-radius: 15px;
    max-width: 100%;
    height: auto;
}

.btn-main{
    font-family: "Roboto", Sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1em;
    color: white;
    background-color: var(--color-accent);
    border-style: solid;
    border-width: 3px 3px 3px 3px;
    border-color: var(--color-accent);
    border-radius: 35px 35px 35px 35px;
    padding: 17px 37px 16px 33px;
    position: relative;
    z-index: 2;
}
.btn-main:hover{
    color: white;
    background-color: var(--color-secondary);
    border-style: solid;
    border-width: 3px 3px 3px 3px;
    border-color: var(--color-secondary);
}



/* NAVBAR MENU */
#navbar-logo{width:150px}
#navbar a{ font-family: "Arista Pro Bold", Sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 25px; 
}
#navbar .active a{
    color: var(--color-primary);
}
#navbar .active::after, #navbar .nav-item:hover::after {
    content: "";
    position: absolute;
    border-bottom: 2px solid var(--color-primary);
    max-width:100%;
    left: 8px;
    right: 8px;
    bottom: 0;
}
.nav-item{
    position: relative;
    margin: 0 10px;
}


/* footer */
footer{
    padding: 7rem 0;
    position: relative;
}

@media (min-width:756px) {

    footer::before{
        content: '';
        position: absolute;
        width: 200px;
        background: url(../img/bg/plant.png);
        background-repeat: no-repeat;
        top: 0;
        bottom: 10px;
        right: 4vw;
        z-index: 0;
        opacity: 75%;
    }
    .col-md-20{
        width: 20%!important;
    }
    footer::after{
        content: '';
        position: absolute;
        width: 525px;
        background: url(../img/bg/food.png);
        background-repeat: no-repeat;
        top: 100px;
        bottom: 0;
        left: 4vw;
        z-index: 0;
        opacity: 75%;
        
    }
    
}
footer, footer h4{
    color: #000;
}
footer a{
    color:var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}
footer .container{
    position: relative;
    z-index: 5;
}

/* contact */
#contact_welcome{
    padding: 3rem 0;
}
@media (min-width:765px) {
    #contact_welcome{
        position: relative;
        padding: 9rem 0;
    }
    #contact_welcome::after{
        content:'';
        position: absolute;
        top:0;
        left:50vw;
        bottom:0;
        right:0;
        background: url(../img/bg/contact.jpg);
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
    
    }
    .plant1{position: relative;}
    .plant1 div{z-index: 1;}
    .plant1::after{
        content: '';
        position: absolute;
        width: 525px;
        background: url(../img/bg/floare2.png);
        background-repeat: no-repeat;
        top: 0;
        bottom: 100px;
        left: 10vw;
        z-index: 0;
        opacity: 75%;   
    }
    .plant1-reversed::before{
        content: '';
        position: absolute;
        width: 525px;
        background: url(../img/bg/floare2.png);
        background-repeat: no-repeat;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        top: 10%;
        bottom: 0;
        left: -100px;
        z-index: 0;
        opacity: 75%;
        
    }
    .flower1{position: relative;}
    .flower1 div{z-index: 1;}
    .flower1::after{
        content: '';
        position: absolute;
        width: 525px;
        background: url(../img/bg/floare3.png);
        background-repeat: no-repeat;
        top: 50px;
        bottom: 100px;
        right: -3vw;
        z-index: 0;
        opacity: 75%;   
    }
    .dots{position: relative;}
    .dots div{z-index: 1; position: inherit;}
    .dots::after{
        content: '';
        position: absolute;
        width: 27%;
        background: url(../img/bg/buline1.png);
        background-repeat: repeat;
        top: 25%;
        bottom: 100px;
        left: 10%;
        right: -3vw;
        z-index: 0;
        opacity: 75%;
    }
    .dots2{position: relative;}
    .dots2 div{z-index: 1; position: inherit;}
    .dots2::after{
        content: '';
        position: absolute;
        width: 80%;
        height: 60%;
        background: url(../img/bg/buline2.png);
        background-repeat: repeat;
        top: 5%;
        bottom: 100px;
        
        right: 10%;
        z-index: 0;
        opacity: 25%;
    }
    
}
.form-control{
    background-color: #F4F4F4;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #E4E4E4;
    border-radius: 0px 0px 0px 0px;
    padding: 10px 0px 8px 15px;
    margin-bottom: 39px;
}
#places .card-ct{
    display:flex;
    height: 400px;
    align-items: center;
    text-align:center;
}
#places .card-ct img{
    max-width:100%;
    max-height: 100%;
    margin: 0 auto;
}
#places a{
    color:var(--color-accent);
}