@tailwind base;
@tailwind components;
@tailwind utilities;
@import url(./assets/geometria/style.css);
@import url("https://use.typekit.net/qga1rsd.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;

    --caraque: "caraque-melted", sans-serif; font-weight: 400;
    --caraqueBM: "caraque-melted", sans-serif; font-weight: 700;

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

    --amarelo: #fecc4e;
    --azul: #144c74;
    --cinzaclaro: #eee;


}

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

.caraque {
  font-family: var(--caraque);
}
.caraqueBM {
  font-family: var(--caraqueBM);
}

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

/* Sections */
.hero {
    background: url(./assets/images/MDS_autismo_header-no-title_001.webp) bottom center no-repeat;
    min-height: calc(100vh - 62px);
    background-size: cover;
}
.hero img {
  
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 204px));*/
}

span.gglobe {
  background-image: url(./assets/images/globe.svg) !important;
    opacity: 1 !important;
    backdrop-filter: contrast(0.5);
}
.painted {
  background: url(./assets/images/MDS_bg_paintedcolor_full.webp) bottom center no-repeat;
  min-height: 100vh;
  background-size: cover;
}


.painted-outro {
  background: url(./assets/images/MDS_bg_paintedoutro_full.webp) top no-repeat;
  min-height: 100vh;
  background-size: cover;
}

.pastel {
  background: url(./assets/images/painted-pastel.webp) top no-repeat;
  min-height: 100vh;
  background-size: cover;
}


.bg-trans {
  background: url(./assets/images/bg-transparent.webp) top no-repeat;
  min-height: 50vh;
  background-size: cover;
}

.prefix, .sufix {
  font-family: var(--caraqueBM);
  color: #000;
  font-size: clamp(6.475rem, -8rem + 32vw, 12rem);
  letter-spacing: -0.175rem;
  line-height: 1;
}
.sufix {
  color: var(--azul);
}

.item {
  border-bottom: 1px solid var(--preto);
  padding-bottom: 8%;
  margin-bottom: 8%;
}


.item .desc p {
  font-family: var(--geometria);
  padding-bottom: 10%;
  padding-top: 7%;
}

/* 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;
        }
    .sufix {
        padding-left: 25px;

    }
}

/* 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 img {
      position: absolute;
      top: 55%;
      left: 50%;
      z-index: 1;
  }
   */
}



/*
.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%);
    } */
}

.player-btn {
  width: 160px;
  height: 160px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  opacity: 0.65;
  transition: all 0.8s ease-in-out;
}

.player-btn:hover {
  width: 120px;
  height: 120px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
.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(--azul) !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(--cinzaclaro) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background-color: var(--cinza) !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: 1000px; cursor: pointer;}
.card__content {transform-style: preserve-3d; display: block;}
.card:hover .card__content {transform: rotateY(.5turn);}

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

.backcard {
  background: var(--amarelo);
  background: linear-gradient(90deg, var(--amarelo) 3%, rgba(238,238,238,1) 3%);
}

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