@font-face {
    font-family: 'Poppins-extra';
    src: url('/fonts/poppins_extrabold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins-bold';
    src: url('/fonts/poppins_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins-medium';
    src: url('/fonts/poppins_medium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins-regular';
    src: url('/fonts/poppins_regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins-light';
    src: url('/fonts/poppins_light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AwanZaman-regular';
    src: url('/fonts/awan_zaman_regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AwanZaman-bold';
    src: url('/fonts/awan_zaman_heavy.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

 @font-face {
        font-family: 'dinneue-extra';
        src: url('/fonts/dinneue_extra.otf') format('truetype');
        font-weight: bold;
        font-style: normal;
 }
    
 @font-face {
        font-family: 'dinneue-bold';
        src: url('/fonts/dinneue_bold.otf') format('truetype');
        font-weight: bold;
        font-style: normal;
}
 @font-face {
        font-family: 'dinneue-medium';
        src: url('/fonts/dinneue_medium.otf') format('truetype');
        font-weight: bold;
        font-style: normal;
 }
 @font-face {
        font-family: 'dinneue-regular';
        src: url('/fonts/dinneue_regular.otf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    
 
    html, body {

        max-width: 1080px;
        min-width: 372px;
        margin: 0 auto; /* Center the body horizontally */
         font-family: "Poppins-regular";
         background-color: #000;
         overflow-x: hidden; /* Prevent horizontal scrolling */
         display: flex;
         justify-content: center; /* Center horizontally */
         align-items: center;     /* Center vertically if needed */
         flex-direction: column;
    
     }
     
     .download_app{
        display: block; 
    } 

    #head-top{
        width:100%;
        background-color: #2B2A33;
    }

/* Main container wrapper styles */
.container.main-wrapper {
    height: calc(100vh); /* Full viewport height minus header height */
    overflow-y: auto; /* Enable vertical scrolling */
     -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    position: relative;
    /*    top: 60px; Offset for fixed header */
    background-color: #000; /* Match body background */
   
}


/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.container.main-wrapper::-webkit-scrollbar {
    display: none;
}


#input-vlm {
    -webkit-appearance: none; /* Remove default styles (Chrome, Safari, Edge) */
    appearance: none;
    width: 100px;
    height: 6px;
    background-color: #fff; /* Track color */
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
}

/* Chrome, Safari, Edge */
#input-vlm::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background-color: #ffffff; /* Thumb color */
    border: 2px solid #ff9800;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}

/* Firefox */
#input-vlm::-moz-range-track {
    background-color: #fff;
    height: 6px;
    border-radius: 5px;
}

#input-vlm::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    border: 2px solid #ff9800;
    border-radius: 50%;
    cursor: pointer;
}

/* Active (when sliding) */
#input-vlm:active::-webkit-slider-thumb {
    transform: scale(1.2);
    background-color: #fff;
}


#responseDivBottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 10px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#responseDivBottom .row {
    display: flex;
    width:100%;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    /*height: 75px;  Adjust height as needed */
}

#responseDivBottom .col-4 {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center text horizontally */
    text-align: center;
}


.progress-ring2 {
         width: 38px;
         height: 38px;
         border: 2px solid #ddd;
         border-radius: 50%;
         border-top-color: #FF0000;
         animation: spin 1s linear infinite;
         display: none; /* Hidden by default */
         margin-left: auto;
         margin-right: auto;
         margin-top:20px;
         margin-bottom:20px;
 }

/* Tooltip styling */
.tooltip {
     position: absolute;
     background-color: rgba(0, 0, 0, 0.8);
     color: #fff;
     padding: 6px 10px;
     border-radius: 5px;
     white-space: nowrap;
     font-size: 14px;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.3s;
     z-index: 1000;
}


 /* Modal Background */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Ensure it's above other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Black with opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fff;
    margin: 15% auto; /* 15% from top, centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Width of the modal */
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Close Button */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
color: black;
    text-decoration: none;
}

.playing-station-wrap{
         width:400px;
         margin:auto;
}

.player-container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         padding: 10px;
         background-color: #142229;
         color: white;
}



#countryList li ul{
       background-color:#142229;
       padding:10px;
       border-radius: 50px;
       display: flex; /* Use flexbox to align items */
       align-items: center; /* Center items vertically */
       justify-content: center; /* Center items horizontally */
       list-style-type: none;
       padding: 0;
       display: grid; /* Use grid layout */
       grid-template-columns: repeat(100px, minmax(100px, 1fr)); /* Responsive columns */
       gap: 10px; /* Space between items */

   }

 /* First column: Station Image */
 .station-image {
         width: 100%;
         height: 100%;
         background-color:#fff;
         border-radius: 5px;
          object-fit: cover;  /* Ensure the image covers the circle */
     }


 #countryList li{
         margin:0px;
         height:60px;
         border-radius: 50px;
    }


   .wrapper {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }
   .content {
        flex: 1; /* This allows the content to take up all the remaining space */
   }

     .footer-links a {
         color: white;
         text-decoration: none;
         margin-right: 10px;
     }


      #web_title h4{
          margin-botom:0px;
          margin-top:8px;
          margin-right:20px;
          width:90px;
      }

      .player-header h5{
          margin-top:7px;
      }

      #sidebaer_topBar{
          width:100%;
          height:9px;
      }

     .player-header img {
         height: 40px;
         align-items: center;
         width:100%;
     }

     /* Main container */
     .main-container {
         display: flex;
         flex: 1;
         width:1030px;
         flex-direction: row;
         background-color: #212529;
         height: auto; /* Adjust height minus header (80px) and bottom-row (80px) */
         overflow-y: auto;
         padding:20px;
         gap: 20px; /* Space between columns */
     }

     /* Sidebar (Country list) */
     .country-list {
         width: 300px;
         height:100%;
         overflow-y: auto;
         padding: 10px;
         display: block; /* Default visible on desktop/tablet */
         top: 85px; /* Adjust to appear below the header */
         justify-content: center;  /* Center horizontally */
         align-items: center;      /* Center vertically */
     }



    /* Center the pagination controls */
     #paginationControls {
         display: flex;
         color:white;
         justify-content: center; /* Centers the controls horizontally */
         align-items: center; /* Aligns items vertically in the center */
         margin-top: 10px; /* Optional, to add some spacing */
     }

     #paginationControls span {
         margin: 0 5px;
         cursor: pointer;
     }

    .img {
         width: 100%; /* Set width */
         height: 50px; /* Set height */
         object-fit: cover; /* Ensure the image covers the circle */
         background-color:#142229;
     }

     ul {
         list-style-type: none;
         padding: 0;
         display: grid; /* Use grid layout */
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive columns */
         gap: 10px; /* Space between items */
     }
     
     li {
         padding: 10px;
         border: 1px solid #ccc;
         margin: 5px 0;
         border-radius: 5px;
         display: flex; /* Use flexbox to align items */
         align-items: center; /* Center items vertically */
         justify-content: center; /* Center items horizontally */
     }

   /* Middle column: Radio station list */
     .station-list {
         flex: 1;
         width:100%;
         padding: 0px 10px 10px 10px;
     }

     .station-list h2 {
         margin: 10px 5;
         align-items: center;
         width: 100%;
         text-align: center;
     }

     .station-grid {
         display: grid;
         /*grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); */
         gap: 18px;
     }


     .station-scroll {
          display: flex;
          flex-direction: row;
          gap: 16px;
          overflow-x: auto;
          overflow-y: hidden;
          padding-bottom: 8px;
          /* smooth scrolling */
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
        }

        /* hide scrollbar (optional) */
        .station-scroll::-webkit-scrollbar {
          display: none;
        }
        .station-scroll {
          scrollbar-width: none;
        }




   .country-grid {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
         gap: 14px;
         overflow:auto;
         padding: 0px;
     }

     .station-item {
        
         cursor: pointer;
          height: auto;
         color: #ccc;
         font-size:14px;
         transition: background-color 0.2s;
         border-radius: 5px 5px 5px 5px;
     }


    .station-item {
          flex: 0 0 auto;
          width: 150px;   /* same as your min grid size */
          text-align:left;
     }


     .station-item:hover {
         color:#fff;
     }



    /*.station-item img {
         width: 100%;
         height: 140px;
         transition: all 0.3s ease-in-out;
         border-radius: 5px 5px 0px 0px;
         object-fit: scale-down;
          background-image: url('${station.logo}');
     }*/

   .toFactory{
         width:auto;
          display: flex;
          justify-content: start;
          align-items: start;
      }

  .volume-slider {
         margin: 10px 0;
         width: 30%;
   }




     .country-list h2 {
         margin: 10px 0;
         color:#f4f4f4;
     }

     .country-list ul {
         list-style-type: none;
         padding: 0;
         color:#f4f4f4;
     }

     .country-list li {
         padding: 8px;
         cursor: pointer;
         color:#f4f4f4;
         transition: background-color 0.2s;
     }

     .country-list li:hover {
         background-color: #999;
     }

      .countryTitle{
          color: white;
          font-weight:900;
        
      }

      #countryTitle{
          color: #f4f4f4;
          margin-bottom:12px;
      }

     #downloadTitle{
         color: #f4f4f4;
          margin-bottom:12px;
          font-size:1.0rem;
     }

     /* Second column: Play button and progress ring */
     .play-control {
         position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
         margin-top:10px;
     }

     .play-button {
         width: 35px;
         height: 35px;
         border: none;
         border-radius: 50%;
         background-color: #007bff;
         color: white;
         font-size: 20px;
         cursor: pointer;
         z-index: 1;
     }

     .progress-ring {
         position: absolute;
         width: 38px;
         height: 38px;
         border: 6px solid #ddd;
         border-radius: 50%;
         border-top-color: #007bff;
         animation: spin 1s linear infinite;
         display: none; /* Hidden by default */
         margin-left: auto;
         margin-right: auto;

     }

     @keyframes spin {
         to { transform: rotate(360deg); }
     }

     .volume-control {
             margin: 8px 0;
             width: 100%;
    }
      
      
.station-logo {
  max-width: 150px;
  max-height: 150px;
}



.card {
    background-color: transparent;
    border: none; /* optional */
}




.card-img-top {
    aspect-ratio: 1 / 1;
    width: 100%;
    background-color: white;
    object-fit: fill; /* no stretching */
}



.trending-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}

.trending-scroll::-webkit-scrollbar {
  display: none;
}

.trending-item {
  flex: 0 0 auto;
  width: 140px;
  scroll-snap-align: start;
}

.trending-item img {
  width: 100%;
  height: 85px;        /* mobile height */
  object-fit: cover;
  border-radius: 8px;
}



.category-scroll_two {
  display: flex;
  gap: 38px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE & Edge */
}

.category-scroll_two::-webkit-scrollbar {
  display: none;
}



.category-scroll {
  display: flex;
  gap: 38px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE & Edge */
}

.category-scroll::-webkit-scrollbar {
  display: none;
}

.category-item {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
}

.category-item img {
  width: 100%;
  height: 85px;            /* mobile */
  object-fit: cover;
  border-radius: 8px;
}

.category-item,
.category-item * {
  cursor: pointer;
}






.category-item_two {
  flex: 0 0 auto;
  width: 150px;
  scroll-snap-align: start;
}

.category-item_two img {
  width: 100%;
  height: 150px;            /* mobile */
  object-fit: cover;
  border-radius: 8px;
}

.category-item_two,
.category-item_two * {
  cursor: pointer;
}



.title-ellipsis,
.sub-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-ellipsis {
  font-family: Poppins-medium;
  font-size: 12px;
}

.sub-ellipsis {
  font-family: Poppins-regular;
  font-size: 11px;
  color: #aaa;
}



.clamp-4 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;

  overflow: hidden !important;
  text-overflow: ellipsis;
  word-break: break-word;

  line-height: 1.5em;
  max-height: 6em; /* 1.5em × 4 */
}
ns-regular text-2xl mt-6" style="color:#fff;font-family: Poppins-regular;">Radio, Podcast & RSSfeed</h1>
                    <p class="mb-[15px] font-poppins-regular text-[1.25rem] font-normal leading-[1.35] text-center" style="color:#ccc; font-size: 20px;font-family:Poppins-regular;font-weight:bold;">
                        tuner-radio.com : Global internet radio
                    </p>
                    <div style="margin-top: 15px;"></div>
                    
                    <div class="container  ">
                          <span style="color:#ccc;font-size:14px; min-height: 60px; display: block;"><strong style="color:#fff;">tuner-radio.com</strong> – Free Online Radio, Podcasts & RSS Feeds Discover the world of audio with Tuner-Radio.com, your go-to platform for free online radio streaming. Listen to live radio stations, explore podcasts and RSS feeds from all categories, and enjoy over 60,000 stations worldwide. Stream music, news, talk shows, and more directly in your browser or on the go with our free radio app. Stay tuned and never miss your favorite shows!</span>
                    </div>
                    <div style="margin-top: 20px;"></div>

                    <br/>



.station-row {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s ease;
}

.station-row:hover {
  background: rgba(255,255,255,0.05);
}

/* IMAGE */
.station-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* TEXT */
.station-title {
  display: block;
  font-family: Poppins-medium;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-country {
  display: block;
  font-family: Poppins-regular;
  font-size: 12px;
  color: #ccc;
}

.station-tags {
  display: block;
  font-family: Poppins-regular;
  font-size: 12px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.custom-container{
  width:100%;
  max-width:100%;
}


.play-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;

  padding: 0 !important;
  line-height: 0 !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

cursor: pointer;
  z-index: 2;
  position: relative;
}


/* make header take full width */
#recentTitle {
  width: 100%;
}

/* FLEX ROW */
.scroll-headers {
  display: flex;
  align-items: center;
  justify-content: space-between; /* pushes buttons right */
  width: 100%;
}

/* title alignment */
.recent-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: white;
}

/* right buttons */
.scroll-controls {
  display: flex;
  gap: 6px;
  margin-left: auto; /* EXTRA push right */
}

/* buttons style */
.scroll-btn {
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}



@media (min-width:768px){
  .custom-container{
    max-width:768px;
  }
}

/* lg breakpoint (1024px) */
@media (min-width:1024px){
  .custom-container{
    max-width:1024px;
  }
}



@media (min-width: 992px) {
  .category-item img {
    height: 152px;
  }
}



/* Phones only */
@media (max-width: 767.98px) {
    .trending-item img {
        height: 150px;
      }

      .station-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 20px;
 }

 /* Phones only */
@media (max-width: 372px) {
      .station-logo {
        max-width: 120px;
        max-height: 120px;
      }

      .station-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 18px;
 }

}