/* Aplicando a fonte Montserrat em todo o site */
body {
    font-family: 'Montserrat', sans-serif;
}

a{
    text-decoration: none;
}

/* Navbar */
.custom-navbar {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100px;
    padding: 15px;
    z-index: 1000;
    position: relative;
}

/* Logotipo */
.custom-navbar .navbar-brand img {
    height: 70px; /* Altura padrão */
    width: auto; /* Mantém a proporção da imagem */
    max-width: 100%; /* A imagem não ultrapassa a largura do contêiner */
    margin-bottom: 10px;
}

/* Responsividade para telas menores */
@media (max-width: 1024px) {
    .custom-navbar .navbar-brand img {
        height: 60px;
        /* Reduz a altura para telas médias */
    }
}

@media (max-width: 768px) {
    .custom-navbar .navbar-brand img {
        height: 50px;
        /* Reduz a altura para tablets */
    }
}

@media (max-width: 480px) {
    .custom-navbar .navbar-brand img {
        height: 40px;
        /* Reduz a altura para dispositivos móveis */
    }
}

/* Links da navegação */
.custom-navbar .nav-link {
    padding: 0 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    line-height: 100px;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
    /* Impede a quebra de linha */
}

/* Responsividade: Ajustes para telas menores */
@media (max-width: 1440px) {
    .custom-navbar .nav-link {
        font-weight: 600;
        font-size: 0.7rem;
        /* Diminui o tamanho da fonte em telas menores */
        line-height: normal;
        padding: 10px 8px;
        white-space: nowrap;
        /* Impede a quebra de linha */
    }

    .custom-navbar .dropdown-item {
        font-size: 0.7rem;
        padding: 10px 20px;
    }

    /* Garantir que os itens de navegação se ajustem sem overflow */
    .custom-navbar .navbar-nav {
        display: flex;
        flex-wrap: wrap;
        /* Permite que os itens se ajustem */
        justify-content: center;
        /* Alinha os itens ao centro */
        gap: 10px;
        /* Adiciona espaçamento entre os itens */
    }
}

/* Prevent navbar content from overflowing */
@media (max-width: 991.98px) {
    .custom-navbar .navbar-collapse {
        background-color: #EAEFF2 !important;
        padding: 10px 15px;
        margin-top: 25px;
        width: 100%;
        overflow: hidden;
    }
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link:focus {
    color: #701324;
    font-weight: 600;
    
}

@media (max-width: 991.98px) {
    .custom-navbar .navbar-collapse {
        background-color: #e5e9ec !important;
        padding: 10px 15px;
        margin-top: 25px;
        width: 100%;
    }
}

/* fim navbar */


/* Estilos do botão AGENDAR */
.btn-agendar {
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 10px 20px; /* Adiciona algum espaçamento interno ao botão */
    text-decoration: none; /* Remove sublinhado do link */
    display: inline-block; /* Garante que o botão tenha apenas o tamanho necessário para seu conteúdo */
    font-size: 16px; /* Define um tamanho de fonte adequado */
    border-radius: 0px; /* Adiciona bordas arredondadas */
    transition: all 0.3s ease; /* Transição suave para hover */
    border-radius: 0px;
}

.btn-agendar:hover {
    border: 2px solid #ffffff;
    border-radius: 0px;
    color: #7C1324;
    background-color: #ffffff;
}

.btn-itinerante{
    border: 2px solid #000000;
    color: #000000 !important;
    padding: 10px 20px; /* Adiciona algum espaçamento interno ao botão */
    text-decoration: none; /* Remove sublinhado do link */
    display: inline-block; /* Garante que o botão tenha apenas o tamanho necessário para seu conteúdo */
    font-size: 16px; /* Define um tamanho de fonte adequado */
    border-radius: 0px; /* Adiciona bordas arredondadas */
    transition: all 0.3s ease; /* Transição suave para hover */
    border-radius: 0px;
    
}

.btn-itinerante:hover{
    border: 2px solid #000000;
    border-radius: 0px;
    color: #ffffff !important;
    background-color: #000000;
}


.hero-section {
    background-image: url(../img/bg-hero.png);
    background-size: cover;      /* A imagem vai cobrir toda a área da seção */
    background-position: center; /* A imagem vai ser centralizada */
    background-repeat: no-repeat; /* A imagem não será repetida */
    color: white;
    padding: 100px 0;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}



.hero-section .row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    width: 100%; /* Garante que a row ocupe toda a largura */
}

.hero-section h2 {
    margin-top: 20px; /* Adiciona um espaço entre a imagem e o título */
    margin-bottom: 20px; /* Adiciona um espaço entre o título e o botão */
}
/* fim do hero */

/* Estilização da Seção de Impacto com Imagem de Fundo */
.impact-section {
    background-color: #701324;
    /*background-image: url('../img/bg-hero.png'); /* Substitua pelo caminho da sua imagem */
    background-size: cover;
    background-position: center;
    color: #fff; /* Texto branco para contraste */
    padding: 80px 0; /* Distância acima e abaixo do conteúdo */
    text-align: center; /* Centraliza o texto */
}

.impact-text {
    font-size: 2.5rem; /* Tamanho maior para a frase */
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto para maior legibilidade */
}


/* balcao shop */
.shopping {
    width: 100%;
    height: 600px;
    background: url('../img/bg-hero2.png') no-repeat center center;
    background-size: cover;
}

.row {
    height: 100%; /* Para garantir que a altura da row ocupe toda a altura do container */
}

.col-sm-6 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Garantir que a coluna ocupe toda a altura */
}

.img-fluid {
    max-width: 100%;
    height: auto;
}
/* fim balcao shop */



/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;  /* Botão menor */
    height: 50px;  /* Botão menor */
    background-color: #ffffff;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7C1324;
    font-size: 16px;  /* Diminui o tamanho do ícone */
    text-align: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;  /* Inicialmente oculto */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Exibir o botão quando rolar para baixo 100px */
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* Para o ícone da seta */
.back-to-top i {
    pointer-events: none;
    z-index: 1;  /* Coloca a seta sobre o SVG */
}

/* Estilo do SVG (círculo de preload) */
.circle-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);  /* Começar a animação no topo */
}

/* Estilo do círculo */
.circle-svg circle {
    stroke-dasharray: 282.6; /* Circunferência do círculo (2 * PI * 45) */
    stroke-dashoffset: 282.6; /* Inicia com a borda "invisível" */
    transition: stroke-dashoffset 0.3s ease; /* Suaviza o preenchimento da borda */
}

/* Função para o efeito de borda progressiva com base no scroll */
@keyframes fill-border {
    0% {
        stroke-dashoffset: 282.6;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* FIM Back to Top */

/* Sobre */
/* Estilização geral do container */
.container-completo {
    display: flex;
    width: 100%; /* Largura total */
    height: auto; /* Altura fixa de 600px */
    background-color: #e5e9ec;
}



/* Coluna da esquerda */
.coluna-esquerda {
    flex: 1; /* Ocupa 50% da largura do container */
    height: 100%; /* Ocupa toda a altura */
    position: relative; /* Necessário para a imagem preencher a coluna */
}

.coluna-esquerda img {
    width: 100%; /* A imagem ocupa 100% da largura da coluna */
    height: 100%; /* A imagem ocupa 100% da altura da coluna */
    object-fit: cover; /* Faz a imagem cobrir toda a área da coluna sem distorcer */
}

/* Coluna da direita */
.coluna-direita {
    flex: 1; /* Ocupa 50% da largura do container */
    display: flex;
    justify-content: flex-start; /* Alinha o conteúdo à esquerda */
    align-items: center; /* Alinha o conteúdo verticalmente no centro */
    padding-left: 40px;
    padding-top: 50px;
    height: 100%; /* Altura completa */
}

/* Conteúdo da coluna direita */
.conteudo {
    max-width: 600px; /* Define um limite de largura para o conteúdo */
    text-align: left; /* Alinha o texto à esquerda */
}

.conteudo h2 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-align: left;  /* Alinha o título à esquerda */
}

/* Ajusta o carrossel para dispositivos menores */
@media (max-width: 768px) {
    .conteudo h2 {
        font-size: 2em;
        font-weight: 900;
    }
}

@media (max-width: 576px) {
    .conteudo h2{
        font-size: 2em;
font-weight: 900;
    }
}

.conteudo p {
    font-size: 1rem;
    line-height: 1.2;
    color: #333;
}

/* Responsividade */
@media (max-width: 768px) {
    .container-completo {
        flex-direction: column; /* Para telas menores, as colunas se tornam empilhadas */
        height: auto; /* Permite que a altura seja ajustada conforme o conteúdo */
    }

    .coluna-esquerda, .coluna-direita {
        flex: none;
        width: 100%; /* Cada coluna ocupa 100% da largura na versão móvel */
        height: auto; /* Altura adaptável no celular */
    }

    .conteudo {
        padding: 15px;
    }
}

/* fim sobre */


/* Serviço */
.service-section{
width: 100%;
height: auto;
padding: 50px;
background-color: #e5e9ec;

}

.service-section h2 {
margin-bottom: 20px;  /* Espaço abaixo do título */
font-size: 4em;
font-weight: 900 !important;
text-align: left;  /* Alinha o título à esquerda */
}

/* Ajusta o carrossel para dispositivos menores */
@media (max-width: 768px) {
    .service-section h2 {
        font-size: 2em;
        font-weight: 900;
    }
}

@media (max-width: 576px) {
    .service-section h2{
        font-size: 2em;
font-weight: 900;
    }
}


.esq1{
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
}

.dir1{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.dir1 img{
max-width: 100%;
height: auto;
}

/* fim serviço */

/* ativação */
/* Estilização para a seção */
.cta-section {
    background-color: #7C1324; /* Fundo com a cor especificada */
    color: white; /* Texto em branco */
    padding: 40px 0; /* Espaçamento interno (topo e fundo) */
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cta-section h2 {
    font-size: 2.5rem; /* Tamanho do título */
    font-weight: 900; /* Fonte bem pesada (extrabold) */
    margin-bottom: 20px; /* Espaço abaixo do título */
}

.cta-section p {
    font-size: 1.25rem; /* Tamanho da fonte do parágrafo */
    margin-bottom: 30px; /* Espaço abaixo do parágrafo */
}

.cta-section .btn-agendar {
    background-color: transparent !important; /* Cor do fundo do botão */
    color: #ffffff; /* Texto do botão em vermelho escuro */
    padding: 15px 30px; /* Padding do botão */
    font-size: 1.2rem; /* Tamanho da fonte do botão */
    text-transform: uppercase; /* Letras maiúsculas no botão */
    border-radius: 0px; /* Bordas arredondadas */
    text-decoration: none; /* Retira o sublinhado */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave para hover */
}

/* Efeito de hover para o botão */
.cta-section .btn-agendar:hover {
    background-color: #ffffff !important; /* Fundo vermelho escuro */
    color: #701324; /* Texto branco */
    cursor: pointer; /* Muda o cursor para mãozinha */
}

/* fim da ativação */

/* Galeria */
.gallery-section {
    padding: 40px 0; /* Padding para separar a galeria das outras seções */
    background-color: transparent !important; /* Cor de fundo clara para a seção da galeria */
}

.gallery-section h2{
    font-size: 2em;
    font-weight: 900;
}

.gallery-section .row {
    margin: 0;
}

.gallery-section .col-12 {
    padding: 10px;
}

.img-thumbnail {
    border: 2px solid #ffffff;
    border-radius: 0px; /* Bordas arredondadas nas imagens */
    transition: transform 0.3s ease; /* Transição suave para o efeito de zoom */
}

.img-thumbnail:hover {
    transform: scale(1.1); /* Efeito de zoom na miniatura ao passar o mouse */
}

/* Estilização do Modal */
.modal-content {
    background-color: transparent !important; /* Fundo transparente */
    border: none; /* Remove a borda do modal */
    box-shadow: none; /* Remove sombra */
    border-radius: 0px; /* Remove as bordas arredondadas no modal */
}

.modal-header {
    border: none; /* Remove a borda do cabeçalho */
}

.modal-body {
    padding: 0; /* Remove o padding extra */
    text-align: center; /* Centraliza a imagem dentro do modal */
}

.modal-body img {
    max-width: 100%; /* Garantir que a imagem ocupe toda a largura do modal */
    border-radius: 0px; /* Remove as bordas arredondadas na imagem */
}

.btn-close {
    position: absolute; /* Para que o botão de fechar fique no canto superior direito */
    top: 10px; /* Distância do topo */
    right: 10px; /* Distância da direita */
    background: transparent; /* Fundo transparente para o botão */
    border: none; /* Remove a borda do botão */
    color: #fff; /* Cor do ícone do botão */
    font-size: 2rem; /* Aumenta o tamanho do ícone de fechar */
}

.btn-close:hover {
    color: #ddd; /* Cor mais clara no hover do botão */
}

/* Escurecer o fundo quando o modal for aberto */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.9);
    /* Cor preta com 90% de opacidade */
}

/* Se desejar que o fundo escureça mais ou menos, basta ajustar o valor da opacidade */
.modal-backdrop.fade {
    opacity: 0.8;
    /* Opacidade do fundo, altere para 0.5, 0.7, ou outro valor conforme necessário */
}

/* Caso queira um efeito mais suave na transição de abertura do modal */
.modal-backdrop.show {
    transition: opacity 0.3s ease-in-out;
}

/* Se quiser ajustar o comportamento do modal de forma mais personalizada, como cor de fundo ou borda */
.modal-content {
    background-color: transparent !important;
    /* Fundo transparente */
    border: none;
    /* Remove a borda do modal */
    box-shadow: none;
    /* Remove a sombra */
    border-radius: 0px;
    /* Remove as bordas arredondadas no modal */
}

/* Estilização da imagem dentro do modal */
.modal-body img {
    max-width: 100%;
    /* Garantir que a imagem ocupe toda a largura do modal */
    border-radius: 0px;
    /* Remove as bordas arredondadas na imagem */
}

/* Fim Galeria */