/*=============== VARIABLES CSS ===============*/
:root {
    --header-height: 7em;
    
    /*========== CORES ==========*/
    --cor-fundo-header:#000000;
    --cor-link-menuheader:#ffffff;
    --cor-do-texto:#ffffff;

    --cor1: #009247;
    --cor2: #8CC640;

    --cor3: #BCFF63;
    --cor4: #022915;
    --cor5: #F0F0F0;
    --cor6: #646464;

    /*--gradiente-section1: linear-gradient(to right, #000000, #404040);*/

    /*========== Font and typography ==========*/
    --body-font: "Montserrat", sans-serif;
    --normal-font-size: 62.5%;
    --size-itens-menuheader: clamp(14px, 0.729vw, 18px);
    --size-h1-title: clamp(28px, 2.552vw, 49px); /*clamp(25px, 1.771vw, 34px);*/
    --size-h2-title: clamp(40px, 2.5vw, 48px);
    --size-h3-title: clamp(18px, 1.25vw, 20px);
    --size-h4-title: clamp(20px, 1.563vw, 30px);
    --size-text-site: clamp(14px, 0.729vw, 18px);

    
    /*========== Font weight ==========*/    
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
    --font-extra-bold: 800;
    --font-black: 900;

    /*========== margin/padding ==========*/
    --padding-topo: clamp(30px, 7.979vh, 75px);
    --padding-bottom: clamp(30px, 13.83vh, 130px);

    /*========== z index ==========*/    
    --z-fixed: 100;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}

li { list-style: none; }
a { text-decoration: none; }

.container {
    max-width: 1136px;
    margin: 0 auto;
    margin-inline: 1.5rem;
}
main {
    overflow-x: hidden;
}


/*=============== BOTONEIRA ===============*/
.linkBtnInvert {
    padding: 7px 30px;
    border: solid 1px transparent;
    text-align: center;
    color: #ffffff;
    font-size: var(--size-text-site);
    font-weight: var(--font-bold);
    text-decoration: none;
    outline: none;
    border-radius: 50px;
    transition: .3s;
    background: linear-gradient(135deg,  #005F13 0%,#218211 100%);
    background-size: 100% 100%;
    cursor: pointer;
}
.linkBtnInvert:hover {
    border: solid 1px #ffffff;
    background: linear-gradient(135deg,  #009247 0%,#8CC640 100%);
    background-size: 200% 200%;    
    transition: .3s;
    animation: moverGradientebtn 10s ease;    
}
.linkBtn {
    padding: 7px 30px;
    border: solid 1px #ffffff;
    text-align: center;
    color: #ffffff;
    font-size: var(--size-text-site);
    font-weight: var(--font-bold);
    text-decoration: none;
    outline: none;
    border-radius: 50px;
    transition: .3s;
    cursor: pointer;
}
.linkBtn:hover {
    border: solid 1px #ffffff;
    background: linear-gradient(135deg,  #009247 0%,#8CC640 25%, #009247 50%, #BCFF63 70%, #009247 100%);
    background-size: 200% 200%;    
    transition: .3s;
    animation: moverGradientebtn 10s ease;    
}

.linkBtnOutVerde {
    padding: 7px 30px;
    border: solid 1px #8CC640;
    text-align: center;
    color: #8CC640;
    font-size: var(--size-text-site);
    font-weight: var(--font-bold);
    text-decoration: none;
    outline: none;
    border-radius: 50px;
    transition: .3s;
    cursor: pointer;
}
.linkBtnOutVerde>svg {
    --cor-seta:#8CC640;
    transition: .3s;
}
.linkBtnOutVerde:hover {
    border: solid 1px #8CC640;
    color: #ffffff;
    background: linear-gradient(135deg,  #009247 0%,#8CC640 25%, #009247 50%, #BCFF63 70%, #009247 100%);
    background-size: 200% 200%;    
    transition: .3s;
    animation: moverGradientebtn 10s ease;    
}
.linkBtnOutVerde:hover>svg {
    --cor-seta:#ffffff;
    transition: .3s;
}

.linkBtn:hover > img {    
    transition: .3s;
}

@keyframes moverGradientebtn {
    0% {
    background-position: 0% 50%;
    }
    100% {
    background-position: 100% 50%;
    }
}