.navbar {
      display: flex;
      background-color: #103c6a;
      /* Cor de fundo do menu */
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      height: 90px;
      /* Definindo altura da barra de menu */
      position: relative;
      z-index: 2;
      /* Mantém o menu sobre o iframe */
    }



    .navbar a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      text-align: center;
    }

    .navbar a:hover {
      background-color: #103c6a;
      color: gold;
      ;
    }

    .menu-items {
      display: flex;
      gap: 10px;
    }

    /* Espaço para logo */
    .logo {
      height: 90%;
      display: flex;
      align-items: center;
      padding-left: 10px;
    }

    .logo img {
      height: 100%;
      /* Logo da mesma altura que a barra de menu */
    }

    /* Deixa a barra de rolagem transparente */
    ::-webkit-scrollbar {
      width: 0px;
      /* Oculta a barra de rolagem vertical */
      height: 0px;
      /* Oculta a barra de rolagem horizontal */
    }



    /* Isso impede que a barra de rolagem seja visível, mas ainda permite a rolagem */



    /* Responsividade para celular */
    .hamburger {
      display: none;
      cursor: pointer;
      font-size: 30px;
      color: white;
      position: fixed;
      top: 20px;
      right: 10px;
      z-index: 3;
      /* Fica acima do conteúdo e do iframe */
    }

    @media (max-width: 600px) {
      .menu-items {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #103c6a;
        position: absolute;
        top: 75px;
        left: 0;
        z-index: 2;
        /* Coloca o menu sobre o iframe */
      }

      .navbar {
        flex-direction: column;
      }

      .hamburger {
        display: block;
      }

      .menu-items.active {
        display: flex;
      }
    }

    /* Estilos para o corpo e iframe */
    .content {
      padding: 0;
      margin: 0;
      position: relative;
      z-index: 1;
      /* Iframe atrás do menu */
    }


    iframe {
      width: 100%;
      height: 800px;
      border: none;
      overflow: auto;
      /* Esconde o scroll */
    }

    /* Estilos para Safari */
    .ios-scroll-wrapper {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      height: 800px;
      /* Ajuste conforme necessário */
    }

    /* Estilos para iframe responsivo */
    .ios-scroll-wrapper iframe {
      width: 100%;
      min-width: 300px;
      max-width: 100%;
      height: 100%;
      border: none;
      padding: 1px;
      box-sizing: border-box;
      /* Certifica que o padding não altera a largura */
    }


    .btn-search {
        background-color: #FAE82C;
        color: #103c6a;
        transition: background-color 0.3s ease;
        border-radius: 30px;
        padding: 10px 20px;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
      }

      .btn-search:hover {
        background-color: #ffcc00;
        color: #103c6a;
        transition: background-color 0.3s ease;
      }

      .one_quarter {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
      }

      /* Estilo para versões mobile */
      @media (max-width: 768px) {
        .one_quarter {
          width: 100%;
          justify-content: center;
          /* Centraliza horizontalmente */
        }

        .btn-search {
          width: auto;
          /* Ajusta o tamanho do botão para ficar adequado */
        }
      }

      .btn-search2 {
        background-color: #8bc334;
        color: #FFFFFF;

      }

      .btn-search2:hover {
        background-color: #FAE82C;
        color: #103c6a;
        transition: background-color 0.3s ease;
        /* Animação opcional */
      }

      .sitemap {
        max-width: 600px;
        margin: 20px auto;
    }
    ul {
        list-style-type: none;
        padding-left: 20px;
    }
    li {
        margin: 5px 0;
    }
    a {
        text-decoration: none;
        color: #002a4d;
        
    }
    a:hover {
        text-decoration: #103c6a;
    }

    .image-container {
      background-image: url('/images/seja-bem-vindo-a-recife.webp');
  }
  @media (max-width: 1024px) {
      .image-container {
          background-image: url('/images/seja-bem-vindo-a-recife.webp');
      }
  }
  @media (max-width: 768px) {
      .image-container {
          background-image: url('/images/seja-bem-vindo-a-recife.webp');
      }
  }