.loadingbg {
    position: fixed;
    background-color: #ffffff;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 2;
}
.loadingicon {
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    position: absolute;
    top: 50%;
    left: 50%;
}


body {
  background-color: #303030;
}

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

.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.visible {
  opacity: 1;
  transform: translateY(0);
}

<!-- 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: #009933;
  
  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: #CCFFCC}
.button:active {
  background-color: #D44D3B;
 
  transform: translateY(4px);
}
.button2 {background-color: #009933;} /* Blue */
.button3 {background-color: #009933;} /* Red */ 
.button4 {background-color: #009933;} /* Gray */ 
.button5 {background-color: #009933;} /* Black */
.button6 {background-color: #009933;} /* Black */
.button7 {background-color: #009933;} /* Blue */
.button8 {background-color: #009933;} /* Red */ 
.button9 {background-color: #009933;} /* Gray */ 
.button10 {background-color: #009933;} /* Black */
.button11 {background-color: #009933;} /* Black */
/** Button Properties End **/



/* Basic slider styling start */

 .slider-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            margin: 20px auto;
            border-radius: 10px;
        }

        .slides {
            display: flex;
            width: 100%; /* 5 images */
            transition: transform 0.5s ease-in-out;
        }

        .slides a {
            flex: 0 0 100%;
            display: block;
        }

        .slides img {
            width: 100%;
            display: block;
        }

        /* Buttons */
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            padding: 12px;
            cursor: pointer;
            border-radius: 7px;
            font-size: 18px;
            user-select: none;
        }

        .prev { left: 10px; }
        .next { right: 10px; }

        /* Dots */
        .dots {
            text-align: center;
            position: absolute;
            bottom: 10px;
            width: 100%;
        }

        .dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin: 0 5px;
            background-color: rgba(0,0,0,0.5);
            border-radius: 50%;
            cursor: pointer;
        }

        .active-dot { background-color: #191919; }


/* Basic slider styling end */


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



/* Back to Top button styles end */


/* unvisited link */
a:link {
  color: white;
text-decoration: none;
}

/* visited link */
a:visited {
  color: white;
text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #C0C0C0;

}text-decoration: none;

/* selected link */
a:active {
  color: white;
text-decoration: none;
}


/* Faq Container styles star */


.faq-container {
     width: 100%;
  
      margin: auto;
    }
    .faq-item {
      border: 1px solid #000;
      border-radius: 5px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .faq-question {
      background: rgba(59, 125, 73, 0.5); 
      padding: 15px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .faq-question:hover {
      background-color: rgba(0, 26, 13, 0.5);
    }
    .faq-answer {
      display: none;
      padding: 15px;
      background: rgba(70, 204, 121, 0.5); 
    }
    .faq-answer img {
      max-width: 100%;
      height: auto;
      margin-top: 10px;
    }
    .faq-question::after {
      content: "+";
      font-size: 18px;
    }
    .faq-question.active::after {
      content: "-";
    }


/* Faq Container styles end */



        /* Sticky Navbar */
        nav { position: sticky; top: 0; background: #009933; 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.1em; padding: 8px;}
        nav a:hover { background: #CCFFCC; 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: #003300; background-image: url("../images/background/back1.webp") }
        #games1 { color: white; background: #9933FF; background-image: url("../images/background/back1.webp"); }
        #games2 { color: white; background: #93E886; background-image: url("../images/background/back1.webp"); }
        #games3 { color: white; background: #FF0066; background-image: url("../images/background/back1.webp"); }
        #about { color: white; background: #410082; background-image: url("../images/background/back1.webp"); }
        #faq { color: white; background: #6666FF; background-image: url("../images/background/back1.webp"); }
        #contact { color: white; background: #72A0DB; background-image: url("../images/background/back1.webp"); }
#youtube { justify-content: center; color: white; background: #FF0000; background-image: url("../images/background/back1.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: 1149px) {
            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 {
      border-radius: 0px;
      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*****/
    /* Responsive table container */
    .table-container {
      width: 90%;
      max-width: 800px;
      overflow-x: auto; /* Enable horizontal scrolling on small screens */

      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Table styling */
    table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
    }

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


    /* Table cell styling */
    td {
      padding: 12px;
      border: 0px solid #ddd;
      vertical-align: top; /* Align text to the top */
      word-wrap: break-word; /* Prevent text overflow */
    }

    /* Responsive adjustments */
    @media (max-width: 600px) {
      td {
        font-size: 14px; /* Adjust font size for smaller screens */
      }
    }
  }
 /****Table Styles end*****/



/****** responsive adjustment H2 ***********/

  h2 {
    font-size: 2rem; /* relative unit */
    color: #ffffff;
    text-align: center;
    margin: 20px 0;
  }

  /* Responsive adjustments using media queries */
  @media screen and (max-width: 768px) {
    h2 {
      font-size: 1.0rem; /* smaller font on tablets */
    }
  }

  @media screen and (max-width: 480px) {
    h2 {
      font-size: 0.95rem; /* smaller font on mobile devices */
      margin: 10px 0;
    }
  }


/****** responsive adjustment H2 end***********/



/****** icon image circular start ***********/

.icon-image {
border-radius: 0px; /* Makes the image circular */

}
/****** icon image circular end ***********/


/****** image circular start  ***********/
img {
   
  border-radius: 9px;
}


/****** image circular end***********/



<!-- Add Halloween-themed images -->

 .falling-images {
  position: relative;
  width: 100%;
  height: 100vh;
}

.falling {
  position: absolute;
  top: -100px;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-100px);
    left: calc(100% * var(--random-x));
  }
  100% {
    transform: translateY(100vh);
    left: calc(100% * var(--random-x));
  }
}

/* Randomize animation duration and position */
.falling:nth-child(1) {
  --random-x: 0.1;
  animation-duration: 5s;
}

.falling:nth-child(2) {
  --random-x: 0.3;
  animation-duration: 6s;
}

.falling:nth-child(3) {
  --random-x: 0.5;
  animation-duration: 4s;
}

.falling:nth-child(4) {
  --random-x: 0.8;
  animation-duration: 7s;
}

<!-- Add Halloween-themed images end -->