::-webkit-scrollbar {
  width: 6px; /* Largura da barra de rolagem */
}

::-webkit-scrollbar-thumb {
  background-color: var(--secondary-color); /* Cor do thumb */
  border-radius: 6px; /* Deixa o thumb arredondado */
}

::-webkit-scrollbar-track {
  background-color: #FFF; /* Cor do track (fundo da barra de rolagem) */
  border-radius: 6px !important; /* Deixa o track arredondado */
}

header {
    position: relative;
    top: 0;
    width: 100%;
    height: 5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    background-color: transparent;
  }
  
  /* Estilo do header clonado (invisível inicialmente) */
  header.clone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    background-color: var(--bg-color);
    z-index: 1000;
    box-shadow: 0 0px 20px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
  
  /* Estilo para o header clonado aparecer */
  header.clone.show {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
  
  /* Estilo para o header clonado desaparecer */
  header.clone.hide {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
  

header .container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;

}


.logo img {
height: 100%;
  max-height: 4rem;
  margin-top: .2rem;
}

  /* Submenu */
  .submenu {
    display: none;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    top: 100%;
    left: 0;
    background-color: #FFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    min-width: 200px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }


  .submenu li {
    position: relative;
    padding: 1rem;
    transition: all 0.2s ease;

    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem;
  }

  .submenu li:hover{
    background-color: var(--secondary-color);
    color:#fff;
  }

  .submenu li{
    padding: 0 !important;
    display: flex;

  }

  .submenu li a{
    letter-spacing: normal;
    font-size: 1rem;
    padding: 1rem;
  
    display: flex;
    flex:1;
    text-transform: none;
    background-color: #fff;
    transition: all 0.2s ease;
  }

  .submenu li ul li a:hover {
    background-color: var(--secondary-color);
    color:#fff !important;
  }
  .dropdown:hover > .submenu {
    display: block;
  }

  /* Submenu dentro do submenu */
  .submenu li:hover > .submenu {
    display: block;
    top: 0;
    left: 100%;
  }

  .dropdown:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .submenu li:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }


  @media(max-width:980px){
    .submenu {
      position: relative;
      height: auto;
      top: 0;
      left: 0;
      min-width: 100%;
      background-color: #FFF;
      margin-top: 1rem;
    }

    .dropdown:hover > .submenu {
      transform: none;
    }
  
    .submenu li:hover > .submenu {
      display: block;
      top: 0;
      left: 0;
      width: auto;
      height: auto;
      transform: none;
      margin-top: 1rem;
      margin-bottom: -1rem;
      box-shadow: none;
    }
    
    
    .submenu li ul{
      margin-left: -1rem;
      margin-right: -1rem;
    }

    .submenu li ul li a{
      background-color: #EEE ;
    }
  }
@media(max-width:1280px){
    .logo img {
        max-height: 4rem;
      }
}

.top-nav{
    background: var(--bg-color-secondary
  ) !important;
  height: 2.4rem;
  display: flex;
  align-items: center;
  padding: .4rem 1rem;
}
.top-nav .container{
   justify-content: flex-end;
   display: flex;
   
}
.top-nav a{
    color:var(--text-color);
    text-decoration: none;
}

.top-nav a i{
  color:var(--primary-color);
  margin-right: .4rem;
}
header nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;


 align-self: center;
 justify-content: space-between;
 flex:1
}

@media(max-width:980px){
  header nav{
    justify-content: flex-end;
  }
}

header .container{
  display: flex;
  
} 

header .logo{
  align-self: flex-start;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin:0 auto;

}

nav ul li {
  position: relative;
}

nav ul li a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;

 
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: var(--secondary-color);
}


.btn-header {
  padding: .6rem 1.4rem !important;
  background: var(--primary-color);
  font-size: 1rem;
  cursor: pointer;
  
    color:#fff;
}

.btn-header:hover{
    background:#fff !important;
    border-color: var(--primary-color);;
    color: var(--secondary-color) !important;
}

.toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

#menuToggle i {
  color: var(--primary-color);
}

.mask {
    display: none ;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: -1; /* Abaixo do menu */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

@media(max-width: 980px){
  .mask {
    z-index: 2 !important;
    visibility: visible;
  }
}

/* Quando o menu estiver ativo, a máscara é visível */
nav.active ~ .mask {
    display: block;
    opacity: 1;
}

@media (max-width: 1280px) {
    nav ul {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0px;
        right: 0;
        background-color: var(--bg-color);
        width: 80%;
        max-width: 300px;
        height: 100vh;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        gap: 1.5rem;
        z-index: 3; /* Acima da máscara */
        transition: transform 0.3s ease;
        transform: translateX(100%); /* Oculta o menu fora da tela */
    }

    nav ul.active {
        display: flex;
        transform: translateX(0); /* Mostra o menu */
    }

    .toggle {
        display: block;
    }

    .btn-header {
        display: none;
    }
  
}