/* caixa4.css - Estilos específicos para a caixa 4 */
.box4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 1s ease-in-out;
}

/* Estilos para o conteúdo de anúncios na Caixa 4 */
.ad-content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

.ad-content p {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    transition: opacity 1s ease-in-out;
}

/* Estilos para o player de vídeo */
.video-container {
    height: 100%;
    width: 100%;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Animações de transição */
.fade-in {
    animation: fadeIn 1s forwards;
}

.fade-out {
    animation: fadeOut 1s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Estilos para a mensagem de erro de vídeo */
.video-error {
    text-align: center;
    color: #d32f2f;
    font-size: 1.2em;
    font-weight: bold;
}
/*
Este arquivo é responsável pela aparência e transições da Caixa 4. Ele gerencia
os estilos para a exibição dos anúncios e dos vídeos, incluindo os efeitos de
fade para uma transição suave entre os conteúdos.
*/