/* Ajuste de altura do banner */
#layerslider {
    height: 70vh; /* 70% da altura da viewport */
    max-height: 800px; /* Altura máxima */
    min-height: 550px; /* Altura mínima */
    overflow: hidden; /* Evitar overflow de conteúdo */
    position: relative; /* Garante que o banner respeite o fluxo do layout */
    z-index: 1; /* Garante que não sobreponha outros conteúdos */
}

/* Imagem de fundo responsiva */
.carousel-item img {
    width: 100%; /* Ocupa toda a largura */
    height: 100%; /* Ocupa toda a altura do container */
    object-fit: cover; /* Garante que a imagem se ajuste sem distorção */
}

/* Centralizar conteúdo */
.carousel-caption {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background-color: rgba(0, 0, 0, 0.5); */
    color: white;
    padding: 20px;
    width: 60%;
    text-align: center;
    z-index: 2;
}

/* Estilos de texto */
.text-box h2 {
    font-weight: bolder;
    font-size: 3rem;
    color: #494949;
}

.btn_style__secondary {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 15px 25px;
}

/* Responsividade */
@media (max-width: 1199px) {
    #layerslider {
        height: 60vh; /* Reduz altura em telas médias */
    }
}

@media (max-width: 991px) {
    #layerslider {
        height: 50vh; /* Altura menor para telas menores */
    }

    .text-box h2 {
        font-size: 2rem;
    }
}

@media (max-width: 880px) {
    .text-box h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    #layerslider {
        height: 40vh;
    }

    .text-box h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 499px) {
    #layerslider {
        height: 30vh;
        min-height: 100px;
    }
}

@media (max-width: 380px) {
       #layerslider {
        height: 26vh;
        min-height: 100px;
    }

    .text-box h2 {
        font-size: 1.1rem;
    }
}

@media (max-width: 320px) {
    #layerslider {
        height: 22vh;
        min-height: 100px;
    }
}