:root {
       --font-heading: 'Fredoka', cursive, sans-serif;
       --font-body: 'Nunito', sans-serif;

       /* Color Palette */
       --sky-blue: #38bdf8;
       --royal-blue: #2563eb;
       --sunshine-yellow: #facc15;
       --brand-orange: #ff7a00;
       --brand-purple: #8b5cf6;
       --emerald-green: #10b981;
       --coral-red: #f43f5e;
       --gold-glow: #fbbf24;

       /* Dark Theme Default Vars */
       --bg-main: #0c1021;
       --glass-bg: rgba(255, 255, 255, 0.12);
       --glass-border: rgba(255, 255, 255, 0.2);
       --glass-card-bg: rgba(20, 25, 45, 0.55);
       --text-color: #ffffff;
       --text-muted: #cbd5e1;
       --nav-bg: rgba(15, 23, 42, 0.65);
       --nav-link-color: #ffffff;
       --section-title-color: #ffffff;
   }

   [data-theme="light"] {
       --bg-main: #f8fafc;
       --glass-bg: rgba(255, 255, 255, 0.75);
       --glass-border: rgba(15, 23, 42, 0.12);
       --glass-card-bg: rgba(255, 255, 255, 0.85);
       --text-color: #0f172a;
       --text-muted: #475569;
       --nav-bg: rgba(255, 255, 255, 0.85);
       --nav-link-color: #0f172a;
       --section-title-color: #0f172a;
   }

   body {
       font-family: var(--font-body);
       color: var(--text-color);
       background-color: var(--bg-main);
       margin: 0;
       padding: 0;
       overflow-x: hidden;
       transition: background-color 0.4s ease, color 0.4s ease;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   .font-heading {
       font-family: var(--font-heading);
       font-weight: 700;
   }

   .section-title {
       color: var(--section-title-color);
       transition: color 0.4s ease;
   }

   .theme-text {
       color: var(--text-color) !important;
   }

   .theme-muted {
       color: var(--text-muted) !important;
   }

   /* Continuous Background Container */
   .bg-wrapper {
       background-image: url('../images/wondertv_background.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }


   .bg-watch-live {
       background-image: url('../images/watch_live_bg.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }




   .bg-shows {
       background-image: url('../images/shows_bg.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }



   .bg-movies {
       background-image: url('../images/profile_bg.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }


   .bg-games {
       background-image: url('../images/games_bg.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }


   .bg-crafts {
       background-image: url('../images/crafts_bg.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }


   .bg-music {
       background-image: url('../images/music_bg.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }


   .bg-parents {
       background-image: url('../images/parents_background.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }


   .bg-apps {
       background-image: url('../images/apps_bg.png');
       background-size: 100% auto;
       background-repeat: no-repeat;
       background-position: top center;
       width: 100%;
       min-height: 100vh;
       position: relative;
   }





   /* Glassmorphism Styles */
   .glass-panel {
       background: var(--glass-bg);
       backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px);
       border: 1px solid var(--glass-border);
       border-radius: 28px;
       box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
   }

   .glass-card {
       background: var(--glass-card-bg);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border: 1px solid var(--glass-border);
       border-radius: 24px;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   /* Sticky Navigation Bar */
   .navbar-custom {
       position: sticky;
       top: 15px;
       z-index: 1000;
       background: var(--nav-bg);
       backdrop-filter: blur(20px);
       border: 1px solid var(--glass-border);
       border-radius: 50px;
       padding: 8px 24px;
       margin: 0 20px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
       transition: all 0.3s ease;
   }

   .navbar-brand img {
       height: 48px;
       transition: transform 0.3s ease;
   }

   .navbar-brand:hover img {
       transform: scale(1.08) rotate(-2deg);
   }

   .nav-link {
       color: var(--nav-link-color) !important;
       font-weight: 700;
       font-size: 0.95rem;
       padding: 8px 16px !important;
       border-radius: 20px;
       transition: all 0.25s ease;
       font-family: var(--font-heading);
   }

   .nav-link:hover,
   .nav-link.active {
       background: rgba(255, 255, 255, 0.25);
       transform: translateY(-2px);
   }

   .icon-btn {
       width: 42px;
       height: 42px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       border: 1px solid var(--glass-border);
       color: var(--text-color);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
       cursor: pointer;
       text-decoration: none;
   }

   .icon-btn:hover {
       transform: scale(1.15) rotate(5deg);
       background: var(--sunshine-yellow);
       color: #0f172a;
       box-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
   }

   .profile-avatar {
       width: 42px;
       height: 42px;
       border-radius: 50%;
       border: 2px solid var(--sunshine-yellow);
       object-fit: cover;
   }

   /* HERO SECTION & ANIMATIONS */
   
   .hero-section {
       min-height: 65vh;
       display: flex;
       align-items: center;
       padding-top: 40px;
       padding-bottom: 40px;
       position: relative;
   }

   .hero-title {
       font-size: clamp(2.2rem, 3.2vw, 3.4rem);
       line-height: 1.2;
       font-weight: 800;
       color: #ffffff;
       text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 30px rgba(56, 189, 248, 0.4);
       margin-bottom: 25px;
       max-width: 580px;
   }

   @media (min-width: 992px) {
       .hero-title {
           font-size: 3.5rem;
       }
   }

   /* Drifting Clouds */
   
   .cloud-container {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       overflow: hidden;
       pointer-events: none;
       z-index: 1;
   }

   .cloud {
       position: absolute;
       color: rgba(255, 255, 255, 0.45);
       font-size: 3.5rem;
       animation: cloudDrift linear infinite;
   }

   .cloud-1 {
       top: 10%;
       left: -10%;
       animation-duration: 32s;
   }

   .cloud-2 {
       top: 25%;
       left: -15%;
       animation-duration: 42s;
       animation-delay: 5s;
       font-size: 2.5rem;
       opacity: 0.35;
   }

   .cloud-3 {
       top: 5%;
       left: -20%;
       animation-duration: 25s;
       animation-delay: 12s;
       font-size: 4.5rem;
       opacity: 0.25;
   }

   @keyframes cloudDrift {
       0% {
           transform: translateX(-10vw);
       }

       100% {
           transform: translateX(110vw);
       }
   }
       

   /* Hero Golden Twinkling Stars & Sparkles */
   
   .star-sparkle {
       position: absolute;
       color: var(--gold-glow);
       animation: twinkleSparkle 2.5s infinite ease-in-out alternate;
       pointer-events: none;
       z-index: 2;
   }

   @keyframes twinkleSparkle {
       0% {
           opacity: 0.2;
           transform: scale(0.7) rotate(0deg);
           filter: drop-shadow(0 0 2px var(--gold-glow));
       }

       100% {
           opacity: 1;
           transform: scale(1.3) rotate(45deg);
           filter: drop-shadow(0 0 12px var(--sunshine-yellow));
       }
   }

   .rainbow-sparkle {
       position: absolute;
       font-size: 1.4rem;
       animation: rainbowGlow 3s infinite alternate ease-in-out;
       pointer-events: none;
       z-index: 2;
   }

   @keyframes rainbowGlow {
       0% {
           filter: hue-rotate(0deg) scale(0.8);
           opacity: 0.4;
       }

       100% {
           filter: hue-rotate(360deg) scale(1.2);
           opacity: 1;
       }
   }
       

   /* Castle Flag Waving Area */
   
   .castle-container {
       position: relative;
       width: 100%;
       height: 300px;
       display: flex;
       justify-content: flex-end;
       align-items: flex-start;
   }

   .castle-flag-wrapper {
       position: absolute;
       top: 20px;
       right: 45px;
       z-index: 5;
       display: flex;
       align-items: flex-start;
   }

   .flag-pole {
       width: 4px;
       height: 45px;
       background: linear-gradient(to bottom, #ffd700, #b8860b);
       border-radius: 2px;
       box-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
   }

   .golden-flag {
       width: 32px;
       height: 22px;
       background: linear-gradient(135deg, #facc15 0%, #ff7a00 100%);
       clip-path: polygon(0 0, 100% 50%, 0 100%);
       transform-origin: left center;
       animation: waveFlag 1.2s infinite ease-in-out alternate;
       box-shadow: 0 0 10px rgba(250, 204, 21, 0.8);
   }

   @keyframes waveFlag {
       0% {
           transform: skewY(-8deg) scaleX(0.9);
       }

       100% {
           transform: skewY(12deg) scaleX(1.1);
       }
   }

   .btn-custom-orange {
       background: linear-gradient(135deg, #ff9233 0%, var(--brand-orange) 100%);
       color: white;
       font-family: var(--font-heading);
       font-weight: 700;
       font-size: 1.1rem;
       padding: 14px 32px;
       border-radius: 50px;
       border: none;
       box-shadow: 0 8px 20px rgba(255, 122, 0, 0.4);
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .btn-custom-orange:hover {
       transform: translateY(-4px) scale(1.05);
       box-shadow: 0 12px 25px rgba(255, 122, 0, 0.6);
       color: white;
   }

   .btn-custom-blue {
       background: linear-gradient(135deg, #3b82f6 0%, var(--royal-blue) 100%);
       color: white;
       font-family: var(--font-heading);
       font-weight: 700;
       font-size: 1.1rem;
       padding: 14px 32px;
       border-radius: 50px;
       border: none;
       box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .btn-custom-blue:hover {
       transform: translateY(-4px) scale(1.05);
       box-shadow: 0 12px 25px rgba(37, 99, 235, 0.6);
       color: white;
   }









/* NETFLIX-STYLE CAROUSEL & CARDS */
   .netflix-carousel {
       display: flex;
      
    overflow-x: auto;
       scroll-behavior: smooth;
       gap: 20px;
       padding: 20px 10px 30px 10px;
   }

   .netflix-carousel::-webkit-scrollbar {
       height: 8px;
   }

   .netflix-carousel::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, 0.25);
       border-radius: 10px;
   }

   .netflix-card-wrapper {
       flex: 0 0 280px;
       perspective: 1000px;
   }

   .netflix-card {
       position: relative;
       border-radius: 20px;
       overflow: hidden;
       height: 200px;
       border: 2px solid rgba(255, 255, 255, 0.25);
       box-shadow: 0 0 15px rgba(250, 204, 21, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1);
       transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       cursor: pointer;
       background: #121829;
   }

   .netflix-card:hover {
       transform: scale(1.08) translateY(-10px);
       z-index: 20;
       border-color: var(--sunshine-yellow);
       box-shadow: 0 0 25px rgba(250, 204, 21, 0.7), 0 15px 30px rgba(0, 0, 0, 0.5);
   }

   .netflix-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.6s ease;
   }

   .netflix-card:hover img {
       transform: scale(1.15);
   }

   .netflix-card-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(12, 16, 33, 0.95) 85%);
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       padding: 20px;
       transition: opacity 0.3s ease;
   }

   .netflix-card .badge-episodes {
       position: absolute;
       top: 15px;
       right: 15px;
       background: rgba(0, 0, 0, 0.65);
       backdrop-filter: blur(8px);
       color: var(--sunshine-yellow);
       border: 1px solid var(--sunshine-yellow);
       font-size: 0.75rem;
       font-weight: 700;
       padding: 4px 10px;
       border-radius: 50px;
   }

   .netflix-card .card-title-text {
       font-family: var(--font-heading);
       font-size: 1.35rem;
       color: #ffffff;
       margin-bottom: 4px;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
   }

   .watch-now-overlay-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       background: linear-gradient(135deg, var(--brand-orange), var(--sunshine-yellow));
       color: #0f172a;
       font-family: var(--font-heading);
       font-weight: 700;
       font-size: 0.9rem;
       padding: 8px 16px;
       border-radius: 50px;
       margin-top: 10px;
       transform: translateY(15px);
       opacity: 0;
       transition: all 0.3s ease;
       box-shadow: 0 4px 12px rgba(255, 122, 0, 0.4);
   }

   .netflix-card:hover .watch-now-overlay-btn {
       transform: translateY(0);
       opacity: 1;
   }

   /* LIVE NOW SECTION */
   .live-now-section {
       position: relative;
       margin: 40px auto 60px auto;
   }

   .live-banner {
       position: relative;
       border-radius: 32px;
       background: linear-gradient(135deg, rgba(20, 25, 45, 0.9) 0%, rgba(37, 99, 235, 0.4) 100%);
       border: 2px solid var(--coral-red);
       overflow: hidden;
       padding: 40px;
       box-shadow: 0 0 30px rgba(244, 63, 94, 0.3);
       animation: liveGlow 3s infinite alternate ease-in-out;
   }

   @keyframes liveGlow {
       0% {
           box-shadow: 0 0 20px rgba(244, 63, 94, 0.2), inset 0 0 15px rgba(244, 63, 94, 0.1);
       }

       100% {
           box-shadow: 0 0 45px rgba(244, 63, 94, 0.6), inset 0 0 30px rgba(244, 63, 94, 0.3);
       }
   }

   .live-badge-pulse {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: var(--coral-red);
       color: white;
       font-family: var(--font-heading);
       font-size: 0.85rem;
       font-weight: 700;
       padding: 6px 16px;
       border-radius: 50px;
       box-shadow: 0 0 12px rgba(244, 63, 94, 0.8);
       animation: pulseDot 1.5s infinite;
   }

   .pulse-dot {
       width: 10px;
       height: 10px;
       background-color: white;
       border-radius: 50%;
       animation: blink 1s infinite alternate;
   }

   @keyframes blink {
       0% {
           opacity: 0.2;
       }

       100% {
           opacity: 1;
       }
   }

   .countdown-box {
       background: rgba(0, 0, 0, 0.4);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 16px;
       padding: 8px 16px;
       display: inline-flex;
       align-items: center;
       gap: 12px;
       font-family: var(--font-heading);
   }

   /* MAP & CATEGORIES */
   
   .map-container {
       position: relative;
       border-radius: 30px;
       overflow: hidden;
       border: 3px solid rgba(255, 255, 255, 0.3);
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
       background: #000;
   }

   .map-container img {
       width: 100%;
       display: block;
   }

   .map-pin {
       position: absolute;
       transform: translate(-50%, -50%);
       cursor: pointer;
       transition: transform 0.3s ease;
   }

   .map-pin:hover {
       transform: translate(-50%, -50%) scale(1.2);
       z-index: 10;
   }

   .pin-badge {
       background: rgba(0, 0, 0, 0.65);
       backdrop-filter: blur(8px);
       color: white;
       padding: 6px 14px;
       border-radius: 20px;
       border: 1.5px solid var(--sunshine-yellow);
       font-size: 0.85rem;
       font-family: var(--font-heading);
       display: flex;
       align-items: center;
       gap: 6px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
   }
   







   .category-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .category-icon {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2rem;
       color: white;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
       border: 2px solid rgba(255, 255, 255, 0.4);
       margin-bottom: 10px;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .category-item:hover .category-icon {
       transform: scale(1.15) rotate(8deg);
       box-shadow: 0 12px 25px rgba(250, 204, 21, 0.5);
   }

   .category-title {
       font-family: var(--font-heading);
       font-size: 0.95rem;
       text-align: center;
       color: var(--text-color);
   }

   /* CONTINUE WATCHING SECTION STYLES */
   .continue-watching-card {
       background: var(--glass-card-bg);
       border-radius: 20px;
       overflow: hidden;
       border: 1px solid var(--glass-border);
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       position: relative;
       display: flex;
       flex-direction: column;
       height: 100%;
   }

   .continue-watching-card:hover {
       transform: translateY(-6px) scale(1.02);
       border-color: var(--sunshine-yellow);
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
   }

   .continue-thumbnail-container {
       position: relative;
       height: 160px;
       overflow: hidden;
   }

   .continue-thumbnail-container img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.5s ease;
   }

   .continue-watching-card:hover .continue-thumbnail-container img {
       transform: scale(1.1);
   }

   .play-overlay-icon {
       position: absolute;
       inset: 0;
       background: rgba(12, 16, 33, 0.4);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .continue-watching-card:hover .play-overlay-icon {
       opacity: 1;
   }

   .play-circle-btn {
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background: var(--sunshine-yellow);
       color: #0f172a;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.4rem;
       box-shadow: 0 0 15px rgba(250, 204, 21, 0.8);
       transform: scale(0.8);
       transition: transform 0.3s ease;
   }

   .continue-watching-card:hover .play-circle-btn {
       transform: scale(1);
   }

   .progress-bar-container {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 6px;
       background: rgba(255, 255, 255, 0.2);
   }

   .progress-bar-fill {
       height: 100%;
       background: linear-gradient(90deg, var(--brand-orange), var(--sunshine-yellow));
       border-radius: 0 4px 4px 0;
   }

   .streaming-interface-card {
       background: linear-gradient(135deg, rgba(20, 25, 45, 0.85) 0%, rgba(37, 99, 235, 0.25) 100%);
       border-radius: 28px;
       border: 2px solid rgba(56, 189, 248, 0.4);
       padding: 30px;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
   }

   .video-player-mock {
       position: relative;
       border-radius: 20px;
       overflow: hidden;
       aspect-ratio: 16/9;
       background: #000;
       border: 1px solid rgba(255, 255, 255, 0.2);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
   }

   .video-player-mock img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .video-controls-overlay {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
       padding: 20px 20px 15px 20px;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .player-progress-track {
       width: 100%;
       height: 6px;
       background: rgba(255, 255, 255, 0.3);
       border-radius: 3px;
       cursor: pointer;
       position: relative;
   }

   .player-progress-current {
       width: 65%;
       height: 100%;
       background: var(--brand-orange);
       border-radius: 3px;
       position: relative;
   }

   .player-progress-current::after {
       content: '';
       position: absolute;
       right: -4px;
       top: -3px;
       width: 12px;
       height: 12px;
       background: white;
       border-radius: 50%;
       box-shadow: 0 0 8px var(--brand-orange);
   }

   /* PROMISE & PARENTS ZONE */
   .promise-card {
       background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
       border-radius: 28px;
       padding: 35px;
       color: white;
       position: relative;
       overflow: hidden;
       box-shadow: 0 15px 35px rgba(245, 158, 11, 0.35);
       border: 2px solid rgba(255, 255, 255, 0.4);
   }

   .promise-tag {
       background: rgba(0, 0, 0, 0.25);
       padding: 6px 16px;
       border-radius: 20px;
       font-size: 0.8rem;
       font-family: var(--font-heading);
       letter-spacing: 1px;
       display: inline-block;
       margin-bottom: 15px;
   }

   .promise-btn {
       background: rgba(0, 0, 0, 0.25);
       border: 1px solid rgba(255, 255, 255, 0.3);
       color: white;
       padding: 8px 18px;
       border-radius: 20px;
       font-size: 0.9rem;
       font-family: var(--font-heading);
       transition: all 0.3s ease;
   }

   .promise-btn:hover {
       background: white;
       color: #d97706;
       transform: translateY(-2px);
   }

   .parent-card {
       background: var(--glass-card-bg);
       border-radius: 20px;
       padding: 20px;
       border: 1px solid var(--glass-border);
       transition: all 0.3s ease;
   }

   .parent-card:hover {
       border-color: rgba(255, 255, 255, 0.4);
       transform: translateY(-4px);
   }

   .newsletter-card {
       background: var(--glass-card-bg);
       border-radius: 28px;
       padding: 35px;
       border: 1px solid var(--glass-border);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   }

   .newsletter-input {
       background: var(--glass-bg);
       color: var(--text-color);
       border: 1px solid var(--glass-border);
   }

   /* ANIMATED FOOTER: TWINKLING STARS, BALLOONS & LANTERNS */
   footer {
       position: relative;
       padding-top: 60px;
       padding-bottom: 30px;
       font-size: 0.9rem;
       color: var(--text-muted);
       overflow: hidden;
   }

   footer a {
       color: var(--text-muted);
       text-decoration: none;
       transition: color 0.2s ease;
   }

   footer a:hover {
       color: var(--text-color);
   }

   /* Floating Balloons */
   .footer-balloon {
       position: absolute;
       font-size: 2.2rem;
       animation: floatUpAndDown 5s ease-in-out infinite alternate;
       pointer-events: none;
       opacity: 0.85;
   }

   .balloon-1 {
       left: 5%;
       bottom: 40px;
       animation-duration: 6s;
       color: var(--coral-red);
   }

   .balloon-2 {
       right: 8%;
       bottom: 80px;
       animation-duration: 4.5s;
       animation-delay: 1s;
       color: var(--sky-blue);
   }

   @keyframes floatUpAndDown {
       0% {
           transform: translateY(0px) rotate(-5deg);
       }

       100% {
           transform: translateY(-25px) rotate(5deg);
       }
   }

   /* Floating Sky Lanterns */
   .sky-lantern {
       position: absolute;
       width: 24px;
       height: 32px;
       background: linear-gradient(135deg, #ff7a00, #facc15);
       border-radius: 6px 6px 12px 12px;
       box-shadow: 0 0 15px rgba(250, 204, 21, 0.8);
       animation: lanternRise 12s linear infinite;
       pointer-events: none;
       opacity: 0.8;
   }

   .lantern-1 {
       left: 20%;
       bottom: -10px;
       animation-duration: 10s;
   }

   .lantern-2 {
       left: 75%;
       bottom: -20px;
       animation-duration: 14s;
       animation-delay: 3s;
   }

   @keyframes lanternRise {
       0% {
           transform: translateY(0px) scale(0.8);
           opacity: 0;
       }

       20% {
           opacity: 0.9;
       }

       100% {
           transform: translateY(-250px) scale(1.1);
           opacity: 0;
       }
   }

   /* Footer Twinkling Stars */
   .footer-star {
       position: absolute;
       color: var(--sunshine-yellow);
       font-size: 0.9rem;
       animation: footerStarTwinkle 2s infinite ease-in-out alternate;
       pointer-events: none;
   }

   @keyframes footerStarTwinkle {
       0% {
           opacity: 0.1;
           transform: scale(0.6);
       }

       100% {
           opacity: 0.9;
           transform: scale(1.2);
           filter: drop-shadow(0 0 6px var(--sunshine-yellow));
       }
    }






  /* ////////////////// watch live //////////////////   */


  .watch-live-stage {
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.25);
}

.cheer-feed::-webkit-scrollbar {
    width: 6px;
}

.cheer-feed::-webkit-scrollbar-thumb {
    background-color: rgba(255, 193, 7, 0.4);
    border-radius: 10px;
}

.schedule-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.schedule-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}




/* ////////////login/////////// */


/* Remove default Bootstrap dropdown arrow from the image wrapper */
.no-arrow::after {
    display: none !important;
}

/* Hover effects for dropdown options */
.hover-bg:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transition: background-color 0.2s ease;
}

.hover-bg-danger:hover {
    background-color: rgba(220, 53, 69, 0.2) !important;
    transition: background-color 0.2s ease;
}