@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

:root {
  --fonte-principal: "Cabin", sans-serif;

  --cor-princ: #7c8928; /* utilize para cores padrão do site desenvolvido */
  --cor-sec: #4b4b4d; /* utilize para cores padrão do site desenvolvido */
  --cor-ter: #727376; /* utilize para cores padrão do site desenvolvido */
  --cor-qua: #77c709; /* utilize para cores padrão do site desenvolvido */
}

* {
  margin: 0px;
  padding: 0px;
  font-family: var(--fonte-principal);
  font-size: var(--f-16);
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

a:hover {
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

header,
footer,
section {
  width: 100%;
  padding: 0px;
  margin: 0px;
}

/***

  [ COR DOS TEXTOS ] 
  Há três formas de usar as cores com FG, use os prefuxis 'c-', 'cor-' ou até mesmo o nome da cor em portugês.
  Ex.: .c-azul, .cor-azul ou .azul.
  
  ***/

.c-a,
.cor-princ {
  color: var(--cor-princ) !important;
}
.c-b,
.cor-sec {
  color: var(--cor-sec) !important;
}
.c-c,
.cor-terc {
  color: var(--cor-ter) !important;
}
.c-d,
.cor-qua {
  color: var(--cor-qua) !important;
}

/***

    [ COR FUNDO ] 
    Há duas formas de usar as cores de fundo, use os prefuxis 'f-', 'fundo-' e em seguida a cor em portugês.
    Ex.: .f-azul ou .fundo-azul. Veja abaixo as cores disponíveis.

    ***/
.f-a,
.f-princ,
.fundo-a {
  background-color: var(--cor-princ) !important;
}

.f-b,
.f-sec,
.fundo-b {
  background-color: var(--cor-sec) !important;
}

.f-c,
.f-terc,
.funco-c {
  background-color: var(--cor-ter) !important;
}

/* link */
.site-link {
  color: var(--cor-princ);
  text-decoration: none;
}

.site-link:hover {
  color: #99ab26;
  text-decoration: underline;
}

.site-link-dark {
  color: #e5e5e5;
  text-decoration: none;
}

.site-link-dark:hover {
  color: #fff;
  text-decoration: underline;
}

/***

    [ COOKIES ] 
    Estilização da mensagem de cookies

    ***/

.mensagemCookies {
  z-index: 999;
  position: fixed;
  bottom: 5%;
  left: 3%;
  width: 350px;
  background-color: var(--cor-branco);
  padding: 20px;
  border-radius: 3px;
  box-shadow: 1px 1px 9px #ccc;
}

.mensagemCookies .mensagemCookies--texto {
  font-size: var(--f-16);
}

.mensagemCookies .mensagemCookies--botao button {
  background-color: var(--cor-princ);
  color: var(--cor-branco);
  padding: 6px 18px;
  font-size: var(--f-14);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mensagemCookies .mensagemCookies--botao button:hover {
  background-color: #99ab26;
  color: var(--cor-branco);
}

/***
    [ Config do site ] 
***/

/* header */
header {
  /* position: -webkit-sticky !important; */
  position: sticky !important;
  top: 0;
  z-index: 1020;
}

header .navbar {
  width: 100%;
}

header .navbar .navbar-brand img {
  width: 150px;
  height: auto;
  margin: 5px;
}

/* menu header */
header {
  background-color: var(--cor-branco);
}

header nav {
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #f7f7f7;
  margin: 0px;
  padding: 0px;
}

header .navbar .navbar-nav .nav-item {
  margin: 0px 30px;
  padding: 0px 10px;
}

header .navbar .navbar-nav .nav-item .nav-link {
  color: var(--cor-sec);
  font-size: var(--f-18);
  font-weight: 600;
}
header .navbar .navbar-nav .nav-item .nav-link:hover {
  color: #77c709;
}

header .navbar .navbar-toggler {
  border: 2px solid var(--cor-princ);
}

header .navbar .navbar-toggler i {
  color: var(--cor-princ);
  font-size: var(--f-30);
  font-weight: 900;
}

/* footer */

footer .footer-brand {
  width: 150px;
}

footer .nav {
  padding: 0px;
  margin: 0px;
}

footer .nav .nav-link {
  color: var(--cor-branco);
  font-size: var(--f-16);
  font-weight: 600;
}

footer .nav .nav-link:hover {
  color: var(--cor-branco);
}

footer .reserved {
  color: var(--cor-cinza-400) !important;
  font-size: var(--f-12);
}

footer .social-midia i {
  color: var(--cor-cinza-400);
  margin: 0px 20px;
  font-size: var(--f-30);
}

footer .social-midia i:hover {
  color: var(--cor-branco);
}

footer .devs {
  padding: 10px 0px;
  text-align: center;
}

footer .devs img {
  margin: 10px 20px;
}

/* about */
.sobre-nos {
  background-image: url("../img/assets/brackground-about.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 20px;
}

.sobre-nos .about-pt-one {
  float: left;
}

.sobre-nos .about-pt-two {
  float: right;
}

.sobre-nos-dois {
  background-image: url("../img/assets/brackground-about-two.png");
  background-repeat: no-repeat;
  background-size: 754px;
  background-position: top right;
}

.sobre-nos-dois img {
  width: 350px;
  height: auto;
}

/* services */
.servicos {
  background-image: url("../img/assets/background-services.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

/* business */
section hr {
  height: 10px;
  border: 0px;
  background: linear-gradient(to right, #fff 0%, #909090 100%);
}

/*  unidade */

.unidades-ob-cereais .unidades-ob-cereais--item {
  padding: 20px;
  border: 1px solid var(--cor-princ);
  border-radius: 10px;
}

.unidades-ob-cereais i {
  font-size: var(--f-50);
  color: var(--cor-princ);
}

.unidades-ob-cereais-slide .unidades-ob-cereais-slide--img {
  width: 320px;
  height: 190px;
  filter: grayscale(30%);
  border-radius: 10px;
  border: 3px solid #fff;
  transition: all linear 0.2s;
}

.unidades-ob-cereais-slide .unidades-ob-cereais-slide--img:hover {
  filter: grayscale(0%);
  border-color: var(--cor-qua);
  box-shadow: 0px 0px 23px #ccc;
}

/* contact */
.contato form {
  padding: 10px;
}

.contato form input,
.contato form textarea {
  background-color: var(--cor-cinza-200);
  color: var(--cor-princ);
}

.contato form input:focus,
.contato form textarea:focus {
  border: 2px solid #77c709 !important;
  box-shadow: 0 0 0 0;
  outline: 0;
}

.contato form button {
  width: 200px;
  background-color: var(--cor-princ);
  color: var(--cor-branco);
  padding: 10px 20px;
  font-size: var(--f-18);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: 0px;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.contato form button:hover {
  background-color: #99ab26;
  color: var(--cor-branco);
}

/* maps */
.maps .container-fluid,
.maps .row,
.maps .col {
  margin: 0px;
  padding: 0px;
}

.maps iframe {
  width: 100% !important;
  height: 450px !important;
  margin-bottom: -10px;
}