:root {
    --amarelo: #feb719;
    --laranja: #e16e13;
    --marrom: #a8521a;
    --verde: #719056;
    --amarelo-claro: #fcf4b8;
    --primary-800: #272753;
    --primary-900: #191933;
    --primary-700: #373768;
    --secondary-100: #FDF1D6;
    --secondary-300: #FAE3AD;
    --secondary-900: #FAB722;
    --neutral-100: #FEFEFE;
}

.navbar .logo {
    height: 30px;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--primary-900);
    color: #ffffff;
    font-family: Arial, sans-serif;
}

.card {
    background-color: var(--primary-800);
    color: #ffffff;
}

.header, .footer {
    padding: 10px 0;
}

    .header h1 {
        margin: 0;
        font-size: 2em;
        color: #f1c40f;
    }

    .header p {
        margin: 5px 0;
        font-size: 1.2em;
    }

.section-title {
    text-align: center;
    font-size: 2em;
    color: white;
}

.section-subtitle {
    text-align: center;
    font-size: 1.5em;
    color: white;
}

.highlight-section {
    background-color: #f1c40f;
    color: #1a252f;
    border-radius: 5px;
}

    .highlight-section h3 {
        margin: 0;
        font-size: 1.2em;
    }

    .highlight-section p {
        margin: 5px 0 0;
        font-size: 0.9em;
    }

.espera-list {
    display: flex;
    flex-flow: column;
    gap: 10px;
}

.espera {
    background-color: var(--secondary-900);
    display: flex;
    align-items: center;
    border-radius: 6px;
    overflow: hidden;
}

.espera-icon {
    background-color: var(--secondary-300);
    text-align: center;
}

    .espera-icon img {
        width: 80px;
        height: 80px;
    }

.espera-text {
    padding: 1em;
    font-weight: 500;
    color: black;
    font-size: 1.2em;
}

.atracao-list {
    display: flex;
    flex-flow: column;
    gap: 1em;
}

.atracao {
    display: flex;
    align-items: center;
}

    .atracao .imagem {
        flex-shrink: 0; /* Impede que a imagem encolha */
    }

    .atracao img {
        width: 115px;
        height: 150px;
        object-fit:cover;
        border-radius: 5px;
    }

    .atracao .texto {
        margin-left: 1em;
    }

        .atracao .texto .title {
            color: var(--secondary-900);
            font-size: 22px;
        }

        .atracao .texto .subtitle {
        }

.inscreva-se {
    background-color: var(--secondary-900);
    color: #1a252f;
    padding: 1.5em 1em;
}

    .inscreva-se .btn {
        padding: 0.75em 1em;
    }

    .inscreva-se .btn-individual {
        background-color: var(--primary-800);
        color: white;
    }

    .inscreva-se .btn-casal {
        background-color: var(--neutral-100);
    }

    .inscreva-se .section-title {
        color: black;
    }

.footer {
    background-color: #8b4513;
    color: #ffffff;
}

.header {
    background-color: #191933;
}

.bg-secondary-300 {
    background-color: var(--secondary-300);
}

.text-secondary-900 {
    color: var(--secondary-900);
}

.image-section {
    display: flex;
    gap: 0.5em;
}

.image-section img {
    height:205px;
    object-fit: cover;
}

.form-control,
.form-select {
    background-color: var(--primary-900);
    color: white;
}

.banner-inscricao-individual,
.banner-inscricao-casal {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: var(--primary-800);
}

.banner-inscricao-individual {
    background-image: url("../img/banner-inscricao-individual.png");
}

.hero-banner {
    background-image: url("../img/banner2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 140px;
}

.banner-inscricao-casal {
    background-image: url("../img/banner-inscricao-casal.png");
}

.btn-neutral-100 {
    background-color: var(--neutral-100);
}

.navbar-nav .nav-item {
    padding: 0.3em 1em;
    background-color: var(--neutral-100);
}

.nav-item:hover {
    background-color: var(--secondary-100);
}

.nav-link {
    color: var(--primary-700);
}


.nav-banner {
    background-color: #1a252f; /* Cor escura para combinar com o tema */
    font-size: 0.9rem;
}
.song-title {
    font-style: italic;
}



/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .banner-inscricao-individual,
    .banner-inscricao-casal {
        height: 394px;
    }

    .espera-list {
        flex-flow: row;
    }

    .espera {
        flex-direction: column;
        width: 226px;
        align-items: stretch;
    }

    .espera-icon {
        width: auto; /* Deixa a imagem ocupar o centro, sem forçar largura */
    }

    .espera-text {
        width: 100%; /* Garante que o texto ocupe toda a linha */
        text-align: center; /* Opcional: centraliza o texto */
    }

    .atracao-list {
        flex-flow: row;
        justify-content: center;
    }

    .section-title {
        text-align: left;
    }

    .atracao {
        flex-flow: column;
        align-items: stretch;
        width: 290px;
        flex: 0 1 auto;
        height: auto;
    }

        .atracao .imagem img {
            width: 290px;
            height: 378px;
        }

        .atracao .texto {
            margin-top:1em;
            margin-left:0;
            text-align: center;
        }

    .navbar-nav .nav-item {
        background: none;
        padding: 0;
    }

    .nav-link {
        color: var(--neutral-100);
    }

    .nav-link-text {
        display: none;
    }

    .hero-banner {
        height: 394px;
    }

    .image-section img {
        height: 285px;
        object-fit: cover;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
}

    .animate-marquee:hover {
        animation-play-state: paused;
    }