body {
    font-family: 'Roboto', sans-serif;
}

/* Estilos para o logo */
.logo {
    max-width: 150px; /* Ajuste conforme necessário para telas de computador */
    height: auto;
}

/* Estilos para os itens de contato */
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaçamento entre ícone e texto */
}

/* Estilos para os ícones nos itens de contato */
.contact-item i {
    background-color: #f2f2f2; /* Cor de fundo do círculo */
    border-radius: 50%; /* Torna o fundo redondo */
    padding: 14px; /* Espaçamento interno para aumentar o círculo */
    color: #333; /* Cor do ícone */
    font-size: 24px; /* Tamanho do ícone */
}

/* Estilos para links e parágrafos nos itens de contato */
.contact-item a, .contact-item p {
    font-size: 0.9rem; /* Tamanho da fonte */
    color: #606060; /* Cor do texto */
}

/* Estilos para links nos itens de contato */
.contact-item a {
    color: #606060; /* Cor do texto */
    text-decoration: none; /* Remove o sublinhado */
}

/* Efeito hover para links */
.contact-item a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* Estilos para o botão do WhatsApp */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    background-color: #25D366;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    gap: 10px; /* Espaço entre o ícone e o texto */
}

/* Efeito hover para o botão do WhatsApp */
.whatsapp-btn:hover {
    background-color: #128C7E;
    color: white;
}

/* Estilos para links na navbar */
.navbar-nav .nav-link {
    color: white; /* Cor do texto */
}

/* Efeito hover e active para links na navbar */
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: #2d67aa; /* Cor ao passar o mouse e para o link ativo */
}

/* Alterar a cor do ícone do navbar-toggler */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Ajustes para dispositivos móveis */
@media (max-width: 991px) {
    /* Estilos para o logotipo em dispositivos móveis */
    .logo {
        max-width: 100px; /* Tamanho reduzido do logotipo */
    }

    /* Estilos para o botão de três pontinhos */
    #topo-toggle {
        position: absolute;
        right: 10px;
        top: 10px; /* Ajuste conforme necessário */
    }

    /* Estilos para o dropdown */
    #dropdown-mobile {
        position: absolute;
        right: 10px;
        top: 50px; /* Ajuste conforme a altura do botão de três pontinhos */
    }

    /* Ocultar os elementos do topo em dispositivos móveis */
    .topo-elements {
        display: none;
    }
}

/* Ajustes para telas de computador */
@media (min-width: 992px) {
    /* Estilos para os elementos do topo */
    .topo-elements {
        display: block; /* Visível em telas maiores */
    }
}

/* Classe para exibir elementos em dispositivos móveis */
.d-block {
    display: block;
}

/* Estilos para o dropdown em dispositivos móveis */
#dropdown-mobile {
    position: absolute;
    right: 10px;
    top: 50px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    z-index: 1000;
}

/* Estilos para os itens de contato no dropdown */
#dropdown-mobile .contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 0;
}

/* Estilos para o carousel */
.carousel {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
    -moz-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
}

.carousel-item {
    transition: transform 1s ease, opacity 1s ease; /* Transição suave */
}

.carousel-fullheight,
.carousel-fullheight .carousel-inner,
.carousel-fullheight .carousel-item,
.carousel-fullheight img {
    height: 100vh;
    min-height: 300px;
    background-position: center center;
    background-size: cover;
}

.carousel-fullheight img {
    width: auto;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.carousel-caption {
    left: 0;
    right: 0;
    top: 30%; /* Ajusta a posição para mais acima */
    text-align: left; /* Alinhamento à esquerda para telas grandes */
    padding-left: 15%; /* Espaçamento à esquerda */
    padding-right: 15%; /* Espaçamento à direita */
    color: #11345C; /* Cor principal do texto */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* Sombra no texto para melhorar a legibilidade */
}

.carousel-caption h5 {
    font-size: 5rem; /* Tamanho maior do título */
    font-weight: bold; /* Fonte mais chamativa */
    color: #79110F; /* Cor secundária para o título */
}

.carousel-caption p {
    font-size: 2.5rem; /* Tamanho ligeiramente maior do subtítulo */
    color: #ffffff; /* Cor do subtítulo */
}

/* Ajustes para telas menores (dispositivos móveis) */
@media (max-width: 768px) {
    .carousel-caption {
        text-align: center; /* Centraliza o texto em dispositivos móveis */
        top: 20%; /* Ajusta a posição para mais acima em dispositivos móveis */
        padding-left: 10%; /* Menor espaçamento à esquerda */
        padding-right: 10%; /* Menor espaçamento à direita */
    }
}



/* ------------------------
----------------------
    ------------------------
        
SECTION SOBRE */
.sobre-section {
    padding: 50px 0;
    background-color: #f8f8f8; /* Cor de fundo da seção */
}

.titulo-sobre {
    font-size: 3rem; /* Tamanho grande e chamativo */
    color: #11345C; /* Cor do título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
    font-weight: bold; /* Fonte mais chamativa */
}

.separador {
    width: 50px; /* Largura do separador */
    height: 4px; /* Altura do separador */
    background-color: #79110F; /* Cor do separador */
    margin: 0 auto 20px; /* Centralizado e com espaço abaixo */
}

.subtitulo-sobre {
    font-size: 1.5rem; /* Tamanho do subtítulo */
    color: #606060; /* Cor do subtítulo */
    margin-bottom: 30px; /* Espaçamento abaixo do subtítulo */
}

.descricao-sobre {
    text-align: justify; /* Justifica o texto */
    font-size: 1rem; /* Ajusta o tamanho da fonte, se necessário */
    color: #606060; /* Cor do texto */
    line-height: 1.4; /* Ajusta o espaçamento entre as linhas */
    margin-bottom: 20px; /* Espaço na parte inferior, se necessário */
}

/* Ajustes para uma visualização mais harmoniosa em dispositivos móveis */
@media (max-width: 768px) {
    .descricao-sobre {
        text-align: justify; /* Em telas pequenas, o texto justificado pode ser difícil de ler */
    }
}

/* Adicione estilos para responsividade se necessário */
@media (max-width: 768px) {
    .titulo-sobre,
    .subtitulo-sobre {
        font-size: 2rem; /* Tamanho ajustado para dispositivos móveis */
    }
}

.sobre-section img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 15px; /* Borda arredondada */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    
}

.sobre-section img:hover {
    transform: scale(1.05); /* Aumenta ligeiramente o tamanho */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    opacity: 0.9; /* Reduz ligeiramente a opacidade ao passar o mouse */
}


/* ------------------------
   SECTION IMOVEIS
------------------------ */

.imoveis-section {
    padding: 50px 0;
    background-color: #e8e8e8;
}

.titulo-imoveis {
    font-size: 2.5rem;
    color: #11345C;
    margin-bottom: 15px;
}

.separador {
    width: 50px;
    height: 4px;
    background-color: #79110F;
    margin: 0 auto 20px;
}

.subtitulo-imoveis {
    font-size: 1.5rem;
    color: #606060;
    margin-bottom: 30px;
}

.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.03);
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-imovel {
    display: none; /* Inicia escondido */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn-detalhes{
    background-color: #11345C;
    color: #ffffff;
}

.btn-detalhes:hover {
    background-color: #1a4568;
    color: white;
}


/* ------------------------
   SECTION detalhes IMOVEIS
------------------------ */

.detalhes-imovel-section {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.titulo-detalhes, .subtitulo-detalhes {
    margin-bottom: 15px;
}

.separador {
    width: 50px;
    height: 4px;
    background-color: #11345C;
    margin: 0 auto 20px;
}

.galeria-fotos a {
    width: 150px;
    height: 150px;
    overflow: hidden;
    margin: 5px;
}

.galeria-fotos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mapa-imovel {
    height: 300px; /* Ajuste conforme necessário */
    /* Estilos adicionais para o mapa */
}

.btn-compartilhar {
    background-color: #4CAF50; /* Verde, ou qualquer outra cor que prefira */
    color: white;
    padding: 10px 15px;
    margin-right: 10px; /* Espaço entre os botões */
    border: none;
    border-radius: 5px;
    font-size: 1rem;
}

.btn-compartilhar:hover {
    background-color: #2a612c;
    color: white;
}

.btn-fechar-detalhes{
    margin-top: 10px;
    background-color: #11345C;
    color: #ffffff;
    border-radius: 50%;
    padding: 10px 15px;
    font-size: 1.5rem;
    line-height: 1;
    border: none;
}

.btn-fechar-detalhes:hover{
    background-color: #0d2f4b;
}





/* ------------------------
----------------------
    ------------------------
        
SECTION INSTAGRAM */


.instagram-section {
    padding: 50px 0;
    background-color: #11345C; /* Fundo escuro */
    color: #ffffff; /* Texto branco para contraste */
}

.instagram-section .titulo-imoveis {
    color: #ffffff; /* Título em branco */
    margin-bottom: 15px; /* Espaçamento abaixo do título */
}

.instagram-section .separador {
    width: 50px;
    height: 4px;
    background-color: #79110F; /* Cor do separador */
    margin: 0 auto 20px; /* Centralizado e com espaço abaixo */
}

.instagram-section .subtitulo-imoveis {
    color: #ffffff; /* Subtítulo em branco */
    margin-bottom: 30px; /* Espaçamento abaixo do subtítulo */
}

/* ------------------------
----------------------
    ------------------------
        
SECTION CONTATO */

.contato-section {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.contato-card {
    background-color: #e8e8e8; /* Cor clara para o card de contato */
    color: #333; /* Cor escura para o texto */
    height: 100%; /* Garante que todos os cards tenham a mesma altura */
}

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.contato-card .card-title {
    color: #11345C;
    margin-bottom: 15px;
}

.btn-whatsapp {
    background-color: #25D366;
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
}

.btn-whatsapp:hover {
    background-color: #128C7E;
    color: white;
}

.map-container iframe {
    width: 100%;
    height: 100%; /* Ajuste para preencher todo o card */
}

/* Garantindo que os cards tenham a mesma altura */
@media (min-width: 768px) {
    .contato-section .row {
        display: flex;
        flex-wrap: wrap;
    }

    .contato-section .card {
        height: 100%; /* Sincroniza a altura dos cards */
    }
}

.map-container {
    width: 100%;
    height: 100%; /* Define a altura para 100% do container */
    overflow: hidden; /* Impede que o mapa ultrapasse os limites do container */
}

.map-container iframe {
    width: 100%;
    height: 100%; /* Garante que o iframe preencha o container */
    border: none;
}

/* Certifique-se de que o card tem altura definida */
.contato-section .card {
    height: 400px; /* Defina uma altura fixa ou conforme necessário */
}

/* Ajuste para quando os cards estão lado a lado */
@media (min-width: 768px) {
    .contato-section .row {
        display: flex;
    }

    .contato-section .card {
        height: 100%; /* Os cards se ajustam para ter a mesma altura */
    }
}

/* ------------------------
----------------------
    ------------------------
        
SECTION FOOTER */

.footer-section {
    background-color: #11345C; /* Fundo escuro */
    color: #ffffff; /* Texto branco */
    padding: 20px 0;
}

.footer-section a {
    color: #ffffff;
    margin: 0 10px;
    font-size: 1.2rem;
}

.footer-section a:hover {
    color: #e8e8e8;
}

.footer-section hr {
    border-top: 1px solid #ffffff;
    width: 90%;
    margin: 20px auto;
}

.footer-logo{
    height: 120px;
    margin: 0px 0;
    background-color: #ffffff; /* Background branco */
    border-radius: 10%; /* Torna o background em forma de círculo */
    padding: 0px; /* Espaçamento ao redor do logotipo */
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho total */
}
.footer-secondary-logo {
    height: 50px; /* Ajuste conforme necessário */
    margin: 10px 0;
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    .footer-section .row,
    .footer-section .col-md-6 {
        text-align: center;
        display: block;
    }

    .footer-section .col-md-6 {
        margin-bottom: 15px;
    }

    .footer-section a {
        display: inline-block; /* Para centralizar os ícones */
    }
}


/* ------------------------
----------------------
    ------------------------
        
outros */


.btn-topo {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #11345C;
    color: #ffffff;
    padding: 10px;
    border-radius: 30%;
    text-align: center;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1000; /* Garante que o botão fique sobre outros elementos */
    display: none; /* Esconde o botão inicialmente */
}

.btn-topo:hover {
    background-color: #0d2f4b;
}