body {
         
  
  background-image: url("bodybg.png"); /* Specifies the image file */
  
  background-repeat: repeat; /* Prevents the image from repeating */
  background-position: center center; /* Centers the image */

  background-attachment: fixed; /* Keeps the background image fixed during scrolling */
  background-color: #f1f1f1;
  
  }
  
  
    h1,h6{text-align:left}
    .card h5 a{text-decoration:none}
    .meta{color:#444;font-size:.9rem}
    .btn-listen{background-color:#0ea568;border:none;color:#fff}
    .btn-listen:hover{background-color:#0c8a55;color:#fff}
    .btn-download{background-color:#ff8a00;border:none;color:#000}
    .btn-download:hover{background-color:#e97c00;color:#fff}
    .liveframe  {
    margin-top: 0px;
}
.latest {
        background-color: rgb(3 57 111) !important;
}
  .live-section {
    position: relative;
  background-image: url("live-section.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .live-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.75), rgba(0,0,0,0.4));
  }

  .live-section > .container,
  .live-section > .container-fluid {
    position: relative;
    z-index: 1;
  }

  .live-left-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 18px 45px rgba(0,0,0,0.65);
    backdrop-filter: blur(10px);
  }

  .liveframe iframe {
    border-radius: 12px;
    min-height: 120px;
  }

  .live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(220, 53, 69, 0.18);
    border: 1px solid rgba(220, 53, 69, 0.6);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc3545;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.9);
  }

  .bayan-right-title {
    font-weight: 700;
    color: #ffffff;
   
  }

  .bayan-list-wrapper {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 40px rgba(0,0,0,0.7);
    backdrop-filter: blur(10px);
  }

  .bayan-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }

  .bayan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.5);
    border-color: rgba(255, 255, 255, 0.35);
  }

  .bayan-card .card-title a {
    text-decoration: none;
    color: #ffffff;
  }
  .bayan-card .card-title a:hover {
    text-decoration: underline;
  }

  .btn-listen {
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #28a745, #3ddc84);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .btn-listen:hover {
    filter: brightness(1.05);
  }

  .btn-download {
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #222;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .btn-download:hover {
    filter: brightness(1.05);
  }

  .btn-more-bayans {
    border-radius: 999px;
    border-width: 1px;
  }

  @media (max-width: 991.98px) {
    .live-left-card,
    .bayan-list-wrapper {
      margin-top: 1.5rem;
    }
  }
    .live-section {
    position: relative;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  
.liveframe {
  background: rgba(0, 0, 0, 0.85);
  border-radius: 24px;
  padding: 20px;
    box-shadow: 0 20px 50px rgb(129 16 16 / 90%);
  border: 1px solid rgba(255,255,255,0.18);
  max-width: 480px;
  margin: 0 auto;
}

.liveframe iframe {
  width: 100%;
  height: 260px;   /* outer box bara, lekin andar ka design same */
  border-radius: 18px;
  overflow: hidden;
}