/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

.section-hero{
    width:100%;
    height: 100vh;
    position: relative;
    display: block;
    background-color:#f0f0f0;
    background-position: center;
    background-size: cover;
}

.section-hero .hero-content{
    position: relative;
    z-index: 99;
    color: #111517;
    height: 100%;
}
.hero-content .title{
    font-family: "Gilda Display", serif;
    font-size: clamp(1.4rem, 5vw, 4.6rem);
    color: #111517;
    line-height:1.1;
}

.hero-content .button{
    text-decoration: none;
    padding: 10px 20px;
    /*border: 1px solid #f37920;*/
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    display: inline-block;
    border-radius: 27px;
    min-width: 150px;
    background-color: #f37920;
    background: linear-gradient(343deg, rgba(0, 103, 55, 1) 0%, rgb(50 50 50) 100%);
    transition:all .5s ease-in-out;
}
.hero-content .button:hover{
    text-decoration: none;
    background: #006737;
    transition:all .5s ease-in-out;
}

.hero-content .button-g{
    text-decoration: none;
    padding: 10px 20px;
    /*border: 1px solid #006737;*/
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    display: inline-block;
    border-radius: 27px;
    min-width: 150px;
    background-color: #006737;
    /*background: linear-gradient(343deg,rgba(243, 121, 32, 1) 0%, rgba(0, 103, 55, 1) 100%);*/
    background: linear-gradient(343deg, rgba(243, 121, 32, 1) 0%, rgb(90 90 90) 100%);
    transition:all .5s ease-in-out;
}

.hero-content .button-g:hover{
    text-decoration: none;
    background: #006737;
    transition:all .5s ease-in-out;
}

.section-hero .hero-images{
    position: absolute;
    top: 0;
    width: 50%;
    height: 100vh;
    right: 0;
}

 .hero-images .image-item{
    width:100%;
    height:100vh;
    background-position: center;
    background-size: cover;
}

@media(max-width: 600px){
    .section-hero .hero-images {width: 100%;}
}