/* ===========================
   RADIO ONLINE
   style.css
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0b0f1a;
    color:#fff;
    overflow-x:hidden;
}

.background{
    position:fixed;
    inset:0;
    background:radial-gradient(circle at top,#0d5bd3 0%,#121826 45%,#05070d 100%);
    z-index:-2;
}

.background::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:40px 40px;
    animation:grid 20s linear infinite;
}

@keyframes grid{
    from{transform:translateY(0);}
    to{transform:translateY(40px);}
}

header{
    width:100%;
    position:sticky;
    top:0;
    background:#0d1320;
    border-bottom:2px solid #3BA7FF;
    z-index:999;
}

.top{
    max-width:1300px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;
}

.logo{display:flex;align-items:center;gap:15px;}
.logo img{width:70px;}
.logo h1{color:#4FC3F7;font-size:32px;}

nav ul{display:flex;list-style:none;}
nav li{position:relative;}
nav a{color:#fff;text-decoration:none;display:block;padding:16px 20px;transition:.3s;}
nav a:hover{color:#FF5A5A;}

.dropdown ul{
    display:none;
    position:absolute;
    background:#162235;
    min-width:220px;
    border:1px solid #3BA7FF;
    border-radius:8px;
    overflow:hidden;
}
.dropdown:hover ul{display:block;}
.dropdown ul a{padding:14px;}

.hero{
    min-height:90vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
}
.hero h2{font-size:65px;}
.hero h3{margin-top:15px;color:#4FC3F7;font-weight:400;}

.listen{
    margin-top:50px;
    display:inline-block;
    background:#FF3B3B;
    color:#fff;
    text-decoration:none;
    padding:18px 45px;
    border-radius:40px;
    font-size:20px;
    font-weight:bold;
    transition:.3s;
}
.listen:hover{transform:translateY(-4px);box-shadow:0 0 30px #FF3B3B;}

.player{max-width:1200px;margin:80px auto;padding:30px;}
.player h2{margin-bottom:30px;color:#4FC3F7;}
.radio-box{background:#162235;border:1px solid #24446c;border-radius:20px;padding:35px;}
audio{width:100%;}

.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:25px;}
.meta div{background:#1d2f4a;border-radius:12px;padding:20px;text-align:center;}
.meta span{display:block;color:#a0a0a0;}
.meta strong{color:#FF5A5A;font-size:20px;}

section{padding:90px 20px;}
section h2{text-align:center;margin-bottom:50px;font-size:40px;color:#4FC3F7;}

.about{max-width:1200px;margin:auto;display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:center;}
.about .text{line-height:1.8;font-size:18px;}
.about .icon{text-align:center;font-size:180px;color:#FF3B3B;}

.cards,.people,.grid{max-width:1200px;margin:auto;display:grid;}
.cards{grid-template-columns:repeat(3,1fr);gap:30px;}
.people{grid-template-columns:repeat(3,1fr);gap:35px;}
.grid{grid-template-columns:repeat(3,1fr);gap:20px;}

.cards article{background:#162235;border-radius:18px;padding:30px;transition:.3s;}
.cards article:hover{transform:translateY(-10px);border:1px solid #3BA7FF;}

.person{text-align:center;}
.person img{width:220px;height:220px;object-fit:cover;border-radius:50%;border:4px solid #FF3B3B;}
.person h3{margin-top:20px;}

.grid img{width:100%;border-radius:15px;transition:.4s;}
.grid img:hover{transform:scale(1.05);}

.buttons{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;}
.buttons a{text-decoration:none;color:#fff;background:#FF3B3B;padding:18px 35px;border-radius:35px;font-weight:bold;transition:.3s;}
.buttons a:hover{box-shadow:0 0 20px #FF3B3B;}

footer{padding:30px;text-align:center;background:#0b1018;border-top:1px solid #1e3552;color:#0f5db3;}

.partners{height:100vh;overflow:hidden;position:relative;background:radial-gradient(circle at top,#19324d,#08111f 70%);}
.partners h2{position:absolute;top:30px;width:100%;text-align:center;font-size:42px;z-index:50;}
.fall-area{position:relative;width:100%;height:100%;}
.banner{position:absolute;width:468px;height:60px;border-radius:14px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.45);animation:fall linear infinite;transition:filter .3s;}
.banner img{width:100%;height:100%;object-fit:cover;display:block;}
.banner:hover{filter:brightness(1.1);z-index:100;}

.b1{left:5%;animation-duration:18s;animation-delay:-8s;}
.b2{left:40%;animation-duration:14s;animation-delay:-4s;}
.b3{left:70%;animation-duration:20s;animation-delay:-11s;}
.b4{left:15%;animation-duration:16s;animation-delay:-2s;}
.b5{left:55%;animation-duration:22s;animation-delay:-14s;}
.b6{left:78%;animation-duration:17s;animation-delay:-7s;}
.b7{left:28%;animation-duration:19s;animation-delay:-10s;}
.b8{left:60%;animation-duration:15s;animation-delay:-5s;}

@keyframes fall{
0%{transform:translateY(-180px) rotate(-8deg);}
25%{transform:translate(30px,30vh) rotate(5deg);}
50%{transform:translate(-40px,60vh) rotate(-6deg);}
75%{transform:translate(20px,85vh) rotate(4deg);}
100%{transform:translateY(120vh) rotate(-3deg);}
}

@media(max-width:1000px){
.cards,.people,.grid,.about,.meta{grid-template-columns:1fr;}
.top{flex-direction:column;gap:20px;}
.nav ul{flex-direction:column;width:100%;}
.hero h2{font-size:42px;}
.about .icon{font-size:120px;}
}

@media(max-width:768px){
.banner{width:90%;height:auto;left:5%!important;}
}

@media(max-width:600px){
.hero{padding:50px 20px;}
.hero h2{font-size:34px;}
.hero h3{font-size:18px;}
.listen{width:100%;text-align:center;}
.logo h1{font-size:24px;}
}