/* CSS for banner.html */

.banner-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #04898e; /* Cor de fundo azul claro */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}

.banner-img {
    width: 100%;
    height: 400px; /* Altura padrão para o banner com imagem (desktop) */
    background-image: url('../image/banner_festa_235.jpg');
    background-size: cover; /* Cobre todo o espaço do contêiner */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Não repetir a imagem */
}

.banner-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 2rem 1rem; /* Espaçamento interno para criar altura */
}

.dots-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: radial-gradient(white 1px, transparent 1px);
    background-size: 15px 15px;
    opacity: 0.4;
}

.banner-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3;
}

.title-line {
    display: flex;
    align-items: baseline; /* Alinha pela base do texto */
    justify-content: center;
    gap: 0.5em; /* Espaço entre os elementos */
    flex-wrap: wrap; /* Permite quebrar a linha em telas pequenas */
}

.number {
    font-size: clamp(2.5em, 6vw, 4em);
    font-weight: 900;
    color: #00BFFF; /* Azul claro */
    font-family: 'Bebas Neue', sans-serif;
    line-height: 1;
    align-self: stretch;
}

.text-top {
    font-size: clamp(1.5em, 4vw, 2.5em);
    font-weight: 700;
    color: #FFD700; /* Amarelo */
    background: rgb(241 35 110);
    padding: 0.1em 0.5em;
}

.text-main {
    font-size: clamp(4em, 15vw, 8em);
    font-weight: 900;
    color: #FFD700; /* Amarelo */
    font-family: 'Bebas Neue', sans-serif;
    line-height: 1;
    text-shadow: 3px 3px 0 #333;
}

.location {
    font-size: clamp(0.9em, 4vw, 1.2em);
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    border-bottom: 2px solid #FF1493; /* Rosa */
    padding-bottom: 5px;
    margin-top: 15px;
}

/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    .banner-img {
        height: 150px; /* Altura reduzida para telas menores */
    }
}