/* Estilos para os cards de empresas */
.business-container {
    margin: 15px auto; /* Auto nas margens horizontais centraliza o elemento */
    max-width: 1180px; /* Largura máxima para o container */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Exatamente 3 colunas */
    gap: 15px; /* Espaçamento entre os cards */
}

.business-row {
    display: table !important;
    width: 100% !important;
    margin-bottom: 10px !important;
	border: 1px solid #f9f9f9;    
    border-radius: 8px !important;
}

.business-img {
    display: table-cell !important;
    vertical-align: middle !important;
    width: 90px !important;
    background-color: #fff !important;
    text-align: center !important;
    padding: 10px !important;
}

.business-img img {
   
}

.business-data {
    display: table-cell !important;
    vertical-align: middle !important;    
}

.business-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 0 4px 0 !important;
}

.business-desc {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 0 8px 0 !important;
}

.business-whatsapp {
    display: inline-block !important;
    background-color: #25D366 !important;
    color: white !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    text-align: center !important;
}

.business-whatsapp:hover {
    background-color: #20ba56 !important;
}

.whatsapp-icon {
    width: 16px !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
}

/* Estilo para o container do carrossel */
./* Estilos para o container principal */
.carousel-container {
    position: relative;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0;
    overflow: visible;
}

/* Estilos para os slides */
.banner-slider .slide {
    height: 200px; /* Altura fixa para todos os banners */
    padding: 0 8px;
    box-sizing: border-box;
}

.banner-slider img {
    width: 275px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* PRIMEIRO CARROSSEL - Estilos específicos */
       
       .carousel-container {
            position: relative;
            left: 5px;
        }
        .carousel0 {
            position: relative;
            max-width: 1200px;
            margin: 30px auto;
            padding: 0;
        }
        
        .carousel0 .tns-controls {
            position: absolute;
            top: 42%;
            transform: translateY(-50%);
            width: 104%;
            left: -30px;
            z-index: 10;
            pointer-events: none;
        }
        
        .carousel0 .tns-controls button {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #555;
            pointer-events: auto;
        }
        
        .carousel0 .tns-controls button:hover {
            background: #f5f5f5;
            transform: scale(1.1);
        }
        
        .carousel0 .tns-controls button[data-controls="prev"] {
            left: 5px;
        }
        
        .carousel0 .tns-controls button[data-controls="next"] {
            right: 5px;
        }

       .carousel1 {
            position: relative;
            max-width: 1200px;
            margin: 30px auto;
            padding: 0;
        }
        
        .carousel1 .tns-controls {
            position: absolute;
            top: 42%;
            transform: translateY(-50%);
            width: 104%;
            left: -30px;
            z-index: 10;
            pointer-events: none;
        }
        
        .carousel1 .tns-controls button {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #555;
            pointer-events: auto;
        }
        
        .carousel1 .tns-controls button:hover {
            background: #f5f5f5;
            transform: scale(1.1);
        }
        
        .carousel1 .tns-controls button[data-controls="prev"] {
            left: 5px;
        }
        
        .carousel1 .tns-controls button[data-controls="next"] {
            right: 5px;
        }
        
        /* SEGUNDO CARROSSEL - Estilos específicos */
        .carousel2 {
            position: relative;
            max-width: 1200px;
            margin: 30px auto;
            padding: 0;
        }
        
        .carousel2 .tns-controls {
            position: absolute;
            top: 42%;
            transform: translateY(-50%);
            width: 104%;
            left: -30px;
            z-index: 10;
            pointer-events: none;
        }
        
        .carousel2 .tns-controls button {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #555;
            pointer-events: auto;
        }
        
        .carousel2 .tns-controls button:hover {
            background: #f5f5f5;
            transform: scale(1.1);
        }
        
        .carousel2 .tns-controls button[data-controls="prev"] {
            left: 5px;
        }
        
        .carousel2 .tns-controls button[data-controls="next"] {
            right: 5px;
        }
        
        /* Esconder pontos de navegação */
        .tns-nav {
            display: none;
        }
        
        /* Garantir que os ícones apareçam */
        .tns-controls button i {
            display: inline-block !important;
        }

        /* imoveis========================*/
        .properties-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: flex-start;
        }
        
        .property-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: calc(20% - 12px);
            min-width: 220px;
            position: relative;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
           
        }
        
        .property-image {
            width: 227px;
            height: 140px;
            object-fit: cover;
            display: block;
        }
        
        .property-info {
            padding: 12px;
        }
        
        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .price {
            font-weight: bold;
            font-size: 16px;
            color: #333;
        }
        
        .rent-tag {
            background-color: #162f64;
            color: white;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        .property-content {
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* Permite que o conteúdo cresça */
            height: 100%;
        }
        .property-description {
            font-size: 12px;
            font-weight: bold;
            color: #333;
            line-height: 1.4;
            margin-bottom: 8px;
            flex-grow: 1; /* Isso empurra a localização para baixo */
            padding: 0px 10px;
            position: relative;
            top: -24px;
        }

        .property-description p {
            margin-bottom: 4px;
        }
        .property-description span {
            margin-bottom: 0px;
            font-weight: 500;
            color: #c4c4c4;
        }
        .property-type {
            display: flex;
            align-items: center;
            font-size: 11px;
            color: #666;
            margin-top: auto; /* Isso mantém a localização no fundo */
            margin-bottom: 8px;
            margin-left: 8px;
            padding-bottom: 4px; /* Um pouco de espaço na parte inferior */
        }
        .property-location {
            display: flex;
            align-items: center;
            font-size: 9px;
            color: #666;
            margin-top: auto; /* Isso mantém a localização no fundo */            
            margin-left: 8px;
            padding-bottom: 4px; /* Um pouco de espaço na parte inferior */
        }
        
        .property-location i {
            margin-right: 5px;
            color: #999;
        }
        
       
       #banner_imobiliaria{
            text-align: center;
            margin: 30px auto;
        }
        
       
       /* empregos========*/
/* Estilo para o bloco de empregos */
.jobs-block {
    display: flex;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin: 30px auto;
    max-width: 1180px;
   /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
    overflow: hidden;
}

/* Estilo para a lista de vagas (1/3 do espaço) */
.jobs-list {
    flex: 1;
    padding: 20px;
    background-color: #fff;
}

.jobs-list h2 {
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
    text-align: left;
}

.jobs-list a {
    font-size: 20px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;

}

.jobs-list ul {
    list-style: none;
    padding: 0;
    margin: 0 0px 0 5px;
}

.jobs-list ul li {
    padding: 8px 0;
    font-size: 12px;
    color: #444;
    display: flex;
    align-items: flex-start;
}

.jobs-list ul li a {
    text-decoration: underline;
    font-size: 12px;
    color: #444;
    display: flex;
    align-items: flex-start;
    font-weight: 100;
    margin: 0px;
}


.jobs-list ul li i {
    color: #0066cc;
    margin-right: 8px;
    margin-top: 1px;
}

/* Estilo para o formulário de busca (2/3 do espaço) */
.jobs-search {
    flex: 2; /* Isso faz com que ocupe 2/3 do espaço */
    padding: 20px 30px;
    background-color: #fff;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-container {
    border: 16px solid #162F64; /* Borda duas vezes mais grossa (8px) */
    border-radius: 8px; /* Ajustado para combinar com a borda mais grossa */
    padding: 20px 25px; /* Padding interno ajustado */
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #e0e0e0; /* Sombra interna sutil */
}

.jobs-search h3 {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #0a4b94;
}

.jobs-search p {
    font-size: 13px;
    margin-bottom: 20px;
    color: #666;
}

.search-form {
    width: 100%;
}

.search-row {
    display: flex;
    gap: 0px; /* Aumentado o espaçamento entre os elementos para 20px */
    width: 100%;
    align-items: center;
}

.input-group {
    position: relative;
    flex: 1;
}

.input-group i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.input-group input {
    
    padding: 12px 12px 12px 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    height: 16px; /* Altura fixa para garantir alinhamento */
}

.search-button {
    background-color: #ff3366;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0 25px; /* Aumentado o padding horizontal */
    height: 40px; /* Mesma altura dos inputs */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-width: 160px; /* Largura mínima aumentada */
}
.search-button i {
    margin-right: 8px;
}

.search-button:hover {
    background-color: #e61e4d;
}

/* Responsividade */
@media (max-width: 900px) {
    .search-row {
        flex-direction: column;
    }
    
    .search-button {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .jobs-block {
        flex-direction: column;
    }
    
    .jobs-search {
        width: 100%;
    }
}


/* ai--------------*/

.search-examples-wrapper {
    margin-top: -10px;
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    height: 20px;
    position: relative;
    left: 92px;
}

.search-examples-prefix {
    opacity: 0.9;
    font-style: italic;
}

.search-examples-text {
    font-weight: 500;
    color: #fff;
}

.search-examples-cursor {
    display: inline-block;
    background-color: #fff;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    font-weight: 300;
}



@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ===== SELECT CUSTOMIZADO ===== */
.input-group select {
    flex: 1;
    border: 1px solid #ddd;
    outline: none;
    padding: 12px 40px 12px 30px;
    font-size: 14px;
    background: transparent;
    color: #374151;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Seta customizada */

.input-group.select-group::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #64748b;
    pointer-events: none;
    padding-right: 15px;
    transition: color 0.3s ease;
    position: absolute;
    top: 16px;
    left: 190px;
}

.input-group.select-group:focus-within::after {
    color: #3b82f6;
}

/* Estilo das opções */
.input-group select option {
    padding: 10px;
    background: white;
    color: #374151;
}

.input-group select option:first-child {
    color: #9ca3af;
}

#titulo-imoveis-home{
    
    color: #333;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

#bloco-titulo-imoveis{
    width: 99%;
    margin: 0px 5px 5px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;    
    line-height: 1;
}

#ver-mais-imoveis {
    font-size: 16px;
    color: #444;
    font-weight: bolder;
    position: relative;
    top: 8px;
    text-decoration: underline;
}

#ver-mais-empregos {
    font-size: 16px;
    color: #444;
    font-weight: bolder;    
    text-decoration: underline;
    text-align: center;
    position: relative;
    left: 60px;
    top: 8px;
}