/* Global Styles */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
        body { scroll-behavior: smooth; }

<!-- Lightbox Youtube start -->

.lightbox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure it appears above other content */
}

<!-- Lightbox Youtube end -->

/* Style HR start */
hr.new5 {
  border: 1px solid #191919;

}
/* Style HR end */

/** Responsive images Properties Sart **/
.responsive {
  width: 40%;
  height: auto;
  border-radius: 8px;
}
/** Responsive images Properties End **/

/** Responsive images Play Properties Sart **/
.responsive2 {
  width: 80%;
  height: auto;
  border-radius: 8px;
}
/** Responsive images Properties End **/


/** Responsive image-side-menu Properties Sart **/
.responsive3 {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/** Responsive image-side-menu Properties End **/


/** Responsive Song History  Sart **/
.responsive4 {
  width: 30%;
  height: auto;
  border-radius: 8px;
}
/** Responsive Song History  End **/


/** Responsive image&header-new Properties Sart **/

.responsive5 {
  width: 100%;
  height: auto;
  border-radius: 0px;
}

/** Responsive image&header-new Properties end **/




/** Button Properties Starts **/
.button {
  background-color: #D44D3B;
  
  border: none;
  color: white;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  display: inline-block;
  border-radius: 4px;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
}
.button:hover {background-color: #f2a4a4}
.button:active {
  background-color: #D44D3B;
 
  transform: translateY(4px);
}
.button2 {background-color: #D44D3B;} /* Blue */
.button3 {background-color: #D44D3B;} /* Red */ 
.button4 {background-color: #D44D3B;} /* Gray */ 
.button5 {background-color: #D44D3B;} /* Black */
.button6 {background-color: #D44D3B;} /* Black */
.button7 {background-color: #D44D3B;} /* Blue */
.button8 {background-color: #D44D3B;} /* Red */ 
.button9 {background-color: #D44D3B;} /* Gray */ 
.button10 {background-color: #D44D3B;} /* Black */
.button11 {background-color: #D44D3B;} /* Black */
/** Button Properties End **/



/* Basic slider styling start */

.slider { position: relative; width: 100%;  overflow: hidden; border-radius: 10px; }
.slides { display: flex; transition: transform 0.5s ease-in-out; }
.slide { min-width: 100%; box-sizing: border-box; }
.slide img { width: 100%; display: block; }
.nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2em; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.3); padding: 10px; cursor: pointer; user-select: none; border-radius: 7px; }
.prev { left: 10px; }
.next { right: 10px; }

/* Basic slider styling end */


/* Back to Top button styles */
        #backToTop {
            position: fixed;
            bottom: 125px;
            right: 20px;
            width: 60px;
            height: 60px;
            display: none; /* Initially hidden */
            cursor: pointer;
            z-index: 1000;
        }



/* Back to Top button styles end */

/* Faq Container styles star */


        .faq-container {
            width: 100%;
            margin: 20px auto;
            padding: 20px;
            background: rgba(25, 25, 25, 0.65);
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .faq-item {
            margin-bottom: 15px;
            border-bottom: 1px solid #191919;
        }
        .faq-question {
            color: white;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            padding: 10px;
            background: #303030;
            border-radius: 5px;
            transition: background 0.3s;
        }
        .faq-question:hover {
            background: #C0C0C0;
        }
        .faq-answer {
            display: none;
            padding: 10px;
            font-size: 16px;
            color: white;
        }

/* Faq Container styles end */



        /* Sticky Navbar */
        nav { position: sticky; top: 0; background: #D44D3B; color: #fff; padding: 1em; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
        nav a { color: white; text-decoration: none; margin: 0 0.5em; padding: 8px;}
        nav a:hover { background: #f2a4a4; padding: 8px;}
.menu-toggle { display: none; cursor: pointer; }

        /* Header Image */
        header {  background: #6600CC; display: flex; justify-content: top; align-items: center; color: white; text-shadow:  black; font-size: 2.5em; }

        /* Sections */
        section { padding: 100px 20px; min-height:  100vh; display: flex; flex-direction: column;  justify-content: center; transition: background 0.5s ease; }
        #home { color: white; background: #6600CC; background-image: url("../images/background/back.webp") }
        #play { text-align: center; color: white; background: #3498db; background-image: url("../images/background/back2.webp"); }
        #schedule { color: white; background: #6699FF; background-image: url("../images/background/back1.webp"); }
        #history {text-align: center; color: white; background: #3498db; background-image: url("../images/background/back2.webp"); }
        #about { color: white; background: #e74c3c; background-image: url("../images/background/back4.webp"); }
        #chat { text-align: center; color: white; background: #9900FF; background-image: url("../images/background/back.webp"); }
        #help { color: white; background: #00CC66; background-image: url("../images/background/back8.webp"); }
        #contact { color: white; background: #e67e22; background-image: url("../images/background/back6.webp"); }
        #how-to-listen { justify-content: center; color: white; background: #CC66FF; background-image: url("../images/background/back3.webp"); }
#music-submission { justify-content: center; color: white; background: #CC6699; background-image: url("../images/background/back9.webp"); }
#youtube { justify-content: center; color: white; background: #FF0000; background-image: url("../images/background/back9.webp"); }
        /* Text Transitions */
        section h2 { margin-bottom: 20px; opacity: 0; transform: translateY(20px); animation: slideIn 1s forwards; }
        section p { opacity: 0; transform: translateY(20px); animation: fadeIn 1.2s forwards; }

        @keyframes slideIn { to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

        /* Footer */
        footer { background: #333; color: white; text-align: center; padding: 20px; }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            nav { flex-direction: column; }
.menu { display: none; flex-direction: column; width: 100%; }
.menu.open { display: flex; }
.menu a { margin: 10px 0; }
.menu-toggle { display: block; }
        }



/** Schedule start **/
/** Schedule end **/

/** Player bottom start**/


    .bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(25, 25, 25, 0.62);
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      transition: transform 0.3s ease-in-out;
    }

    .bottom-bar.hidden {
      transform: translateY(100%);
    }

    /* Logo */
    .logo {
      display: flex;
      align-items: center;
    }

    .logo img {
      height: 40px;
    }

    /* Scrolling Text */
    .scrolling-text {
      flex: 1;
      margin: 0 20px;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
    }

    .scrolling-text span {
      display: inline-block;
      padding-left: 100%; /* Start off-screen */
      animation: scroll 15s linear infinite;
    }

    /* Keyframe for scrolling effect */
    @keyframes scroll {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
    }
     

    /* Image on Right */
    .right-image img {
      height: 50px;
      
    }

    /* Open/Close Button */
    .toggle-button {
      position: fixed;
      bottom: 80px;
      right: 20px;
      background-color: rgba(25, 25, 25, 0.62);;
      color: white;
      border: none;
      padding: 10px 15px;
      cursor: pointer;
      border-radius: 5px;
    }
  </style>

/** Player bottom end**/


 /****Table Styles start*****/

           table {
      width: 100%; /* Make table responsive */
      border-collapse: collapse; /* Remove gaps between cells */
    }

    th, td {
      border: 0px solid #ddd; /* Add border to cells */
      padding: 10px; /* Add padding for readability */
      text-align: center; /* Center-align text horizontally */
      vertical-align: top; /* Align text to the top vertically */
    }

    /* Equal column widths */
    th, td {
      width: 33.33%; /* Divide table into equal columns */
    }

    /* Responsive behavior */
    @media (max-width: 600px) {
      table {
        display: block; /* Make table scrollable on small screens */
        overflow-x: auto;
        white-space: nowrap; /* Prevent text wrapping */
      }
 /****Table Styles end*****/



/****** Popup container ***********/




/****** Popup container end***********/