@tailwind base;
@tailwind components;
@tailwind utilities;
@import url(./assets/geometria/style.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 {
    --geometria: 'Geometria', sans-serif;
    --geometriaEL: 'Geometria-ExtraLight', sans-serif;
    --geometriaB: 'Geometria-Bold', sans-serif;

    --branco: #ffffff;
    --preto: #231F20;
    --cianoclaro: #ADE7EE;
    --ciano: #2FB0C6;
    --cinzaclaro: #E9E9EF;
    --cinza: #71717D;
    --laranja: #ea983e;
    --roxo: #4c3c7e;
}

*,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);
}

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

/* Sections */
.hero {
    background: url(./assets/images/DOR_Campanha_Saude_Mental_Banner_001.webp) center center no-repeat;
    min-height: calc(100vh - 62px);
    background-size: cover;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 766px) {
    .hero {
        min-height: calc(100vh - 62px);
        background-size: cover;
        }
}

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

.hero h1 {
    position: absolute;
    bottom: calc(50% - 250px);
    left: calc(50% - 200px);
}
@media only screen and (max-width: 676px) {
    .hero h1 {
        position: absolute;
        top: calc(50% + 180px);
        left: 45px;
        transform: translate(0%,-50%);
    } 
}

.text-hero {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.vicio {
    background: var(--cianoclaro) url(./assets/images/bg-wave-transparent.webp) center center no-repeat;
    min-height: calc(70vh);
    background-size: cover;
}

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

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

video.bg {
    position: relative;
    width: 100%;
    height: 800px;
    min-height: 600px;
    /*height: auto;*/
    object-fit: cover;
    pointer-events: none;
}

video.boy {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: cover;
    pointer-events: none;
}

@media only screen and (max-width: 676px) {
    video.bg {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 680px;
        /*height: auto;min-height: 94vh;
        object-fit: cover;*/
        pointer-events: none;
    } 
}
.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%;}
  }

  .vicio {
    
  }
  
  
  body > .skiptranslate,.goog-logo-link,.gskiptranslate,.goog-te-gadget span,.goog-te-banner-frame,#goog-gt-tt, .goog-te-balloon-frame,div#goog-gt-{
    display: none!important;
  }
  .goog-te-gadget {
    color: transparent!important;
    font-size:0px;
  }
  .goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
  }
  #google_translate_element select{
    background:#2b1a12;
    color:#fff4e4;
    border: none;
    font-weight:bold;
    border-radius:3px;
    padding:8px 12px
  }

  .dependencia {
    display: flex;
    flex-flow: column;
    justify-content: center;
    min-width: 350px;
    min-height: 100vh;
    margin: 0 auto;
    overflow-x: hidden;
  }
  


  .slide-container {
    /*max-width: 1120px;*/
    width: 100%;
    padding: 40px 0;
    overflow: auto;
}

.swiper {
    overflow: visible !important;
}

.slide-content { 
    margin: 0 40px;
    /*overflow: hidden;*/
    
}

.swiper-navBtn {
    color: var(--cinza) !important;
    transition: all .3s ease;
}
    
.swiper-navBtn:hover { color: var(--ciano) !important; }

.swiper-navBtn::before, .swiper-navBtn::after { font-size: 40px !important; }

.swiper-button-next { right: 0 !important; }
.swiper-button-prev { left: 0 !important; }

.swiper-pagination-bullet { background-color: var(--cianoclaro) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background-color: var(--ciano) !important; }

@media screen and (max-width: 768px) {
    .slide-content { margin: 0 10px; }
    .swiper-navBtn { display: none !important; }
    .grab {
        width: 48px;
        margin: auto;
        transform: rotate(180deg);
      }
      .grabbing {
        
        margin: 5px auto;
        width: 67px;
        height: 24px;
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/110449/grabbing.png) no-repeat;
        background-size: contain;
        animation: drag 2.8s ease-in-out 0.4s infinite;
      }
      
      @keyframes drag {
        0% {transform: translate(-20px);}
        25% {transform: translate(0px);}
        50% {transform: translate(20px);}
        75% {transform: translate(0px);}
        100% {transform: translate(-20px);}
      }
}


.driving {
    background: url(./assets/images/dirigindo.webp) no-repeat;
    background-size: cover;
}


.wrapper_faq {
    width: 100%;
  }
  
  .container_faq {
    color: var(--preto);
    border-bottom: 1px solid var(--preto);
    margin: 15px 0;
  }
  
  .question {
    font-size: 1.4rem;
    line-height: 1;
    padding: 8px 10px 24px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--preto);
    font-family: var(--geometria)
  }
  
  .question::after {
    content: "\002B";
    font-family: var(--geometriaEL);
    font-size: 2.2rem;
    position: absolute;
    right: 15px;
    transition: 0.2s;
    margin-top: 10px;
  }
  
  .question.active::after {
    transform: rotate(45deg);
  }
  
  .answercont {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
  }
  
  .answer {
    padding: 0 20px 20px 4rem;
    line-height: 1.2rem;
    font-family: var(--geometria);
    font-style: normal;
    color: var(--preto);
  }
  
  .question.active + .answercont {
  }
  
  @media screen and (max-width: 790px){
    html {
      font-size: 14px;
    }
    .wrapper_faq {
    width: 100%;
    padding: 0 2rem;
  }
  }

/* Vanilla CSS for flip card */
.card { perspective: 800px; cursor: pointer;}
.card__content {transform-style: preserve-3d;}
.card:hover .card__content {transform: rotateY(.5turn);}

.card__front,
.card__back { backface-visibility: hidden;}
.card__back{ transform: rotateY(.5turn);}


.downloads {
    background:var(--cianoclaro) url(./assets/images/bg-downloads.webp) center center no-repeat;
    background-size: cover;
}