@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --verde-escuro: #31332B;
    --verde: #2E5902;
    --verde-claro: #F6FCE0;
    --gelo: #FAFAFA;
}

html,
body,
div,
ul,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
input,
label {
    font-family: "Poppins", sans-serif;
}

html,
body {
    font-size: 16px;

    background: var(--gelo) !important;
}

body::-webkit-scrollbar {
    width: .5rem;
}

body::-webkit-scrollbar-track {
    background: var(--verde-escuro);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--verde-claro);

    border-radius: 20px;
    border: 2px solid var(--verde-escuro);
}

main {
    background: var(--gelo);

    width: 100%;
    max-width: 2048px;

    margin: 0 auto;
}

section {
    padding: 8rem 0;
}

a,
button {
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
}

strong {
    font-weight: 700 !important;
}

button:focus,
button:focus-visible {
    outline: none !important;
}

.titulo {
    font-size: 3rem;
}

header {
    background-color: var(--gelo);

    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    width: 100%;
    height: auto;

    padding: 1rem 0;
}

a.link-flutuante {
    height: 4rem;
    width: 4rem;
    
    position: fixed;
    z-index: 10;
    right: 1rem;
    bottom: 1rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--verde);
    
    border: 1px solid var(--gelo);
    border-radius: 1000px;
}
a.link-flutuante:hover {
    opacity: .8;
}
a.link-flutuante svg {
    height: auto;
    width: 1.5rem;

    color: var(--gelo);
}

footer {
    background-color: var(--verde);

    padding: 4rem 0;
}

/* HOME BANNER */
main#home section#banner {
    width: 100%;
    min-height: 100dvh;
    height: 100%;

    background: url('../img/banner.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    justify-content: center;
    align-items: center;
}
main#home section#banner h1,
main#home section#banner h2 {
    font-size: 3.5rem;
    color: var(--gelo);
    text-align: center;
}
main#home section#banner h1 {
    font-weight: 300;
}
main#home section#banner h2 {
    font-weight: 700;
}

/* HOME QUEM SOMOS */
main#home section#quem-somos {
    background: linear-gradient(to right, var(--verde) 0, var(--verde) 50%, var(--gelo) 50%);
}
main#home section#quem-somos h2 {
    font-weight: 700;
    color: var(--gelo);

    margin: 0 0 1rem 0;
}
main#home section#quem-somos div.detalhe {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}
main#home section#quem-somos div.detalhe div.d-1,
main#home section#quem-somos div.detalhe div.d-2,
main#home section#quem-somos div.detalhe div.d-3 {
    height: .5rem;

    background-color: var(--gelo);
}
main#home section#quem-somos div.detalhe div.d-1 {
    width: 100%;
}
main#home section#quem-somos div.detalhe div.d-2 {
    width: 75%;
}
main#home section#quem-somos div.detalhe div.d-3 {
    width: 50%;
}
main#home section#quem-somos p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--verde-escuro);
}
main#home section#quem-somos div.slider-quem-somos div.card-slider-quem-somos {
    min-height: 160px;
    
    background-color: var(--gelo);
    
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
    
    padding: 1.5rem;
    
    border-radius: 2rem;
}
main#home section#quem-somos div.slider-quem-somos div.card-slider-quem-somos h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--verde);

    margin: 0;
}
main#home section#quem-somos div.slider-quem-somos div.card-slider-quem-somos p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--verde-escuro);

    margin: 0;
}
main#home section#quem-somos div.slider-quem-somos ul.slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
    
    margin: 0;
    padding: 0;
}
main#home section#quem-somos div.slider-quem-somos ul.slick-dots li {
    list-style: none;
}
main#home section#quem-somos div.slider-quem-somos ul.slick-dots li button {
    width: .75rem;
    height: .75rem;
    
    font-size: 0px;
    
    border: 0;
    border-radius: 1000px;
    
    background-color: var(--gelo);

    opacity: .5;
}
main#home section#quem-somos div.slider-quem-somos ul.slick-dots li.slick-active button {
    opacity: 1;
}


/* HOME NOSSOS COMPROMISSOS */
main#home section#nossos-compromissos {}
main#home section#nossos-compromissos div.row-titulo h2 {
    font-weight: 700;
    color: var(--verde);
    text-align: center;

    margin: 0 0 1rem 0;
}
main#home section#nossos-compromissos div.row-titulo p {
    font-weight: 300;
    color: var(--verde-escuro);
    text-align: center;
}
main#home section#nossos-compromissos div.row-quadros div.quadro {
    height: 310px;
    
    background-color: var(--verde-escuro);

    padding: 2rem;

    border-radius: 2rem;
}
main#home section#nossos-compromissos div.row-quadros div.quadro h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--verde-claro);

    margin: 0 0 1rem 0;
}
main#home section#nossos-compromissos div.row-quadros div.quadro p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--gelo);

    margin: 0;
}

/* HOME NOSSOS PRINCIPIOS */
main#home section#nossos-principios {
    border-top: 2px solid var(--verde);
    border-bottom: 2px solid var(--verde);
}
main#home section#nossos-principios div.row-titulo h2 {
    font-weight: 700;
    color: var(--verde);
    text-align: center;

    margin: 0 0 1rem 0;
}
main#home section#nossos-principios div.row-titulo p {
    font-weight: 300;
    color: var(--verde-escuro);
    text-align: center;
}

/* HOME PRINCIPIOS */
main#home section#nossos-principios div.slider-principios div.card-slider-principios {
    min-height: 240px;
    
    background-color: var(--verde);
    
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    
    padding: 1.5rem;
    
    border-radius: 2rem;
}
main#home section#nossos-principios div.slider-principios div.card-slider-principios h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gelo);

    margin: 0;
}
main#home section#nossos-principios div.slider-principios div.card-slider-principios p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--gelo);

    margin: 0;
}
main#home section#nossos-principios div.slider-principios ul.slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
    
    margin: 0;
    padding: 0;
}
main#home section#nossos-principios div.slider-principios ul.slick-dots li {
    list-style: none;
}
main#home section#nossos-principios div.slider-principios ul.slick-dots li button {
    width: .75rem;
    height: .75rem;
    
    font-size: 0px;
    
    border: 0;
    border-radius: 1000px;
    
    background-color: var(--verde);

    opacity: .5;
}
main#home section#nossos-principios div.slider-principios ul.slick-dots li.slick-active button {
    opacity: 1;
}

/* HOME NOSSAS SOLUCOES */
main#home section#nossas-solucoes {
    position: relative;
}
main#home section#nossas-solucoes img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;

    height: 100%;
    width: 50%;

    object-fit: cover;
    object-position: center center;
}
main#home section#nossas-solucoes div.container {
    position: relative;
    z-index: 1;
}
main#home section#nossas-solucoes h2 {
    font-weight: 700;
    color: var(--gelo);

    margin: 0;
}
main#home section#nossas-solucoes h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--verde);

    margin: 0 0 .5rem 0;
}
main#home section#nossas-solucoes ul li {
    font-size: 1rem;
    font-weight: 300;
    color: var(--verde-escuro);

    margin: 0;
}


@media (max-width: 1399px) {
    main#home section#nossos-principios div.slider-principios div.card-slider-principios {
        min-height: 265px;
    }
}
@media (max-width: 1199px) {
    main#home section#banner h1,
    main#home section#banner h2 {
        font-size: 3rem;
        color: var(--gelo);
        text-align: center;
    }

    main#home section#nossos-compromissos div.row-quadros div.quadro {
        height: 350px;
    }

    main#home section#nossos-principios div.slider-principios div.card-slider-principios {
        min-height: 290px;
    }
}
@media (max-width: 991px) {
    html,
    body {
        font-size: 15px;
    }

    main#home section#quem-somos {
        background: var(--verde);
    }
    main#home section#quem-somos p {
        color: var(--gelo);
    }
    main#home section#quem-somos div.slider-quem-somos div.card-slider-quem-somos {
        min-height: 130px;
    }

    main#home section#nossos-compromissos div.row-quadros div.quadro {
        height: 360px;
    }

    main#home section#nossos-principios div.slider-principios div.card-slider-principios {
        min-height: 250px;
    }

    main#home section#nossas-solucoes img {
        width: 100%;
    }
    main#home section#nossas-solucoes h3,
    main#home section#nossas-solucoes ul li {
        color: var(--gelo);
    }
}
@media (max-width: 767px) {
    .titulo {
        font-size: 2.5rem;
    }

    main#home section#banner h1,
    main#home section#banner h2 {
        font-size: 2rem;
        color: var(--gelo);
        text-align: center;
    }

    main#home section#quem-somos div.slider-quem-somos div.card-slider-quem-somos {
        min-height: 150px;
    }

    main#home section#nossos-compromissos div.row-quadros div.quadro {
        height: auto;
    }

    main#home section#nossos-principios div.slider-principios div.card-slider-principios {
        min-height: 180px;
    }
}
@media (max-width: 575px) {
    html,
    body {
        font-size: 14px;
    }

    .titulo {
        font-size: 2rem;
    }

    main#home section#quem-somos div.slider-quem-somos div.card-slider-quem-somos {
        min-height: 160px;
    }

    main#home section#nossos-compromissos div.row-quadros div.quadro {
        padding: 1.5rem;

        border-radius: 1.5rem;
    }
    main#home section#nossos-compromissos div.row-quadros div.quadro h2 {
        font-size: 1rem;
    }

    main#home section#nossos-principios div.slider-principios div.card-slider-principios {
        min-height: 200px;
    }
}
@media (max-width: 400px) {
    main#home section#nossos-principios div.slider-principios div.card-slider-principios {
        min-height: 230px;
    }
}