@media (min-width:992px) {
    .stations .round, .stations .owl-carousel .owl-item img {
        display: block;
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 50%;
    }
    .bg-img .container {
        top: 64px;
        position: relative;
        font-size: 30px;
    }
    .carousel-caption p {
        font-size: 35px;
        line-height: 1;
    }
    small {
        font-size: .7em;
    }

}
.text-normal .nav-link {
    color: #ffffff;
}
@media (max-width: 768px) {
    .cap{
        font-family: "Proxima Nova Extra Condensed Black",Impact,"Roboto Condensed","Arial Narrow",sans-serif !important;
        font-size: calc(1.5rem + 2.85vw);
        line-height: .9;
        text-align: center;
    }
    .dropdown .dropdown-menu {
        position: inherit !important;
    }
   .d-md-none.d-s-none, .d-s-none{
        display: none !important;
    }
    .top .card-img-overlay {
        padding-bottom: 0;
        text-align: center;
        background: linear-gradient(180deg,transparent,#0000008f,#000000bf,#000000d4,#000000);
    }
    .toggle-container {
        top: 8px ;
        right: 12px;
    }
    .main-post img {
        height: auto !important;
    }
    .title {
        font-size: 2em;
    }
    small {
        font-size: .67em;
    }
    .nav-link {
        font-size: 40px;
        line-height: 37px;
    }
    .top-posts
    .main-post img {
        min-height: 400px !important;
        height: auto;
    }
    .fs-30.nav-link {
        font-size: 23px;
        text-shadow: none;
        padding: 0 0 0 8px;
    }
    .bottom-posts .cat {
        left: 35%;
    }
    .logo {
        height: 65px;
    }
    .cat:before {
        left: -0.4px;
        margin-top: 17px;
    }
    .videos
    .main-post img {
        height: 300px;
    }
    .videos {
        height: auto;
    }
    .right-posts .cat {
        top: -15px;
        left: .;
        margin: auto;
    }
    .right-posts .h80 .cat {
        top: -20px;
        left: 37%;
    }
    .more {
        left: 34%;
    }
    .d-s-none{
        display: none;
    }
    .h310 img {
        height: 300px;
        object-fit: cover;
        object-position: top;
    }
    h5 {
        font-size: 17px;
    }
    .bg-img img {
        height: 20vh;
    }
    .carousel-caption {
        top: 20px;
        padding: 35px 1rem;
    }
    .hero .live {
        right: 30px;
    }
    .reveal  {
        position: relative;
        transform: translateY(30px);
        opacity: .8;
        transition: .9s all ease-in-out;
      }
    .h300 img {
        height: 225px;
        object-fit: cover;
        object-position: top;
    }
    .h170 img {
        height: 135px;
    }
    .card-img-overlay {
        padding: 0.5rem;
        background: linear-gradient(180deg,transparent,#00000073,#000000a1,#000000c9,#000000d4);
    }
    .h170 .owl-carousel .owl-nav button.owl-prev,
    .h170  .owl-carousel .owl-nav button.owl-next {
        top: 100px ;
    }
    .h200 img {
        height: 170px;
    }
    .time {
        top: 145px;
    }
    .item h5 {
        margin-top: 10px;
        font-size: 16px !important;
        font-weight: 600;
        color: #41464b;
    }
    .play i {
        top: 100px;
        font-size: 32px;
    }
    .owl-carousel .owl-nav {
        display: none !important;
    }
    .owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next {
        top: 120px;
        display: none !important;
    }
    .card-text .float-end,
    .card-text:last-child {
        display: block;
        margin-bottom: 0.125rem;
        line-height: 1.3;
        color: #818080;
        font-family: Cousine,"Liberation Mono","Roboto Mono",Monaco,"Lucida Console",monospace;
        text-transform: uppercase;
        font-size: 3.0vw;
    }
    .bell {
        top: 108px;
    }
    .live {
        position: absolute;
        top: 8px;
        border-radius: 12px;
        right: 8px;
        padding: 0 4px;
    }
    .main-post img, .h400 img {
        aspect-ratio: auto;
        object-fit: cover;
        object-position: top;
    }
    .carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover,.carousel-control-next, .carousel-control-prev {
        color: #000;
        text-decoration: none;
        outline: 0;
        opacity: .9;
        height: 30px;
        padding: 4px;
        background: #686868ba;
        width: 30px;
        margin: 10px;
        border-radius: 30px;
    }
    h2 {
        font-size: 20px;
        text-transform: uppercase;
        text-align: center;
    }
    .top img {
        height: auto;
    }

    .top .card-title b,
    .col-md .card-title b {
        font-family: "Proxima Nova Extra Condensed Black",Impact,"Roboto Condensed","Arial Narrow",sans-serif !important;
        font-size: calc(1.625rem + 3.9vw);
        line-height: .9;
        text-align: center !important;
        display: block;
        text-transform: uppercase;
    }
.top .card-title .smaller,
.col-md .card-title .smaller {
        display: block;
        text-align: center;
        margin: 0;
        font-weight: 400;
        font-size: calc(1.425rem + 1.825vw);
        line-height: 1;
        font-family: "Proxima Nova Extra Condensed Black",Impact,"Roboto Condensed","Arial Narrow",sans-serif !important;
    }
    .text-normal.nav-item {
        padding: 0 7px;
    }
    .h400 .overlay i {
        top: 8%;
        left: 74%;
    }
    .cat {
        text-wrap: nowrap;
            margin-bottom: 1.25vw;
            padding: 0.125rem 0.75rem 0.0625rem 0.625rem;
            font-family: ProximaNovaExCn_Black,Impact,"Roboto Condensed","Arial Narrow",sans-serif;
            font-weight: 400;
            font-style: italic;
            line-height: 1.25;
            text-transform: uppercase;
            color: #fff;
            background-color: #cf0000;
            font-size: 4.75vw;
        }
    .topic img {
        height: auto;
        max-height: 100px;
    }
    .nav-link {
        color: inherit !important;
        text-shadow: none;
    }
}




/* mode toggle */

body {
    transition: background-color 0.5s ease;
}

.light-mode {
    background-color: #ffffff;
    color: #000000;
}
.light-mode
.navbar{
    background: rgb(255, 255, 255);
 }
.dark-mode {
    background-color: #ffffff;
    color: #000000;
}
.dark-mode .fa-play {
    color: #f7f7f7;
}
.toggle-container {
    position: fixed;
    top: 20px;
    right: 20px;
}

.mode-toggle {
    display: none;
}

.toggle-label {
    width: 40px;
    height: 20px;
    background-color: #ccc;
    display: block;
    position: relative;
    cursor: pointer;
    border-radius: 20px;
}

.toggle-label:before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.mode-toggle:checked + .toggle-label {
    background-color: #4caf50;
}

.mode-toggle:checked + .toggle-label:before {
    transform: translateX(20px);
}.right-posts
a,
.title-3{

    color: inherit;
}.right-posts
a:hover,
.title-3:hover{

    color: #31b2c3;
}

.border-0:last-child
.border-bottom{
    border: none !important;
    margin: 0 !important;
}

.card-text.text-muted, .card-text.text-muted span, .justify-content-between small {
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: normal;
    font-style: italic;
    line-height: 32px;
    text-transform: uppercase;
    text-align: left;
    padding-bottom: 0.375rem;
    font-family: "Source Sans Pro",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
@media only screen and (max-width: 576px) {
    .top img,
    .main-post img {
        width: 100%;
        height: 370px;
        object-fit: cover;
    }
}