/* ---------- HOME ---------- */

h1,
.h1 {
    font-size: 4rem;
}
h2,
.h2 {
    font-size: 3rem;
}
h3,
.h3 {
    font-size: 2rem;
}
h4,
.h4 {
    font-size: 26px;
}

.slick-arrow {
    top: 310px;
}
.slick-prev,
.slick-next {
    z-index: 2 !important;
    padding: 20px;
}

/* IF SLIDE */
/* Desktop */
@media(min-width:769px){
    .slider-desktop {
        display: block;
    }
    .slider-mobile {
        display: none;
    }  
}
/* Mobile */
@media(max-width:768px){
    .slider-desktop {
        display: none;
    }
    .slider-mobile {
        display: block;
    }
}

.hero-content.escuro h2,
.hero-content.escuro p {
    color: #fff;
}

.hero-content h2.h1 {
    line-height: 65px;
}
.hero-content h2,
.hero-content p {
    padding-right: 0px;
    color: #0d4c31;
}

.half-content h2 {
    line-height: 52px;
}

.btn {
    font-size: 20px !important;
    transition: 0.3s;
}
.btn:hover svg {
    margin-left: 15px;
    transition: 0.3s;
}
.btn svg {
    fill: #005221;
    zoom: 0.7;
    transition: 0.3s;
}
.btn-white:hover {
    color: #005221;
}
.btn-white:hover,
.product:hover .btn.btn-white {
    background-color: #fff;
    border-color: #fff;
    /* box-shadow: 0 0 15px rgba(255, 255, 255, 0.46); */
    transition: 0.3s;
}

.about-content:before {
    background-image: none;
}

.product {
    text-decoration: none;
    border: 2px solid #f1e8e7;
    border-radius: 20px;
    min-height: 235px;
}
.product:hover .product-picture img {
    filter: brightness(110%);
    transition: 0.3s;
}
.product:hover .btn svg {
    margin-left: 15px;
    transition: 0.3s;
}
.product .product-picture img {
    transition: 0.3s;
}
/* .product.polpa .product {
    background-color: #ce6e9a;
}
.product.nectar .product-picture {
    background-color: #fb563b;
}
.product.acai .product-picture {
    background-color: #772d54;
}
.product.vegetais .product-picture {
    background-color: #75be23;
}
.product.creme .product-picture {
    background-color: #edb120;
} */

.socioenvironmental h2,
.socioenvironmental p {
    color: #0d4c31;
}
.socioenvironmental .half-content .container .row div div {
    padding-bottom: 10px !important;
}
.socioenvironmental .socioambiental-selos {
    display: flex;
    flex-direction: row;
}

.distributors {
    background-color: #fff;
    margin-top: -65px;
    height: 755px;
}
@media(min-width:769px){
    .distributors .half-content .half-content-text {
       padding-top: 120px !important;
       padding-right: 150px !important;
    }
 }
 .btn-distributors {
    color: #fff;
    background-color: #2d275f;
    border-color: #2d275f;
 }
 .btn-distributors svg {
    fill: #fff;
 }
 .btn-distributors:hover svg {
    fill: #2d275f;
 }


.call {
    padding-top: 40px;
}

.footer .footer-content .list-unstyled .list-item a {
    color: #fff;
    text-decoration: none;
}

.footer .social-link:hover {
    background-color: #f57559;
    border-color: #f57559;
    transition: 0.3s;
}
.footer .social-link:hover svg {
    fill: #fff;
    transition: 0.3s;
}
¨


.footer-content .list-link, .footer-content .list-inline-link {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
  }
  .footer-content .list-link::before, .footer-content .list-inline-link::before {
    content: "";
    background-color: #ffffff;
    width: 0;
    height: 2px;
    border-radius: 5rem;
    position: absolute;
    bottom: -3px;
    left: 0;
    transition: 0.3s;
  }
  .footer-content .list-link:hover::before, .footer-content .list-link:focus::before, .footer-content .list-link:active::before, .footer-content .list-inline-link:hover::before, .footer-content .list-inline-link:focus::before, .footer-content .list-inline-link:active::before {
    width: 100%;
  }

  .footer-midias .footer-brand img {
    margin-top: 2px;
}


.cool-link {
    display: inline-block;
}

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #f39200;
    transition: width .3s;
}

.cool-link:hover::after {
    width: 100%;
}







/* ---------- INTERNAS ---------- */

.heropage .h1 {
    font-size: 3rem;
}

.form-select {
    height: 59px;
}
.form-input {
    position: relative;
}
.form-input>span.error{
    position: absolute;
    color: #f00;
    background: #f3fbfb;
    background: linear-gradient(180deg, #f3fbfb 0%, #fff 100%);
    padding: 0 5px;
    font-size: 12px;
    border: 0px;
    right: 20px;
    top: 25px;
    z-index: 999;
    border-radius: 4px;
}
.page-content-trabalhe-conosco-error {
    border-radius: 5px;
    color: #fa0000;
    background-color: #fff3cd;
    border: 1px solid #fceab6;
    padding: 10px 20px;
    font-size: 16px;
    margin: -10px 0 30px 0;
}

.pineapple {
    position: relative;
}
.pineapple:before {
    content: '';
    background: url('../images/pineapple2.png');
    background-repeat: no-repeat;
    width: 595px;
    height: 548px;
    position: absolute;
    right: 0;
    bottom: -180px;
    zoom: 0.8;
}

.page-content-form-sucesso {
    text-align: center;
}
.page-content-form-sucesso i.sucesso {
    font-size: 40px;
    margin-bottom: 25px;
}
.page-content-form-sucesso i.sucesso {
    color: #22a945;
}
.page-content-form-sucesso i.erro {
    color: #ee1a2e;
}
.page-content-form-sucesso a {
    display: inline-block;
    font-size: 20px !important;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    background-color: #2d275f;
    padding: 15px 30px 19px 30px;
    border-radius: 30px;
}

.contact  .contact-support .contact-item a {
    text-decoration: none;
}

.footer-support .list-inline-item a svg {
    fill: #2d275f;
}

.table-header {
    padding: 25px 25px 18px 25px;
}
.table-responsive table tr td {
    width: 60%;
}

.products {
    background-color: #fff;
    background-image: none;
}
.product-card {
    min-height: 400px !important;
    transition: 0.3s;
}
.product-card:hover {
    box-shadow: 0 4px 20px #00000012;
    transition: 0.3s;
}
.product-card:hover img {
    filter: brightness(110%);
    transition: 0.3s;
}
.product-card img {
    height: 218px;
    object-fit: contain;
    transition: 0.3s;
}

.h2-produto-title {
    font-size: 2.5rem !important;
}

.page-content-sobre .page-content-sobre-certificacoes li img {
    filter: brightness(0) saturate(100%) invert(93%) sepia(88%) saturate(5688%) hue-rotate(149deg) brightness(87%) contrast(98%);
}



/* ---------- MOBILE ---------- */

@media (max-width:768px) {
    .pineapple:before {
        display: none;
    }

    .slick-arrow {
        top: 360px;
        opacity: 0.2;
    }
    .slick-arrow-fluid .slick-arrow,
    .slider-fluid .slider-items .slick-arrow {
        display: block !important;
    }
    .slick-prev,
    .slick-next {
        z-index: 2 !important;
        zoom: 0.8;
    }
    .slick-prev {
        left: 0 !important;
    }
    .slick-next {
        right: 0 !important;
    }
    
    .navbar .offcanvas-header img {
        margin-left: 10px;
    }
    .navbar .offcanvas-body .nav-link {
        font-family: "Coolvetica", sans-serif;
        font-weight: 300 !important;
    }
    .navbar .offcanvas-body .nav-link {
        padding: 10px 20px 10px 40px;
    }

    h1,
    .h1 {
        font-size: 50px;
    }
    h2,
    .h2 {
        font-size: 2.2rem;
    }

    .navbar .offcanvas-header img {
        max-width: 180px;
    }
    .half-content h2 {
        line-height: 32px;
    }
    .btn {
        line-height: 26px;
    }
    .slider-item .hero-content h2.h1 {
        line-height: 52px;
        font-size: 50px;
    }
    .slider-item .hero-content h2,
    .slider-item .hero-content p {
        padding-right: 0
    }
    .about {
        padding-top: 0px;
        margin-top: -1px;
    }
    .about-content {
        margin-bottom: 20px;
    }
    .products {
        padding-top: 350px;
        padding-bottom: 60px;
    }
    .products .h2 {
        margin-top: -30px;  
        margin-bottom: 30px !important;
    }
    .products .products-content .row>div {
        margin-top: 30px;
    }
    .products .product {
        flex-direction: column;
    }
    .products .product .product-content {
        padding: 0px 30px 30px 30px;
        text-align: center;
    }
    .socioenvironmental {
        padding-bottom: 20px;
    }
    .distributors {
        margin-top: 0;
    }
    .feed {
        padding-top: 0;
    }
    .feed-content > .container:before {
        top: -190px;
    }
    .feed-content .slider-fluid {
        margin-top: -20px;
    }
    .call {
        padding: 70px 0 100px;
    }
    .footer .footer-content {
        padding: 60px 0 0 0;
    }
    .footer .footer-brand {
        display: none;
    }
    .footer .footer-dados,
    .footer .footer-midias {
        text-align: center;
    }
    .footer .footer-dados .footer-dados-sac {
        margin-top: 30px;
    }
    .footer .footer-midias {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 35px !important;
    } 
    

    /* INTERNAS */
    .heropage-content {
        min-height: 300px;
    }
    .heropage .h1 {
        margin-bottom: 10px !important;
    }

    .contact {
        padding: 50px 0 180px;
        background-position-x: 50%;
        background-position-y: 102%;
        background-size: 90%;
    }
    .contact .contact-content {
        padding: 30px;
    }

    .page-content-sobre,
    .page-content-distribuidores {
        padding-top: 40px;
        padding-bottom: 100px;
    }
    .page-content-distribuidores h3 {
        margin-bottom: 20px !important;
    }

    .page-content-trabalhe-conosco {
        padding-top: 30px;
        padding-bottom: 100px;
    }

    .page-content-sobre {
        padding-bottom: 60px;
    }
    .page-content-sobre .page-about-galley {
        padding-top: 0px;
        padding-bottom: 50px;
    }
    .page-content-sobre .page-about-galley .half-picture {
        margin-bottom: -35px;
    }
    


}





/* 
.list-link {
color: #ffffff;
text-decoration: none;
transition: color 0.3s;
position: relative;
}
.list-link::before {
content: "";
background-color: #ffffff;
width: 0;
height: 2px;
border-radius: 5rem;
position: absolute;
bottom: -3px;
left: 0;
transition: 0.3s;
}
.list-link:hover,
.list-link:focus,
.list-link:active {
color: #ffffff;
}
.list-link:hover::before,
.list-link:focus::before,
.list-link:active::before {
width: 100%;
}
 */

.selos-espacamento {
    display: flex;
    gap: 20px;
}

.map-ajuste {
    width: 65%;
    position: relative;
    left: 200px;
    top: 200px;
}

@media (min-width: 1400px) {
    .map-ajuste {
        top: 250px;
    }
}