body {
    margin:0;
    font-family:'Poppins', sans-serif;
    background:#111;
    color:#fff;
    text-align:center;
}

.header {
    background: linear-gradient(90deg,#000,#ff0066);
    padding:20px;
}

.logo { width:100px; }

.card {
    background:#1c1c1c;
    margin:20px;
    padding:20px;
    border-radius:15px;
}

.player h2 { color:#ff0066; }

audio { width:100%; }

.agora-box {
    display:flex;
    gap:15px;
    align-items:center;
    justify-content:center;
}

.agora-box img {
    width:80px;
    border-radius:10px;
}

.slider {
    overflow:hidden;
}

.slides {
    display:flex;
    animation: slide 15s infinite;
}

.slides img {
    width:100%;
    max-height:250px;
    object-fit:cover;
}

@keyframes slide {
    0%{transform:translateX(0);}
    33%{transform:translateX(-100%);}
    66%{transform:translateX(-200%);}
}

.chat input, .card input {
    padding:10px;
    margin:5px;
    width:80%;
    border-radius:10px;
    border:none;
}

button {
    padding:10px;
    background:#ff0066;
    border:none;
    color:#fff;
    border-radius:10px;
    cursor:pointer;
}

.whatsapp {
    position:fixed;
    bottom:20px;
    right:20px;
    background:#25d366;
    padding:15px;
    border-radius:50%;
}

#topo {
    position:fixed;
    bottom:20px;
    left:20px;
}

@media(max-width:768px){
    .agora-box { flex-direction:column; }
}