/* ================= SUPPORT IMAGE (1:1) ================= */
.support-image {
  width: 250px;
  margin: 10px auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 20px;
}

.support-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}


/* ================= SCHEDULE IMAGE (9:16) ================= */
.schedule-image {
  width: 100%;
  max-width: 350px;
  margin: 5px auto;
  aspect-ratio: 9 / 16; /* keep vertical format */
  overflow: hidden;
  border-radius: 15px;
}

.schedule-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ================= SLIDER FIX ================= */
.slider {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 20px;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* This makes image fully fill */
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide.active {
  opacity: 1;
  position: relative;
}

/* Featured Program slider adjustments */
.slider-section:first-of-type .slider {
    max-width: 1000px; /* wider on large screens */
    height: auto;
}

.slider-section:first-of-type .slide {
    width: 100%;
    height: 500px; /* taller for visibility */
    object-fit: cover;
}

/* Make slider height proportional */
.slider-section .slider {
  aspect-ratio: 16 / 9;   /* Perfect cinematic ratio */
}

/* ================= LIVE PROGRAM (1:1 FIX) ================= */
.live-slider-section .slider {
  aspect-ratio: 1 / 1;   /* Square box */
  max-width: 500px;      /* Controls size */
}

.live-slider-section .slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ================= SPA + TRANSITION ================= */
.page-section {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.page-section.active {
  display: block;
  opacity: 1;
}

html { scroll-behavior: smooth; }

@keyframes logoPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #f5b400); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 8px #f5b400); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px #f5b400); }
}

.hero-logo.playing {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (min-width: 1024px) {
  #host-section .host-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* spacing between host cards */
  }

  #host-section .host-card {
    text-align: center;
  }
}

/* ================= FLOATING AUDIO ================= */
.glass-radio {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
    width: 90%;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 10px 15px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;  /* smaller space between elements */
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Play button */
#playBtn {
    padding: 10px 30px;
    border: none;
    background: #f5b400;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    border-radius: 30px;
    font-size: 14px;
    transition: all 0.3s ease;
}

#playBtn:hover {
    background: #fff;
    color: #000;
    transform: scale(1.05);
}

/* Now Playing text */
#nowPlaying {
    font-size: 13px;
    margin: 2px 0;  /* very tight margin */
    font-weight: 500;
    color: #fff;
}

/* Listener count */
.listeners {
    font-size: 12px;
    margin: 0; /* remove extra spacing */
    color: #fff;
    font-weight: 400;
}

/* Hero logo pulse when playing */
.hero-logo.playing {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* WELCOME TEXT */
.welcome{
    font-size:14px;
    letter-spacing:3px;
    font-weight:600;
    color:#FFD700;
    margin-bottom:5px;
}

/* FOLLOW US ICONS */
.social-icons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:10px;
}

.social-icons img{
    width:40px;
    height:40px;
    object-fit:contain;
    transition:0.3s;
}

.social-icons img:hover{
    transform:scale(1.1);
}

/* ================= FREE BOOK SECTION ================= */

.books-section{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
  max-width:1100px;
  margin:auto;
  padding:20px 5%;
}

/* Book card */
.book-card{
  background:rgba(255,255,255,0.05);
  border-radius:18px;
  padding:20px;
  text-align:center;
  transition:0.3s;
  backdrop-filter:blur(8px);
}

.book-card:hover{
  transform:translateY(-5px);
}

/* Book image (vertical book style) */
.book-card img{
  width:100%;
  max-width:180px;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:10px;
  margin:auto;
  display:block;
  margin-bottom:15px;
}

/* Book title */
.book-card h3{
  font-size:18px;
  margin-bottom:8px;
}

/* Book description */
.book-card p{
  font-size:14px;
  line-height:1.5;
  margin-bottom:12px;
}

/* Download button */
.download-btn{
  display:inline-block;
  padding:10px 20px;
  background:#f5b400;
  color:#000;
  font-weight:bold;
  border-radius:30px;
  text-decoration:none;
  transition:0.3s;
}

.download-btn:hover{
  background:#fff;
}

/* Freebook intro section */
.freebook-content {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 20px;
}

.freebook-content h2 {
  margin-bottom: 10px;
}

.btn-download {
  display: inline-block;
  padding: 10px 25px;
  background: #f5b400;
  color: #000;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
}

/* ================= MOBILE FREE BOOK ================= */

@media (max-width:768px){

.books-section{
  grid-template-columns:1fr;
  gap:20px;
}

/* Full width cards */
.book-card{
  width:100%;
  max-width:350px;
  margin:auto;
}

/* Larger mobile book cover */
.book-card img{
  max-width:220px;
}
}

/* ================= MOBILE DOWNLOAD APP LOGOS ================= */
@media (max-width: 768px) {

  .app-logos{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:8px;
  }

  .app-logos img{
      width:55px;   /* smaller logos */
      height:auto;
  }

}

/* ================= HERO ================= */
.hero { position:relative; height:60vh; margin-top:70px; overflow:hidden; }
.hero-logo { width:80px; }
.hero video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); object-fit:cover; }
.overlay { position:relative; z-index:2; top:50%; transform:translateY(-50%); padding:20px; text-align:center; }
.welcome { font-size:clamp(14px,2vw,18px); letter-spacing:3px; }
.main-title { font-size:clamp(26px,5vw,36px); font-weight:bold; margin-bottom:20px; }

/* ================= NAVIGATION ================= */
header { position: fixed; top:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 6%; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); z-index:1000; }
.nav-list { list-style:none; display:flex; gap:25px; }
.nav-list li a { color:#fff; text-decoration:none; font-weight:500; position:relative; padding:8px 0; transition:0.3s; }
.nav-list li a::after { content:""; position:absolute; width:0%; height:2px; left:0; bottom:0; background:#f5b400; transition:0.3s; }
.nav-list li a:hover::after { width:100%; }
.nav-list li a:hover { color:#f5b400; }
.menu-overlay{ z-index:900; }
.glass-radio{ z-index:9999; }
.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index:900;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

/* ================= DOWNLOAD APP LOGOS ================= */
.app-logos {
    display: flex;
    justify-content: center;
    gap: 15px; /* space between logos */
    margin-top: 10px;
}

.app-logos img {
    max-width: 80px;  /* smaller size */
    width: 100%;
    height: auto;
    border-radius: 12px; /* slightly rounded corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* subtle depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-logos img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* ================= MOBILE NAV ================= */

.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:30px;
  height:22px;
  cursor:pointer;
  z-index:1200;
}

.menu-toggle span{
  height:3px;
  background:#fff;
  border-radius:3px;
  transition:0.4s;
}

/* Mobile Menu */
@media (max-width:768px){

.menu-toggle{
  display:flex;
}

.nav-list{
  position:fixed;
  top:0;
  right:-100%;
  width:260px;
  height:100vh;
  background:#0f0f0f;
  flex-direction:column;
  padding:90px 25px;
  gap:18px;
  transition:0.35s ease;
  box-shadow:-10px 0 30px rgba(0,0,0,0.5);
}

.nav-list.active{
  right:0;
}

/* Menu links */
.nav-list li a{
  font-size:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* Animated hamburger */
.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(6px,6px);
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px,-6px);
}

}

  /* ================= MOBILE: reduce gaps between home sections ================= */
@media (max-width: 768px) {
  /* Target only homepage sections inside #home-section */
  #home-section > .plain-section,
  #home-section > .image-section,
  #home-section > .slider-section,
  #home-section > .social-section {
      margin: 8px 0;  /* reallysmall vertical spacing */
      padding: 10px 5%; /* keep minimal side padding */
  }

  /* Headings smaller and closer */
  #home-section h2 {
      margin-bottom: 6px;
      font-size: clamp(18px, 4vw, 22px); /* keep readable but smaller */
  }

  /* Paragraph spacing tighter */
  #home-section p {
      line-height: 1.4;
      margin-bottom: 6px;
  }
}

  /* Reduce spacing between home page sections */
.plain-section,
.image-section,
.slider-section,
.social-section,
.books-section {
    margin: 30px 0;  /* smaller gap */
    padding: 20px 5%; /* keep some breathing space */
}

/* Optional: smaller headings spacing */
.plain-section h2,
.slider-section h2,
.social-section h2,
.books-section h2 {
    margin-bottom: 15px;
}

/* Optional: page padding to avoid overlapping sticky audio */
body { padding-bottom:120px; }

/* FORCE smaller download logos on mobile */
@media (max-width:768px){

.app-logos img{
    width:45px !important;
    max-width:45px !important;
    height:auto;
}

}



/* RESPONSIVE SUPPORT VIDEO */
.support-video {
    width: 100%;
    max-width: 1200px;
    margin: 25px auto;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 14px;
}

.support-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border-radius: 14px;
}

/* MOBILE PHONES */
@media screen and (max-width: 600px) {
    .support-video {
        width: 100%;
        max-width: none;
        margin: 15px auto;
        border-radius: 10px;
    }

    .support-video video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 10px;
    }
}

/* LAPTOPS AND DESKTOPS */
@media screen and (min-width: 601px) {
    .support-video {
        width: 95%;
        max-width: 1200px;
    }
}



/* ================= SOFT DARK PROFESSIONAL BACKGROUND ================= */
body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    color: #fff;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(245,180,0,0.08), transparent 40%),
        linear-gradient(135deg, #0a0a0a 0%, #121212 50%, #1a1a1a 100%);

    background-attachment: fixed;
}

/* ================= GRID WATERMARK ================= */
.bg-watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: repeat(6, 1fr);  /* 6 columns */
    grid-template-rows: repeat(5, 1fr);     /* 5 rows = 30 items */

    justify-items: center;
    align-items: center;

    pointer-events: none;
    z-index: 0;
}

.bg-watermark span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;

    color: rgba(255,255,255,0.04);

    transform: rotate(-20deg);
    white-space: nowrap;
}

/* ================= LAYER FIX ================= */
header,
section,
.glass-radio {
    position: relative;
    z-index: 2;
}

/* ================= PREMIUM GLASS SECTIONS ================= */
.plain-section,
.image-section,
.slider,
.social-section,
.books-section,
.support-container,
.schedule-table {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ================= RESET ================= */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }


/* ================= HEADER ================= */
header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 6%;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.logo img {
    height: 40px;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 25px;
}

.nav-list li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding: 8px 0;
    transition: 0.3s;
}

/* Underline hover effect */
.nav-list li a::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: 0;
    background: #f5b400;
    transition: 0.3s;
}

.nav-list li a:hover::after {
    width: 100%;
}

.nav-list li a:hover {
    color: #f5b400;
}


/* ================= HERO ================= */
.hero { position:relative; height:90vh; overflow:hidden; margin-top:70px; }
.hero video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%, -50%); object-fit:cover; }
.overlay { position:relative; z-index:2; top:50%; transform:translateY(-50%); padding:20px; }
.hero-logo { width:100px; margin-bottom:15px; }
.welcome { font-size:clamp(14px,2vw,18px); letter-spacing:3px; }
.main-title { font-size:clamp(26px,5vw,42px); font-weight:bold; margin-bottom:20px; }


/* ================= GLASS RADIO ================= */
.glass-radio { margin:25px auto; padding:20px; width:90%; max-width:400px; backdrop-filter:blur(10px); background:rgba(255,255,255,0.1); border-radius:15px; }
#playBtn { padding:12px 30px; border:none; background:#f5b400; color:#000; font-weight:bold; cursor:pointer; border-radius:30px; transition:0.3s; }
#playBtn:hover { background:#fff; }
.listeners { margin-top:15px; font-size:14px; }


/* ================= SECTIONS ================= */
section { padding:25px 8%; }
h2 { margin-bottom:12px; font-size:clamp(22px,3vw,34px); }
p { max-width:850px; margin:0 auto; }


/* ================= IMAGE SECTION ================= */
.image-section { padding:20px 0; }
.image-section img { width:100%; border-radius:15px; }


/* ================= SLIDER ================= */
.slider { position:relative; display:flex; justify-content:center; align-items:center; aspect-ratio:16/9; overflow:hidden; border-radius:15px; background:radial-gradient(circle at center, #111 0%, #000 100%); }
.slide { position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:contain; transform:translate(-50%, -50%); opacity:0; transition:opacity 1s ease-in-out; }
.slide.active { opacity:1; }


/* ================= SOCIAL ================= */
.social-icons { display:flex; justify-content:center; gap:25px; flex-wrap:wrap; }
.social-icons img { width:40px; cursor:pointer; transition:0.3s; }
.social-icons img:hover { transform:scale(1.05); }


/* ================= APP LOGOS ================= */
.app-logos {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.app-logos img {
    width: 120px;
    transition: 0.3s;
}

.app-logos img:hover {
    transform: scale(1.05);
}

/* Smaller on Mobile */
@media (max-width:768px) {
    .app-logos img {
        width: 85px;
    }
}
/* ================= LIVE SLIDER ================= */
.live-slider {
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.live-slider .slide {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Mobile Fix */
@media (max-width:768px) {

    .live-slider {
        height: 280px;
        margin-top: 10px;
    }

    .live-slider .slide {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}
/* ================= HOST PAGE ================= */
.host-container { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; padding:30px 6%; }
.host-card { background:rgba(255,255,255,0.05); padding:20px; border-radius:15px; width:260px; backdrop-filter:blur(8px); transition:0.3s; }
.host-card:hover { transform:translateY(-5px); }
.host-card img { width:100%; border-radius:10px; margin-bottom:15px; }
.host-card h3 { font-size:18px; margin-bottom:5px; }
.host-card p { font-size:14px; color:#ddd; }


/* ================= SCHEDULE PAGE ================= */
.schedule-table { max-width:700px; margin:25px auto; border-radius:15px; overflow:hidden; background:rgba(255,255,255,0.05); }
.schedule-row { display:flex; justify-content:space-between; padding:15px 20px; border-bottom:1px solid rgba(255,255,255,0.1); }
.schedule-row:last-child { border-bottom:none; }
.schedule-row:hover { background:rgba(245,180,0,0.1); }


/* ================= SUPPORT PAGE ================= */
.support-container { max-width:600px; margin:30px auto; padding:25px; background:rgba(255,255,255,0.05); border-radius:15px; backdrop-filter:blur(8px); transition:0.3s; }
.support-container:hover { transform:translateY(-5px); }


/* ================= FREEBOOK PAGE ================= */
.freebook-hero { padding:50px 6%; background:linear-gradient(to right, #111, #000); }
.books-section { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; padding:60px 10%; }
.book-card { background:rgba(255,255,255,0.05); padding:20px; border-radius:15px; width:240px; /* Fixed card width for consistency */ backdrop-filter:blur(8px); transition:0.3s; }
.book-card:hover { transform:translateY(-5px); }
.download-btn { display:inline-block; margin-top:10px; padding:10px 20px; background:#f5b400; color:#000; border-radius:25px; text-decoration:none; font-weight:bold; transition:0.3s; }
.download-btn:hover { background:#fff; }
.email-section { padding:40px 6%; background:#111; }
.email-section input { padding:12px; width:250px; max-width:80%; border-radius:25px; border:none; margin-right:10px; }
.email-section button { padding:12px 25px; border:none; border-radius:25px; background:#f5b400; font-weight:bold; cursor:pointer; }
.book-card img {
  width: 100%;
  height: 400px; /* Standardized image height */
  object-fit: cover; /* Crops image to fit without stretching */
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.5s ease;
}

.book-card img:hover {
  transform: scale(1.05);
}

.book-card h3 {
  font-size: 1.5rem;
  color: #fff;
  margin: 15px 0 10px;
}

.book-card p {
  font-size: 1rem;
  color: #ccc;
  padding: 0 15px;
  margin-bottom: 20px;
  line-height: 1.4;
}


/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {
  .book-card {
    width: 45%;
  }
  .book-card img {
    height: 350px;
  }
}

@media (max-width: 600px) {
  .books-section {
    flex-direction: column;
    gap: 20px;
    padding: 40px 5%;
  }
  .book-card {
    width: 100%;
  }
  .book-card img {
    height: 300px;
  }
  .book-card h3 {
    font-size: 1.3rem;
  }
  .book-card p {
    font-size: 0.95rem;
  }
  .download-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}

/* ================= MOBILE ================= */
@media (max-width:768px) {

header { flex-direction:row; }

.hero { height:60vh; margin-top:50px; }
.hero-logo { width:70px; }
.main-title { font-size:22px; }

.host-card, .book-card { width:45%; }
.schedule-row { flex-direction:column; text-align:center; }

.menu-toggle { display:flex; flex-direction:column; justify-content:space-between; width:28px; height:20px; z-index:1100; }
.menu-toggle span { height:3px; background:#fff; border-radius:3px; transition:0.4s; }

.nav-list { position:fixed; top:0; right:-100%; height:100vh; width:220px; background:rgba(0,0,0,0.8); backdrop-filter:blur(15px); flex-direction:column; padding:80px 20px; transition:0.35s ease; }
.nav-list.active { right:0; }

}

/* ================= PREMIUM MOBILE NAV ================= */
@media (max-width: 768px) {

  /* Hamburger */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
    z-index: 1100;
  }

  .menu-toggle span {
    height: 3px;
    width: 100%;
    background: #fff;
    border-radius: 3px;
    transition: 0.4s ease;
  }

  /* Animate Hamburger to X */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Slide Menu */
  .nav-list {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 220px; /* Reduced from 260px */

    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px);

    flex-direction: column;
    padding: 80px 20px;
    gap: 5px;

    transition: right 0.35s ease;
  }

  .nav-list.active {
    right: 0;
  }

  .nav-list li a {
    padding: 10px 0;
    font-size: 14px;
  }

}

  .nav-list li a {
    display: block;
    width: 100%;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .nav-list li a:hover {
    color: #f5b400;
    padding-left: 8px;
    transition: 0.3s;
  }

/* ================= SUPPORT IMAGE (1:1) ================= */
.support-image {
  width: 250px;
  margin: 10px auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  border-radius: 10px;
}

.schedule-image img {
  width: 100%;
  height: auto;
  object-fit: contain; /* 🔥 prevents cropping */
  border-radius: 15px;
}


/* ================= SCHEDULE IMAGE (9:16) ================= */
.schedule-image {
  width: 100%;
  max-width: 350px;
  margin: 5px auto;
  aspect-ratio: 9 / 16; /* keep vertical format */
  overflow: visible;
  border-radius: 10px;
}

.schedule-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ================= SLIDER FIX ================= */
.slider {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 20px;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* This makes image fully fill */
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide.active {
  opacity: 1;
  position: relative;
}

/* Featured Program slider adjustments */
.slider-section:first-of-type .slider {
    max-width: 1000px; /* wider on large screens */
    height: auto;
}

.slider-section:first-of-type .slide {
    width: 100%;
    height: 500px; /* taller for visibility */
    object-fit: cover;
}

/* Make slider height proportional */
.slider-section .slider {
  aspect-ratio: 16 / 9;   /* Perfect cinematic ratio */
}

/* ================= LIVE PROGRAM (1:1 FIX) ================= */
.live-slider-section .slider {
  aspect-ratio: 1 / 1;   /* Square box */
  max-width: 500px;      /* Controls size */
}

.live-slider-section .slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ================= SPA + TRANSITION ================= */
.page-section {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.page-section.active {
  display: block;
  opacity: 1;
}

html { scroll-behavior: smooth; }

@keyframes logoPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px #f5b400); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 8px #f5b400); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px #f5b400); }
}

.hero-logo.playing {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (min-width: 1024px) {
  #host-section .host-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* spacing between host cards */
  }

  #host-section .host-card {
    text-align: center;
  }
}

/* ================= FLOATING AUDIO ================= */
.glass-radio {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 280px;
    width: 90%;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 10px 15px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;  /* smaller space between elements */
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Play button */
#playBtn {
    padding: 10px 30px;
    border: none;
    background: #f5b400;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    border-radius: 30px;
    font-size: 14px;
    transition: all 0.3s ease;
}

#playBtn:hover {
    background: #fff;
    color: #000;
    transform: scale(1.05);
}

/* Now Playing text */
#nowPlaying {
    font-size: 13px;
    margin: 2px 0;  /* very tight margin */
    font-weight: 500;
    color: #fff;
}

/* Listener count */
.listeners {
    font-size: 12px;
    margin: 0; /* remove extra spacing */
    color: #fff;
    font-weight: 400;
}

/* Hero logo pulse when playing */
.hero-logo.playing {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* WELCOME TEXT */
.welcome{
    font-size:14px;
    letter-spacing:3px;
    font-weight:600;
    color:#FFD700;
    margin-bottom:5px;
}

/* FOLLOW US ICONS */
.social-icons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:10px;
}

.social-icons img{
    width:40px;
    height:40px;
    object-fit:contain;
    transition:0.3s;
}

.social-icons img:hover{
    transform:scale(1.1);
}

/* ================= FREE BOOK SECTION ================= */

.books-section{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
  max-width:1100px;
  margin:auto;
  padding:20px 5%;
}

/* Book card */
.book-card{
  background:rgba(255,255,255,0.05);
  border-radius:18px;
  padding:20px;
  text-align:center;
  transition:0.3s;
  backdrop-filter:blur(8px);
}

.book-card:hover{
  transform:translateY(-5px);
}

/* Book image (vertical book style) */
.book-card img{
  width:100%;
  max-width:180px;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:10px;
  margin:auto;
  display:block;
  margin-bottom:15px;
}

/* Book title */
.book-card h3{
  font-size:18px;
  margin-bottom:8px;
}

/* Book description */
.book-card p{
  font-size:14px;
  line-height:1.5;
  margin-bottom:12px;
}

/* Download button */
.download-btn{
  display:inline-block;
  padding:10px 20px;
  background:#f5b400;
  color:#000;
  font-weight:bold;
  border-radius:30px;
  text-decoration:none;
  transition:0.3s;
}

.download-btn:hover{
  background:#fff;
}

/* Freebook intro section */
.freebook-content {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 20px;
}

.freebook-content h2 {
  margin-bottom: 10px;
}

.btn-download {
  display: inline-block;
  padding: 10px 25px;
  background: #f5b400;
  color: #000;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
}

/* ================= MOBILE FREE BOOK ================= */

@media (max-width:768px){

.books-section{
  grid-template-columns:1fr;
  gap:20px;
}

/* Full width cards */
.book-card{
  width:100%;
  max-width:350px;
  margin:auto;
}

/* Larger mobile book cover */
.book-card img{
  max-width:220px;
}
}

/* ================= MOBILE DOWNLOAD APP LOGOS ================= */
@media (max-width: 768px) {

  .app-logos{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:8px;
  }

  .app-logos img{
      width:55px;   /* smaller logos */
      height:auto;
  }

}

/* ================= HERO ================= */
.hero { position:relative; height:60vh; margin-top:70px; overflow:hidden; }
.hero-logo { width:80px; }
.hero video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); object-fit:cover; }
.overlay { position:relative; z-index:2; top:50%; transform:translateY(-50%); padding:20px; text-align:center; }
.welcome { font-size:clamp(14px,2vw,18px); letter-spacing:3px; }
.main-title { font-size:clamp(26px,5vw,36px); font-weight:bold; margin-bottom:20px; }

/* ================= NAVIGATION ================= */
header { position: fixed; top:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 6%; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); z-index:1000; }
.nav-list { list-style:none; display:flex; gap:25px; }
.nav-list li a { color:#fff; text-decoration:none; font-weight:500; position:relative; padding:8px 0; transition:0.3s; }
.nav-list li a::after { content:""; position:absolute; width:0%; height:2px; left:0; bottom:0; background:#f5b400; transition:0.3s; }
.nav-list li a:hover::after { width:100%; }
.nav-list li a:hover { color:#f5b400; }
.menu-overlay{ z-index:900; }
.glass-radio{ z-index:9999; }
.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index:900;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

/* ================= DOWNLOAD APP LOGOS ================= */
.app-logos {
    display: flex;
    justify-content: center;
    gap: 15px; /* space between logos */
    margin-top: 10px;
}

.app-logos img {
    max-width: 80px;  /* smaller size */
    width: 100%;
    height: auto;
    border-radius: 12px; /* slightly rounded corners */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* subtle depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-logos img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* ================= MOBILE NAV ================= */

.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:30px;
  height:22px;
  cursor:pointer;
  z-index:1200;
}

.menu-toggle span{
  height:3px;
  background:#fff;
  border-radius:3px;
  transition:0.4s;
}

/* Mobile Menu */
@media (max-width:768px){

.menu-toggle{
  display:flex;
}

.nav-list{
  position:fixed;
  top:0;
  right:-100%;
  width:260px;
  height:100vh;
  background:#0f0f0f;
  flex-direction:column;
  padding:90px 25px;
  gap:18px;
  transition:0.35s ease;
  box-shadow:-10px 0 30px rgba(0,0,0,0.5);
}

.nav-list.active{
  right:0;
}

/* Menu links */
.nav-list li a{
  font-size:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* Animated hamburger */
.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(6px,6px);
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px,-6px);
}

}

/* ================= CLEAN CONTENT CARD ================= */
.content-card {
    max-width: 650px;          /* 🔥 controls readability */
    margin: 30px auto;
    padding: 25px 20px;

    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);

    text-align: left;
}

/* Heading */
.content-card h2 {
    font-size: 26px;
    margin-bottom: 12px;
    text-align: left;     /* 🔥 don't center */
}

/* Paragraph */
.content-card p {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.7;
    color: #ddd;

    max-width: 100%;
}

/* Bullet list */
.text-list {
    padding-left: 20px;
}

.text-list li {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #ddd;
}

/* Premium image style */
.image-section img,
.slide,
.host-card img,
.book-card img,
.schedule-image img,
.support-image img {
    border: none; /* remove harsh border */
    border-radius: 14px;

    box-shadow: 0 6px 20px rgba(0,0,0,0.25); /* soft depth */
}



/* =========================================
   FAITH & KNOWLEDGE RADIO
   PREMIUM TYPOGRAPHY & TEXT LAYOUT
========================================= */

:root {
    --text-main: #f5f3ee;
    --text-muted: #c3c9d4;
    --gold: #d6b36a;
    --gold-light: #f0d69a;
    --panel-bg: rgba(255, 255, 255, 0.035);
    --panel-border: rgba(214, 179, 106, 0.20);
    --content-width: 1120px;
}

/* Universal text rendering */
body {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    color: var(--text-main);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p {
    margin-top: 0;
}

p {
    text-wrap: pretty;
}

/* =========================================
   HERO TEXT
========================================= */

.hero .overlay {
    width: min(92%, 1050px);
    margin-inline: auto;
    padding: 35px 20px;
    text-align: center;
}

.hero .welcome {
    margin: 0 0 12px;
    color: var(--gold-light);
    font-size: clamp(0.75rem, 1.5vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.hero .main-title {
    max-width: 1000px;
    margin: 0 auto 18px;
    font-size: clamp(2rem, 5.5vw, 4.5rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-wrap: balance;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.45);
}

.hero .tagline {
    max-width: 650px;
    margin: 0 auto;
    color: #f3eee4;
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.8;
    letter-spacing: 0.025em;
}

/* =========================================
   MAIN PAGE SECTIONS
========================================= */

.page-section {
    padding: clamp(30px, 5vw, 75px) 20px;
    box-sizing: border-box;
}

.page-section > h2,
.plain-section h2,
.slider-section h2,
.social-section h2,
.schedule-container > h2,
.host-container > h2,
.books-section > h2 {
    position: relative;
    max-width: 850px;
    margin: 0 auto 28px;
    padding-bottom: 18px;
    color: var(--gold-light);
    font-size: clamp(1.65rem, 3.2vw, 2.6rem);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-align: center;
    text-wrap: balance;
}

/* Elegant gold line below headings */
.plain-section h2::after,
.slider-section h2::after,
.social-section h2::after,
.schedule-container > h2::after,
.host-container > h2::after,
.books-section > h2::after,
#support-section > h2::after,
#support-section > .support-box h3::after {
    content: "";
    display: block;
    width: 58px;
    height: 3px;
    margin: 18px auto 0;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        var(--gold),
        var(--gold-light)
    );
}

/* =========================================
   ABOUT, MISSION & MANDATE
========================================= */

.plain-section {
    width: min(100%, var(--content-width));
    margin: 24px auto;
    padding: clamp(26px, 4.5vw, 52px);
    box-sizing: border-box;
    text-align: center;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.10);
}

.plain-section p {
    max-width: 790px;
    margin: 0 auto 18px;
    color: var(--text-muted);
    font-size: clamp(0.96rem, 1.4vw, 1.08rem);
    line-height: 1.95;
    font-weight: 400;
    text-align: center;
}

.plain-section p:last-child {
    margin-bottom: 0;
}

/* =========================================
   GENERAL SECTION INTRODUCTIONS
========================================= */

#host-section > p,
#schedule-section > p,
#freebook-section > p {
    max-width: 720px;
    margin: 0 auto 32px;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
    text-align: center;
}

/* =========================================
   FEATURED PROGRAMS & SLIDERS
========================================= */

.slider-section {
    width: min(100%, var(--content-width));
    margin: 45px auto;
    padding: clamp(22px, 4vw, 42px);
    box-sizing: border-box;
    text-align: center;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
}

.slider-section h2 {
    margin-bottom: 30px;
}

.slider-section .slider {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

/* =========================================
   HOSTS
========================================= */

.host-container {
    width: min(100%, var(--content-width));
    margin: 35px auto 0;
    padding: clamp(22px, 4vw, 42px);
    box-sizing: border-box;
    text-align: center;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
}

.host-card {
    text-align: center;
}

.host-card h3 {
    margin: 18px 0 8px;
    color: var(--gold-light);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.4;
    font-weight: 700;
}

.host-card p {
    max-width: 280px;
    margin: 0 auto 22px;
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.8;
}

/* =========================================
   PROGRAM SCHEDULE
========================================= */

.schedule-container {
    width: min(100%, 900px);
    margin: 0 auto;
    padding: clamp(22px, 4vw, 42px);
    box-sizing: border-box;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
}

.schedule-row {
    display: grid;
    grid-template-columns: minmax(105px, 155px) 1fr;
    gap: 20px;
    align-items: center;
    padding: 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
}

.schedule-row:last-child {
    border-bottom: none;
}

.schedule-row span:first-child {
    color: var(--gold-light);
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.schedule-row span:last-child {
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.6;
}

/* =========================================
   SUPPORT SECTION
========================================= */

#support-section > h2 {
    max-width: 800px;
    margin: 0 auto 30px;
    color: var(--gold-light);
    font-size: clamp(1.8rem, 3.5vw, 2.7rem);
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
}

#support-section > p {
    max-width: 720px;
    margin: 25px auto;
    color: var(--text-muted);
    font-size: 1.04rem;
    line-height: 1.95;
    text-align: center;
}

.support-box {
    width: min(100%, 650px);
    margin: 25px auto;
    padding: clamp(22px, 4vw, 34px);
    box-sizing: border-box;
    text-align: center;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
}

.support-box h3 {
    color: var(--gold-light);
    font-size: 1.3rem;
    line-height: 1.4;
}

.support-box p {
    margin: 12px 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* =========================================
   FREE BOOKS
========================================= */

.books-section {
    width: min(100%, var(--content-width));
    margin: 0 auto;
}

.book-card {
    padding: 22px;
    text-align: center;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
}

.book-card h3 {
    margin: 18px 0 10px;
    color: var(--gold-light);
    font-size: 1.15rem;
    line-height: 1.45;
    text-wrap: balance;
}

.book-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.85;
}

.freebook-content {
    max-width: 750px;
    margin: 45px auto 0;
    padding: 28px;
    text-align: center;
    border: 1px solid var(--panel-border);
    border-radius: 20px;
}

.freebook-content h2 {
    color: var(--gold-light);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.3;
}

.freebook-content p {
    color: var(--text-muted);
    line-height: 1.9;
}

/* =========================================
   SOCIAL MEDIA & CONTACT
========================================= */

.social-section {
    padding: 35px 20px;
    text-align: center;
}

#contact {
    scroll-margin-top: 100px;
}

/* =========================================
   BUTTON TYPOGRAPHY
========================================= */

button,
.download-btn,
.btn-download {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.4;
    text-decoration: none;
}

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

footer {
    padding: 25px 18px;
    text-align: center;
}

footer p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.8;
}

/* =========================================
   MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 600px) {
    .page-section {
        padding: 25px 14px;
    }

    .plain-section,
    .slider-section,
    .host-container,
    .schedule-container {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .plain-section {
        margin: 18px auto;
    }

    .plain-section p {
        font-size: 0.96rem;
        line-height: 1.9;
    }

    .hero .overlay {
        padding: 25px 8px;
    }

    .hero .main-title {
        letter-spacing: 0.01em;
    }

    .schedule-row {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 12px;
        padding: 15px 4px;
    }

    .schedule-row span:first-child {
        font-size: 0.85rem;
    }

    .schedule-row span:last-child {
        font-size: 0.93rem;
    }

    .support-box,
    .freebook-content {
        padding: 22px 17px;
    }
}



/* ABOUT US SUBHEADING */
.about-subtitle {
    max-width: 750px;
    margin: -8px auto 24px;
    color: #d6b36a;
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
}

/* ABOUT US CLOSING STATEMENT */
.about-closing {
    margin-top: 26px !important;
    padding-top: 22px;
    border-top: 1px solid rgba(214, 179, 106, 0.25);
    color: #f0d69a !important;
    font-weight: 600 !important;
}



/* ================= OUR MISSION BULLET POINTS ================= */

.mission-list {
    max-width: 790px;
    margin: 30px auto 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.mission-list li {
    position: relative;
    margin-bottom: 18px;
    padding: 18px 20px 18px 48px;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.85;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(214, 179, 106, 0.14);
    border-radius: 12px;
}

.mission-list li::before {
    content: "✓";
    position: absolute;
    top: 19px;
    left: 17px;
    color: var(--gold-light);
    font-size: 1rem;
    font-weight: 800;
}

.mission-list li strong {
    color: var(--gold-light);
    font-weight: 700;
}

.mission-list li:last-child {
    margin-bottom: 0;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .mission-list {
        margin-top: 24px;
    }

    .mission-list li {
        padding: 15px 14px 15px 40px;
        margin-bottom: 14px;
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .mission-list li::before {
        top: 16px;
        left: 13px;
    }
}



.section-intro {
    max-width: 720px;
    margin: -10px auto 30px;
    color: var(--text-muted);
    font-size: clamp(0.95rem, 1.5vw, 1.08rem);
    line-height: 1.9;
    text-align: center;
}




/* ================= WHAT YOU'LL HEAR ================= */

.programs-overview {
    width: min(100% - 32px, 1050px);
    margin: 35px auto;
    padding: 28px 24px;
    background: rgba(16, 24, 39, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 16px;
    box-sizing: border-box;
}

.programs-heading {
    text-align: center;
    margin-bottom: 22px;
}

.programs-eyebrow {
    display: block;
    color: #D4AF37;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.programs-heading h2 {
    color: #FFFFFF;
    font-size: clamp(24px, 3vw, 32px);
    margin: 0 0 8px;
}

.programs-heading p {
    color: #B9C1CD;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 520px;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.program-item {
    min-width: 0;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    box-sizing: border-box;
    text-align: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: border-color 0.25s ease,
                background 0.25s ease,
                transform 0.25s ease;
}

.program-item:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

.program-icon {
    font-size: 23px;
    line-height: 1;
}

.program-item h3 {
    color: #E8D49A;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    margin: 0;
}

/* Tablets */
@media (max-width: 800px) {
    .programs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .programs-overview {
        padding: 24px 16px;
    }
}

/* Small phones */
@media (max-width: 380px) {
    .programs-overview {
        width: calc(100% - 20px);
        padding: 22px 10px;
    }

    .programs-grid {
        gap: 8px;
    }

    .program-item {
        padding: 12px 5px;
    }

    .program-item h3 {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .program-item {
        transition: none;
    }

    .program-item:hover {
        transform: none;
    }
}





/* =========================================================
   FAITH & KNOWLEDGE RADIO
   GOSPEL MUSIC LIBRARY — PREMIUM NAVY & GOLD
   ========================================================= */

#gospel-music-section {
    display: none;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    padding: 55px 20px;
    box-sizing: border-box;
    overflow-x: hidden;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(224, 187, 99, 0.12),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #06101f,
            #0b1c32 55%,
            #071426
        );
}

/* Show the section when activated by your existing navigation */
#gospel-music-section.active {
    display: block;
}

/* Ensure consistent sizing inside this section */
#gospel-music-section *,
#gospel-music-section *::before,
#gospel-music-section *::after {
    box-sizing: border-box;
}

/* MAIN CONTAINER */
#gospel-music-section .gml-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* HEADER */
#gospel-music-section .gml-header {
    margin: 0 auto 35px;
    text-align: center;
}

#gospel-music-section .gml-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #e8c66f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    line-height: 1.6;
}

#gospel-music-section .gml-header h2 {
    margin: 0 0 15px;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.8px;
}

#gospel-music-section .gml-header p {
    max-width: 680px;
    margin: 0 auto;
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.8;
}

/* SEARCH BAR */
#gospel-music-section .gml-search-container {
    display: flex;
    width: 100%;
    max-width: 720px;
    gap: 10px;
    margin: 0 auto 45px;
}

#gospel-music-section #gmlSearch {
    display: block;
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 13px 16px;
    border: 1px solid rgba(224, 187, 99, 0.4);
    border-radius: 10px;
    outline: none;
    background: #ffffff;
    color: #10213a;
    font-size: 14px;
}

#gospel-music-section #gmlSearch:focus {
    border-color: #e8c66f;
    box-shadow: 0 0 0 3px rgba(232, 198, 111, 0.18);
}

#gospel-music-section #gmlSearchBtn {
    flex-shrink: 0;
    min-height: 50px;
    padding: 12px 23px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #f4d987, #c99a37);
    color: #10213a;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#gospel-music-section #gmlSearchBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(201, 154, 55, 0.22);
}

/* FEATURED MUSIC PLAYER */
#gospel-music-section .gml-player {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
    min-width: 0;
    margin: 0 0 55px;
    padding: 26px;
    border: 1px solid rgba(224, 187, 99, 0.3);
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.025)
    );
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

/* CURRENT SONG ARTWORK — CRITICAL SIZE FIX */
#gospel-music-section .gml-player-artwork {
    position: relative;
    flex: 0 0 190px;
    width: 190px;
    height: 190px;
    max-width: 190px;
    overflow: hidden;
    border: 1px solid rgba(232, 198, 111, 0.3);
    border-radius: 15px;
    background: #132943;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

#gospel-music-section #gmlCurrentArtwork {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

/* PLAYER INFORMATION */
#gospel-music-section .gml-player-info {
    flex: 1;
    min-width: 0;
}

#gospel-music-section .gml-player-label {
    display: block;
    margin-bottom: 10px;
    color: #e8c66f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

#gospel-music-section .gml-player-info h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(20px, 2.5vw, 27px);
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

#gospel-music-section #gmlCurrentArtist {
    margin: 0 0 22px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* PROGRESS BAR */
#gospel-music-section .gml-progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 18px;
}

#gospel-music-section #gmlCurrentTime,
#gospel-music-section #gmlDuration {
    flex-shrink: 0;
    color: #cbd5e1;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

#gospel-music-section #gmlProgress {
    flex: 1;
    width: 100%;
    min-width: 0;
    accent-color: #e8c66f;
    cursor: pointer;
}

/* PLAYER CONTROLS */
#gospel-music-section .gml-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

#gospel-music-section .gml-controls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(232, 198, 111, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

#gospel-music-section .gml-controls button:hover {
    transform: translateY(-2px);
    background: rgba(232, 198, 111, 0.18);
}

#gospel-music-section .gml-controls .gml-main-play {
    width: 50px;
    height: 50px;
    border: none;
    background: linear-gradient(135deg, #f4d987, #c99a37);
    color: #10213a;
    font-size: 19px;
    box-shadow: 0 5px 18px rgba(201, 154, 55, 0.2);
}

#gospel-music-section .gml-player-message {
    margin: 0;
    color: #aebed0;
    font-size: 12px;
    line-height: 1.7;
}

/* LIBRARY HEADING */
#gospel-music-section .gml-library-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

#gospel-music-section .gml-library-heading .gml-eyebrow {
    margin-bottom: 8px;
}

#gospel-music-section .gml-library-heading h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 800;
    line-height: 1.35;
}

#gospel-music-section .gml-song-count {
    flex-shrink: 0;
    color: #e8c66f;
    font-size: 13px;
    font-weight: 700;
}

/* SONG GRID */
#gospel-music-section .gml-song-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

/* INDIVIDUAL SONG CARD */
#gospel-music-section .gml-song-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.075),
        rgba(255, 255, 255, 0.025)
    );
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

#gospel-music-section .gml-song-card:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 198, 111, 0.5);
}

/* SONG COVER IMAGE — CRITICAL SIZE FIX */
#gospel-music-section .gml-card-artwork {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: 10px;
    background: #132943;
}

/* Works whether JavaScript creates an img or uses a background */
#gospel-music-section .gml-card-artwork img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    object-position: center;
}

#gospel-music-section .gml-card-info {
    flex: 1;
    min-width: 0;
}

#gospel-music-section .gml-card-info h4 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

#gospel-music-section .gml-card-info p {
    margin: 0 0 12px;
    color: #aebed0;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* SONG CARD PLAY BUTTON */
#gospel-music-section .gml-card-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    align-self: flex-start;
    margin-top: auto;
    padding: 8px 13px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #f4d987, #c99a37);
    color: #10213a;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#gospel-music-section .gml-card-play:hover {
    transform: scale(1.05);
}

/* LOADING, EMPTY AND ERROR STATES */
#gospel-music-section .gml-status,
#gospel-music-section .gml-empty,
#gospel-music-section .gml-error {
    padding: 25px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-align: center;
    line-height: 1.8;
}

#gospel-music-section .gml-status {
    color: #cbd5e1;
}

#gospel-music-section .gml-empty {
    color: #cbd5e1;
}

#gospel-music-section .gml-empty h3 {
    margin-top: 0;
    color: #ffffff;
}

#gospel-music-section .gml-error {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.3);
}

/* LOAD MORE */
#gospel-music-section .gml-load-container {
    margin: 35px 0;
    text-align: center;
}

#gospel-music-section .gml-load-more {
    padding: 14px 28px;
    border: 1px solid rgba(232, 198, 111, 0.45);
    border-radius: 10px;
    background: transparent;
    color: #f4d987;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

#gospel-music-section .gml-load-more:hover {
    background: #e8c66f;
    color: #10213a;
}

/* SCRIPTURE FOOTER */
#gospel-music-section .gml-footer-message {
    max-width: 760px;
    margin: 55px auto 0;
    padding: 28px 20px;
    border-top: 1px solid rgba(232, 198, 111, 0.25);
    text-align: center;
}

#gospel-music-section .gml-footer-message > span {
    color: #e8c66f;
    font-size: 30px;
}

#gospel-music-section .gml-footer-message p {
    margin: 12px 0;
    color: #dbe4ef;
    font-size: 14px;
    line-height: 1.8;
}

#gospel-music-section .gml-footer-message small {
    color: #e8c66f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* TABLETS */
@media (max-width: 1000px) {
    #gospel-music-section .gml-song-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    #gospel-music-section .gml-player-artwork {
        flex-basis: 160px;
        width: 160px;
        height: 160px;
        max-width: 160px;
    }
}

/* SMALL TABLETS */
@media (max-width: 760px) {
    #gospel-music-section {
        padding: 40px 16px;
    }

    #gospel-music-section .gml-song-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    #gospel-music-section .gml-player {
        gap: 18px;
        padding: 20px;
    }

    #gospel-music-section .gml-player-artwork {
        flex-basis: 125px;
        width: 125px;
        height: 125px;
        max-width: 125px;
    }
}

/* MOBILE PHONES */
@media (max-width: 520px) {
    #gospel-music-section {
        padding: 32px 12px;
    }

    #gospel-music-section .gml-header {
        margin-bottom: 28px;
    }

    #gospel-music-section .gml-header h2 {
        font-size: 29px;
    }

    #gospel-music-section .gml-header p {
        font-size: 13px;
    }

    #gospel-music-section .gml-search-container {
        gap: 7px;
        margin-bottom: 30px;
    }

    #gospel-music-section #gmlSearch {
        min-height: 46px;
        padding: 10px;
        font-size: 12px;
    }

    #gospel-music-section #gmlSearchBtn {
        min-height: 46px;
        padding: 10px 13px;
        font-size: 10px;
    }

    #gospel-music-section .gml-player {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 18px 14px;
        margin-bottom: 40px;
    }

    #gospel-music-section .gml-player-artwork {
        flex: 0 0 auto;
        width: 150px;
        height: 150px;
        max-width: 150px;
        align-self: center;
    }

    #gospel-music-section .gml-player-info {
        width: 100%;
    }

    #gospel-music-section .gml-player-info h3 {
        font-size: 21px;
    }

    #gospel-music-section .gml-library-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    #gospel-music-section .gml-song-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #gospel-music-section .gml-song-card {
        padding: 9px;
        border-radius: 11px;
    }

    #gospel-music-section .gml-card-info h4 {
        font-size: 12px;
    }

    #gospel-music-section .gml-card-info p {
        font-size: 11px;
    }

    #gospel-music-section .gml-card-play {
        min-height: 34px;
        padding: 7px 10px;
    }

    #gospel-music-section .gml-footer-message {
        margin-top: 35px;
        padding: 22px 10px;
    }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    #gospel-music-section *,
    #gospel-music-section *::before,
    #gospel-music-section *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* =====================================================
   DISCOVER GOSPEL MUSIC BANNER
   Faith & Knowledge Radio
===================================================== */

.gospel-discover-section {
    width: 100%;
    padding: 25px 4%;
    box-sizing: border-box;
    background: #03152f;
}

.gospel-discover-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;
    max-width: 1450px;
    min-height: 340px;
    margin: 0 auto;
    padding: 35px 4%;

    overflow: hidden;
    box-sizing: border-box;

    color: #ffffff;
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(245, 180, 0, 0.18),
            transparent 35%
        ),
        linear-gradient(115deg, #00132e 0%, #061b38 55%, #10213a 100%);

    border: 4px solid #f5c33b;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
}

/* Subtle gold glow */

.gospel-discover-banner::before {
    content: "";
    position: absolute;
    top: -100px;
    right: 15%;
    width: 300px;
    height: 300px;

    background: rgba(245, 180, 0, 0.09);
    filter: blur(70px);
    border-radius: 50%;
    pointer-events: none;
}

/* LEFT CONTENT */

.gospel-discover-content {
    position: relative;
    z-index: 2;
    flex: 1 1 65%;
    min-width: 0;
}

.gospel-discover-brand {
    display: block;
    margin-bottom: 10px;

    color: #ffca38;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 3px;
}

.gospel-discover-content h2 {
    margin: 0 0 14px;
    color: #ffffff;

    font-size: clamp(32px, 4vw, 58px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -1.5px;
}

.gospel-discover-content h2 span {
    display: block;
    color: #ffc83d;
}

.gospel-discover-description {
    max-width: 480px;
    margin: 0 0 24px;
    padding-left: 15px;

    border-left: 3px solid #ffc83d;

    color: #f0f3fa;
    font-size: 17px;
    line-height: 1.65;
}

/* BUTTON AND TAGLINE: SAME ROW */

.gospel-discover-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 22px;
}

/* EXPLORE BUTTON */

.gospel-explore-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    flex: 0 0 auto;
    min-height: 56px;
    padding: 14px 22px;

    border: none;
    border-radius: 40px;

    background: linear-gradient(135deg, #ffdc73, #f5b400);
    color: #07172d;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.3px;

    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gospel-explore-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(245, 180, 0, 0.28);
}

.explore-button-icon {
    font-size: 27px;
    line-height: 1;
}

.explore-arrow {
    font-size: 24px;
    line-height: 1;
}

/* WORSHIP. PRAISE. INSPIRATION. */

.gospel-discover-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    flex: 0 1 auto;
    min-width: 0;

    padding-left: 20px;
    border-left: 2px solid #f5c33b;

    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(13px, 1.4vw, 19px);
    font-style: italic;
    line-height: 1.4;
    white-space: nowrap;
}

.tagline-music-icon {
    color: #ffc83d;
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 1;
}

/* RIGHT-SIDE DECORATIVE VISUAL */

.gospel-discover-visual {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 1 35%;
    min-width: 150px;
    min-height: 240px;
}

.headphone-icon {
    position: relative;
    z-index: 2;

    font-size: clamp(100px, 15vw, 190px);
    line-height: 1;

    filter: drop-shadow(0 12px 15px rgba(0, 0, 0, 0.45));
    animation: gospelHeadphoneFloat 4s ease-in-out infinite;
}

.music-note {
    position: absolute;
    z-index: 1;

    color: #ffcb42;
    font-family: Georgia, serif;
    font-weight: bold;
    text-shadow: 0 0 18px rgba(255, 193, 39, 0.5);
}

.note-one {
    top: 15%;
    left: 8%;
    font-size: 44px;
    transform: rotate(-12deg);
}

.note-two {
    top: 30%;
    right: 4%;
    font-size: 48px;
    transform: rotate(10deg);
}

.note-three {
    bottom: 18%;
    left: 10%;
    font-size: 40px;
}

.note-four {
    bottom: 12%;
    right: 12%;
    font-size: 45px;
}

@keyframes gospelHeadphoneFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* =====================================================
   TABLET RESPONSIVENESS
===================================================== */

@media (max-width: 1050px) {

    .gospel-discover-banner {
        padding: 30px 3%;
        gap: 10px;
    }

    .gospel-discover-content {
        flex-basis: 70%;
    }

    .gospel-discover-visual {
        flex-basis: 30%;
        min-width: 100px;
    }

    .gospel-discover-actions {
        gap: 12px;
    }

    .gospel-explore-button {
        gap: 7px;
        padding: 13px 15px;
        font-size: 12px;
    }

    .gospel-discover-tagline {
        gap: 7px;
        padding-left: 12px;
        font-size: 13px;
    }

    .tagline-music-icon {
        font-size: 27px;
    }
}

/* =====================================================
   MOBILE RESPONSIVENESS
   Keep tagline BESIDE the button
===================================================== */

@media (max-width: 600px) {

    .gospel-discover-section {
        padding: 18px 12px;
    }

    .gospel-discover-banner {
        min-height: auto;
        padding: 25px 17px;

        border-width: 2px;
        border-radius: 15px;

        gap: 0;
    }

    .gospel-discover-content {
        flex: 1 1 100%;
        width: 100%;
    }

    .gospel-discover-brand {
        margin-bottom: 9px;
        font-size: 10px;
        letter-spacing: 1.7px;
    }

    .gospel-discover-content h2 {
        font-size: clamp(29px, 8vw, 42px);
        letter-spacing: -0.7px;
    }

    .gospel-discover-description {
        max-width: 100%;
        margin-bottom: 20px;
        padding-left: 10px;
        font-size: 14px;
        line-height: 1.6;
    }

    /* Button and tagline remain side by side */

    .gospel-discover-actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
    }

    .gospel-explore-button {
        flex: 0 1 auto;
        min-width: 0;
        min-height: 45px;

        gap: 5px;
        padding: 11px 10px;

        font-size: 10px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .explore-button-icon {
        font-size: 20px;
    }

    .explore-arrow {
        font-size: 17px;
    }

    .gospel-discover-tagline {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;

        gap: 5px;
        padding-left: 9px;

        font-size: clamp(10px, 2.8vw, 12px);
        line-height: 1.35;
        white-space: normal;
    }

    .tagline-music-icon {
        flex: 0 0 auto;
        font-size: 23px;
    }

    /* Decorative headphones sit behind the text on small screens */

    .gospel-discover-visual {
        position: absolute;
        right: -20px;
        bottom: -25px;

        width: 120px;
        min-width: 0;
        min-height: 0;

        opacity: 0.12;
        pointer-events: none;
    }

    .headphone-icon {
        font-size: 110px;
    }

    .music-note {
        font-size: 25px;
    }

    .gospel-discover-banner::before {
        right: -50px;
        top: auto;
        bottom: -70px;
    }
}

/* EXTRA-SMALL PHONES */

@media (max-width: 360px) {

    .gospel-discover-banner {
        padding: 22px 12px;
    }

    .gospel-discover-actions {
        gap: 7px;
    }

    .gospel-explore-button {
        gap: 4px;
        padding: 10px 7px;
        font-size: 9px;
    }

    .gospel-discover-tagline {
        gap: 4px;
        padding-left: 7px;
        font-size: 9px;
    }

    .tagline-music-icon {
        font-size: 19px;
    }
}



/* Remove underlines from the entire Gospel Music banner */
a.gospel-discover-banner,
a.gospel-discover-banner:link,
a.gospel-discover-banner:visited,
a.gospel-discover-banner:hover,
a.gospel-discover-banner:active,
a.gospel-discover-banner *,
a.gospel-discover-banner *:hover {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* Preserve the banner's existing text colours */
a.gospel-discover-banner {
    color: inherit;
}



/* =====================================================
   FINAL RESPONSIVE RADIO PLAYER + GOSPEL CATEGORIES
   Scoped to the floating player and Gospel Music Library.
===================================================== */
.glass-radio {
    position: fixed !important;
    left: auto !important;
    right: 22px !important;
    bottom: 18px !important;
    transform: none !important;
    width: min(290px, calc(100vw - 32px)) !important;
    max-width: 290px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(232,198,111,.45) !important;
    border-radius: 18px !important;
    background: rgba(12, 23, 39, .94) !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.42) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 99999 !important;
    text-align: center !important;
}

.glass-radio #playBtn {
    min-height: 38px !important;
    padding: 9px 20px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #ffda58, #e9a900) !important;
    color: #071426 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.glass-radio #nowPlaying {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

.glass-radio .listeners {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
}

#gospel-music-section {
    padding-bottom: 115px !important;
}

#gospel-music-section .gml-category-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 0 0 26px;
    padding: 0;
}

#gospel-music-section .gml-category-btn {
    appearance: none;
    border: 1px solid rgba(232,198,111,.35);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: #e8edf5;
    padding: 10px 15px;
    min-height: 38px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

#gospel-music-section .gml-category-btn:hover {
    border-color: #e8c66f;
    transform: translateY(-1px);
}

#gospel-music-section .gml-category-btn.is-active {
    color: #071426;
    border-color: #f5c94d;
    background: linear-gradient(135deg, #ffdf6a, #eab12a);
    box-shadow: 0 4px 14px rgba(234,177,42,.18);
}

@media (max-width: 600px) {
    .glass-radio {
        left: 50% !important;
        right: auto !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 28px) !important;
        max-width: 360px !important;
        padding: 8px 12px !important;
        gap: 4px !important;
        border-radius: 16px !important;
    }
    .glass-radio #playBtn {
        min-height: 34px !important;
        padding: 7px 18px !important;
        font-size: 12px !important;
    }
    .glass-radio #nowPlaying {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    .glass-radio .listeners {
        font-size: 9px !important;
    }
    #gospel-music-section .gml-category-bar {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 0 9px;
        margin-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    #gospel-music-section .gml-category-btn {
        flex: 0 0 auto;
        padding: 9px 12px;
        min-height: 36px;
        font-size: 11px;
    }
    #gospel-music-section {
        padding-bottom: 125px !important;
    }
}

/* =========================================================
   GOSPEL MUSIC CATEGORY FILTERS — REFINED DESKTOP + MOBILE
   Scoped only to the Gospel Music Library.
========================================================= */
#gospel-music-section .gml-category-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 28px !important;
    padding: 12px !important;
    border: 1px solid rgba(232, 198, 111, .18) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(15, 30, 49, .94), rgba(7, 19, 34, .88)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 28px rgba(0,0,0,.12) !important;
}

#gospel-music-section .gml-category-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 40px !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    border: 1px solid rgba(194, 209, 228, .22) !important;
    border-radius: 999px !important;
    background: #17283c !important;
    color: #eaf1fa !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: .15px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.16) !important;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

#gospel-music-section .gml-category-btn:hover,
#gospel-music-section .gml-category-btn:focus-visible {
    color: #fff7df !important;
    background: #263a52 !important;
    border-color: #d8b65a !important;
    outline: none !important;
}

#gospel-music-section .gml-category-btn.is-active,
#gospel-music-section .gml-category-btn[aria-pressed="true"] {
    color: #101827 !important;
    background: linear-gradient(135deg, #ffe27a 0%, #f4c344 55%, #e4a92b 100%) !important;
    border-color: #ffe17a !important;
    box-shadow: 0 4px 14px rgba(244, 195, 68, .22), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

@media (max-width: 600px) {
    #gospel-music-section .gml-category-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        width: calc(100% + 2px) !important;
        margin: 0 0 22px !important;
        padding: 10px 9px 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-radius: 14px !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        overscroll-behavior-x: contain;
    }

    #gospel-music-section .gml-category-bar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    #gospel-music-section .gml-category-btn {
        flex: 0 0 auto !important;
        min-height: 42px !important;
        padding: 11px 15px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
    }

    #gospel-music-section .gml-category-btn.is-active,
    #gospel-music-section .gml-category-btn[aria-pressed="true"] {
        color: #101827 !important;
        background: linear-gradient(135deg, #ffe27a, #f0bd37) !important;
        border-color: #ffe27a !important;
    }
}

/* ================= GOSPEL MUSIC LIBRARY FILTER ROW ================= */
#gospel-music-section .gml-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 14px 0 22px;
    padding: 14px 16px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 14px;
    background: rgba(9, 20, 42, 0.62);
}

#gospel-music-section .gml-artist-filter-label {
    color: #f2d58a;
    font-size: 0.9rem;
    font-weight: 700;
}

#gospel-music-section .gml-artist-filter {
    min-width: min(100%, 240px);
    max-width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 9px;
    color: #f8fafc;
    background-color: #101d35;
    font: inherit;
    cursor: pointer;
}

#gospel-music-section .gml-artist-filter option {
    color: #f8fafc;
    background: #101d35;
}

#gospel-music-section .gml-filter-note {
    flex-basis: 100%;
    margin: 0;
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.78rem;
    line-height: 1.45;
}

@media (max-width: 600px) {
    #gospel-music-section .gml-filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    #gospel-music-section .gml-artist-filter {
        width: 100%;
        min-width: 0;
    }
}



/* =========================================
   INTERNATIONAL RADIO SCHEDULE
========================================= */

#schedule-section {
    padding: 30px 15px;
}

.international-schedule {
    max-width: 1150px;
    margin: auto;
    color: #fff;
}

/* HERO */

.schedule-hero {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 18px;
    padding: 35px 20px;
    background:
        linear-gradient(90deg, rgba(0,15,45,.90), rgba(0,30,80,.55)),
        url('assets/schedule-bg.jpg') center/cover no-repeat;
}

.schedule-label {
    color: #ffc52e;
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: bold;
}

.schedule-hero h1 {
    font-size: clamp(30px, 5vw, 48px);
    margin: 15px 0;
}

.schedule-hero h1 span {
    color: #ffc52e;
}

.schedule-hero p {
    font-size: 17px;
    font-style: italic;
}

/* TIMEZONE PANEL */

.timezone-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 25px;
    margin: 25px 0;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 18px;
    background: linear-gradient(120deg, #061b46, #00102e);
}

.timezone-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 180px;
}

.timezone-icon {
    font-size: 30px;
    color: #ffc52e;
}

.timezone-item small {
    display: block;
    color: #ccc;
    margin-bottom: 7px;
}

.timezone-item h2 {
    color: #fff;
    margin: 0;
    font-size: 27px;
}

.timezone-item select {
    max-width: 100%;
    background: transparent;
    color: #ffc52e;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.timezone-item select option {
    background: #061b46;
    color: #fff;
}

.timezone-item p {
    font-size: 13px;
    color: #ccc;
    margin-top: 5px;
}

.timezone-divider {
    width: 1px;
    height: 65px;
    background: rgba(255,255,255,.4);
}

/* SCHEDULE TABLE */

.schedule-table-container {
    background: #03183d;
    border: 1px solid rgba(255,197,46,.6);
    border-radius: 18px;
    overflow: hidden;
}

.schedule-heading {
    display: grid;
    grid-template-columns: 22% 48% 30%;
    background: linear-gradient(90deg, #ffbd24, #ffda63);
    color: #07152f;
    padding: 17px 25px;
    font-size: 17px;
    font-weight: bold;
}

.schedule-row {
    display: grid;
    grid-template-columns: 22% 48% 30%;
    align-items: center;
    padding: 12px 25px;
    margin: 5px 10px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: linear-gradient(100deg, #071e49, #09265c);
    gap: 10px;
}

.schedule-row:hover {
    background: linear-gradient(100deg, #102c60, #153a75);
}

.schedule-time {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.schedule-program {
    font-size: 17px;
    font-weight: bold;
}

.schedule-program small {
    display: block;
    font-size: 12px;
    font-weight: normal;
    color: #aaa;
    margin-top: 4px;
}

.schedule-day {
    font-size: 13px;
    color: #ffc52e;
}


/* TIME ZONE SEARCH */

.timezone-location {
    flex: 1.5;
    min-width: 250px;
}

.timezone-location-content {
    width: 100%;
}

.timezone-search-box {
    display: flex;
    gap: 7px;
    margin: 10px 0;
    width: 100%;
}

#timezoneSearch {
    flex: 1;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(214, 180, 92, 0.4);
    border-radius: 7px;
    background: #101b32;
    color: white;
    outline: none;
    font-size: 13px;
}

#timezoneSearch::placeholder {
    color: #a6adbd;
}

#timezoneSearch:focus {
    border-color: #d6b45c;
}

#timezoneSearchBtn {
    padding: 0 14px;
    border: none;
    border-radius: 7px;
    background: linear-gradient(135deg, #d6b45c, #a98232);
    color: #101b32;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#timezoneSearchBtn:hover {
    background: #f0d58b;
}

#timezoneSelector {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(214, 180, 92, 0.4);
    border-radius: 7px;
    background: #101b32;
    color: white;
    font-size: 13px;
    outline: none;
}

#timezoneSelector option {
    background: #101b32;
    color: white;
}

#timezoneSearchMessage {
    color: #d6b45c;
    font-size: 11px;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .timezone-location {
        width: 100%;
    }

    .timezone-search-box {
        flex-wrap: wrap;
    }

    #timezoneSearch {
        min-width: 150px;
    }
}


/* FOOTER */

.schedule-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 25px;
    padding: 25px;
    border: 1px solid #dcae28;
    border-radius: 18px;
    background: #03183d;
}

.schedule-footer-icon {
    font-size: 45px;
}

.schedule-footer h3 {
    color: #ffc52e;
    margin: 0 0 8px;
}

.schedule-footer p {
    margin: 0;
    color: #ddd;
}

.schedule-footer button {
    background: linear-gradient(90deg, #ffbd24, #ffda63);
    color: #061735;
    border: none;
    border-radius: 30px;
    padding: 13px 22px;
    font-weight: bold;
    cursor: pointer;
}


/* ==================================================
   FAITH & KNOWLEDGE RADIO
   PREMIUM RESPONSIVE SCHEDULE TABLE
   MOBILE + SMALL PHONES
================================================== */

@media screen and (max-width: 768px) {

    #schedule-section {
        width: 100%;
        padding: 25px 0 45px;
        overflow-x: clip;
        box-sizing: border-box;
    }

    .international-schedule {
        width: 100%;
        max-width: 100%;
        padding: 0 14px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* INTRODUCTION */

    .schedule-hero {
        width: 100%;
        margin-bottom: 25px;
    }

    .schedule-hero h1 {
        font-size: clamp(26px, 6vw, 36px);
        line-height: 1.25;
    }

    .schedule-hero p {
        font-size: 15px;
        line-height: 1.7;
    }

    /* LOCATION PANEL */

    .timezone-panel {
        width: 100%;
        padding: 18px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        border-radius: 15px;
    }

    .timezone-location {
        width: 100%;
        min-width: 0;
    }

    .timezone-location-content {
        width: 100%;
        min-width: 0;
    }

    .timezone-search-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    #timezoneSearch,
    #timezoneSearchBtn,
    #timezoneSelector {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 45px;
        box-sizing: border-box;
    }

    #timezoneSelector {
        margin-top: 10px;
    }

    .timezone-divider {
        width: 100%;
        height: 1px;
        display: block;
    }

    /* TABLE OUTER CONTAINER */

    .schedule-table-container {
        width: 100%;
        max-width: 100%;
        margin: 25px 0;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 13px;
        border: 1px solid rgba(255, 197, 46, 0.55);
        background: #03183d;
    }

    /* TABLE HEADER */

    .schedule-heading {
        display: grid !important;
        grid-template-columns: 25% 47% 28%;
        width: 100%;
        align-items: center;
        gap: 0;
        padding: 14px 5px;
        box-sizing: border-box;

        background: linear-gradient(
            100deg,
            #d6a72e,
            #ffda63
        );

        color: #07152f;
        font-size: clamp(10px, 2.8vw, 12px);
        font-weight: 800;
        text-align: center;
    }

    .schedule-heading span {
        display: block !important;
        min-width: 0;
        padding: 0 2px;
        line-height: 1.35;
        text-align: center;
        overflow-wrap: normal;
    }

    /* TABLE ROWS */

    #scheduleList {
        display: block;
        width: 100%;
    }

    .schedule-row {
        display: grid !important;
        grid-template-columns: 25% 47% 28%;
        width: 100%;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 17px 5px;
        box-sizing: border-box;

        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 0;

        background: linear-gradient(
            100deg,
            #071e49,
            #09265c
        );
    }

    .schedule-row:last-child {
        border-bottom: none;
    }

    /* TIME */

    .schedule-time {
        display: block;
        min-width: 0;
        padding: 0 3px;

        color: #ffda63;
        font-size: clamp(10px, 2.9vw, 13px);
        font-weight: 800;
        line-height: 1.5;
        text-align: center;

        overflow-wrap: normal;
    }

    /* PROGRAMME */

    .schedule-program {
        display: block;
        min-width: 0;
        padding: 0 6px;

        color: #ffffff;
        font-size: clamp(12px, 3.3vw, 15px);
        font-weight: 700;
        line-height: 1.45;
        text-align: left;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .schedule-program small {
        display: block;
        margin-top: 6px;

        color: #c5ccda;
        font-size: clamp(10px, 2.7vw, 12px);
        font-weight: 400;
        line-height: 1.55;

        overflow-wrap: break-word;
    }

    /* BROADCAST DAY */

    .schedule-day {
        display: block;
        grid-column: auto !important;
        min-width: 0;
        padding: 0 3px;

        color: #ffcf4a;
        font-size: clamp(10px, 2.8vw, 12px);
        font-weight: 600;
        line-height: 1.5;
        text-align: center;

        overflow-wrap: break-word;
    }

    /* ROW HOVER */

    .schedule-row:hover {
        background: linear-gradient(
            100deg,
            #102c60,
            #153a75
        );
    }

    /* FOOTER */

    .schedule-footer {
        width: 100%;
        padding: 20px 16px;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .schedule-footer button {
        width: 100%;
        min-height: 46px;
    }
}


/* EXTRA SMALL PHONES */

@media screen and (max-width: 380px) {

    .international-schedule {
        padding-left: 9px;
        padding-right: 9px;
    }

    .schedule-heading {
        grid-template-columns: 26% 46% 28%;
        font-size: 9px;
        padding: 12px 3px;
    }

    .schedule-row {
        grid-template-columns: 26% 46% 28%;
        padding: 14px 3px;
    }

    .schedule-time,
    .schedule-day {
        font-size: 10px;
    }

    .schedule-program {
        font-size: 11px;
        padding: 0 4px;
    }

    .schedule-program small {
        font-size: 10px;
        line-height: 1.5;
    }
}