/* ----------------------------------------------------------
   GERAL
---------------------------------------------------------- */
body {
    font-family: 'Poppins', sans-serif; /* Define a fonte 'Poppins' para o corpo da página */
}

/* ----------------------------------------------------------
   MENU DE NAVEGAÇÃO
---------------------------------------------------------- */

.navbar-light .navbar-nav .nav-link {
    font-family: 'Nunito', sans-serif; /* Define a fonte 'Nunito' para os links de navegação */
    position: relative; /* Define o posicionamento como relativo para manipulação dos links */
    margin-right: 25px; /* Adiciona margem à direita dos links */
    padding: 32px 0; /* Define o preenchimento superior e inferior dos links */
    color: #FFFFFF !important; /* Define a cor do texto como branco e usa '!important' para garantir a prioridade */
    font-size: 18px; /* Define o tamanho da fonte dos links */
    font-weight: 600; /* Define o peso da fonte (negrito) */
    outline: none; /* Remove o contorno dos links ao serem clicados */
    transition: .7s; /* Adiciona uma transição suave de 0.5 segundos para efeitos de hover */
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 0; /* Altera o padding quando a navbar fica fixa no topo */
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: #ffc506f9 !important; /* Define a cor do link ao passar o mouse (hover) ou quando ativo */
}

.sticky-top.navbar-light .navbar-brand img {
    max-height: 80px; /* Define o tamanho máximo da imagem do logo quando a navbar se torna sticky */
}




/* ----------------------------------------------------------
   MENU EM DISPOSITIVOS MÓVEIS
---------------------------------------------------------- */
@media (max-width: 991.98px) {
    .sticky-top.navbar-light {
        position: relative; /* Define o posicionamento da navbar como relativo em dispositivos menores */
        background:  #4e553a; /* Define o fundo branco para a navbar em dispositivos móveis */
    }

    .navbar-light .navbar-collapse {
        margin-top: 15px; /* Define uma margem superior quando o menu estiver colapsado */
        border-top: 1px solid #DDDDDD; /* Adiciona uma borda superior ao menu colapsado */
    }

    .navbar-light .navbar-nav .nav-link {
        padding: 10px 0; /* Ajusta o padding dos links no menu colapsado */
        margin-left: 0; /* Remove a margem à esquerda dos links */
        color: var(--dark) !important; /* Define a cor dos links para escuro */
    }

    .navbar-light .navbar-brand img {
        max-height: 45px; /* Reduz o tamanho da imagem do logo para dispositivos menores */
    }
}

/* ----------------------------------------------------------
   EFEITOS PARA O MENU
---------------------------------------------------------- */
@media (min-width: 992px) {
    .navbar-light {
        position: absolute; /* Posiciona a navbar de forma absoluta */
        width: 100%; /* Define a largura da navbar como 100% */
        top: 0; /* Alinha a navbar ao topo da página */
        left: 0; /* Alinha a navbar à esquerda */
        border-bottom: 1px solid rgba(256, 256, 256, .1); /* Adiciona uma borda inferior sutil na navbar */
        z-index: 999; /* Coloca a navbar no topo de outros elementos */
    }
    
    .sticky-top.navbar-light {
        position: fixed; /* Torna a navbar fixa no topo da página */
        background: #4e553a; /* Altera o fundo da navbar quando se torna sticky */
        color: #FFFFFF; /* Altera a cor do texto para branco */
    }

    .navbar-light .navbar-nav .nav-link::before {
        position: absolute; /* Posiciona o pseudo-elemento 'before' de forma absoluta */
        content: ""; /* Define o conteúdo do pseudo-elemento como vazio */
        width: 0; /* Define a largura inicial do pseudo-elemento */
        height: 2px; /* Define a altura do pseudo-elemento como uma linha fina */
        bottom: -1px; /* Posiciona o pseudo-elemento 1px abaixo do link */
        left: 50%; /* Posiciona o pseudo-elemento no meio do link */
        background: #ffc506; /* Define a cor de fundo do pseudo-elemento */
        transition: .7s; /* Adiciona uma transição suave de 0.5 segundos */
        border-bottom:  4px solid #ffc506; /* Define uma borda inferior do pseudo-elemento */
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        width: calc(100% - 2px); /* Expande a largura do pseudo-elemento quando hover ou ativo */
        left: 1px; /* Ajusta a posição do pseudo-elemento */
    }
}

/* ----------------------------------------------------------
   MENU EM DISPOSITIVOS MÓVEIS (NOVAMENTE)
---------------------------------------------------------- */
@media (max-width: 991px) { 
    .navbar {
        background: #4e553a; /* Altera o fundo da navbar em dispositivos móveis */
        color: #FFFFFF; /* Altera a cor do texto para branco */
    }

    .navbar-toggler {
        border: #4e553a; /* Define a borda do botão de menu */
        background-color:  #4e553a; /* Altera a cor do fundo do botão de menu */
        
    }

   

   
}


/* ----------------------------------------------------------
   SESSÃO HERO (Fundo da página principal)
---------------------------------------------------------- */
.hero-header {
    background: url(/img/bg.jpg);
    background-size: contain; 
    background-position: center ;
    background-repeat: no-repeat;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}








/* Adiciona efeitos visuais antes e depois do carrossel */
.testimonial-carousel::before {
    position: absolute; /* Posiciona o pseudo-elemento 'before' de forma absoluta */
    content: ""; /* Define o conteúdo como vazio */
    top: 0; /* Alinha o pseudo-elemento ao topo */
    left: 0; /* Alinha o pseudo-elemento à esquerda */
    height: 100%; /* Faz o pseudo-elemento ocupar toda a altura */
    width: 0; /* Inicializa a largura como 0 */
    z-index: 1; /* Coloca o pseudo-elemento abaixo dos outros conteúdos */
}

.testimonial-carousel::after {
    position: absolute; /* Posiciona o pseudo-elemento 'after' de forma absoluta */
    content: ""; /* Define o conteúdo como vazio */
    top: 0; /* Alinha o pseudo-elemento ao topo */
    right: 0; /* Alinha o pseudo-elemento à direita */
    height: 100%; /* Faz o pseudo-elemento ocupar toda a altura */
    width: 0; /* Inicializa a largura como 0 */
    z-index: 1; /* Coloca o pseudo-elemento abaixo dos outros conteúdos */
}

/* Ajusta a largura dos pseudo-elementos em telas maiores */
@media (min-width: 768px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px; /* Aumenta a largura para 200px em dispositivos com largura mínima de 768px */
    }
}

@media (min-width: 992px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px; /* Aumenta a largura para 300px em dispositivos com largura mínima de 992px */
    }
}

/* Adiciona transições aos itens do carrossel */
.testimonial-carousel .owl-item .testimonial-item,
.testimonial-carousel .owl-item.center .testimonial-item * {
    transition: .3s; /* Define uma transição suave de 0.3 segundos */
}

/* Altera a cor dos itens do carrossel ao estar no centro */
.testimonial-carousel .owl-item.center .testimonial-item * {
    color: #ffffff !important; /* Define a cor branca para os itens centrais */
}

/* Estilos para os indicadores de página (dots) no carrossel */
.testimonial-carousel .owl-dots {
    margin-top: 24px; /* Adiciona margem superior */
    display: flex; /* Usa flexbox para alinhar os dots */
    align-items: flex-end; /* Alinha os dots no final */
    justify-content: center; /* Centraliza os dots */
}

.testimonial-carousel .owl-dot {
    position: relative; /* Define o posicionamento como relativo para o dot */
    display: inline-block; /* Exibe os dots em linha */
    margin: 0 5px; /* Adiciona espaço entre os dots */
    width: 15px; /* Define o tamanho do dot */
    height: 15px; /* Define o tamanho do dot */
    border: 1px solid #CCCCCC; /* Define a borda dos dots com uma cor cinza clara */
    border-radius: 15px; /* Torna os dots redondos */
    transition: .5s; /* Define uma transição suave de 0.5 segundos */
}

/* Estilo para o dot ativo */
.testimonial-carousel .owl-dot.active {
    background: #c2bba7d7; /* Define o fundo do dot ativo como amarelo */
    border-color: #dad6d3a5; /* Define a borda do dot ativo com uma cor clara */
}

/* Estilo para as estrelas dentro dos testemunhos */
.testimonial-carousel .testimonial-item .stars {
    margin-top: -10px; /* Aproxima as estrelas do nome da cidade */
    margin-bottom: 5px; /* Adiciona margem abaixo das estrelas */
}

/* Estilo para as estrelas fixas dentro dos testemunhos */
.testimonial-carousel .testimonial-item .stars .star-fixed {
    color: #ffc107 !important; /* Define a cor das estrelas como dourada */
    font-size: 16px; /* Define o tamanho das estrelas */
}

/* Flexbox para o carrossel */
.testimonial-carousel {
    display: flex; /* Usa flexbox para o layout do carrossel */
}

/* Estilo para os itens do carrossel */
.testimonial-item {
    display: flex; /* Usa flexbox para organizar o conteúdo do item */
    flex-direction: column; /* Organiza os itens do item na direção vertical */
    justify-content: space-between; /* Espaça os itens dentro do carrossel */
    align-items: center; /* Alinha os itens ao centro */
    min-height: 100%; /* Garante que o item tenha altura mínima de 100% */
    height: auto; /* Permite que a altura do item se ajuste automaticamente */
    border-radius: 10px;
    
   
}

.owl-stage-outer,
.owl-stage,
.owl-item {
    display: flex; /* Usa flexbox para todos esses contêineres */
    align-items: stretch; /* Garante que todos os itens tenham a mesma altura */
}

/* Estilos para os itens do carrossel dentro do owl-item */
.owl-item .testimonial-item {
    flex: 1; /* Faz com que o item ocupe 1 unidade do espaço disponível */
    display: flex; /* Usa flexbox para o conteúdo dentro do item */
    flex-direction: column; /* Organiza os itens dentro do carrossel de forma vertical */
}