.elementor-6 .elementor-element.elementor-element-6f52357{--display:flex;}/* Start custom CSS for html, class: .elementor-element-f27255c *//* ==================================================
INÍCIO CSS
PROJETO: GRR
EFEITO: Menu topo com caixa inclinada para logo
FONTE: Montserrat
USO: Elementor / WordPress
================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

.grr-top-menu,
.grr-top-menu * {
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif !important;
}

.grr-top-menu {
  width: 100%;
  height: 185px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  background: linear-gradient(
    135deg,
    #0f1c2b 0%,
    #08131f 48%,
    #06101a 100%
  );

  overflow: hidden;
}

/* CAIXA INCLINADA DA LOGO */

.grr-logo-area {
  position: absolute;
  top: 0;
  left: 32px;

  width: 450px;
  height: 185px;

  background: #87633f;

  clip-path: polygon(0 0, 84% 0, 100% 100%, 16% 100%);
  z-index: 2;
}

.grr-logo-link {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-left: 10px;
  padding-right: 42px;
  text-decoration: none;
}

.grr-logo-img {
  width: 245px;
  max-width: 72%;
  height: auto;
  display: block;
}

/* ÁREA DO MENU */

.grr-menu-inner {
  width: 100%;
  max-width: 1180px;
  height: 100%;

  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 36px;

  position: relative;
  z-index: 4;
}

/* LINKS */

.grr-menu-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.grr-menu-links a {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;

  opacity: 0.92;
  transition: all 0.25s ease;
}

.grr-menu-links a:hover {
  opacity: 1;
  color: #c19b70;
}

/* BOTÃO CTA */

.grr-menu-cta {
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  padding: 0 7px 0 18px;

  border: 2px solid #c19b70;
  border-radius: 100px;

  color: #ffffff;
  text-decoration: none;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  transition: all 0.25s ease;
}

.grr-menu-cta span {
  display: inline-flex;
  align-items: center;
}

.grr-menu-cta-icon {
  width: 29px;
  height: 29px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #c19b70;
  border-radius: 50%;
  overflow: hidden;

  transition: all 0.25s ease;
}

.grr-menu-cta-icon img {
  width: 15px;
  height: auto;
  display: block;

  transition: transform 0.25s ease;
}

.grr-menu-cta:hover {
  background: #c19b70;
  color: #06101a;
}

.grr-menu-cta:hover .grr-menu-cta-icon {
  background: #06101a;
}

.grr-menu-cta:hover .grr-menu-cta-icon img {
  transform: translateX(3px);
}

/* LINHA INFERIOR */

.grr-menu-line {
  position: absolute;
  left: 120px;
  right: 26px;
  bottom: 47px;

  height: 1px;
  background: rgba(193, 155, 112, 0.65);

  z-index: 3;
}

/* BOTÃO MOBILE */

.grr-mobile-toggle {
  display: none;

  width: 42px;
  height: 42px;

  border: 1px solid rgba(193, 155, 112, 0.55);
  border-radius: 50%;
  background: transparent;

  cursor: pointer;
  padding: 0;
}

.grr-mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;

  margin: 4px auto;
  border-radius: 20px;
  background: #ffffff;

  transition: all 0.25s ease;
}

/* RESPONSIVO TABLET */

@media (max-width: 1024px) {

  .grr-top-menu {
    height: 145px;
  }

  .grr-logo-area {
    left: 0;
    width: 360px;
    height: 145px;
  }

  .grr-logo-img {
    width: 210px;
  }

  .grr-menu-inner {
    padding: 0 22px;
    gap: 22px;
  }

  .grr-menu-links {
    gap: 18px;
  }

  .grr-menu-links a,
  .grr-menu-cta {
    font-size: 11px;
  }

  .grr-menu-line {
    left: 80px;
    right: 22px;
    bottom: 35px;
  }
}

/* RESPONSIVO MOBILE */

@media (max-width: 767px) {

  .grr-top-menu {
    height: 92px;
    overflow: visible;
  }

  .grr-logo-area {
    left: 0;
    width: 245px;
    height: 92px;

    clip-path: polygon(0 0, 86% 0, 100% 100%, 14% 100%);
  }

  .grr-logo-link {
    justify-content: flex-start;
    padding-left: 34px;
    padding-right: 34px;
  }

  .grr-logo-img {
    width: 155px;
    max-width: 100%;
  }

  .grr-menu-inner {
    height: 92px;
    padding: 0 18px;
  }

  .grr-mobile-toggle {
    display: block;
    position: relative;
    z-index: 10;
  }

  .grr-menu-links,
  .grr-menu-cta {
    display: none;
  }

  .grr-top-menu.menu-aberto .grr-menu-links {
    position: absolute;
    top: 92px;
    left: 0;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;

    padding: 18px 24px 12px;

    background: #07121d;
    border-top: 1px solid rgba(193, 155, 112, 0.4);
  }

  .grr-top-menu.menu-aberto .grr-menu-links a {
    width: 100%;
    padding: 15px 0;

    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .grr-top-menu.menu-aberto .grr-menu-cta {
    position: absolute;
    top: 292px;
    left: 24px;
    right: 24px;

    display: flex;
    width: auto;
    height: 42px;

    background: #07121d;
  }

  .grr-menu-line {
    left: 24px;
    right: 24px;
    bottom: 0;
  }

  .grr-top-menu.menu-aberto .grr-mobile-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .grr-top-menu.menu-aberto .grr-mobile-toggle span:nth-child(2) {
    opacity: 0;
  }

  .grr-top-menu.menu-aberto .grr-mobile-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* ESPAÇO PARA ÂNCORAS NÃO FICAREM ATRÁS DO MENU */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 190px;
}

/* ==================================================
FIM CSS
================================================== *//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-de159ce *//*
====================================================
PROJETO: GRR
EFEITO: CAIXA INCLINADA COM CTA
TIPO: CSS COMPLETO
USO: ELEMENTOR / CSS PERSONALIZADO
FONTE: MONTSERRAT
====================================================
*/


/* ==========================================
   ROLAGEM SUAVE
========================================== */

html {
  scroll-behavior: smooth;
}


/* ==========================================
   FORÇA MONTSERRAT EM TODA A CAIXA
========================================== */

.grr-caixa-inclinada-section,
.grr-caixa-inclinada-section *,
.grr-caixa-inclinada,
.grr-caixa-inclinada *,
.grr-caixa-conteudo,
.grr-caixa-conteudo *,
.grr-caixa-botao,
.grr-caixa-botao * {
  font-family: "Montserrat" !important;
}


/* ==========================================
   ÁREA GERAL DA CAIXA
========================================== */

.grr-caixa-inclinada-section {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 60px 20px;

  box-sizing: border-box;
}


/* ==========================================
   CAIXA PRINCIPAL INCLINADA
========================================== */

.grr-caixa-inclinada {
  width: min(100%, 560px);
  min-height: 220px;

  position: relative;

  display: flex;
  align-items: center;

  background: #8b673e;

  clip-path: polygon(
    0 0,
    86% 0,
    100% 100%,
    14% 100%
  );

  box-sizing: border-box;
}


/* ==========================================
   CONTEÚDO INTERNO
========================================== */

.grr-caixa-conteudo {
  width: 100%;

  padding: 42px 70px 34px 86px;

  box-sizing: border-box;
}


/* ==========================================
   TÍTULO
========================================== */

.grr-caixa-conteudo h2 {
  margin: 0 0 28px 0;

  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.12;
  font-weight: 500;

  color: #071421;

  letter-spacing: -0.045em;
}

.grr-caixa-conteudo h2 strong {
  font-weight: 700;
  color: #ffffff;
}


/* ==========================================
   ÁREA DO BOTÃO
========================================== */

.grr-caixa-botao-area {
  width: 100%;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}


/* ==========================================
   BOTÃO
========================================== */

.grr-caixa-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 7px 7px 7px 18px;

  border: 1px solid rgba(7, 20, 33, 0.58);
  border-radius: 999px;

  background: transparent;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  color: #071421;
  text-decoration: none;

  cursor: pointer;

  transition: all .25s ease;
}

.grr-caixa-botao-texto {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}


/* ==========================================
   CÍRCULO DA SETA
========================================== */

.grr-caixa-botao-icone {
  width: 26px;
  height: 26px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  flex: 0 0 26px;

  border-radius: 50%;

  background: #071421;

  overflow: hidden;

  transition: all .25s ease;
}


/* ==========================================
   IMAGEM DA SETA
========================================== */

.grr-caixa-botao-icone img {
  width: 12px;
  height: 12px;

  display: block;

  object-fit: contain;

  filter: brightness(0) invert(1);

  transition: transform .25s ease, filter .25s ease;
}


/* ==========================================
   HOVER DO BOTÃO
========================================== */

.grr-caixa-botao:hover {
  background: #071421;
  color: #ffffff;
}

.grr-caixa-botao:hover .grr-caixa-botao-icone {
  background: #ffffff;
}

.grr-caixa-botao:hover .grr-caixa-botao-icone img {
  transform: translate(2px, -2px);
  filter: brightness(0);
}


/* ==========================================
   AJUSTE PARA MENU FIXO
========================================== */

#areas-de-atuacao {
  scroll-margin-top: 100px;
}


/* ==========================================
   RESPONSIVO TABLET / MOBILE
========================================== */

@media (max-width: 767px) {

  .grr-caixa-inclinada-section {
    padding: 40px 16px;
  }

  .grr-caixa-inclinada {
    width: 100%;
    min-height: 190px;

    clip-path: polygon(
      0 0,
      90% 0,
      100% 100%,
      10% 100%
    );
  }

  .grr-caixa-conteudo {
    padding: 34px 42px 30px 54px;
  }

  .grr-caixa-conteudo h2 {
    font-size: 24px;
    line-height: 1.14;
    margin-bottom: 24px;
  }

  .grr-caixa-botao {
    font-size: 10px;
    padding: 7px 7px 7px 14px;
    gap: 8px;
  }

  .grr-caixa-botao-icone {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .grr-caixa-botao-icone img {
    width: 11px;
    height: 11px;
  }
}


/* ==========================================
   RESPONSIVO MUITO PEQUENO
========================================== */

@media (max-width: 420px) {

  .grr-caixa-conteudo {
    padding: 32px 34px 28px 44px;
  }

  .grr-caixa-conteudo h2 {
    font-size: 21px;
  }

  .grr-caixa-botao-area {
    justify-content: flex-start;
  }

  .grr-caixa-botao {
    font-size: 9.5px;
  }
}/* End custom CSS */