:root {
  --laranja: #e66f34;
}

/* --- Fontes --- */
body {
  font-family: 'Oxanium', sans-serif;
  padding-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Big Shoulders Display';
  font-weight: 400;
  text-transform: uppercase;
}


/* --- Navbar --- */
.navbar {
  left: 0;
  right: 0;
  z-index: 1030;
  transition: background-color 0.3s ease, transform 0.3s ease, border-radius 0.3s ease, height 1s ease, padding-top 0.3s ease;
  transform: translateY(20px);
  display: flex;
  justify-content: center;
  height: 6rem;
  width: 100%;
}

.navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.7);
  transform: translateY(0);
  position: fixed;
  top: 0;
  height: 3rem;
  width: 100%;
  padding-top: 2px;
  transition: padding-top 0.3s ease, transform 0.3s ease;
}

/* --- Navbar Nav --- */
.navbar-nav {
  display: flex;
  align-items: center;
}

.navbar-nav .nav-item {
  position: relative;
}

.navbar-nav .nav-item.dropdown {
  position: static;
}

.navbar-nav .nav-link {
  color: white;
  margin-left: 1.0rem;
  margin-right: 1.0rem;
  font-family: 'Oxanium', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  border-radius: 32px;
}

a.nav-link:hover{
    background: var(--laranja);
    color:white;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 32px;  
}

/* --- Dropdown Menu --- */
.dropdown-menu {
  position: absolute; /*  OU position: fixed; */
  width: 70%;
  left: 15%;
  top: 65%; /* Posiciona logo abaixo da navbar */
  backdrop-filter: blur(10px);
  padding: 20px 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0); /* Ajustado para começar do mesmo ponto */
  margin-top: 1px;
  z-index: -1; /* Importante: Abaixo da navbar */
  background-color: rgba(0, 0, 0, 0.65) !important; /* Cor de fundo semi-transparente */
  -webkit-backdrop-filter: blur(10px); /* Prefixo para Safari */
  backdrop-filter: blur(10px); /* Blur */
  /* Otimizações para animação (já presentes, mas reforçando): */
  transform: translate3d(0, 0, 0);  /* Força aceleração por hardware */
  will-change: backdrop-filter, opacity, transform; /* Otimiza as propriedades que mudam */
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Suaviza a transição */
  border: 1px solid #ffffffaa;
  border-radius: 32px;
  overflow: hidden; /* <--- Adicionado aqui */

}

.nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- Navbar Scrolled --- */
.navbar.scrolled .dropdown-menu {
  top: 3rem; /* Ajuste para alinhar com a altura reduzida da navbar scrolled */
}

.dropdown-menu .container {
  max-width: 1140px; /* Ajuste conforme necessário */
  margin: 0 auto;
  padding: 0 15px;
}

.dropdown-header {
  color: #e66f34;
  font-weight: 600;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
}

.dropdown-item {
  color: white;
  font-family: 'Oxanium', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02rem;
  border-radius: 0.5rem;
}

.dropdown-item:hover {
background: var(--laranja);
color:white;
}


/* --- Menu Items Container --- */
.menu-items-container {
  border-radius: 2rem;
  padding: 0rem 2rem;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  border: 1px solid #ffffffaa;
}

/*.navbar.scrolled .menu-items-container {
  border-radius: 2rem;
  background: none;
  border: none;
}*/

/* --- Logo Wrapper --- */
#logo-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 1032;
}

#logo-wrapper a {
  pointer-events: auto;
  display: inline-block;
}

.navbar-brand img {
  height: 6rem;
  transition: height 0.3s ease;
  pointer-events: auto;
}

.navbar-brand img.logo-small {
  height: 3rem;
}

/* --- Hero Image (Carousel) --- */
#carouselExampleCaptions {
    margin-top: 0;
}

.carousel-caption {
  position: absolute;
  top: 20%;
  left: 20%;
  transform: translateX(-50%);
  width: 20%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  border-radius: 15px;
  padding: 20px;
  text-align: left;
}
.produtos .carousel-caption{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.carousel-caption h5 {
  font-size: 3rem;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.1rem;
}

.produtos .carousel-caption h5 {
    font-size: 2rem;
    text-shadow: 0px 0px 5px #000000;
}

.produtos .carousel-caption {
  left: 40%;
  width: 60%;
}
.produtos .carousel-caption p {
font-size: 1rem;
text-shadow: 0px 0px 5px #000000;
}

.carousel-caption p{
font-size: 1.5rem;
}

.botao-destaque{
  font-family: 'Big Shoulders Display';
  font-weight: 500;
  background-color: var(--laranja);
  text-transform: uppercase;
  font-size:2rem;
  letter-spacing: 0.15rem;
  border: none;
  width: fit-content;
}

.produtos .botao-destaque{
  font-family: 'Big Shoulders Display';
  font-weight: 500;
  background-color: var(--laranja);
  text-transform: uppercase;
  font-size:1.2rem;
  letter-spacing: 0.15rem;
  border: none;
  width: fit-content;
}


.botao-padrao{
  font-family: 'Big Shoulders Display';
  font-weight: 500;
  background-color: var(--laranja);
  text-transform: uppercase;
  font-size:1.2rem;
  letter-spacing: 0.08rem;
  border: none;
}

.bg-light h2{
  color: var(--laranja);
}

.sobre h2{
  color: #ffffff;
}


.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.whatsapp-float img {
  width: 60px;
  height: 60px;
}

.nav-link.comprar{
  background: var(--laranja);
  border-radius: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: bold;
}

/* Botão FAQ */
button.accordion-button {
  font-family: 'Oxanium';
  font-weight: 600;
}

/* Página interna produtos */ 

.produtos h1.display-4{
  color: var(--laranja);
}

.produtos .card-header{
  background: var(--laranja);
  color: white;
}

/* --- Produtos (Scroll Horizontal), Instagram, Accordion, etc. --- */
/* (Mantenha como antes) */
.overflow-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.card {
  flex: 0 0 auto;
  min-width: 18rem;
}
.product-slider {
  position: relative;
}
.product-slider-prev,
.product-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
}
.product-slider-prev {
  left: 10px;
}
.product-slider-next {
  right: 10px;
}
/* --- Instagram --- */
.instagram-media {
  margin: 0 auto;
}
/* --- Accordion (FAQ) --- */
.accordion-button:not(.collapsed) {
  color: #0c63e4;
  background-color: #e7f1ff;
}
/* --- Ajustes opcionais de espaçamento --- */
.py-5 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.overflow-auto::-webkit-scrollbar {
display: none;
}
.overflow-auto {
-ms-overflow-style: none;
scrollbar-width: none;
}

.product-slider-container {
  position: relative; /* Container pai com posição relativa */
}

/* Os botões ficam fixos dentro do container pai */
.product-slider-prev,
.product-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* Posicionamento dos botões */
.product-slider-prev {
  left: 10px;
}

.product-slider-next {
  right: 10px;
}

/* Botões Posts Instagram */

.specialists-slider-wrapper {
  position: relative;
  padding: 0 50px; /* Adiciona espaço para os botões */
}

.specialists-slider-prev,
.specialists-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.specialists-slider-prev {
  left: 0;
}

.specialists-slider-next {
  right: 0;
}

/* Ajuste o estilo dos botões conforme necessário */
.specialists-slider-prev,
.specialists-slider-next {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  /*border-radius: 50%;*/
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estilo para os ícones dentro dos botões */
.specialists-slider-prev i,
.specialists-slider-next i {
  font-size: 1.5rem;
}

/* Opcional: se quiser garantir que os botões não interfiram na rolagem */
.product-slider {
  overflow-x: auto;
  scroll-behavior: smooth;
}

.sobre{
  background: #E66F34;
}

@media only screen and (max-width: 992px) {


.botao-destaque{
  font-family: 'Big Shoulders Display';
  font-weight: 500;
  background-color: var(--laranja);
  text-transform: uppercase;
  font-size:1rem;
  letter-spacing: 0.15rem;
  border: none;
}

}

@media only screen and (min-width: 1400px) {
.produtos .carousel-caption h5 {
  font-size: 3rem;
  text-shadow: 0px 0px 5px #000000;
}

.h2, h2{
  font-size: 3rem;
  letter-spacing: 0.15rem;
}
}

@media only screen and (max-width: 480px) {
  .navbar{
    /*height: 4rem;*/
    height: 6rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent);
    transform: translateY(0px);
    align-items: flex-start;
    padding-top: 25px;
  }

  .menu-items-container{
    background: rgba(0, 0, 0, 0.65) !important;
  }

  .navbar-brand img {
    height: 4rem;
    left: 50%;
  }

  .navbar.scrolled {
    background: none;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .navbar-collapse.collapse.show{
    margin-top: 20px;
  }

  .navbar-collapse.collapsing{
    margin-top: 20px;
  }

  .navbar-collapse.collapse.show.scrolled{
    margin-top: 5px;
  }

  #logo-wrapper {
    left: 50px;
  }

  #carouselExampleCaptions .carousel-item img {
    height: 500px;
    width: 100%;
    object-fit: cover; /* Cobre o container sem distorcer a imagem */
  }

  .carousel-caption {
    left: 40%;
    width: 60%;
}

.carousel-caption h5 {
  font-size: 2rem;
  text-shadow: 0px 0px 5px #000000;
}

.dropdown-menu {
  width: 100%!important;
  top: initial!important;
  position: static;
  border: 1px solid #ffffffaa;
  border-radius: 16px;
  margin-top: 10px;
  padding: 10px;

  /* Estilização da barra de rolagem */
  scrollbar-width: thin; /* Para Firefox */
  scrollbar-color: #999 transparent; /* Cor da barra e do fundo (Firefox) */

  &::-webkit-scrollbar {
    width: 8px; /* Largura da barra */
  }

  &::-webkit-scrollbar-track {
    background: transparent; /* Fundo da barra (transparente) */
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #999; /* Cor da barra */
    border-radius: 4px; /* Bordas arredondadas */
    border: 2px solid transparent;/*Contorno transparente*/
    background-clip: content-box;/*Contorno não expandir para a barra*/
  }

   &::-webkit-scrollbar-thumb:hover {
      background-color: #777; /* Cor mais escura no hover (opcional) */
  }

}

}