/* ###### * * MAIN STYLESHEET * ###### */
/* ########### INCLUDE FONT ########### */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
/* ########### END INCLUDE FONT ########### */
/* ########### VARIABLES DECLARATION ########### */
 :root {
     --primary-color: #fff;
     --secondary-color: var(--primary-color);
     --tertiary-color: #ffffff;
     --quaternary-color: #434343;
     --bg-alternative-color: var(--primary-color);
     --whatsapp-color: #25E08B;
     --wpp-alternative: #49B805;
     --alternative-color: #25E08B;
     --sxa-varial-button: #121413;
     --sxb-varial-button: #0A874E;
     --text-primary-color: black;
     --text-secondary-color: #1e1e1e;
     --text-tertiary-color: #505050;
     --text-quaternary-color: #000000;
     --text-alternative-color: #25E08B;
     --primary-font: "Inter", sans-serif;
     --secondary-font: "Inter", sans-serif;
     --font-weight-thin: 100;
     --font-weight-light: 300;
     --font-weight-regular: 400;
     --font-weight-medium: 500;
     --font-weight-bold: 700;
     --font-weight-extra-bold: 800;
     --font-weight-black: 900;
     --default-padding: 5% 0;
}
/* ########### END VARIABLES DECLARATION ########### */
/* ########### FLOATING BUTTON ########### */
 .fale {
     position: fixed;
     bottom: 15px;
     right: 30px;
     font-size: 12px;
     background: var(--wpp-alternative) !important;
     color: var(--tertiary-color);
     border-radius: 50px;
     padding: 10px 15px;
     -webkit-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.4);
     -moz-box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.4);
     box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.4);
     z-index: 20;
     transition: 0.6s;
}
 .text-black {
     color: var(--primary-color);
}
 .fale i {
     font-size: 40px;
     color: var(--primary-color);
     padding-top: 3px;
     padding-bottom: 5px;
     font-weight: var(--font-weight-thin);
     transition: 0.6s;
}
 .fale:hover {
     background: var(--sxa-varial-button) !important;
     color: var(--alternative-color) !important;
     transition: 0.6s;
     transform: scale(1.1);
}
 .fale:hover a {
     color: var(--primary-color) !important;
     transition: 0.6s;
}
 .fale:hover i {
     color: var(--primary-color) !important;
     transition: 0.6s;
}
 .fale a {
     font-weight: var(--font-weight-bold);
     text-decoration: none;
}
/* ########### END FLOATING BUTTON ########### */
/* ########### HEADER ########### */
 #header {
     background: var(--primary-color);
     padding: 2% 0;
}
 #header .menus {
     align-self: center;
}
 #menu .menu-item:not(#link-whatsapp) a {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-medium);
     font-size: 14px;
     color: var(--text-primary-color);
     text-decoration: none;
     transition: 0.6s;
}
 #menu .menu-item:not(#link-whatsapp) a:hover {
     color: var(--text-alternative-color);
     transition: 0.6s;
}
 #menu .menu-item#link-whatsapp a {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     font-size: 16px;
     border: solid 1px var(--text-tertiary-color);
     color: var(--text-secondary-color);
     text-decoration: none;
     border-radius: 6px;
     transition: 0.6s;
}
 #menu .menu-item#link-whatsapp a:hover {
     background: var(--text-primary-color);
     color: var(--primary-color);
     transition: 0.6s;
}
 #menu .menu-item#link-whatsapp a i {
     font-weight: var(--font-weight-thin);
}
/* ########### END HEADER ########### */
/* ########### BANNER ########### */
 #banner {
     background: var(--primary-color);
     padding: 33px;
}
 #banner h1 {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-black);
     color: var(--text-primary-color);
     font-size: 80px;
}
 #banner p {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-light);
     color: var(--text-primary-color);
     font-size: 21px;
     margin: 10% 0;
     margin-top: 5%;
}
 #banner .form-desktop {
     margin-left: auto;
     background: var(--tertiary-color);
     border: 2px solid var(--tertiary-color);
     box-sizing: border-box;
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
     filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.1));
     border-radius: 10px;
     padding: 2% 3%;
}
 #banner .form-desktop h2 {
     font-family: var(--secondary-font);
     font-weight: var(--font-weight-bold);
     color: var(--text-secondary-color);
     font-size: 23px;
}
 #banner .form-desktop label {
     font-family: var(--secondary-font);
     font-weight: var(--font-weight-bold);
     color: var(--text-tertiary-color);
     font-size: 14px;
     letter-spacing: 3.5px;
     text-transform: uppercase;
     padding-bottom: 2%;
}
 #banner .form-desktop label[for="politica-privacidade"] {
     font-family: var(--secondary-font);
     font-weight: var(--font-weight-bold);
     color: var(--text-tertiary-color);
     font-size: 10px;
     text-transform: uppercase;
     margin-left: 2%;
     letter-spacing: inherit;
}
 #banner .form-desktop input {
     font-family: var(--secondary-font);
     font-weight: var(--font-weight-regular);
     color: var(--text-quaternary-color);
     font-size: 16px;
     border: 1px solid var(--quaternary-color);
     box-sizing: border-box;
     border-radius: 10px;
     padding: 4% 5% !important;
}
 #banner .form-desktop input[type="submit"] {
     width: 100%;
     background: var(--whatsapp-color);
     color: var(--text-primary-color);
     border: 1px solid var(--whatsapp-color);
     font-family: var(--secondary-font);
     font-weight: var(--font-weight-bold);
     font-size: 16px;
     line-height: 24px;
     text-align: center;
     text-transform: uppercase;
     padding: 6% !important;
}
 #banner .form-desktop .mc-field-group {
     margin: 5% 0;
}
/* ########### END BANNER ########### */
/* ########### SERVICES ########### */
 #services {
     background: url(../images/tracados2.svg);
     background-size: cover;
     background-color: var(--sxa-varial-button);
     padding: 0;
     margin-top: 200px;
}
 #jobs{
     background: url(../images/tracados.svg);
     background-size: cover;
     background-color: #1e1e1e;
}
.z4{
    z-index: 4;
}

.carousel-control-prev-icon, .carousel-control-next-icon{
    background-color: #0A874E !important;
    border-radius: 4px;
    padding: 20px 0;
    width: 1.8rem !important;
}


.carousel-control-next-icon{
    margin-right: -50px;
}


.carousel-control-prev-icon{
    margin-left: -50px;
}


.carousel-control-next, .carousel-control-prev{
    opacity: 1 !important;
}

.tractors{
    color: var(--tertiary-color);
}

.tractors p{
    font-size: 18px;
    margin-bottom: 0 !important;
    margin-top: 80px;
}


.tractors h2{
    font-size: 40px;
    font-weight: var(--font-weight-bold);
}


 #services .service .title, #jobs .service .title {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     font-size: 20px;
     text-align: start;
     padding-right: 25px;
     color: var(--sxa-varial-button);
     line-height: 1.2;
}
 #services .service .desc, #jobs .service .desc {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-ligth);
     font-size: 14px;
     text-align: start;
     margin-left: 14px;
     margin-bottom: 6px;
     margin-top: 30px;
     color: #5F5F5F;
}

#services .service .price, #jobs .service .price {
    font-family: var(--primary-font);
    font-weight: var(--font-weight-black);
    font-size: 20px;
    text-align: start;
    margin-left: 14px;
    margin-top: 4px;
    color: #0E4D30;
}

#services .service .list, #jobs .service .list {
    font-family: var(--primary-font);
    font-weight: var(--font-weight-medium);
    font-size: 12px;
    text-align: start;
    margin: 16px 0 40px 14px;
    color: black;
}

 #services .btn-default, #jobs .btn-default {
     margin-top: 0%;
}
 .square {
     background-color: #fff;
     border: solid 1.1px #b6b6b6;
     border-radius: 20px;
     margin: 0 10px !important;
     --tw-shadow: 0 5px 20px 0px #88888833;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #888888), var(--tw-ring-shadow, 0 0 #888888), var(--tw-shadow);
}
/* ########### END SERVICES ########### */
/* ########### TESTIMONIAL ########### */
#depoimentos {
  background: url(../images/tracados.svg) no-repeat;
  background-size: cover;
  background-color: var(--sxb-varial-button);
  padding: var(--default-padding);
}

#depoimentos h2 {
  font-family: var(--secondary-font);
  font-weight: var(--font-weight-bold);
  font-size: 42px;
  text-align: center;
  color: var(--primary-color);
}
#depoimentos p {
  font-family: var(--primary-font);
  font-weight: var(--font-weight-regular);
  font-size: 18px;
  text-align: center;
  color: var(--primary-color);
  padding: 0% 0 5% 0;
}
#depoimentos .testimonial-carousel .owl-item:not(.center) {
  transform: scale(0.8);
}
#depoimentos .testimonial-carousel .owl-dots .owl-dot span {
  background: white !important;
  width: 20px;
  height: 20px;
  transform: scale(0.9);
}
.m-2b{
  margin-top: 30px;
}
#depoimentos .testimonial-carousel .owl-dots .owl-dot.active span, #coffees .coffees-carousel .owl-dots .owl-dot:hover span {
  background: transparent;
  border: 3px solid #075537;
  transform: scale(1.2);
}



 #testimonial {
     background-color: #EEEEEE;
     padding: var(--default-padding);
}
 #testimonial h2 {
     font-family: var(--secondary-font);
     font-weight: var(--font-weight-bold);
     margin-bottom: 60px !important;
     font-size: 36px;
     text-align: center;
     color: var(--text-primary-color);
}
 #testimonial p {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-regular);
     font-size: 18px;
     text-align: center;
     color: var(--text-primary-color);
     padding: 2% 0 5% 0;
}
 #testimonial .testimonial-carousel .owl-item:not(.center) {
     transform: scale(0.8);
}
 #testimonial .testimonial-carousel .owl-dots .owl-dot span {
     background: var(--sxb-varial-button);
     width: 20px;
     height: 20px;
     transform: scale(0.9);
}
 .m-2b{
     margin-top: 30px;
}
 #testimonial .testimonial-carousel .owl-dots .owl-dot.active span, #coffees .coffees-carousel .owl-dots .owl-dot:hover span {
     background: transparent;
     border: 3px solid var(--sxb-varial-button);
     transform: scale(1.2);
}


#ig-posts {
    background: url(../images/tracados3.svg);
    background-size: cover;
    background-color: #EEEEEE;
    padding: var(--default-padding);
}
#ig-posts h2 {
    font-family: var(--secondary-font);
    font-weight: var(--font-weight-bold);
    margin-bottom: 60px !important;
    font-size: 36px;
    text-align: center;
    color: var(--text-primary-color);
}
#ig-posts p {
    font-family: var(--primary-font);
    font-weight: var(--font-weight-regular);
    font-size: 18px;
    text-align: center;
    color: var(--text-primary-color);
    padding: 2% 0 5% 0;
}

.lightwidget-widget{
    margin-bottom: 50px;
}

/* ########### END TESTIMONIAL ########### */
/* ########### COFFEES ########### */
 #coffees {
     padding: var(--default-padding);
     background: var(--bg-alternative-color);
}
 #coffees h2 {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     font-size: 36px;
     text-align: center;
     color: var(--text-primary-color);
}
 #coffees .coffees-carousel {
     padding: var(--default-padding);
}
 #coffees .coffees-carousel .owl-item:not(.center) {
     transform: scale(0.8);
}
 #coffees .coffees-carousel {
     position: relative;
}
 #coffees .coffees-carousel .owl-next, #coffees .coffees-carousel .owl-prev {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
}
 .about-img{
     width: 50%;
}
 .about-img-after{
     display: none;
}
 #coffees .coffees-carousel .owl-next {
     right: 0;
     display: flex;
}
 #coffees .coffees-carousel .owl-prev {
     left: 0;
     display: flex;
}
 #coffees .coffees-carousel .owl-nav i {
     font-size: 60px;
     font-weight: 100;
     color: var(--text-primary-color);
     transition: 0.6s;
}
 #coffees .coffees-carousel .owl-nav [class*="owl-"]:hover {
     background: #00000020;
     transition: 0.6s;
}
 #coffees .coffees-carousel .owl-nav [class*="owl-"]:hover i {
     color: var(--text-primary-color);
     transition: 0.6s;
}
/* ########### FIM COFFEES ########### */
/* ########### REQUEST ########### */
 #request {
     background: var(--secondary-color);
     padding: var(--default-padding);
}
 #request h2 {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     font-size: 48px;
     text-align: center;
     color: var(--text-primary-color);
}
 #request h2 span {
     display: block;
     color: var(--text-alternative-color);
}
 #request .btn-default {
     margin-top: 5%;
}
/* ########### END REQUEST ########### */
/* ########### ABOUT ########### */
 #about {
     padding: var(--default-padding);
     background: var(--sxa-varial-button)
}
 #about .about h3 {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     font-size: 49px;
     color: var(--primary-color);
     padding: 0 1%;
     margin-bottom: 7%;
}
 #about .about p {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-regular);
     font-size: 16px;
     color: var(--primary-color);
     padding: 0 7% 0 1%;
     margin-bottom: 7%;
}
 #about .about .instagram {
     margin-bottom: 10%;
}
 #about .about .instagram a {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     font-size: 18px;
     color: var(--text-primary-color);
     text-transform: uppercase;
     padding: 0 1%;
     text-decoration: none;
     transition: 0.6s;
}
 #about .about .instagram a:hover {
     color: var(--text-alternative-color);
     transition: 0.6s;
}
 #about .img img {
     filter: drop-shadow(10px 9px 0px var(--tertiary-color));
     width: 85%;
     margin: auto;
}
/* ########### END ABOUT ########### */
/* ########### FOOTER ########### */
 footer {
     background: var(--primary-color);
     padding: var(--default-padding);
}
 footer .desc {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     font-size: 16px;
     color: var(--primary-color);
     text-transform: uppercase;
}
 footer .btn-whats a {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     font-size: 23px;
     color: var(--whatsapp-color);
     text-decoration: none;
     transition: 0.6s;
}
 footer .btn-whats a:hover {
     color: var(--primary-color);
     transition: 0.6s;
}
 footer .social-media a {
     margin: auto;
     transform: scale(0.9);
     transition: 0.6s;
     display: block;
}
 footer .social-media a.align-right {
     margin-left: auto;
     margin-right: 0;
}
 footer .social-media a.align-left {
     margin-right: auto;
     margin-left: 0;
}
 footer .social-media a:hover {
     transform: scale(1);
     transition: 0.6s;
}
 footer .all-rights {
     padding: 3% 0 0;
     margin-top: 7%;
     border-top: 1px solid #6a6a6a;
}
 footer .all-rights p, footer .all-rights p a {
     font-family: var(--secondary-font);
     font-weight: var(--font-weight-regular);
     font-size: 14px;
     color: var(--primary-color);
}
 footer .all-rights p a {
     font-weight: var(--font-weight-extra-bold);
     transition: 0.6s;
     text-decoration: none;
}
 footer .all-rights p a:hover {
     color: var(--text-alternative-color);
     transition: 0.6s;
}
 footer .all-rights .row {
     margin: auto;
}
 footer .made a img {
     transform: scale(0.9);
     transition: 0.6s;
}
 footer .made {
     text-align: right;
}
 footer .made a:hover img {
     transform: scale(1);
     transition: 0.6s;
}
 strong {
     font-weight: var(--font-weight-bold) !important;
}
/* ########### END FOOTER ########### */
/* ########### BUTTONS ########### */
 .btn-default {
     display: flex;
}
 .btn-default a {
     font-family: var(--primary-font);
     font-weight: var(--font-weight-bold);
     color: var(--text-secondary-color);
     text-decoration: none;
     font-size: 26px;
     background: var(--alternative-color);
     padding: 3% 6%;
     border-radius: 6px;
     transition: 0.6s;
}
 .btn-default a:hover {
     background: #E6EB08;
     color: var(--sxa-varial-button);
     transition: 0.6s;
}
 .btn-default a i {
     font-weight: var(--font-weight-thin);
}
 .lInsta {
     text-decoration: none;
}
 .lInsta p {
     font-size: 50px;
}
 .text-bold {
     font-size: 50px;
}

 .btn-varial{
     margin: 80px 0 !important;
}

.btn-tractors{
    margin: 60px 0 !important;
    margin-bottom: 140px !important;
}

.btn-tractors a{
    font-weight: var(--font-weight-regular);
    border: solid 1px white;
    border-radius: 10px;
    padding: 18px 70px;
    background-color: transparent;
    color: white;
    --tw-shadow: 0 0 10px 0 #ffffff33 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #ffffff), var(--tw-ring-shadow, 0 0 #ffffff), var(--tw-shadow);
}


.btn-tractors a:hover{
    color: var(--alternative-color);
    border: solid 1px var(--alternative-color);
    background-color: transparent;
    border-radius: 50px;
}

/* ########### END BUTTONS ########### */
/* ########### MENU MOBILE ########### */
 .btn-mobile-menu .menu-mobile.active {
     background: var(--primary-color);
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
     width: 65%;
     padding: 10% 10%;
     z-index: 21;
     display: block;
     box-shadow: -4px 0px 7px #00000094;
}
 .btn-mobile-menu {
     text-align: right;
}
 #header .btn-mobile-menu {
     align-self: center;
     margin-left: -5%;
}
 .btn-mobile-menu .link-menu.active {
     z-index: 11;
     position: relative;
}
 .btn-mobile-menu .link-menu i {
     font-size: 32px;
     color: var(--text-primary-color);
}
 .btn-mobile-menu .menu-mobile.active .link-menu i {
     font-size: 32px;
}
 .btn-mobile-menu .menu-mobile.active .nav-link {
     padding: 10% 0;
     font-family: Roboto;
     font-weight: 500;
     font-size: 14px;
     color: var(--text-primary-color);
}
 .btn-mobile-menu .menu-mobile.active .nav-item:not(#link-whatsapp) .nav-link {
     padding: 10% 0;
     font-family: Roboto;
     font-weight: 500;
     font-size: 14px;
     color: var(--text-primary-color);
}
 .btn-mobile-menu .menu-mobile.active .nav-item#link-whatsapp .nav-link {
     padding: 5% 5%;
     font-family: Roboto;
     font-weight: 500;
     border-radius: 6px;
     font-size: 16px;
     color: var(--primary-color);
     background: var(--whatsapp-color);
}
 .bg-darker{
     background-color: var(--text-secondary-color);
}
.bubble{
  right: 0;
  top: 0;
  background: url(../images/bubble.svg) no-repeat ;
  width: 600px;
  height: 50vw;
  z-index: 0;
}

.position-absolute{
    z-index: 0 !important;
}

.trator-bubble{
    right: 0;
    background: url(../images/trator-bubble.png);
    background-size: cover;
    width: 55vw;
    height: 90vw;
    z-index: 3 ;
  }

.crow{
  z-index: 5;
}

.negociar{
    color: white !important;
    background-color: #09c470 !important;
}

.negociar:hover{
    background-color: #E6EB08 !important;
    color: var(--sxa-varial-button) !important;
    --tw-shadow: 0 -4px 30px -10px #E6EB08 !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #E6EB08), var(--tw-ring-shadow, 0 0 #E6EB08), var(--tw-shadow) !important;
}

 .jobs-h {
     color: var(--tertiary-color);
     margin-bottom: 60px !important;
     font-size: 36px;
     font-weight: var(--font-weight-bold);
}
 .jobs-box .desc {
     font-size: 18px !important;
}

.box-item{
    border-radius: 6px;
    background-color: var(--primary-color);
    margin-top: -60px !important;
    transition: 200ms all;
}

.box-item-middle{
    margin: 0 5px;
}

 #banner .btn-default a, #services .btn-default a, #about .btn-default a, .container .btn-default a {
     --tw-shadow: 0 -4px 30px -10px #76F2BA;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #76F2BA), var(--tw-ring-shadow, 0 0 #76F2BA), var(--tw-shadow) !important;
}
/* ########### FIM MENU MOBILE ########### */
/* ########### PAGE PRIVACY ########### */
 #privacy {
     background: var(--secondary-color);
}
 #privacy h3, #privacy p {
     color: var(--text-primary-color);
}
/* ########### FIM PAGE PRIVACY ########### */
/* ########### RESPONSIVE ########### */
 @media (max-width: 575.98px) {
    /* ########### VARIABLES DECLARATION ########### */
     :root {
         --default-padding: 10% 0;
    }
    /* ########### END VARIABLES DECLARATION ########### */
    /* ########### VARIABLES HEADER ########### */
     #header .logo img {
         width: 80%;
         margin-left: 5%;
    }

    .carousel-control-next-icon, .carousel-control-prev-icon{
        width: 1.5rem !important;
    }

    .carousel-control-next-icon{
        margin-left: -20px !important;
    }

    .carousel-control-prev-icon{
        margin-right: -20px !important;
    }


     .m-2b{
         margin-top: 0px;
    }
    /* ########### END HEADER ########### */
    /* ########### BANNER ########### */
     #banner {
         padding: 5px;
    }
     #banner h1 {
         font-size: 40px;
         margin-top: 20px;
         margin-right: 10%;
         margin-left: 10px;
    }
    .tractors h2{
        font-size: 30px !important;
    }

    #banner p {
      font-size: 15px;
      margin: 10% 0;
      margin-right: 30%;
      margin-left: 10px;
      margin-top: 5%;
    }
    
    .box-item{
        margin-bottom: 70px;
    }
    .tractors p{
        margin-top: 0;
    }
     .npgb{
         padding: 50px 0;
    }
     .about-img{
         display: none;
    }
     .about-img-after{
         display: flex;
         width: 100%;
         padding-top: 30px;
         padding-left: 20px;
    }
     .ig-living{
         font-size: 20px;
    }
     .lined{
         line-height: 1.4rem !important;
    }
     .btn-default {
         justify-content: center;
    }
     .btn-default a {
         font-size: 26px;
         padding: 5% 6%;
    }
     #banner img {
         width: 100%;
         height: 100%;
         margin-top: 30px;
    }
     #main-photo{
         margin-left: 0px !important;
    }
     #banner .form-desktop h2 {
         font-size: 18px;
    }
    /* ########### FIM BANNER ########### */
    /* ########### SERVICE ########### */
    #services{
        margin-top: 100px;
    }

     #services .service {
         margin: 5% 0;
    }
    /* ########### FIM SERVICE ########### */
    /* ########### COFFEES ########### */
     #coffees h2 {
         font-size: 32px;
    }
     #coffees .coffees-carousel .owl-prev {
         left: 15px;
    }
     #coffees .coffees-carousel .owl-item img {
         width: 75%;
         margin: auto;
    }
     #coffees .coffees-carousel .owl-next {
         right: 15px;
    }
    /* ########### FIM COFFEES ########### */
    /* ########### TESTIMONIAL ########### */
     #testimonial h2 {
         font-family: var(--secondary-font);
         font-weight: var(--font-weight-bold);
         font-size: 32px;
         text-align: center;
         color: var(--text-primary-color);
    }
     #testimonial p {
         font-size: 14px;
    }
    /* ########### FIM TESTIMONIAL ########### */
    /* ########### REQUEST ########### */
     #request h2 {
         font-size: 36px;
    }
     #request h2 span {
         font-size: 43px;
    }
    /* ########### FIM REQUEST ########### */
    /* ########### ABOUT ########### */
     #about .img {
         padding: 0;
    }
     #about .img img {
         width: 100%;
         filter: drop-shadow(0px 9px 0px var(--primary-color));
    }
     #about .about .row {
         width: 100%;
         margin: auto;
    }
     #about .about h3 {
         font-size: 38px;
    }
     #about .about p {
         font-size: 14px;
         line-height: 32px;
    }
     #about .about .img {
         margin-bottom: 10%;
    }
    /* ########### FIM ABOUT ########### */
    /* ########### FOOTER ########### */
     footer .row {
         margin: 0;
    }
     footer .desc {
         text-align: center;
    }
     footer .btn-whats {
         text-align: center;
    }
     footer .social-media {
         margin: 10% 0 3%;
    }
     footer .all-rights p, footer .all-rights p a {
         text-align: center;
    }
     footer .all-rights {
         border-top: none;
    }
    /* ########### FIM FOOTER ########### */
}
 @media (min-width: 576px) and (max-width: 767.98px) {
    /* ########### VARIABLES DECLARATION ########### */
     :root {
         --default-padding: 10% 0;
    }
     #main-photo{
         height: 100%;
         float: right;
    }
     .about-img{
         display: none;
    }
     .about-img-after{
         display: flex;
         width: 100%;
         padding-top: 30px;
         padding-left: 40px;
    }
    /* ########### END VARIABLES DECLARATION ########### */
    /* ########### MENU MOBILE ########### */
     .btn-mobile-menu .menu-mobile.active {
         overflow-y: auto;
    }
    /* ########### END MENU MOBILE ########### */
    /* ########### VARIABLES HEADER ########### */
     #header .logo img {
         width: 100%;
         margin-left: 5%;
    }
    /* ########### END HEADER ########### */
    /* ########### BANNER ########### */
     #banner h2 {
         font-size: 35px;
         text-align: center;
    }
     #banner p {
         font-size: 15px;
         margin-right: 10%;
    }
     .btn-default {
         justify-content: center;
    }
     .btn-default a {
         font-size: 26px;
         padding: 5% 6%;
    }
     #banner img {
         width: 90%;
    }
    /* ########### FIM BANNER ########### */
    /* ########### SERVICE ########### */
     #services .service {
         margin: 5% 0;
    }
    /* ########### FIM SERVICE ########### */
    /* ########### COFFEES ########### */
     #coffees h2 {
         font-size: 32px;
    }
     #coffees .coffees-carousel .owl-prev {
         left: 15px;
    }
     #coffees .coffees-carousel .owl-item img {
         width: 75%;
         margin: auto;
    }
     #coffees .coffees-carousel .owl-next {
         right: 15px;
    }
    /* ########### FIM COFFEES ########### */
    /* ########### TESTIMONIAL ########### */
     #testimonial h2 {
         font-family: var(--secondary-font);
         font-weight: var(--font-weight-bold);
         font-size: 32px;
         text-align: center;
         color: var(--text-primary-color);
    }
     #testimonial p {
         font-size: 14px;
    }
    /* ########### FIM TESTIMONIAL ########### */
    /* ########### REQUEST ########### */
     #request h2 {
         font-size: 36px;
    }
     #request h2 span {
         font-size: 43px;
    }
    /* ########### FIM REQUEST ########### */
    /* ########### ABOUT ########### */
     #about .img {
         padding: 0;
    }
     #about .img img {
         width: 100%;
         filter: drop-shadow(0px 9px 0px var(--primary-color));
    }
     #about .about .row {
         width: 100%;
         margin: auto;
    }
     #about .about h3 {
         font-size: 38px;
    }
     #about .about p {
         font-size: 14px;
         line-height: 32px;
    }
     #about .about .img {
         margin-bottom: 10%;
    }
    /* ########### FIM ABOUT ########### */
    /* ########### FOOTER ########### */
     footer .row {
         margin: 0;
    }
     footer .desc {
         text-align: center;
    }
     footer .btn-whats {
         text-align: center;
    }
     footer .social-media {
         margin: 10% 0 3%;
    }
     footer .all-rights p, footer .all-rights p a {
         text-align: center;
    }
     footer .all-rights {
         border-top: none;
    }
     @media (max-width: 1000px){
         .about-img{
             display: block;
        }
    }
    /* ########### FIM FOOTER ########### */
}
 @media (min-width: 768px) and (max-width: 991.98px) {
    /* ########### MENU MOBILE ########### */
     .about-img{
         display: none;
    }
     .about-img-after{
         display: flex;
         width: 100%;
         padding-top: 30px;
    }
     .btn-mobile-menu .menu-mobile.active {
         overflow-y: auto;
    }
     #main-photo{
         height: 100%;
         float: right;
    }
    /* ########### END MENU MOBILE ########### */
    /* ########### VARIABLES HEADER ########### */
     #header .logo img {
         width: 50%;
         margin-left: 5%;
    }
    /* ########### END HEADER ########### */
    /* ########### BANNER ########### */
     #banner h2 {
         font-size: 52px;
         text-align: center;
         padding: 0 20%;
    }
     #banner p {
         font-size: 22px;
         margin-right: 10%;
         margin-top: 5%;
    }
     .btn-default {
         justify-content: center;
    }
     .btn-default a {
         font-size: 26px;
         padding: 2% 6%;
    }
     #banner img {
         width: 100%;
         display: block;
         margin: 0 auto;
    }
    /* ########### FIM BANNER ########### */
    /* ########### SERVICE ########### */
     #services .service {
         margin: 5% 0;
    }
    /* ########### FIM SERVICE ########### */
    /* ########### COFFEES ########### */
     #coffees h2 {
         font-size: 32px;
    }
     #coffees .coffees-carousel .owl-prev {
         left: 15px;
    }
     #coffees .coffees-carousel .owl-item img {
         width: 75%;
         margin: auto;
    }
     #coffees .coffees-carousel .owl-next {
         right: 15px;
    }
    /* ########### FIM COFFEES ########### */
    /* ########### TESTIMONIAL ########### */
     #testimonial h2 {
         font-family: var(--secondary-font);
         font-weight: var(--font-weight-bold);
         font-size: 32px;
         text-align: center;
         color: var(--text-primary-color);
    }
     #testimonial p {
         font-size: 14px;
    }
    /* ########### FIM TESTIMONIAL ########### */
    /* ########### REQUEST ########### */
     #request h2 {
         font-size: 36px;
    }
     #request h2 span {
         font-size: 43px;
    }
    /* ########### FIM REQUEST ########### */
    /* ########### ABOUT ########### */
     #about .img {
         padding: 0;
    }
     #about .img img {
         width: 100%;
         filter: drop-shadow(0px 9px 0px var(--primary-color));
    }
     #about .about .row {
         width: 100%;
         margin: auto;
    }
     #about .about h3 {
         font-size: 38px;
    }
     #about .about p {
         font-size: 14px;
         line-height: 32px;
    }
     #about .about .img {
         margin-bottom: 10%;
    }
    /* ########### FIM ABOUT ########### */
    /* ########### FOOTER ########### */
     footer .row {
         margin: 0;
    }
     footer .desc {
         text-align: center;
    }
     footer .btn-whats {
         text-align: center;
    }
     footer .social-media {
         margin: 10% 0 3%;
    }
     footer .social-media .row {
         justify-content: center;
    }
     footer .all-rights p, footer .all-rights p a {
         text-align: center;
    }
     footer .all-rights {
         border-top: none;
    }
    /* ########### FIM FOOTER ########### */
}
 @media (max-width: 480px) {
     .btn-default a {
         font-size: 18px;
    }
}

@media (min-width: 1000px) {
    .box-item:hover{
        margin-top: -70px !important;
    }
}