@tailwind base;
@tailwind components;
@tailwind utilities;
@import url(./assets/geometria/style.css);
@import url(./assets/davitonbrush/stylesheet.css);

#cc-main {
  --cc-font-family: var(--geometria);
}

.cc--dark-turquoise {
  color-scheme: dark;
  
  --cc-bg: #161a1c;
  --cc-primary-color: rgb(239, 244, 246);
  --cc-secondary-color: #b1bdc3;

  --cc-btn-primary-bg: #60fed2;
  --cc-btn-primary-color: #000;
  --cc-btn-primary-hover-bg: #4dd4ae;
  --cc-btn-primary-hover-color: #000;

  --cc-btn-secondary-bg: #242c31;
  --cc-btn-secondary-color: var(--cc-primary-color);
  --cc-btn-secondary-hover-bg: #d4dae0;
  --cc-btn-secondary-hover-color: #000;

  --cc-cookie-category-block-bg: #1e2428;
  --cc-cookie-category-block-border: #1e2428;
  --cc-cookie-category-block-hover-bg: #242c31;
  --cc-cookie-category-block-hover-border: #242c31;
  --cc-cookie-category-expanded-block-hover-bg: #242c31;
  --cc-cookie-category-expanded-block-bg: #1e2428;
  --cc-toggle-readonly-bg: #343e45;
  --cc-overlay-bg: rgba(4, 6, 8, .85)!important;

  --cc-toggle-on-knob-bg: var(--cc-bg);
  --cc-toggle-readonly-knob-bg: var( --cc-cookie-category-block-bg);

  --cc-separator-border-color: #222a30;

  --cc-footer-border-color: #212529;
  --cc-footer-bg: #0f1112;
} 


:root {
    --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 1s;

    --geometria: 'Geometria', sans-serif;
    --geometriaEL: 'Geometria-ExtraLight', sans-serif;
    --geometriaB: 'Geometria-Bold', sans-serif;

    --daviton: "DavitonBrush", sans-serif;

    --white: #ffffff;
    --branco: #ffffff;
    /*--preto: #231F20;*/

    --red: #f76057;
    --blue: #4470b8;
    --lightpink: #f7d0d0;

    --black: #1e1414;
    --gray25: #c7c4c4;
    --gray75: #564f4f;
    --mediumblack: #342b2c;
    --lightblack: #403737;
    --sand: #faf3e9;
    
    --cinzaclaro: #E9E9EF;
    --cinza: #71717D;
    --cinza2: #414141;
    --cinzaescuro: #4d4d4d;
    --laranja: #ea983e;
    --roxo: #4c3c7e;
    --amarelo: #ffe123;
    --pretofosco: #262626;
}

*,html,body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
}



html.lenis, html.lenis body {
    height: auto;
   }
   .lenis.lenis-smooth {
    scroll-behavior: auto !important;
   }
   .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
   }
   .lenis.lenis-stopped {
    overflow: hidden;
   }
   .lenis.lenis-smooth iframe {
    pointer-events: none;
   }

/* prevent drag */
.user-drag-none {
	user-drag: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
}

/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--cinzaclaro);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--roxo);
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--cianoclaro);
}

/* Fonts */
.geometria {
    font-family: var(--geometria);
}
.geometriaEL {
    font-family: var(--geometriaEL);
}
.geometriaB {
    font-family: var(--geometriaB);
}

.daviton {
  font-family: var(--daviton);
  font-weight: 400;
  font-style: normal;
}

strong {
    font-family: var(--geometriaB);
}

/* Sections */

/*
.video-insta {
  min-height: 100vh !important; 
}

.video-insta video {
  min-height: 100vh !important;
}

video.bg {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 600px;
    object-fit: cover;
    pointer-events: none;
}
*/
.hero{
  background: url(./assets/images/bg-claro-moire.webp) no-repeat bottom center;
  background-size: cover;
  height: calc(100vh - 128px);
}
.hero .illustration{
  background: url(./assets/images/illustra_hero.webp) no-repeat bottom center;
  background-size: cover;
  height: 100%;
}
.video-section {
  background: url(./assets/images/bg-preto-fosco_01.webp) no-repeat bottom right;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}
.sinais-section {
  background: url(./assets/images/bg-amarelo-fosco.webp) no-repeat top center;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}
.preto-border-top {
  background: url(./assets/images/preto-border-top.webp) repeat-x top center;
  background-position: contain;
  height: 18px;
  width: 100%;
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 0;
}
.amarelo-border-top {
  background: url(./assets/images/amarelo-border-top.webp) repeat-x top center;
  background-position: cover;
  height: 20px;
  width: 100%;
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 0;
}

.amarelo-border-top2 {
  background: url(./assets/images/faixa-amarelo-top.webp) repeat-x top center;
  background-position: cover;
  height: 20px;
  width: 100%;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 0;
}
.amarelo-border-bottom {
  background: url(./assets/images/amarelo-border-bottom.webp) repeat-x top center;
  background-position: cover;
  height: 20px;
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: -10px;
  left: 0;
}
.luz-section {
  background: url(./assets/images/bg-branco-fosco_01.webp) no-repeat bottom right;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}
.naofazer-section {
  background: url(./assets/images/bg-preto-none.webp) no-repeat top center;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}
.oquefazer-section {
  background: url(./assets/images/bg-sand.webp) no-repeat top center;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}
.tunnel {
  background: var(--pretofosco) url(./assets/images/bg-tunnel.webp) no-repeat top center;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}

.footer {
  background-color: var(--amarelo);
  position: relative;
}

/* Elements */

.dots-text {
  background: url(./assets/images/dots-01.webp) no-repeat center center;
  background-size: auto;
  padding: 0.825em;
  text-align: center;
  line-height: 1;
}
.dots-text-branco {
  background: url(./assets/images/dots-02.webp) no-repeat center center;
  background-size: contain;
  padding: 0.825em;
  text-align: center;
  line-height: 1;
}
.downloads {
  background: var(--sand) url(./assets/images/bg-full-dots.webp) no-repeat top center;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}

.bola01 {
  width: 100%;
  max-width: 425px;
  background: url(./assets/images/bola-amarelo_01.webp) no-repeat center center;
  background-size: cover;
  min-height: 425px;
  display: flex; align-items: center; justify-content: center;
}
.bola02 {
  width: 100%;
  max-width: 425px;
  background: url(./assets/images/bola-amarelo_02.webp) no-repeat center center;
  background-size: cover;
  min-height: 425px;
  display: flex; align-items: center; justify-content: center;
}
.bola03 {
  width: 100%;
  max-width: 425px;
  background: url(./assets/images/bola-amarelo_03.webp) no-repeat center center;
  background-size: cover;
  min-height: 425px;
  display: flex; align-items: center; justify-content: center;
}

.btn-download-video {
  width: 300px;
  height: 50px;
  padding-top: 15px;
  background: url(./assets/images/btn-download-video.webp) no-repeat center center;
  background-size: cover;
  font-family: var(--geometria);
  margin: 40px auto;
  text-align: center;
  display: block;
  color: var(--pretofosco);
}
.btn-download-video:hover {
    font-family: var(--geometriaB);
}

.dots {
  width: 100%;
  height: 100%;
  background: url(./assets/images/dots.webp) no-repeat center center;
  background-size: cover;
}

.faixa {
  max-width: 470px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(./assets/images/bg-faixa.webp) no-repeat center center;
  background-size: contain;
  margin: 0 auto;
}

.number {
  background: url(./assets/images/bola-amarelo_01.webp) no-repeat center center;
  background-size: cover;
  min-width: 200px;
  width: 200px;
  min-height: 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--daviton);
  color: var(--pretofosco);
  font-size: 8em;
}

.items {
  width: 100%;
}

.circle {
  width: 100%;
  max-width: 142px;
  background: url(./assets/images/bola-item.webp) no-repeat center center;
  background-size: cover;
  min-height: 142px;
  display: flex; align-items: center; justify-content: center;
}

.item-cvv {
  font-family: var(--geometria);
  color: var(--pretofosco);
  width: 100%;
  max-width: 275px;
  background: url(./assets/images/balloon.webp) no-repeat center center;
  background-size: contain;
  min-height: 185px;
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;
  justify-content: center; 
  padding: 0 25px;
}

.text-faixa-amarelo {
  background: url(./assets/images/faixa-amarelo.webp) no-repeat center center;
  background-size: auto;
}

@keyframes rotate-background {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 766px) {
    .hero {
        background-size: cover;
        min-height: calc(100vh - 28px);
        }
    #gt_float_wrapper {
          left: auto !important;
          right: 20px !important;
        }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only (min-width: 768px) and (max-width: 1280px) {
    .hero {
    min-height: 100vh;
    background-size: cover;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1280px) {
    .banner-hero {
        min-height: calc(100vh - 128px);
        background-size: cover;
    }
} */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 766px) {

}


@keyframes draw {
  from {
    stroke-dasharray: 0 100;
  }
}

ul.check {
  list-style-type: none;
}

ul.check li:before {
  content: '\2014';
  position: absolute;
  margin-left: -20px;
}

.overlay {
    position: absolute;
    background: rgba(113,113,125,0.75);
    /*min-height: 100%;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
    z-index: 10;
  }
  
  
  /* Display drop-down menu on hover */
  nav ul li:hover > ul {
      display: inherit;
  }
      
  /* Change this in order to change the symbol of the drop-down menu */
  li > a:after {
    content: '';
    font-size: 0.875rem;
    margin-left: 0.5rem;
  }
  li > a:only-child:after {
    content: '';
  }
  
  .search-input::placeholder{
    font-size: medium;
    color: #fff;
  }
  
  
  .nav-language {
    width: auto;
    background-color: #4c3c7e;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 70px 0px 0px 70px;
    position: fixed;
    right: 0px;
    /*top: 138px;*/
    padding: 6px 4px 6px 6px;
    gap: 5px;
    transition: all .3s ease-in-out;
    z-index: 10;
  }
  
  /*
  .nav-language.closed {
    width: 96px;
    background-color: var(--yellow-attention);
    color: var(--white);
    font-size: 0.8rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    border-radius: 70px 0px 0px 70px;
    position: absolute;
    top: 138px;
    padding: 6px 4px 6px 6px;
    gap: 6px;
    overflow: hidden;
    right: -68px;
    transition: all .5s ease-in-out;
  }
  */
  .nav-language a {
    color: var(--branco);
    font-size: 0.685rem;
    cursor: pointer;
  }
  
  .nav-language a:hover {
    color: var(--branco);
    font-size: 0.685rem;
    text-decoration: underline;
  }
  
  #switcher.trigger {
    display: flex;
    width: 64px;
    gap: 8px;
  }
  
  .esconde {
      -webkit-animation:elastic once infinite;
      -webkit-animation-name: run;
      -webkit-animation-duration: 1s;
  }     
      @-webkit-keyframes run {
      0% { left: 90%;}
      50%{ left : 100%;}
      100%{ left : 90%;}
  }

@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomReverseIn {
  0% {
    opacity: 0;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(90vw) rotateY(67.5deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
[data-animation] {
  opacity: 0;
  -webkit-animation-timing-function: var(--animation-timing-function);
          animation-timing-function: var(--animation-timing-function);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: var(--animation-duration);
          animation-duration: var(--animation-duration);
  will-change: transform, opacity;
}

.animations-disabled,
.animations-disabled [data-animation] {
  -webkit-animation: none !important;
          animation: none !important;
  opacity: 1 !important;
}

.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}

.slideInDown {
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown;
}

.slideInLeft {
  -webkit-animation-name: slideInleft;
          animation-name: slideInleft;
}

.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

.zoomReverseIn {
  -webkit-animation-name: zoomReverseIn;
          animation-name: zoomReverseIn;
}

.flipInY {
  -webkit-animation-name: flipInY;
          animation-name: flipInY;
}

.flipOutY {
  -webkit-animation-name: flipInY;
          animation-name: flipInY;
  animation-direction: reverse;
}



.swiper {
 overflow: visible !important;
}


.swiper-button-prev, .swiper-button-next {
    /*
    position: relative;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10; 
    
    width: 60px;*/
    cursor: pointer;
    display: flex;
    /*margin-top: 10px;*/
    align-items: center;
    justify-content: center;
    color: var(--pretofosco);
}


.swiper-button-prev {
   /*background: url(./assets/images/arrow-left.svg) no-repeat center center;*/
   color: var(--pretofosco);
   left: var(--swiper-navigation-sides-offset, -25px);
   right: auto;
}
.swiper-button-next {
  /* background: url(./assets/images/arrow-right.svg) no-repeat center center; */
  color: var(--pretofosco);
  right: var(--swiper-navigation-sides-offset, -25px);
  left: auto;
}

/**/
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    /*content: '';*/
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    /*content: '';*/
}
.swiper-pagination-2 {
      
}
.swiper-pagination-bullet {
      background-color: var(--pretofosco);
      width: 12px;
      height: 12px;
      opacity: 0.5;
    }

.swiper-pagination-bullet-active {
      background-color: var(--pretofosco);
      opacity: 1;
}