/* Reset margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* General styles */
body, html {
    height: 100%;
    font-family: Arial, sans-serif;
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
  
}


/* Background container */
#bg-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Set height to 100% of the viewport */
    z-index: -1;
    background-color: black; /* Keep background black */
    overflow-y: hidden; /* Hide vertical scrolling */
}

svg {
    width: 100%;
    height: 100vh; /* Ensure the SVG takes full height of the viewport */
    display: block; /* Remove any extra space below the SVG */
}

/* Content Container */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 10px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
  
}

/* Heading */
.h1 {
    font-size: 1.5em);
    font-weight: 300;
    letter-spacing: clamp(-1.75px, -0.25vw, -3.5px);
    position: relative;
    overflow: hidden;
    color:yellow;
    margin: 0;
}

/* Buttons Container */
.buttons-container {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  
}

/* Row of Buttons */
.row {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Responsive design */
}

/* Button Style */
.button {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 155, 235, 0.8);
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    margin: 10px;
    background-size: cover;
}

.button:hover {
    transform: scale(1.1);
}

.button img {
    width: 100%;
    height: 100%;
}
/* Set background image for the first button */
#radio1 {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/75/Club_FM_Logo.jpg');
  background-size: cover;
}

#radio2 {
    background-image: url('https://onlineradiofm.in/assets/image/radio/180/unnamed.webp');
  background-size: cover;
}
#radio3 {
    background-image: url('https://onlineradiofm.in/assets/image/radio/180/Radio-Mattoli.jpg');
  background-size: cover;
}
#radio4 {
    background-image: url('https://radiosindia.com/images/radiokeralam.jpg');
  background-size: cover;
}
#radio5 {
    background-image: url('https://liveradios.in/wp-content/uploads/malayalamradio.jpg');
  background-size: cover;
}
#radio6 {
    background-image: url('https://liveradios.in/wp-content/uploads/radiomalayalamusa.jpg');
  background-size: cover;
}
#radio7 {
    background-image: url('https://onlineradiofm.in/assets/image/radio/180/Mazhavil-FM.jpg');
  background-size: cover;
}
#radio8 {
    background-image: url('https://liveradios.in/wp-content/uploads/radiolemon.jpg');
  background-size: cover;
}
#radio9 {
    background-image: url('https://onlineradiofm.in/assets/image/radio/180/radio-media-village.png');
  background-size: cover;
}

#radio10 {
    background-image: url('https://static.mytuner.mobi/media/tvos_radios/187/kumar-sanu.fcf44709.jpg');
  background-size: cover;
}
#radio11 {
    background-image: url('https://static.mytuner.mobi/media/tvos_radios/gxwpmtug8tjl.jpg');
  background-size: cover;
}
#radio12 {
    background-image: url('https://static.mytuner.mobi/media/tvos_radios/cfhrxlbc3gv8.png');
  background-size: cover;
}


/* Radio and TV Player */
.player, .tv-player {
    width: calc(330px + 20px); /* width of 2 buttons + gap */
    max-width: 600px;
    margin: 20px 0;
  
    
}

audio, video {
    width: 100%;
}



/* Footer Text */
footer {
    text-align: center;
    color: white;
    margin-top: 20px;
    font-size: 1rem;
}

a {
    color: #FFDF00;
    
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        
}
.marquee-container {
    width: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 0;
}

marquee {
    color: #FFFF00; /* Neon yellow text for marquee */
    font-size: 16px;
}




/* Floating Button */
.floating-container {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
}
.button-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#mainButton {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background-color: #FF0000;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s, transform 0.2s;
}

/* Floating menu */
.floating-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;
}

/* Main circular image button */
#mainButton {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease;
}

#mainButton:hover {
  transform: scale(1.1);
}

.button-photo {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border: 2px solid white;
}

/* Submenu base */
/* Submenu base */
.submenu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.2);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* When open */
.submenu.open {
  max-height: 300px;             /* Set max height for scroll */
  overflow-y: auto;              /* Enable vertical scroll */
  opacity: 1;
  scrollbar-width: none;         /* Hide scrollbar in Firefox */
}

/* Hide scrollbar in WebKit (Chrome, Safari) */
.submenu.open::-webkit-scrollbar {
  display: none;
}


/* Submenu buttons with different colors */
.dropdownButton {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: background-color 0.3s;
}

/* Individual colors */
.btn1 { background-color: rgba(255, 99, 71, 0.8); }     /* Tomato */
.btn2 { background-color: rgba(60, 179, 113, 0.8); }    /* MediumSeaGreen */
.btn3 { background-color: rgba(65, 105, 225, 0.8); }    /* RoyalBlue */
.btn4 { background-color: rgba(255, 165, 0, 0.8); }     /* Orange */
.btn5 { background-color: rgba(138, 43, 226, 0.8); }    /* BlueViolet */
.btn6 { background-color: rgba(255, 20, 147, 0.8); }    /* DeepPink */
.btn7 { background-color: rgba(0, 206, 209, 0.8); }     /* DarkTurquoise */
.btn8 { background-color: rgba(154, 205, 50, 0.8); }    /* YellowGreen */
.btn9 { background-color: rgba(255, 105, 180, 0.8); }   /* HotPink */
.btn10 { background-color: rgba(70, 130, 180, 0.8); }   /* SteelBlue */
.btn11 { background-color: rgba(255, 140, 0, 0.8); }     /* DarkOrange */
.btn12 { background-color: rgba(0, 191, 255, 0.8); }     /* DeepSkyBlue */
.btn13 { background-color: rgba(199, 21, 133, 0.8); }    /* MediumVioletRed */
.btn14 { background-color: rgba(46, 139, 87, 0.8); }     /* SeaGreen */
.btn15 { background-color: rgba(186, 85, 211, 0.8); }    /* MediumOrchid */
.btn16 { background-color: rgba(72, 61, 139, 0.8); }     /* DarkSlateBlue */
.btn17 { background-color: rgba(244, 164, 96, 0.8); }    /* SandyBrown */
.btn18 { background-color: rgba(60, 179, 255, 0.8); }    /* LightSkyBlue */
.btn19 { background-color: rgba(255, 69, 0, 0.8); }      /* OrangeRed */
.btn20 { background-color: rgba(0, 128, 128, 0.8); }     /* Teal */


/* Hover effects */
.btn1:hover { background-color: rgba(255, 99, 71, 1); }
.btn2:hover { background-color: rgba(60, 179, 113, 1); }
.btn3:hover { background-color: rgba(65, 105, 225, 1); }
.btn4:hover { background-color: rgba(255, 165, 0, 1); }
.btn5:hover { background-color: rgba(138, 43, 226, 0.8); }    /* BlueViolet */
.btn6:hover { background-color: rgba(255, 20, 147, 0.8); }    /* DeepPink */
.btn7:hover { background-color: rgba(0, 206, 209, 0.8); }     /* DarkTurquoise */
.btn8:hover { background-color: rgba(154, 205, 50, 0.8); }    /* YellowGreen */
.btn9:hover { background-color: rgba(255, 105, 180, 0.8); }   /* HotPink */
.btn10:hover{ background-color: rgba(70, 130, 180, 0.8); }   /* SteelBlue */
.btn11:hover { background-color: rgba(255, 140, 0, 1); }
.btn12:hover { background-color: rgba(0, 191, 255, 1); }
.btn13:hover { background-color: rgba(199, 21, 133, 1); }
.btn14:hover { background-color: rgba(46, 139, 87, 1); }
.btn15:hover { background-color: rgba(186, 85, 211, 1); }
.btn16:hover { background-color: rgba(72, 61, 139, 1); }
.btn17:hover { background-color: rgba(244, 164, 96, 1); }
.btn18:hover { background-color: rgba(60, 179, 255, 1); }
.btn19:hover { background-color: rgba(255, 69, 0, 1); }
.btn20:hover { background-color: rgba(0, 128, 128, 1); }