:root{
    --main: rgba(126, 166, 67,1);
    --main-hover: rgb(96, 129, 47);
}
.btn-main{
    background-color: var(--main);
    width: fit-content;
    padding: 10px 30px;
    border-radius: 20px 0;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    transition: background-color .3s ease;
}
.btn-main:hover{
    background-color: var(--main-hover);
}
.section-title{
    position: relative;
    background-color: var(--main);
    padding: 25px 100px;
    border-radius: 0 0 100px 0;
    color: #fff;
    left: -25%;
    z-index: 5;
}
.section-title.under-carousel{    
    top: -30px;    
}
.section-title h1{
    position: relative;
    padding-left: 40%;
}

.hidden {
    opacity: 0 !important;
    transform: scale(0) !important;
    transition: all .001s ease !important;
    pointer-events: none !important;
}
/* ================================ keyframes */
@keyframes opacity {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes hide {
    0% {transform: scale(1);}
    100% {transform: scale(0);}
}
@keyframes zoomOut {
    0% {transform: scale(1.25);}
    100% {transform: scale(1);}
}
@keyframes fadeUp {
    0% {opacity: 0;transform: translateY(50px);}
    75% {opacity: 1;}
    100% {transform: translateY(0);}
}
@keyframes hideMenuBtn {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-60px, 0) scale(0);}
}