/* Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
*/

@import url("../fontes/fontes.css");

:root {
    --verde: #4b8632;
    --verde-escuro: #214a22;
    --verde-extra-escuro: #061c05;
    --branco: #ffffff;
    --preto: #000000;
}

a {
    text-decoration: none;
}

.cor-verde {
    color: var(--verde) !important;
}

.cor-verde-escuro {
    color: var(--verde-escuro) !important;
}

.cor-verde-extra-escuro {
    color: var(--verde-extra-escuro) !important;
}

.cor-branco {
    color: var(--branco) !important;
}

.cor-preto {
    color: var(--preto) !important;
}

#nav-principal {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Background color utility classes */
.bg-verde {
    background-color: var(--verde) !important;
}

.bg-verde-escuro {
    background-color: var(--verde-escuro) !important;
}

.bg-verde-extra-escuro {
    background-color: var(--verde-extra-escuro) !important;
}

.bg-branco {
    background-color: var(--branco) !important;
}

.bg-preto {
    background-color: var(--preto) !important;
}


* {
    font-weight: normal !important;
}

html {
    font-size: 10px;
}

body {
    font-family: "Inter", sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    line-height: 1.25em;
    background-color: var(--branco);
    color: var(--verde-escuro);
}

p {
    padding-bottom: 1rem;
}

.eye-shape {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 100% 0px;
    transform: rotate(0deg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-plant {
    font-family: 'Plant Display';
    text-transform: uppercase;
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-size: 4.7rem;
    color: var(--verde-escuro);
    margin-bottom: 2rem;
}

h2 {
    font-size: 4rem;
    line-height: 4rem;
    margin-bottom: 1rem;
}

.container {
    max-width: 1920px;
    padding-left: 20rem;
    padding-right: 20rem;
}

.logotipo {
    width: 16.8rem;
    height: 4rem;
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: var(--verde) !important;
    color: var(--branco);
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-radius: 0 0 5rem 0;
    z-index: 1000;
    width: 100%;
    ;
}

.icon-folha {
    width: 4rem;
    height: 4rem;
}

#banner-principal {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    color: var(--branco);
}

#banner-principal .imagem-banner {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}

#banner-principal h1 {
    font-size: 9.3rem;
    line-height: 9.3rem;
    text-align: start;
    margin-top: 18rem;
    ;
}

.img-substratos-fertilizantes {
    width: 23rem;
    height: 22.2rem;
}

.centralizador {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translate(0, -50%);
    text-align: center;
    z-index: 1000;
}

.card-produto {
    width: 67rem;
    height: 32.5rem;
    background-color: var(--verde);
    position: relative;
    border-radius: 14rem 0 14rem 0;
    margin-bottom: 7rem;
    ;
}

.janela-produto {
    width: 18rem;
    height: 18rem;
    position: absolute;
    right: -3.5rem;
    top: 4.5rem;
    display: block;
    z-index: 100;
    ;
}

.conteudo-produto {
    padding: 9rem;
    padding-left: 9rem;
    position: inherit;
    display: block;
}

.logo-footer {
    width: 11.6rem;
    height: 2.8rem;
    margin-bottom: 15rem;
}

footer {
    padding: 10rem 0;
    border-radius: 15rem 0 15rem 0;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.icon-instagram {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 1rem;
}

.insta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--branco);
    font-size: 1.6rem;

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
 .container {
    padding-left: 5rem;
    padding-right: 5rem;
}

body{
    font-size: 3rem;
}

.card-produto {
    width: 80rem;
    height: 39rem;
    margin-bottom: 7rem;
}

.janela-produto {
    width: 24rem;
    height: 24rem;
    position: absolute;
    right: -6rem;
    top: 4.5rem;
    display: block;
    z-index: 100;
    ;
}

.insta-link {
    font-size: 2.6rem;
}

.logo-footer {
    width: 20rem;
    height: 4.8rem;
    margin-bottom: 10rem;
}

.logotipo {
    width: 20rem;
    height: 4.8rem;
}

#banner-principal h1 {
    font-size: 7.5rem;
    line-height: 7.5rem;
    text-align: start;
    margin-top: 55rem;
    ;
}

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}