/*IMPORTING FONT AND BASIC SETTINGS*/
@font-face {
    font-family: Lato;
    src: url(Lato/Lato-Black.ttf);
}

*,*::before, *::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}

body {
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 200;
    line-height: 1.46;
    color: #1a1a1a;
    background-color: #fff;
    padding: 0;
    margin: 0;
}

/*HEADER SETTINGS*/
.header-wrapper {
    display: flex;
    align-items: center;
    padding-left: 75px;
    padding-right: 75px;
    padding-top: 27px;
    padding-bottom: 27px;
    background: #9A9696;
}

.desktop-logo {
    width: 230px;
    height: 35px;
}

a {
    display: inline-block;
    color: #72af30;
    text-decoration: none;
    transition: 300ms ease-in-out;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
}

.contact-info {
    color: #fff;
}
/*NAV SETTINGS*/
ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

[class*='fa-']:before {
    font-weight: 400;
    font-family: 'FontAwesome';
}

.list-address>li {
    display: inline-block;
    vertical-align: middle;
    margin-left: 100px;
}

.unit {
    display: flex;
    flex: 0 1 100%;
    align-items: center;
    padding: 5px;
}

.align-items-center {
    align-items: center !important;
}

.flex-row {
    flex-direction: row !important;
}

.unit-spacing-icon>* {
    margin-left: 12px;
}

.unit-left,
.unit-right {
    flex: 0 0 auto;
    max-width: 100%;
}

.icon-md {
    font-size: 36px;
    line-height: 1;
}

.icon-sm {
    font-size: 18px;
    line-height: 1;
    padding: 0px 10px;
}

.icon:before {
    position: relative;
    display: inline-block;
    font-weight: 400;
    font-style: normal;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

.icon-primary-dark {
    color: #214910;
}

.unit-body {
    flex: 0 1 auto;
}

.contact-info .tel {
    font-weight: 700;
    letter-spacing: .05em;
}

.contact-info a,
.contact-info a:active,
.contact-info a:focus {
    color: #fff;
}
a:hover, a:focus{
    
    color: #4b7320;
    text-decoration: none;
    outline: none;
}

nav {
    display: flex;
    padding: 35px 75px;
    width: 100%;
    position: fixed;
    z-index: 99999;
}
.nav-colored { background-color: rgba(0, 0, 0, 0.6); top:0; }
.nav-transparent { background-color:transparent;}
.nav-menu {
    display: flex;
    align-items: center;
}

.nav-menu ul {
    display: flex;
}

.nav-menu ul li a {
    padding: 5px 30px;
    color: #fff;
    border: none;
    transition: 300ms ease-in-out;
}

nav .social {
    width: 100%;
    text-align: end;
    color: #fff;
}

.social a {
    color: #fff;
}

/*HOMEPAGE SETTINGS*/
.homepage-content {
    position: relative;
}
.homepage-text{
    position: absolute;
    top: 25%;
    left: 20%;}
.homepage-content .column h4 {
    max-width: 320px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
}
/*MAIN BUTTON USED EVERYWHERE*/
.btn-main {
    display: inline-block;
    position: relative;
    padding: 9px 10px 9px 20px;
    font-size: 14px;
    line-height: 29px;
    border-radius: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    text-transform: uppercase;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    transition: 300ms all ease-in-out;
    letter-spacing: .1em;
    min-width: 137px;
    z-index: 1;
    margin: 0px 10px 10px 10px;
    
    color: #fff;
    background-color: #214910;
    border-color: transparent;
}
.home-btn:hover{
    
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}
/*ADDING BORDERLINES AT HOMEPAGE BTN AND TRANSITONS OF SAME*/
.home-btn::before {
    position: absolute;
    content: '';
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 1px solid rgba(255, 255, 255, 0.3);;
    transform: translate(9px, 9px);
    transition: inherit;
    z-index: -5 !important;

}
.home-btn::after{
    position: absolute;
    content: '';
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-style: none;
    transition: inherit;
    z-index: -1;
}
.home-btn:hover:before {
    transform: translate(0);

}
.home-btn:hover:after, .btn-main:hover{   
    border-color: #72af30;
    background: #72af30;
    color: #fff;
}
/*GRAY BACKGROUND*/
.bg-gray{
    
    background-color: #f5f5f5;
}
/*PAGE SETUP*/
.container{
    padding: 50px 70px;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
/*SPLIT CONTAINERS LEFT AND RIGHT*/
.left-content{
    width: 60%;
}

.right-content{
    width: 35%;
    padding: 50px; 
    margin: -150px 0px 0px 50px;
    position: relative;
    background-color: #fff;
}
.title h3{
    margin-top: 0;
    margin-bottom: 0;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #333;
    
    line-height: 1.4;
    font-size: 24px;
}
.text p{
    text-align: justify;
}
/*SMALL SERVICE BOX WITH DESC*/
.service-box{
    padding: 10px;
    width: 50%;
}
.service-title-green h2{
    color: #72af30;
    margin: 0;
    padding: 0;
}

span{margin:0px 10px;}
.service-description{
    
    padding: 5px 50px;
}
/*FORM*/
form{
    
    display: flex;
    flex-flow: column;
    margin: 50px 0px;
}
input, select, textarea{
    
    padding: 15px;
    margin: 15px 10px;
    background-color: #f5f5f5;
    outline: none;
    border: none;
}
::placeholder, option{
    font-family: Lato ;
    font-weight: 100;
}

/*about section*/
.hero-image{
    background-image: url(../img/about-us-hero.jpg);
    position: relative;
    color: #fff;
    padding-top: 150px;
    padding-bottom: 150px;

    background-size: cover;
    background-position: center 20%;
}
.hero-image h2{
    
    font-size: 28px;
    text-transform: uppercase;
    display: flex;
    align-content: center;
    justify-content: center;
}

/*VIDEO SETTINGS*/
video{width: 100%;}
.about-us-content{margin: 0; padding: 0 50px;}
.about-us-box{width: 100%; padding: 0;}


/*our services*/
.services-hero{
    background-image: url(../img/services-hero.jpg);
}
/*SERVICES CONTAINERS AND LISTS*/
.left-list{width: 25%;}
.services-right-content{width: 70%; margin-left: 20px;}
.text h3, .text ul li{color: #000;}
.text ul{ padding-left: 20px;}
.text ul li{list-style-type:initial;}
#content{padding: 15px;}
.list-btn{width: 100%;}

/*shop*/
.shop-hero{
    background-image: url(../img/shop-hero.jpg);
}
.shop-item{
    width: 250px;
    display: flex;
    flex-flow: column;
    padding: 20px;
}
.shop-item-image{
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    background-color: #fff;
}
img{width: 100%;}
.item-details{padding: 20px; display: flex; flex-flow: column; justify-content: center; text-align: left;}
.price{color: #000;}
.row-center{ 
    justify-content: center;
}
/*CONTACT PAGE*/
.contact-hero{
    background-image: url(../img/contact-hero.jpg);
}

.map{
    width: 100%;
    height: 350px;
}

.addresses{
    padding: 15px;
    margin: 0px 20px;
}

#contact{
    flex-flow: column;
    margin: 0;
}
/*HIDE MOBILE NAV*/
.nav-mobile{display: none;}
footer{
    text-align: center;
    padding: 10px;
    width: 100%;
}
/*MOBILE QUERIES, JUST ALIGNING ITEMS, ADJUSTING MARGINS ETC*/
@media only screen and (max-width: 920px) {
    .header-wrapper{padding: 30px;}
    .list-address>li, .unit-spacing-icon>*{margin-left: 0;}
    .left-content, .right-content, .left-list{width: 100%;}
    .right-content, .service-boxes{margin: 20px 0px;}
    nav{
        padding: 15px 0px;}
    
}
@media only screen and (max-width: 600px) {
    /*SETTING MOBILE NAV -ICON STYLE*/
    .nav-mobile{
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 20px;
       background-color: rgba(0, 0, 0, 0.6);
    border-radius: 20px 20px 0px 0px;
margin-top: 15px;}
    .nav-mobile ul{display: flex;}
    .nav-mobile ul li a span{font-size: 18px;}
    .map{display: none;}
    .header-wrapper{
        display: none;
    }
    .homepage-text{
        
    left: 10%;
    width: 80%;
    }
    nav{display: none;}
    #home{height: 100vh;}
    .homepage-content{height: 100%;}
    .slick-slide img{height: 100vh;}
    .container{
        padding: 40px 40px;
    }
    .left-content{width: 100%;}
    .service-box{width: 100%;}
    .about-us-content, .right-content{
        width: 100%;
        margin: 0;
        padding: 10px;
    }
    .service-boxes{
        margin-top: 15px;}
    .left-list{width: 100%;}
    .btn-main{margin: 10px 0px; width: 100%;}
    input, select, textarea{
        margin: 15px 0px;
    width: 100%;
    }
    footer{margin-bottom: 50px;}
  }