/* style.css */

/* Animate the entire header text */
@keyframes slideFade {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Optional glowing effect */
@keyframes glow {
  0% {
    text-shadow: 0 0 5px #ffffff;
  }
  50% {
    text-shadow: 0 0 20px #00ffd5, 0 0 30px #00ffd5;
  }
  100% {
    text-shadow: 0 0 5px #ffffff;
  }
}

h1 {
  font-family: 'Orbitron', sans-serif; /* Or any Google Font you like */
  font-size: 2.8em;
  color: #00ffd5;
  margin-top: 2em;
  animation: slideFade 1.5s ease-out, glow 3s infinite;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  background: linear-gradient(to right, #4B0082, #8A2BE2); /* Purple gradient */
  color: white;               /* Optional: make text readable on dark bg */
  font-family: sans-serif;    /* Optional: clean font */
}


 /*SONG !!!! */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari&display=swap');

  .audio-container {
    display: flex;         /* Line them up horizontally */
    gap: 20px;             /* Space between players */
    flex-wrap: wrap;       /* Allows wrapping if screen is narrow */
    justify-content: center; /* Center them horizontally */
    margin-top: 20px;
  }

  .audio-player {
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 250px; /* Optional: define a fixed width */
  }

  .audio-player button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #6a0dad;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
 

 /*Social media Icon +*/

  .bottom-banner {
  background-color: white;
  color: #fff;
  padding: 30px 20px;
  text-align: center;
  font-family: sans-serif;
}

.social-icons-bottom {
  max-width: 1000px;
  margin: 0 auto;
}

.social-icons-bottom  {
  margin: 0 10px;
  display: inline-block;
}

.social-icons img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1); /* makes icons white */
  transition: transform 0.3s ease;
}

.social-icons img:hover {
  transform: scale(1.2);
}
/*Copy right isue*/

 .footer-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to right, #1a237e, #283593);
  color: #e0e0e0;
  text-align: center;
  padding: 12px 20px;
  font-size: 14px;
  font-family: 'Noto Sans Devanagari', sans-serif;
  border-top: 2px solid #7f53ac;
  z-index: 999;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

.footer-content p {
  margin: 4px 0;
}

.footer-content a {
  color: #black;
  text-decoration: none;
  font-weight: bold;
}