/*  Define o container principal do banner da página.  */

.banner {
    height: 59vh;
    background-image: url("../assets/icons/BannerDemon.png");
    background-position: center;
    background-size: 100%; /* aumenta a escala da imagem */
    background-repeat: no-repeat; /* evita repetição */
    margin-top: 40px;
}

/*   Container interno que centraliza e organiza o conteúdo dentro do banner.    */

.banner__container {
    max-width: 75rem;
    margin: 0 auto;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}



/* ========================= MEDIA QUERIES ========================= */

/* Tela até 1200px: ajusta banner e texto para telas médias */
@media screen and (max-width: 1200px) {
    .banner {
        height: 30vh;          /* reduz altura do banner */
        padding-left: 10vw;    /* adiciona espaçamento à esquerda */
    }

    .banner__titulo {
        font-size: 3rem;       /* reduz tamanho da fonte */
        line-height: 1.2em;
        width: 60%;            /* aumenta largura para melhor leitura */
    }

    .banner__titulo-destaque {
        font-size: 3rem;
    }
}

/* Tela até 730px: ajusta banner e texto para celulares */
@media screen and (max-width: 730px) {
    .banner {
        height: 25vh;          /* banner ainda menor em telas pequenas */
        padding-left: 5vw;
    }

    .banner__titulo {
        font-size: 2rem;       /* texto menor para caber na tela */
        line-height: 1.2em;
    }

    .banner__titulo-destaque {
        font-size: 2rem;
    }
}