:root {
            --pink: #ff4fd8;
            --yellow: #ffd84d;
            --blue: #34c7ff;
            --purple: #7c4dff;
            --red: #ff4b55;
            --dark: #15102b;
            --dark-2: #22194a;
            --cream: #fff7e8;
			--primary: #571A52;
			--secondary: #AD3DA3;
			--BannerBackgroundColor: linear-gradient(135deg, rgb(117, 93, 158,0.9), rgb(172, 54, 209, 0.88), rgb(204, 59, 104, 0.85));
        }

        body {
            background:
                radial-gradient(circle at top left, rgba(255, 79, 216, 0.22), transparent 24%),
                radial-gradient(circle at top right, rgba(52, 199, 255, 0.16), transparent 22%),
                linear-gradient(180deg, #1a1236 0%, #120b28 100%);
            color: #ffffff;
            font-family: Arial, Helvetica, sans-serif;
        }

		.wrapper {
				max-width: 90%;
				margin: 0 auto;
				padding: 0 20px;
			}

		.card.comingupHome {
			border:	1px solid white !important;
		}
.now-playing-panel {
	position: relative;
	overflow: hidden;
	background: #111;
	background-size: cover;
	background-position: center;
	min-height: 125px;
}

.now-playing-panel .bg-blur {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(2px);
	transform: scale(1.00);
	z-index: 1;
}

.now-playing-panel .bg-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 2;
}

.now-playing-panel .card-body,
.now-playing-panel .row {
	position: relative;
	z-index: 3;
	color: #fff;
}

.on-air-panel {
	position: relative;
	overflow: hidden;
	min-height: 160px;
	background: #111;
}

.on-air-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(6px);
	transform: scale(1.08);
	z-index: 1;
}

.on-air-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 2;
}

.on-air-panel .row,
.on-air-panel .card-body {
	position: relative;
	z-index: 3;
	color: #fff;
}

        a {
            text-decoration: none;
        }

        .station-selector-bar {
            background: linear-gradient(90deg, var(--pink), var(--red));
            color: white;
            border-bottom: 3px solid rgba(255,255,255,0.12);
            position: relative;
            z-index: 1035;
        }

        .station-selector-details {
            background: #1f153f;
        }

        .station-option {
            display: block;
            padding: 0.95rem 1rem;
            border-radius: 1rem;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
            color: white;
            font-weight: 700;
            border: 2px solid transparent;
            transition: transform 0.2s ease, border-color 0.2s ease;
        }

        .station-option:hover {
            transform: translateY(-2px) rotate(-0.3deg);
            border-color: var(--yellow);
        }

        .top-strip {
            background: #120d24;
            color: #f5eefe;
            font-size: 0.92rem;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .top-strip a,
        .footer a {
            color: #fff;
        }

        .main-nav {
            background: rgba(20, 13, 44, 0.96) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }

        .navbar-brand {
            font-size: 1.7rem;
            font-weight: 900;
            letter-spacing: 0.02em;
            color: white !important;
        }

        .brand-badge {
            background: var(--yellow);
            color: #22194a;
            font-size: 0.72rem;
            padding: 0.3rem 0.6rem;
            border-radius: 999px;
            margin-left: 0.55rem;
            vertical-align: middle;
            font-weight: 900;
        }

        .nav-link {
            color: rgba(255,255,255,0.82) !important;
        }

        .nav-link:hover {
            color: white !important;
        }

        .hero-banner {
           background: var(--BannerBackgroundColor);
  border-left: 9px solid white;
  border-bottom-left-radius: 50rem;
  border-bottom-right-radius: -8.25rem;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  position: relative;
  border-top-left-radius: 50rem;
  width: 94%;
  float: right;
        }

@media (max-width: 767px) {
  .hero-banner {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
	width: 100%;
	border-left: 0;
	float: none;
	border-bottom: 2px solid white;
	  padding-bottom: 3%;
  }
}


        .hero-banner::after {
            content: '';
            position: absolute;
            right: -60px;
            top: -60px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: rgba(255,216,77,0.22);
            filter: blur(10px);
        }

        .hero-overlay {
            padding: 3rem;
            position: relative;
            z-index: 1;
				margin-left: 1%;
        }

        .hero-banner h1 {
            font-size: clamp(2.4rem, 5vw, 4.8rem);
            font-weight: 900;
            text-transform: uppercase;
            line-height: 0.95;
            margin-bottom: 1rem;
            text-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .hero-banner p {
            font-size: 1.08rem;
            max-width: 720px;
        }

        .hero-panel {
            background: var(--cream);
            color: #22194a;
            border-radius: 1.3rem;
            padding: 1.5rem;
            box-shadow: 0 12px 24px rgba(0,0,0,0.14);
        }

        .btn-danger {
            background: #ff4b55;
            border-color: #ff4b55;
            font-weight: 700;
        }

        .btn-outline-light {
            font-weight: 700;
        }

        .listen-card,
        .panel-card,
        .promo-card,
        .contact-card {
            border: 0;
            border-radius: 1.4rem;
            box-shadow: 0 16px 40px rgba(0,0,0,0.22);
        }

        .listen-card,
        .panel-card,
        .contact-card {
            background: #fffaf0;
            color: #22194a;
        }

        .listen-card .card-header,
        .panel-card .card-header,
        .contact-card .card-header {
            background: transparent;
            border-bottom: 2px solid rgba(34,25,74,0.08);
            font-weight: 900;
            font-size: 1rem;
            color: #22194a;
        }

        .live-pill {
            background: linear-gradient(90deg, var(--red), var(--pink));
            color: #fff;
            font-size: 0.75rem;
            padding: 0.35rem 0.7rem;
            border-radius: 999px;
            font-weight: 800;
            letter-spacing: 0.05em;
        }

        .now-playing-box {
            background: linear-gradient(135deg, #21144a, #4421a7, #ff4fd8);
            color: #fff;
            border-radius: 1.2rem;
            padding: 1.35rem;
            position: relative;
            overflow: hidden;
        }

        .now-playing-box::after {
            content: '';
            position: absolute;
            width: 130px;
            height: 130px;
            right: -30px;
            bottom: -40px;
            border-radius: 50%;
            background: rgba(255,216,77,0.18);
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 900;
            margin-bottom: 0.25rem;
            text-transform: uppercase;
        }

        .schedule-item {
            border-bottom: 2px dashed rgba(34,25,74,0.12);
            padding: 1rem 0;
        }

        .schedule-item:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .schedule-time {
            font-weight: 900;
            color: #ff4b55;
        }

        .promo-card {
            background: linear-gradient(135deg, #fff, #fff4cc);
            padding: 1.25rem;
            height: 100%;
            color: #22194a;
            border: 3px solid rgba(255, 216, 77, 0.38);
        }

        .promo-card h5 {
            font-weight: 900;
            margin-bottom: 0.55rem;
            text-transform: uppercase;
        }

        .info-list li {
            padding: 0.8rem 0;
            border-bottom: 2px dashed rgba(34,25,74,0.12);
        }

        .info-list li:last-child {
            border-bottom: 0;
        }

        .cta-band {
            background: linear-gradient(135deg, var(--yellow), #ffb84d);
            color: #22194a;
            border-radius: 1.5rem;
            box-shadow: 0 14px 36px rgba(0,0,0,0.2);
        }

        .cta-band .btn-light {
            font-weight: 800;
            color: #22194a;
        }

        .footer {
            background: #100a22;
            color: #d8cff8;
            border-top: 1px solid rgba(255,255,255,0.08);
        }

        .text-muted {
            color: #6d6290 !important;
        }

        .fun-label {
            display: inline-block;
            background: rgba(255,255,255,0.18);
            border: 2px solid rgba(255,255,255,0.24);
            padding: 0.45rem 0.8rem;
            border-radius: 999px;
            text-transform: uppercase;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            margin-bottom: 1rem;
        }