/* Ajustes customizados para o Instituto Sertões */

/* Aumentar espaçamento entre colunas do banner */
.ns-banner-wrap-3 .row {
    gap: 30px;
}

/* Ajustar largura da coluna de texto para evitar sobreposição */
.ns-banner-area-3 .col-xl-6:first-child {
    flex: 0 0 55%;
    max-width: 55%;
}

/* Ajustar largura da coluna da imagem */
.ns-banner-area-3 .col-xl-6:last-child {
    flex: 0 0 40%;
    max-width: 40%;
}

/* Garantir que a imagem não sobreponha o texto */
.ns-banner-3-img-1 {
    position: relative;
    z-index: 1;
    margin-left: auto;
}

/* Ajustar título do banner para não quebrar */
.ns-banner-content-title {
    margin-right: 20px;
    font-size: 80px; /* Dobro do tamanho original (~40px) */
    line-height: 1.1;
}

/* Aumentar o texto da descrição */
.ns-banner-content p {
    font-size: 20px;
    line-height: 1.5;
}

/* Ajuste responsivo para o título */
@media (max-width: 991px) {
    .ns-banner-content-title {
        font-size: 50px;
    }
}
@media (max-width: 767px) {
    .ns-banner-content-title {
        font-size: 40px;
    }
}

/* Responsivo - manter layout original em telas menores */
@media (max-width: 1199px) {
    .ns-banner-area-3 .col-xl-6:first-child,
    .ns-banner-area-3 .col-xl-6:last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Ajuste de altura do banner para telas menores */
@media (max-width: 767px) {
    .ns-banner-area-3 {
        height: 500px; /* Altura fixa para mobile */
    }
}

/* AJUSTE CRÍTICO: Borda, Preenchimento da Imagem e Remoção do Texto Sobreposto */

/* 1. Borda: Aplicar a borda no container principal e garantir que o overflow esconda o que estiver fora */
.ns-banner-3-img-1 {
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    height: 450px; /* Altura reduzida para diminuir o tamanho do quadrado */
    width: 450px; /* Largura igual à altura para manter proporção quadrada */
    border: 5px solid var(--clr-theme-primary); /* Borda laranja/amarela aplicada aqui */
}

/* 2. Preenchimento da Imagem: Garantir que o swiper e as imagens preencham o container */
.ns-banner-3-img-1 .swiper-wrapper,
.ns-banner-3-img-1 .swiper-slide {
    height: 100%;
}

.ns-banner-3-img-1 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Garante que a imagem preencha o slide sem distorcer */
}

/* 3. Remoção do Texto Sobreposto: Removido - estava ocultando o swiper-wrapper */

/* Ajuste para o banner wrap para garantir que o flexbox funcione corretamente */
.ns-banner-wrap-3 {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Ajuste para o single banner para garantir que ocupe a altura total da seção */
.ns-banner-single-3 {
    height: 100%;
}

/* Ajuste para a seção do banner para garantir altura total da viewport */
.ns-banner-area-3 {
    height: 100vh;
    min-height: 700px; /* Altura mínima para desktop */
}