:root{
    --lime:#4be000;
    --pink:#e43aa1;
    --black:#000;
    --muted:#cfcfcf;
    --white:#ffffff;
    --radius-lg:26px;
    --max-width: 1200px;
    --nav-gap: 40px;
    --ease: cubic-bezier(.2,.9,.2,1);
  }

  /* Reset-ish */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{min-height:100vh;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:var(--black);color:var(--white)}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* TOP lime strip */
  .top-strip{
    background:var(--lime);color:#000;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;font-weight:800;
    font-size:14px;
  }
  .top-strip .left, .top-strip .right{display:flex;align-items:center;gap:12px}
  .lang-badge{background:transparent;padding:6px 10px;border-radius:2px}
  .contact-badge{display:flex;align-items:center;gap:8px;padding:6px 10px}

  /* Header */
  .header-row {
    max-width:var(--max-width);
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    gap:12px;
  }
  .brand-header{
    background:var(--black);
    padding:18px;
    border-bottom:4px solid var(--black);
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:var(--max-width);
    margin:0 auto;
    gap:18px;
  }
  .brand-left{display:flex;align-items:center;gap:18px}
  .logo-wrap img{height:56px;display:block}
  .brand-right{display:flex;align-items:center;gap:14px}
  .social-icons{display:flex;gap:10px;align-items:center}
  .social-icon{
    width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    border:2px solid var(--lime);background:#000;color:var(--lime);font-weight:800;font-size:16px;
  }
  .social-icon svg{width:18px;height:18px;display:block}
  .listen-btn{
    background:var(--lime);color:#000;padding:10px 18px;border-radius:20px;font-weight:800;border:none;
  }

  /* Toggle button (hamburger) */
  .menu-toggle{
    width:54px;height:54px;border-radius:12px;border:none;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display:inline-grid;place-items:center;cursor:pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6), inset 0 -2px 0 rgba(255,255,255,0.015);
    transition:transform .25s var(--ease), box-shadow .2s var(--ease);
    outline:transparent;
  }
  .menu-toggle:active{transform:translateY(1px)}
  .menu-toggle:focus{box-shadow:0 0 0 4px rgba(75,224,0,0.12)}

  /* icon lines */
  .hamburger{
    width:22px;height:16px;position:relative;display:inline-block;
  }
  .hamburger span{
    position:absolute;left:0;right:0;height:2px;background:var(--lime);display:block;border-radius:2px;
    transition:transform .32s var(--ease), opacity .2s var(--ease), top .32s var(--ease);
  }
  .hamburger span:nth-child(1){top:0}
  .hamburger span:nth-child(2){top:7px}
  .hamburger span:nth-child(3){top:14px}

  /* transform to X when open */
  .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1){ transform: translateY(7px) rotate(45deg); top:7px; }
  .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2){ opacity:0; transform:scale(0.9); }
  .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); top:7px; }

  /* slide-out panel + overlay */
  .menu-overlay{
    position:fixed;inset:0;z-index:1200;pointer-events:none;opacity:0;transition:opacity .32s var(--ease);
    background:rgba(0,0,0,0.45);
  }
  .menu-overlay.visible{pointer-events:auto;opacity:1}

  .side-panel{
    position:fixed;top:0;right:0;height:100vh;width:80%;max-width:420px;background:rgba(0,0,0,0.95);z-index:1250;
    transform:translateX(110%);transition:transform .4s var(--ease);box-shadow:-12px 0 30px rgba(0,0,0,0.6);
    padding:28px 20px;display:flex;flex-direction:column;gap:18px;
    border-left:1px solid rgba(255,255,255,0.03);
    -webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);
  }
  .side-panel.open{transform:translateX(0)}

  /* close row */
  .panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .panel-title{font-weight:800;font-size:18px;color:var(--lime)}
  .panel-close{
    width:44px;height:44px;border-radius:10px;border:none;background:transparent;color:var(--lime);font-size:20px;
    display:inline-grid;place-items:center;cursor:pointer;
  }

  /* panel nav links */
  .panel-nav{display:flex;flex-direction:column;gap:10px;margin-top:8px}
  .panel-nav a{
    display:block;padding:14px 16px;border-radius:12px;font-weight:800;background:transparent;color:#fff;
    text-decoration:none;font-size:18px;
  }
  .panel-nav a:hover{background:rgba(255,255,255,0.03)}
  .panel-cta{margin-top:auto;padding-top:10px}
  .panel-cta .listen-btn{display:block;width:100%;text-align:center;font-size:16px;padding:14px;border-radius:12px}

  /* Social row inside panel */
  .panel-social{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
  }
  .panel-social .social-icon-panel{
    width:48px;height:48px;display:inline-grid;place-items:center;border-radius:10px;background:transparent;border:1px solid rgba(255,255,255,0.04);
    cursor:pointer;transition:transform .18s var(--ease), background .18s var(--ease);
  }
  .panel-social .social-icon-panel svg{width:22px;height:22px;display:block}
  .panel-social .social-icon-panel:focus{outline:3px solid rgba(75,224,0,0.12);outline-offset:3px}
  .panel-social .social-icon-panel:hover{transform:translateY(-4px);background:rgba(255,255,255,0.02)}
  .panel-social-label{font-size:13px;opacity:0.9;margin-left:6px;color:#ddd;font-weight:700}

  /* Nav bar */
  .nav-bar{background:var(--lime);display:flex;justify-content:center;padding:10px 0}
  .nav{display:flex;gap:40px;list-style:none;font-weight:800;align-items:center;max-width:1200px}
  .nav a{color:#000;text-decoration:none;padding:6px 0}
  .nav a.active { background: #000; color: var(--lime); padding: 6px 12px; border-radius: 20px; }

  /* Layout: left scrollable, right fixed */
  .page {
    display:flex;
    gap:28px;
    max-width:1200px;
    margin: 0 auto;
    padding: 0 18px;
    position:relative;
  }

  /* RIGHT - fixed sidebar */
  .right-col {
    width:340px;
    position:fixed;
    top:0; /* overridden by JS */
    left:0; /* overridden by JS */
    height: auto; /* overridden by JS */
    overflow: auto;
    align-self:flex-start;
    flex-shrink:0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 10;
  }
  .right-col::-webkit-scrollbar {
    display: none;
  }
  .right-inner {
    background: transparent;
    padding-left: 12px;
  }

  /* Pill row (pill + dotted line) */
  .pill-row { display:flex; align-items:center; gap:12px; width:100%; }
  .pill { display:inline-flex; align-items:center; gap:12px; padding:10px 18px; border-radius:999px; background:var(--lime); color:#000; font-weight:900; }
  .pill.small { padding:8px 14px; font-size:13px; }
  .dotted-line {
    flex:1;
    height:6px;
    background-image: repeating-linear-gradient(90deg, rgba(75,224,0,0.9) 0 6px, transparent 6px 12px);
    background-size: 12px 6px;
    border-radius:3px;
    opacity:0.9;
  }

  /* Search block */
  .search-box { margin-top:12px;margin-bottom:26px; }
  .search-field{
    width:100%;display:flex;align-items:center;background:#fff;border-radius:16px;padding:14px 16px;color:#333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  }
  .search-field input{border:none;background:transparent;outline:none;font-size:15px;color:#333;width:100%}
  .search-field .icon{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#333;font-weight:700}

  /* Latest news header with dotted line */
  .latest-row { display:flex; align-items:center; gap:12px; margin:22px 0 12px; }
  .latest-pill{ display:inline-flex; align-items:center; gap:12px; padding:10px 18px; border-radius:999px; background:var(--lime); color:#000; font-weight:900; }

  /* Latest news list */
  .latest-list{display:flex;flex-direction:column;gap:14px}
  .latest-item{
    display:flex;gap:12px;align-items:center;background:rgba(255,255,255,0.03);padding:12px;border-radius:18px;height:80px;overflow:hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  }
  .latest-item .thumb{
    min-width:66px;height:66px;border-radius:12px;overflow:hidden;flex-shrink:0;
    background:linear-gradient(90deg,#111 0%, #000 100%);
  }
  .latest-item .thumb img{width:100%;height:100%;object-fit:cover; object-position: top;}
  .latest-item .meta{flex:1}
  .latest-item .meta .title{font-weight:800;font-size:13px;color:#fff;line-height:1.25}
  .latest-item .meta .muted{font-size:12px;color:#bdbdbd;margin-top:6px}

  /* LEFT - scrollable content area */
  .left-col {
    flex:1;
    padding-right:6px; /* for scrollbar gap */
  }

  /* HERO big image and NEWS pill */
  .hero {
    position:relative;
    border-radius:24px;
    overflow:hidden;
    height:420px;
    background:#111;
    margin-bottom:18px;
  }
  .hero img{width:100%;height:100%;object-fit:cover; object-position: top;display:block;filter:grayscale(1) contrast(0.95)}
  .news-pill {
    position:absolute;left:0;top:160px; /* aligns mid-left like screenshot */
    transform: translateY(-50%);
    background:var(--pink);color:var(--white);font-weight:900;font-size:88px;padding:34px 160px 34px 48px;border-top-right-radius:64px;border-bottom-right-radius:64px;
    letter-spacing:2px;
  }

  /* Below hero: example article cards stacked */
  .article-list{display:flex;flex-direction:column;gap:22px;padding-bottom:60px}
  .article-card{
    display:grid;grid-template-columns: 220px 1fr;gap:18px;align-items:center;padding:18px;border-radius:20px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    min-height:140px;box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  }
  .article-card .img{border-radius:14px;height:120px;overflow:hidden}
  .article-card .img img{width:100%;height:100%;object-fit:cover}
  .article-card h3{font-size:20px;margin-bottom:6px}
  .article-card p{color:#ddd;line-height:1.45}

  /* decorative triangle like screenshot top-right */
  .page .decor-triangle{
    position:fixed; right:16px; top:88px; width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:18px solid var(--white);transform:rotate(20deg);opacity:0.12;z-index:40;
  }

  /* custom scrollbar for left column */
  .left-col::-webkit-scrollbar{width:14px}
  .left-col::-webkit-scrollbar-track{background:transparent}
  .left-col::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(75,224,0,0.15), rgba(75,224,0.05));border-radius:10px;border:4px solid transparent;background-clip:padding-box}

  /* Mobile behavior: right column becomes stacked */
  @media (max-width:980px){
    .page{flex-direction:column;max-width:980px}
    .right-col{width:100%;position:relative;top:auto;height:auto;left:auto;margin-bottom:18px;overflow:visible}
  }

  /* Focus/keyboard accessibility */
  button:focus, input:focus { outline: 3px solid rgba(75,224,0,0.2); outline-offset:3px }
  
  /* ARTICLE CARD (left) - large, rounded as in screenshot */
  .article {
    display:flex;
    gap:0;
    background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius: var(--radius-lg);
    overflow:hidden;
    box-shadow: 0 12px 44px rgba(0,0,0,0.6);
    margin-bottom:36px;
    align-items:stretch;
  }

  /* Left image portion */
  .article .thumb {
    width: 44%;
    min-width: 340px;
    max-width: 420px;
    height: 100%;
    overflow:hidden;
    display:block;
    position:relative;
  }
  .article .thumb img {
    width:100%; height:100%; object-fit:cover; object-position: top; display:block;
  }
  /* Round only the left corners as in design */
  .article .thumb { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }

  /* Right content panel */
  .article .content {
    width:56%;
    padding:34px 34px 30px 34px;
    background: rgba(0,0,0,0.95);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

  /* category pill (green outline design) */
  .cat-pill {
    display:inline-block;
    padding:8px 14px;
    border-radius:10px;
    color:var(--lime);
    font-weight:900;
    font-size:13px;
    background: rgba(75,224,0,0.035);
    border: 2px solid rgba(75,224,0,0.18);
    width: fit-content;
    margin-bottom:14px;
  }

  /* Title */
  .article h2 {
    font-size:26px;
    line-height:1.08;
    margin:0 0 12px;
    color:#fff;
    font-weight:900;
  }

  /* Excerpt */
  .article p.excerpt {
    color:#d0d0d0;
    line-height:1.6;
    margin:0 0 18px;
    font-size:14px;
    max-width: 52ch;
  }

  /* metadata row (icons + numbers) */
  .meta-row {
    display:flex;
    gap:18px;
    align-items:center;
    margin-top:8px;
    color:var(--muted);
    font-weight:700;
    font-size:14px;
  }
  .meta-item {
    display:inline-flex;
    gap:8px;
    align-items:center;
    color:#ccc;
  }
  .meta-item svg { width:18px; height:18px; display:block; flex-shrink:0; opacity:0.95; color:#ccc; }

  /* small dot separators on metadata */
  .meta-sep { width:1px;height:18px;background:rgba(255,255,255,0.04); margin:0 6px 0 6px; }

  /* FOOTER STYLES */
  .footer {
    background: #000;
    color: #fff;
    padding: 60px 18px 40px;
    text-align: center;
    border-top: 1px solid #333; /* optional separation from content */
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .footer-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px;
  }
  .footer-sub {
    font-size: 16px;
    color: #ccc;
    max-width: 600px;
    margin: 0 auto 40px;
  }
  .now-on-air {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #4be000;
    color: #000;
    font-size: 18px;
    font-weight: 800;
    padding: 8px 24px;
    border-radius: 30px;
    margin-bottom: 30px;
  }
  .now-stripe {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: auto;
  }
  .now-dash {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 2px;
    background: repeating-linear-gradient(to right, #4be000, #4be000 4px, transparent 4px, transparent 8px);
  }
  .on-air-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
  }
  .on-air-card {
    background: #1a1a1a;
    border-radius: 30px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
  }
  .on-air-card img {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    object-fit: cover;
  }
  .card-text {
    text-align: left;
  }
  .card-text h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
  }
  .card-text p {
    font-size: 16px;
    color: #ccc;
    margin: 0 0 4px;
  }
  .card-text span {
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .made-in {
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 12px;
    display: inline-block;
  }
  .logo-side {
    text-align: left;
  }
  .logo-text {
    font-size: 40px;
    font-weight: 900;
    line-height: 0.9;
    margin: 0 0 8px;
  }
  .logo-orange {
    color: #ff9900;
  }
  .logo-green {
    color: #4be000;
  }
  .stay-tune {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
  }
  .footer .social-icons {
    justify-content: flex-start;
    gap: 12px;
  }
  .footer .social-icon {
    background: #4be000;
    color: #fff;
    border: none;
    font-size: 20px;
    width: 40px;
    height: 40px;
  }
  .listen-now {
    background: #4be000;
    color: #000;
    padding: 12px 40px;
    border-radius: 40px;
    font-weight: 800;
    font-size: 18px;
    border: none;
    cursor: pointer;
    margin-bottom: 40px;
  }
  .footer-line {
    border: none;
    border-top: 1px solid #333;
    margin: 0 auto 20px;
    width: 100%;
  }
  .copyright {
    font-size: 14px;
    color: #999;
  }

  /* ========== Responsive & Mobile layout ========== */
  /* Desktop: show full header + centered nav as provided */
  @media (min-width:1024px){
    /* keep nav bar visible and hide toggle */
    .menu-toggle{display:none}
    .menu-overlay{display:none}
    .side-panel{display:none}
    .brand-header{padding:18px 24px}
    .nav-bar{display:flex}
    /* desktop: ensure header social icons visible */
    .brand-right .social-icons{display:flex}
  }

  /* Tablet: show toggle and hide centered nav, but keep header items */
  @media (min-width:768px) and (max-width:1023px){
    .nav-bar{display:none} /* hide centered nav on tablet */
    .menu-toggle{display:inline-block}
    .side-panel{width:360px}
    .brand-header{padding:16px}
    /* hide header social icons on tablet (we want them only inside menu) */
    .brand-right .social-icons{display:none}
  }

  /* Mobile: hide centered nav, show toggle, hide header socials */
  @media (max-width:767px){
    .nav-bar{display:none}
    .menu-toggle{display:inline-block}
    .brand-header{padding:12px 18px}
    .brand-left .logo-wrap img{height:48px}
    /* hide header social icons on mobile */
    .brand-right .social-icons{display:none}
  }

  /* minor aesthetic spacing for nav list when desktop */
  @media (min-width:1024px){
    .nav{gap:36px}
    .brand-right{gap:18px}
  }

  /* Focus styles inside panel */
  .side-panel a:focus, .side-panel button:focus{outline:3px solid rgba(75,224,0,0.12);outline-offset:3px;border-radius:10px}

  /* small device tweaks for very small screens */
  @media (max-width:420px){
    .side-panel{width:90%}
    .hamburger{width:20px}
    .hamburger span{background:var(--lime)}
  }

  /* small screen scale down pill */
  @media (max-width:980px){
    .news-pill{font-size:56px;padding:24px 120px 24px 28px;top:150px}
  }
  @media (max-width:600px){
    .news-pill{font-size:42px;padding:18px 80px 18px 20px;top:130px}
  }

  /* Enhanced mobile view for 321px - 540px */
  @media (min-width: 321px) and (max-width: 540px) {
    /* Header and top strip adjustments */
    .top-strip {
      padding: 4px 12px;
      font-size: 12px;
    }
    .top-strip .left, .top-strip .right { gap: 8px; }
    .lang-badge, .contact-badge { padding: 4px 8px; font-size: 11px; }
    .brand-header {
      padding: 10px 12px;
      gap: 12px;
    }
    .logo-wrap img {
      height: 36px;
    }
    .listen-btn {
      padding: 8px 12px;
      font-size: 13px;
    }
    .menu-toggle {
      width: 44px;
      height: 44px;
    }
    .hamburger {
      width: 18px;
      height: 14px;
    }
    .hamburger span {
      height: 1.5px;
    }
    .hamburger span:nth-child(2) { top: 6px; }
    .hamburger span:nth-child(3) { top: 12px; }

    /* Nav bar hidden on mobile */
    .nav-bar { display: none; }

    /* Page layout */
    .page {
      flex-direction: column;
      gap: 16px;
      padding: 0 12px;
      max-width: none;
    }
    .right-col {
      width: 100%;
      position: relative;
      top: auto;
      left: auto;
      height: auto;
      margin-bottom: 16px;
      overflow: visible;
    }
    .left-col {
      flex: none;
      padding-right: 0;
      height: auto;
      overflow: visible;
    }
    .decor-triangle {
      display: none; /* Hide decorative element on small mobile */
    }

    /* Hero adjustments */
    .hero {
      height: 220px;
      border-radius: 16px;
      margin-bottom: 16px;
    }
    .hero img {
      object-position: top;
    }
    .news-pill {
      font-size: 28px;
      padding: 12px 40px 12px 16px;
      top: 90px;
      letter-spacing: 1px;
      border-top-right-radius: 32px;
      border-bottom-right-radius: 32px;
    }

    /* Article adjustments - stack vertically */
    .article {
      flex-direction: column;
      margin-bottom: 24px;
      border-radius: 20px;
    }
    .article .thumb {
      width: 100%;
      min-width: auto;
      max-width: none;
      height: 200px;
      border-top-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .article .thumb img {
      object-position: top;
    }
    .article .content {
      width: 100%;
      padding: 20px;
      border-top-left-radius: 0;
      border-top-right-radius: 20px;
    }
    .article h2 {
      font-size: 20px;
      line-height: 1.2;
      margin-bottom: 8px;
    }
    .article p.excerpt {
      font-size: 13px;
      margin-bottom: 16px;
      max-width: none;
    }
    .cat-pill {
      padding: 6px 12px;
      font-size: 12px;
    }
    .meta-row {
      gap: 12px;
      font-size: 12px;
    }
    .meta-item svg {
      width: 14px;
      height: 14px;
    }
    .article-list {
      gap: 16px;
      padding-bottom: 40px;
    }

    /* Sidebar adjustments */
    .pill-row, .latest-row {
      gap: 8px;
      margin: 16px 0 8px;
    }
    .pill.small, .latest-pill {
      padding: 6px 12px;
      font-size: 12px;
    }
    .dotted-line {
      height: 4px;
    }
    .search-box {
      margin: 8px 0 20px;
    }
    .search-field {
      padding: 10px 12px;
      border-radius: 12px;
    }
    .search-field input {
      font-size: 13px;
    }
    .search-field .icon {
      width: 28px;
      height: 28px;
    }
    .latest-list {
      gap: 10px;
    }
    .latest-item {
      height: 60px;
      padding: 8px;
      border-radius: 12px;
    }
    .latest-item .thumb {
      min-width: 50px;
      height: 50px;
      border-radius: 8px;
    }
    .latest-item .thumb img {
      object-position: top;
    }
    .latest-item .meta .title {
      font-size: 11px;
      line-height: 1.2;
    }
    .latest-item .meta .muted {
      font-size: 10px;
    }
    .right-inner {
      padding-left: 8px;
    }

    /* Footer adjustments */
    .footer {
      padding: 40px 12px 30px;
    }
    .footer-title {
      font-size: 24px;
      margin-bottom: 6px;
    }
    .footer-sub {
      font-size: 14px;
      margin-bottom: 30px;
    }
    .now-on-air {
      font-size: 14px;
      padding: 6px 18px;
      border-radius: 20px;
      margin-bottom: 20px;
    }
    .now-stripe {
      left: -30px;
      width: 30px;
    }
    .now-dash {
      width: 100px;
      height: 1.5px;
    }
    .on-air-row {
      flex-direction: column;
      gap: 20px;
      align-items: center;
      margin-bottom: 20px;
    }
    .on-air-card {
      padding: 12px;
      gap: 12px;
      width: 100%;
      max-width: 300px;
    }
    .on-air-card img {
      width: 80px;
      height: 80px;
      border-radius: 16px;
    }
    .card-text h3 {
      font-size: 16px;
    }
    .card-text p {
      font-size: 14px;
    }
    .card-text span {
      font-size: 12px;
    }
    .logo-side {
      text-align: center;
    }
    .logo-text {
      font-size: 30px;
      line-height: 0.9;
      margin: 0 0 6px;
    }
    .stay-tune {
      font-size: 16px;
      margin-bottom: 10px;
    }
    .footer .social-icons {
      justify-content: center;
      gap: 10px;
    }
    .footer .social-icon {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
    .listen-now {
      padding: 10px 30px;
      font-size: 16px;
      border-radius: 30px;
      margin-bottom: 30px;
    }
    .made-in {
      font-size: 11px;
      padding: 3px 10px;
    }
    .copyright {
      font-size: 12px;
    }

    /* Scrollbar adjustments */
    .left-col::-webkit-scrollbar { width: 6px; }
    .left-col::-webkit-scrollbar-thumb { border: 2px solid transparent; }
  }