/* =====================================================
   SLOWSCANTV HOME PAGE STYLE
===================================================== */


/* =====================================================
   GLOBAL
===================================================== */

* {
    box-sizing:border-box;
}


body {

    margin:0;
    padding:0;

    background:#080808;

    color:#ddd;

    font-family:Arial, Helvetica, sans-serif;

}


a {

    color:#00ff55;

    text-decoration:none;

}


a:hover {

    text-decoration:underline;

}





/* =====================================================
   HOME CONTAINER
===================================================== */


.home-page {

    max-width:1400px;

    margin:0 auto;

    padding:20px;

    text-align:center;

}







/* =====================================================
   HEADER
===================================================== */

.banner {
    width: 100%;
    text-align: center;
    padding: 10px 0;
}

.banner img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* =====================================================
   UTC CLOCK
===================================================== */


.utc {

    text-align:center;

    color:#aaa;

    margin:15px 0 20px;

}







/* =====================================================
   MENU
===================================================== */


.menu {

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:30px;

}



.menu-btn {

    background:#111;

    border:1px solid #333;

    padding:12px 25px;

    border-radius:10px;

    color:#00ff55;

    font-size:18px;

}



.menu-btn:hover {

    background:#222;

}







/* =====================================================
   BAND FILTER
===================================================== */


.filters {

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:25px auto;

}



.filters button {

    background:#111;

    color:#00ff55;

    border:1px solid #333;

    padding:12px 20px;

    min-width:80px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

}



.filters button:hover,
.filters button.active {

    background:#00ff55;

    color:#000;

}







/* =====================================================
   ONLINE STATISTICS
===================================================== */


.stats {

    text-align:center;

    margin:20px auto 30px;

    font-size:18px;

    color:#ddd;

}







/* =====================================================
   STATION GRID
===================================================== */


.grid {

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:15px;

}







/* =====================================================
   STATION CARD
===================================================== */


.card {

    background:#111;

    border:1px solid #333;

    border-radius:12px;

    overflow:hidden;

    text-align:center;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}



.card:hover {

    transform:scale(1.03);

    z-index:10;

    box-shadow:0 0 20px rgba(0,255,85,0.35);

}



.card img {

    width:100%;

    height:auto;

    display:block;

}







.card .top {

    padding:15px;

}



.card .call {

    font-size:22px;

    font-weight:bold;

    color:#00ff55;

}



.card .meta {

    color:#aaa;

    margin-top:5px;

}







.card .info {

    padding:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

}







/* =====================================================
   ONLINE STATUS DOT
===================================================== */


.dot {

    width:12px;

    height:12px;

    border-radius:50%;

    display:inline-block;

}



.dot.live {

    background:#00ff55;

}



.dot.offline {

    background:#ff3333;

}







/* =====================================================
   FOOTER
===================================================== */


.footer {

    text-align:center;

    margin:40px auto 20px;

    color:#888;

}







/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1100px){


.grid {

    grid-template-columns:repeat(3,1fr);

}


}





@media(max-width:700px){


.menu {

    flex-direction:column;

    align-items:center;

}


.menu-btn {

    width:90%;

}


.grid {

    grid-template-columns:repeat(2,1fr);

}


}






@media(max-width:450px){


.grid {

    grid-template-columns:1fr;

}


}