body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .header {
            background-color: #000099;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        .logo {
            max-width: 200px;
            margin: 0 auto;
        }

        

        .container {
            display: flex;
            flex-direction: column;
        }

        .top {
            display: flex;
            justify-content: space-between;
            background-color: #000099;
            color: #fff;
            padding: 20px;
            position: relative; /* Permite adicionar a divisão inclinada */
            overflow: hidden; /* Adiciona overflow para esconder a inclinação */
        }

        .top::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            
        }

        .left-side {
    flex: 1; /* Ocupa 50% da largura */
    padding: 20px;
    background-color: #fff;
    border: 10px solid blue;
    z-index: 2;
}

.right-side {
    flex: 1; /* Ocupa 50% da largura */
    position: relative;
    overflow: hidden;
	max-width: 100%; /* Define a largura máxima como metade da largura do site */
}

        iframe {
            width: 100%;
            height: 100%;
        }

        .apartment-info {
            padding: 20px;
            color: #000; /* Cor do texto em preto */
        }

        .apartment-info h1 {
            font-size: 24px;
        }

        .apartment-info h2 {
            font-size: 18px;
        }

        .info-icons {
            display: flex;
            justify-content: space-between;
            font-size: 20px; /* Aumenta a fonte dos ícones */
        }

        .info-icons i {
            margin-right: 5px;
        }

        .apartment-info .details-button {
            background-color: #000; /* Preto */
            color: #ff0; /* Amarelo */
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s; /* Transições de cor para o hover */
        }

        .apartment-info .details-button:hover {
            background-color: #333; /* Cor mais escura no hover */
            color: #ff0; /* Amarelo no hover */
        }

        .gallery {
            display: flex;
            flex-wrap: wrap; /* Três colunas e três linhas */
            padding: 20px;
            border: 8px solid #eee; /* Adiciona uma borda com sombra */
            border-radius: 10px; /* Borda arredondada */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Efeito de sombreamento cinza */
        }

        .gallery-title {
            font-size: 24px;
            margin-bottom: 20px;
            background-color: #000; /* Fundo preto */
            color: #fff; /* Texto branco */
            padding: 10px; /* Espaçamento interno */
            border-radius: 5px; /* Borda arredondada */
        }

        .gallery-items {
            display: flex;
            flex-wrap: wrap; /* Três colunas e três linhas */
            justify-content: space-between; /* Espaço entre as colunas */
        }

        .gallery-item {
            flex-basis: calc(33.33% - 20px); /* 3 colunas com espaço entre */
            margin-bottom: 20px; /* Espaço entre as linhas */
            position: relative;
            overflow: hidden;
            background-color: #fff; /* Fundo branco para cada quadro */
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Efeito de sombreamento cinza */
        }

        .gallery-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .gallery-item::before {
            content: attr(data-title);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7); /* Transparência */
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            opacity: 0; /* Ocultar inicialmente */
            transition: opacity 0.3s; /* Transição de opacidade para o hover */
        }

        .gallery-item:hover::before {
            opacity: 1; /* Exibir no hover */
        }

        /* Estilos para a segunda galeria */
        .second-gallery {
            margin-top: 20px; /* Espaço entre as galerias */
        }

        /* Estilos para os botões de detalhes nas galerias */
        .details-button {
            background-color: #000; /* Preto */
            color: #ff0; /* Amarelo */
            border: none;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s; /* Transições de cor para o hover */
        }

        .gallery-item:hover .details-button {
            background-color: #333; /* Cor mais escura no hover */
            color: #ff0; /* Amarelo no hover */
        }

        /* Estilos para o rodapé */
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            font-size: 14px;
        }

        /* Estilos para tornar o site responsivo */
        @media screen and (max-width: 600px) {
            .top {
                flex-direction: column;
            }

            .right-side {
                flex: 1;
            }

            iframe {
                height: auto;
            }

            .gallery-item {
                flex-basis: calc(50% - 10px); /* 2 colunas em telas menores */
                margin-right: 10px; /* Espaço entre os itens */
            }
        }
		
.menu {
            background-color: #000; /* Azul Rei */
            text-align: center;
            padding: 10px 0;
        }

        .menu-toggle {
            display: none;
            cursor: pointer;
        }

        .menu-toggle i {
            font-size: 24px;
            color: #fff;
        }

        .menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: #000;
            display: flex; /* Altere para flex para o menu normal ficar ao lado */
            justify-content: center; /* Centralize os itens do menu normal */
            align-items: center; /* Centralize verticalmente os itens do menu normal */
        }

        .menu-list li {
            margin: 0 10px; /* Adicione um espaçamento entre os itens do menu normal */
        }

        .menu-list a {
            text-decoration: none;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            transition: background-color 0.3s;
            padding: 5px 20px; /* Adicione um espaçamento interno nos itens do menu normal */
        }

        .menu-list a:hover {
            background-color: #333; /* Cor mais escura no hover */
        }

        @media screen and (max-width: 600px) {
            .menu-toggle {
                display: block; /* Exibe o ícone de menu em telas menores */
            }

            .menu-list {
                display: none;
                position: relative;
                top: 10px;
                left: 0;
                width: 100%;
                text-align: center;
                background-color: #1e90ff;
                flex-direction: column; /* Altere para coluna para o menu responsivo aparecer abaixo */
            }

            .menu-list.active {
                display: flex; /* Exibe o menu quando estiver ativo */
            }

            .menu-list li {
                margin: 10px 0; /* Adicione um espaçamento vertical entre os itens do menu responsivo */
            }
        }

#rodape {
    background-color: #000099; /* Cor de fundo azul escuro */
    color: #fff; /* Cor do texto branco */
    padding: 30px 0; /* Espaçamento interno superior e inferior */
    margin-top: 30px; /* Espaçamento superior */
    border-top: 2px solid #fff; /* Borda superior branca */
	
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-xs-12.col-sm-3.col-md-3 {
    width: 25%; /* Distribui igualmente em 4 colunas */
    padding: 0 20px; /* Espaçamento lateral entre colunas */
    box-sizing: border-box; /* Inclui padding e borda na largura */
}

.rodape_titulo {
    font-weight: bold;
    margin-bottom: 15px;
}

.acesso_rapido a,
.rodape_telefone,
.copyright {
    color: #fff; /* Cor do texto branco */
    text-decoration: none; /* Remova sublinhado dos links */
    font-size: 14px;
}

.redessociais {
    display: inline-block;
    margin-right: 10px; /* Espaçamento entre as redes sociais */
}

.redessociais a {
    text-decoration: none; /* Remova sublinhado dos links */
}

.redessociais img {
    width: 30px;
    height: 30px;
}

.cadastro_email input[type="text"],
.cadastro_email input[type="email"],
.cadastro_email input[type="submit"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #fff; /* Borda branca */
    border-radius: 5px;
    background-color: transparent; /* Fundo transparente */
    color: #fff; /* Cor do texto branco */
}

.cadastro_email input[type="submit"] {
    background-color: #fff; /* Cor de fundo branca */
    color: #002147; /* Cor do texto azul escuro */
    cursor: pointer;
}

.cadastro_email input[type="submit"]:hover {
    background-color: #002147; /* Cor de fundo azul escuro ao passar o mouse */
    color: #fff; /* Cor do texto branco ao passar o mouse */
}
		
		/* Estilo para o ícone flutuante do WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 20px; /* Ajuste esta propriedade para posicionar o ícone verticalmente */
    right: 20px; /* Ajuste esta propriedade para posicionar o ícone horizontalmente */
    z-index: 1000; /* Certifique-se de que o ícone esteja na parte superior de outros elementos */
}

.whatsapp-float img {
    width: 50px; /* Ajuste o tamanho da imagem conforme necessário */
    height: auto;
    cursor: pointer;
}

/* Estilos para a seção de Vídeos */
.videos {
    background-color: #f5f5f5;
    padding: 50px 0;
}

.videos-title {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
}

.container-video {
    max-width: 1200px;
    margin: 0 auto;
}

.videos-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.video-col {
    flex-basis: calc(50% - 15px); /* Dois vídeos em duas colunas com espaço entre eles */
    margin-bottom: 30px;
}

.video {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 para vídeos */
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Estilos para a seção Nossos Parceiros */
.nossos-parceiros {
  background-color: #fff;
  padding: 50px 0;
}

.container-parceiros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

h2-parceiros {
  font-size: 24px;
  margin-bottom: 30px;
}

.parceiros {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parceiro {
  width: calc(50% - 40px); /* 50% do espaço com 20px de margem à esquerda e à direita */
  height: auto; /* Ajustar altura automaticamente para manter a proporção da imagem */
  background-color: #fff;
  border-radius: 20px; /* Ajuste o valor de borda conforme necessário */
  margin: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out;
}

.parceiro img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%; /* Garante que a imagem ocupe todo o espaço disponível */
}

.parceiro:hover {
  transform: rotate(360deg);
}



.container-fale {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

h2-fale {
    font-size: 24px;
    margin-bottom: 20px;
}

.input-container {
    margin-bottom: 20px;
	margin-right: 20px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button-container {
    text-align: center;
    margin-top: 20px;
}

.fale-conosco {
    background-color: #333; /* Fundo da seção mais escuro */
    padding: 40px;
}

.fale-conosco .container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    background-color: #fff; /* Fundo do quadro branco */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Sombra cinza */
    border-radius: 5px; /* Borda arredondada */
    padding: 20px; /* Espaçamento interno */
}

.fale-conosco h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333; /* Cor do texto da seção */
}

.fale-conosco .input-container {
    margin-bottom: 20px;
    text-align: left;
}

.fale-conosco label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333; /* Cor do texto das etiquetas */
}

.fale-conosco input[type="text"],
.fale-conosco input[type="email"],
.fale-conosco textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.fale-conosco button {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.fale-conosco .button-container {
    text-align: center;
    margin-top: 20px;
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.popup .popup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    position: relative;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Sombra para o popup */
}

.popup .popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

/* Estilize a seção de início do corpo */
.inicio_corpo {
    background-color: #f2f2f2;
    padding: 20px;
}

/* Estilize a seção de sessão padrão */
.sessao_padrao {
    background-color: #fff;
    margin-top: 130px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Estilize o título e subtitulo */
.imoveis_detalhes_titulo {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.imoveis_detalhes_subtitulo {
    font-size: 18px;
    color: #666;
}



/* Estilize as imagens */
.imoveis_detalhes_imagens img {
    max-width: 100%;
    height: auto;
}

/* Estilize o iframe de vídeo */
.imoveis_detalhes_quadro_ico2 iframe {
    width: 100%;
    height: 400px;
}

/* Estilize o bloco de compartilhamento social */
.social1 {
    margin-top: 20px;
}

.social_titulo {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.social-icons1 li {
    display: inline-block;
    margin-right: 10px;
}

.social-icons1 a {
    text-decoration: none;
    font-size: 24px;
    color: #333;
}

.col-md-4 {
  width: 50%;
  float: left;
  box-sizing: border-box;
  padding: 5px;
}

.col-md-12 {
  width: 100%;
  box-sizing: border-box;
}

.text-align-center {
  text-align: center;
}

.padding-top-10 {
  padding-top: 5px;
}

.padding-bottom-10 {
  padding-bottom: 5px;
}

.margin-top-10 {
  margin-top: 5px;
}

.margin-bottom-10 {
  margin-bottom: 5px;
}

.background-color-silver-light {
  background-color: #f2f2f2;
}

.background-color-silver-dark {
  background-color: #e6e6e6;
}

.font-size-12 {
  font-size: 12px;
}

.font-color-silver {
  color: #999999;
}

.font-weight-700 {
  font-weight: 700;
}

.acessibilidade {
  margin: 0;
}

.col-md-4:nth-child(odd) .col-md-12 {
  background-color: #f2f2f2;
}

.col-md-4:nth-child(even) .col-md-12 {
  background-color: #e6e6e6;
}


/* Estilize os detalhes do imóvel */
.imoveis_detalhes_categoria {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.imoveis_detalhes_titulo2 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.imoveis_detalhes_ref {
    font-size: 16px;
    color: #666;
}

.imoveis_detalhes_valor {
    font-size: 24px;
    font-weight: bold;
    color: #f00; /* Cor do valor em vermelho */
}

.imoveis_detalhes_area {
    font-size: 16px;
    color: #333;
}

.imoveis_detalhes_condominio {
    font-size: 16px;
    color: #333;
}

.imoveis_detalhes_dormitorios {
    font-size: 16px;
    color: #333;
}

.imoveis_detalhes_suites {
    font-size: 16px;
    color: #333;
}

.imoveis_detalhes_descricao {
    font-size: 16px;
    color: #333;
    margin-top: 20px;
    line-height: 1.5;
}

/* Estilize os detalhes adicionais */
.font-size-12 {
    font-size: 12px;
}

.font-color-silver {
    color: silver;
}

.font-weight-700 {
    font-weight: 700;
}

.background-color-silver-light {
    background-color: #f2f2f2;
}

.border-radius-5 {
    border-radius: 5px;
}

.padding-10 {
    padding: 10px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.text-align-center {
    text-align: center;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-bottom-10 {
    padding-bottom: 10px;
}
/* Estilos para as miniaturas */
.imoveis_detalhes_imagens_min {
    width: 100px; /* Largura da miniatura */
    height: 100px; /* Altura da miniatura */
    background-size: cover;
    background-position: center;
    margin-right: 10px; /* Espaçamento entre miniaturas */
}

/* Estilo para a imagem principal */
.principal-image {
    width: 50%; /* Garante que a imagem principal ocupe toda a largura */
    height: auto; /* Mantém a proporção da imagem */
}

/* Estilos para o carrossel de miniaturas */
.detalhes_imagens {
    display: flex; /* Exibe as miniaturas em linha */
    overflow-x: auto; /* Permite rolagem horizontal se houver muitas miniaturas */
    scrollbar-width: none; /* Oculta a barra de rolagem (funciona no Firefox) */
    -ms-overflow-style: none; /* Oculta a barra de rolagem (funciona no IE/Edge) */
}

.detalhes_imagens::-webkit-scrollbar {
    display: none; /* Oculta a barra de rolagem no Chrome, Safari e Opera */
}
/* Estilos para o container dos detalhes */
.imoveis_detalhes_container {
    display: flex;
    flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha, se necessário */
}

/* Estilos para o campo inicio_corpo */
.inicio_corpo {
    flex: 1; /* Faz com que o campo ocupe o espaço disponível */
    margin-right: 20px; /* Espaçamento entre o campo inicio_corpo e outros elementos */
}

/* Estilos para o campo imoveis_detalhes_quadro */
.imoveis_detalhes_quadro {
    flex: 1; /* Faz com que o campo ocupe o espaço disponível */
    order: 1; /* Define a ordem do elemento para 1, para colocá-lo no topo direito */
    border: 1px solid #000; /* Adicione uma borda ao campo */
    padding: 10px; /* Adicione um espaçamento interno ao campo, ajuste conforme necessário */
    box-sizing: border-box; /* Garante que a borda esteja incluída no cálculo do tamanho */
    width: 50%; /* Ocupa 50% do espaço disponível */
}
/* Estilos para a imagem principal */
.principal-image {
    width: 100%; /* Garante que a imagem principal ocupe toda a largura disponível */
    height: auto; /* Mantém a proporção da imagem */
}

.imoveis_detalhes_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.imoveis_detalhes_imagens {
    flex: 1;
    width: 50%;
}

.imoveis_detalhes_imagens_min {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espaçamento entre as imagens pequenas */
}

.principal-image {
    width: 100%; /* Para garantir que a imagem principal ocupe toda a largura da área designada */
    max-height: 50vh; /* Define uma altura máxima para a imagem principal */
}

.img-thumbnail {
    max-width: 100%; /* Para garantir que as miniaturas não fiquem maiores do que seu contêiner */
    height: auto;
}

.price-box {
    display: inline-block;
    background-color: green;
    color: white;
    padding: 5px 10px; /* Ajuste o preenchimento conforme necessário */
    border-radius: 5px;
    float: right; /* Posiciona à direita */
    margin-left: 10px; /* Espaço entre o quadrinho e o botão */
}
.description {
    font-size: 16px; /* Tamanho da fonte da descrição */
    margin-top: 10px; /* Espaço acima da descrição */
    color: #333; /* Cor do texto da descrição */
	word-wrap: break-word; /* Quebra as palavras quando não couberem na largura */
}


.price {
    margin: 0;
}