body {
  font-family: "Carter One", system-ui;
  font-weight: 400;
  font-style: normal;
}

    :root {
      --bg-dark: #1B1B1B;
      --highlight-red: #344238;
      --highlight-yellow: #F9D423;
      --jungle-green: #4A5D23;
      --light-gray: #EAEAEA;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body, html {
      height: 100%;
      font-family: 'Arial', sans-serif;
      background-color: var(--bg-dark);
      color: var(--light-gray);
    }

        .banner {
      position: relative;
      background: url('../imgs/LUIZ.jpg') no-repeat top center;
      background-size: cover;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 2; /* Proporção da imagem */
      box-shadow: inset 0px 0px 50px 30px rgba(0, 0, 0, 0.5);
    }

    .banner::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px; /* Mais alto para o fade mais visível */
      background: linear-gradient(to bottom, rgba(27, 27, 27, 0) 0%, rgba(27, 27, 27, 0.6) 60%, var(--bg-dark) 100%);
      pointer-events: none;
      z-index: 1;
    }

    @media (max-width: 768px) {
      .banner {
        height: 100vh;
        aspect-ratio: unset;
        background-position: center center;
        background-size: cover;
      }

    }

    .scroll-indicator {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2.5rem;
        color: var(--light-gray);
        opacity: 0.9;
        animation: bounce 1.5s infinite;
        transition: opacity 0.3s ease;
        z-index: 999;
      }

        @keyframes bounce {
          0%, 100% { transform: translateX(-50%) translateY(0); }
          50% { transform: translateX(-50%) translateY(-10px); }
        }

        .scroll-indicator.hidden {
          opacity: 0;
          pointer-events: none;
        }

section{
    background-color: #374d2e;
    border: #ffd727 solid 4px;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Sombra na parte inferior */
}

h1, h2, h3 {
    /*fnt-family: "font", cursive;*/
    font-weight: 700;  
}

p, label, input, button {
    /*family: "Comfortaa", cursive;*/
    font-weight: 500;
    font-style: normal
}



/* Estilo para os cards de recado */
.card-columns .card {
    margin-bottom: 1rem;
    border-radius: 8px;
}

.btn-verde-personalizado {
    background-color: #cec32b; /* cor verde personalizada */
    color: rgb(0, 0, 0); /* cor do texto */
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); /* Sombra na parte inferior */
}
.btn-verde-personalizado:hover {
    background-color: #778000; /* cor do botão ao passar o mouse */
    color: rgb(255, 255, 255); /* cor do texto */
}

.btn-vermelho-personalizado {
    background-color: #db6969; /* cor verde personalizada */
    color: rgb(0, 0, 0); /* cor do texto */
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); /* Sombra na parte inferior */
}
.btn-vermelho-personalizado:hover {
    background-color: #b94b4b; /* cor do botão ao passar o mouse */
    color: rgb(255, 199, 199); /* cor do texto */
}

.card{
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3); /* Sombra na parte inferior */
}
.card-title{
    color: #e2e2e2; /* cor do texto */
}

.card-text{
    color:  #014700; /* cor do texto */
}

.overlay-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza a imagem */
    height: auto; /* Limita a altura ao tamanho do container */
    width: auto; /* Limita a largura ao mesmo tamanho da altura do container */
    max-height: 100%; /* Limita a altura ao tamanho do container */
    max-width: 95%; /* Limita a largura ao mesmo tamanho da altura do container */
    pointer-events: none; /* Permite que o conteúdo embaixo seja clicável */
    opacity: 1; /* Controle a transparência da imagem sobreposta */
}

.modal-body {
    max-height: 90vh;
    overflow-y: auto; /* Adiciona rolagem se necessário */
}

.custom-bg {
    background-color: #00a841; /* Cor de fundo desejada */
    background: linear-gradient(90deg, rgb(3, 151, 1) 0%, rgb(19, 202, 62) 48%, rgb(3, 151, 1) 100%);
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.3); /* Sombra na parte inferior */
}

.navbar-nav .nav-link {
    color: rgb(255, 255, 255)!important; /* Cor do texto dos links */
    background-color: rgba(7, 163, 1, 0.87);
    font: 1.2em sans-serif;
    border: #04830a solid 2px;
    border-radius: 15px;
    margin: 6px;
    padding: 4px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); /* Sombra na parte inferior */
    text-align: center;
}

.navbar-nav .nav-link:hover {
    color: rgb(174, 255, 178)!important; /* Cor do texto dos links */
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3); /* Sombra na parte inferior */
}

.iframe-container {
    width: 100%;
    max-width: 800px; /* Ajuste a largura máxima desejada */
    aspect-ratio: 16/9; /* Mantém a proporção do vídeo */
    margin: 0 auto; /* Centraliza o mapa na tela */
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.my_footer{
    background-color: #505050e8 !important;
    border-top: #fa1515 4px solid;
}

.my_btn{
  background-color: rgba(0, 0, 0, 0.1) !important;
  border: 0px !important;
  opacity: 0;
}

#modalNaoIr .modal-content, #modalConfirmar .modal-content {
  background-color:  #4A5D23;
  color: #fdfdfd;
  border: 2px solid #b7c402;
  box-shadow: 0 0
}