@charset "UTF-8";

/* Tokens essenciais */
:root{
  --default-font:"Poppins",sans-serif;
  --heading-font:"Poppins",sans-serif;
  --nav-font:"Inter",sans-serif;

  --background-color:#ffffff;
  --default-color:#222121;
  --heading-color:#171717;
  --accent-color:#0f60a4;
  --surface-color:#ffffff;
  --contrast-color:#ffffff;

  scroll-behavior:smooth;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Base */
body{
  color:var(--default-color);
  background-color:var(--background-color);
  font-family:var(--default-font);
}

a{
  color:var(--accent-color);
  text-decoration:none;
  transition:.3s;
}

h1,h2,h3,h4,h5,h6{
  color:var(--heading-color);
  font-family:var(--heading-font);
}

/* Seções (estrutura de layout geral) */
section,.section{
  color:var(--default-color);
  background-color:var(--background-color);
  padding:60px 0;
  scroll-margin-top:135px;
  overflow:clip;
}
@media (max-width:1199px){
  section,.section{scroll-margin-top:70px;}
}

/* cta no header  */
.mensagem-div-2 {
  font-family: "Poppins", sans-serif !important;
  background-color: #ebebeb !important;
  color: rgb(169, 169, 169) !important;
  height: 70px !important;
  margin: 0 0 5px !important;
  display: table !important;
  padding: 0.5em 0.5em !important;
  display: flex !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
}

.mensagem-2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: black !important;
  text-align: center !important;
  margin-right: 20px !important;
  margin-bottom: 0px;
}

.btn-msg-2 a{
  text-decoration: none !important;
}

.btn-msg-2 {
  cursor: pointer !important;
  color: #fff !important;
  background: #0e853e !important;
  border-radius: 5px !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 15px !important;
  text-transform: uppercase !important;
  animation: view 5s infinite !important;
  padding: 15px 20px !important;
  text-decoration: none !important;
  margin-left: 0px imo !important;
}

.btn-msg-2:hover {
  transition: all ease-in-out 0.3s !important;
  background: #044b21 !important;
}

.fa-whatsapp-2 {
  margin-left: 6px !important;
}

@keyframes view {
  2% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  4% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  6% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  8% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  10% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  12% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  14% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  16% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  18% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  20% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@media (min-width: 1px) and (max-width: 380px) {
  .mensagem-div-2 {
    flex-direction: row !important;
    height: auto !important;
    padding: 10px 5px !important;
    z-index: 99999 !important;
  }

  .btn-msg-2 {
    font-size: 10px !important;
    min-height: 0px !important;
    padding: 10px 8px !important;
  }

  .mensagem-2 {
    font-size: 12px !important;
    line-height: 28px !important;
  }
}

@media (min-width: 385px) and (max-width: 545px) {
  .mensagem-div-2 {
    flex-direction: row !important;
    height: auto !important;
    padding: 10px 5px !important;
    z-index: 99999 !important;
  }

  .btn-msg-2 {
    font-size: 13px !important;
    min-height: 0px !important;
    padding: 10px 10px !important;
  }

  .mensagem-2 {
    font-size: 17px !important;
    line-height: 28px !important;
  }
}


@media(min-width: 600px) and (max-width: 766px){
  svg.cs-ico-menu {
    margin-top: 81px;
  }
}
@media (max-width: 600px){
  svg.cs-ico-menu {
    margin-top: 141px!important;
  }
}

@media (max-width:802px) {
  .mensagem-2{
  line-height: 26px;
  }
}
@media (min-width: 1px) and (max-width: 390px) {
  .mensagem-2 {
        font-size: 9px !important;
        line-height: 21px !important;
        max-width: 50%;
    }
}

/* Header fixo (impacta primeira dobra) */
.header{
  color:var(--default-color);
  background-color:var(--background-color);
  transition:all .5s;
  z-index:997;
  padding:0;
  position:fixed;
  width:100%;
  border-bottom:1px solid color-mix(in srgb,var(--default-color),transparent 90%);
}

.header .top-row{padding-bottom:10px;}

.header .top-row .logo{
  text-decoration:none;
}

.header .top-row .logo img{
  max-height:120px;
  margin-right:10px;
}

.header .social-links{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.header .social-links a{
  color:#12395f;
  padding:0 8px;
  display:inline-block;
  font-size:18px;
  transition:.3s;
  font-weight:500;
}

@media (max-width:1200px){
  .header .social-links{padding-right:40px;}
}

:root {
  --header-height: 0px;
}

.hero {
  padding-top: calc(var(--header-height) + 30px) !important;
}


/* Hero (primeira dobra) */
.hero{
  /* padding-top:17vh; */
  min-height:100vh;
  display:grid;
  align-items:center;
  position:relative;
  padding-bottom:60px;
}

#hero{
  min-height:100vh;
  background-image:url("../img/gem/hero-bg.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:relative;
}

#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
  z-index:1;
}

#hero>*{
  position:relative;
  z-index:2;
}

.hero h1{
  font-weight:600;
  font-size:5vh;
  margin-bottom:40px;
}

.hero .lead{font-size:2.4vh;}
.hero li{font-size:2.4vh;margin-bottom:10px;}

@media (max-width:992px){
  .hero{
    min-height:auto;
    padding:80px 0 40px;
  }
}

/* Ajustes mobile que impactam o first paint */
@media (max-width:767px){
  #hero{padding-top:220px;}
  .header .top-row .logo img{max-height:100px;margin-right:10px;}
  .header .social-links a{font-size:15px;word-break:break-all;}
}