.zorvath {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
background-image: linear-gradient(to bottom, rgb(0 0 0 / 81%), rgba(54, 48, 42, 1));
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  z-index: 1001;
}

.cover-art-container {
  position: relative;
}
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.download-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}

.img {
  position: relative;
}
#overlay-cover-art {
  position: absolute;
  top: 10px; /* adjust based on SVG size */
  left: 10px; /* adjust based on SVG size */
  border-radius: 50%;
  width: 200px; /* adjust */
  height: 200px; /* adjust */
}

.circular-progress-svg {
  position: relative; /* or absolute depending on layout */
}
.circular-progress-svg {
  /* position styling might be needed depending on layout */
  display: block;
}

.circular-progress-svg circle {
  transition: stroke-dashoffset 0.3s ease;
}

.circular-progress-svg circle:nth-child(1) {
  /* Background track circle */
  stroke: #1e7a2b; /* Adjust color */
  stroke-width: 10; /* Thickness */
}
.circular-progress-svg {
  
  transform: rotate(-90deg);
}
.circular-progress-svg circle:nth-child(2) {
  /* Progress circle */
  stroke: #005134; /* Progress color */
  stroke-width: 10; /* Thickness, match with track */
  stroke-linecap: round; /* Rounded ends */
}

/* Playback Control Styles */
.thorvok {
  display: flex;
  align-items: center;
  margin-right: 0px;
}

.thorvok button {
  width: 24px;
  height: 24px;
  margin: 0 5px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.controls button {
      width: 58px;
	  font-size: 1.5em; /* adjust size as needed */
  height: 24px;
  margin: 0 px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.controls .fa-play-circle {
   font-size: 2.9em; /* adjust size as needed */
  margin: 0 -11px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.player-overlay .controls fa-play-circle  {
 font-size: 2em; /* adjust size as needed */
}

.controls .fa-pause-circle {
   font-size: 2.8em; /* adjust size as needed */
  margin: 0 -11px;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.player-overlay .controls fa-pause-circle  {
 font-size: 2em; /* adjust size as needed */
}
.player-overlay.show {
 backdrop-filter: blur(5px); /* optional */
 background-color: rgba(0,0,0,0.5); /* optional */
 pointer-events: auto;
}
#overlay-beat-title {
 font-size: 1.5em;
 color: #fff;
 margin-bottom: 5px;
}

#overlay-producer-name a {
 font-size: 1em;
 color: #ccc;
 text-decoration: none;
}

.thorvok-play {
  margin-left: auto;
}
#overlay-progress-bar {
 width: 80%;
 height: 5px;
 background-color: #333;
 border-radius: 2px;
 margin: 10px auto;
 position: relative;
}

#overlay-progress-fill {
 height: 100%;
 background-color: #005134;
 border-radius: 2px;
 width: 0%;
}

/* Progress Bar Styles */
.kyrium {
  width: 100%;
  height: 11px;
  background-color: #000;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
}

.kyrium-fill {
  height: 8.5px;
  background-color: #005134;
  border-radius: 16px;
  position: relative;
}



.kyrium-fill::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  right: 0;
}
.player-overlay {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(0 0 0 / 91%);

 justify-content: center;
 align-items: center;
 z-index: 1000;
 transition: transform 0.5s ease-out;
 transform: translateY(100%); /* start off-screen at bottom */
}

.player-overlay.show {
 transform: translateY(0); /* move to normal position */
 display: flex; /* show as flex */
}
.player-overlay .overlay-content {
 background: #062b1e9e; /* or any other background */
 padding: 24px;
 border-radius: 8px;
 text-align: center;
 max-width: 300px;
}
/* Track Information Styles */
.naxarion {
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.music-player-container {
    clear: both; /* ensure the music player stays below the blog box */
    position: relative; /* or fixed, depending on your desired layout */
}

.naxarion-title {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.current-time, .duration {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}


.naxarion-text-container, .overlay-text-container {
    width: 80px; /* Default for small screens */
	overflow: hidden;
}
/* Small smartphones */
@media (min-width: 260px) and (max-width: 279px) {
    .naxarion-text-container, .overlay-text-container {
        width: 30px;
		overflow: hidden;
    }
}

/* Small smartphones */
@media (min-width: 280px) and (max-width: 319px) {
    .naxarion-text-container, .overlay-text-container {
        width: 108px;
		overflow: hidden;
    }
}
/* Small smartphones */
@media (min-width: 280px) and (max-width: 319px) {
    .overlay-text-container {
        width: 220px;
		overflow: hidden;
		    margin: none !important;
    }
}
/* Small smartphones */
/* Small smartphones */
@media (min-width: 320px) and (max-width: 350px) {
 .naxarion-text-container{
 width: 110px;
 overflow: hidden;
 }
}

@media (min-width: 320px) and (max-width: 350px) {
.overlay-text-container {
  width: 226px;
 overflow: hidden;
 }
}
/* Small smartphones */
@media (min-width: 360px) {
 .naxarion-text-container, .overlay-text-container {
 width: 120px;
 overflow: hidden;
 }
}
@media (min-width: 360px) and (max-width: 360px) {
.overlay-text-container {
 width: 220px;
 overflow: hidden;
 }
}
/* Small smartphones */
@media (min-width: 375px) {
    .naxarion-text-container, .overlay-text-container {
        width: 120px;
		overflow: hidden;
    }
}
/* Small smartphones */
@media (min-width: 375px) {
    .overlay-text-container {
        width: 217px;
		overflow: hidden;
    }
}
/* Small smartphones */
@media (min-width: 414px) {
    .naxarion-text-container {
        width: 140px;
		overflow: hidden;
    }
}

/* Bigger smartphones */
@media (min-width: 480px) {
    .naxarion-text-container {
        width: 300px;
		overflow: hidden;
    }
}
/* Bigger smartphones */
@media (min-width: 480px) and (max-width: 532px) {
    .naxarion-text-container {
        width: 80px;
		overflow: hidden;
    }
}
/* Small tablets */
@media (min-width: 600px) {
    .naxarion-text-container {
        width: 200px;
		overflow: hidden;
    }
}

/* Bigger tablets */
@media (min-width: 768px) {
    .naxarion-text-container {
        width: 300px;
		overflow: hidden;
    }
}

/* Smaller PC screens */
@media (min-width: 1024px) {
    .naxarion-text-container {
        width: 300px;
		overflow: hidden;
    }
}

/* Bigger PC screens */
@media (min-width: 1280px) {
    .naxarion-text-container {
        width: 350px;
		overflow: hidden;
    }
}

/* Very large screens */
@media (min-width: 1440px) {
    .naxarion-text-container {
        width: 400px;
		overflow: hidden;
    }
}
.naxarion-title, .naxarion-artist {
    display: block;
    white-space: nowrap;
}
#overlay-beat-title {
    display: block;
    white-space: nowrap;
}


.naxarion-artist a {
  font-size: 12px;
  color: #fff;
  text-decoration: none;
}
.music-info .producer-text-container {
    width: 120px; /* adjust based on layout */
    overflow: hidden;
}

.music-info .producer-text-container h3, .music-info .producer-text-container p {
    display: block;
    white-space: nowrap;
}



/* Volume Control Styles */
.voluminox {
  margin-left: 20px;
}

.voluminox-slider {
 width: 100px;
 height: 4px;
 background-color: #ddd;
 border-radius: 2px;
 margin-right: 10px;
 display: none; /* Hide by default */
 position: absolute; /* Position absolutely for vertical display */
 bottom: 30px; /* Adjust position relative to volume icon */
 left: 50%;
 transform: translateX(-50%) rotate(-90deg); /* Rotate for vertical */
 transform-origin: center;
 z-index: 10;
}

/* Show slider when active */
.voluminox {
 position: relative; /* Add relative positioning to the container */
 margin-left: 20px;
}

.voluminox-slider {
 width: 100px;
 height: 46px;
 background-color: #ddd;
 border-radius: 2px;
 display: none; /* Hide by default */
 position:  fixed;
 bottom: 120px; /* Position above the icon */
 left: 93%;
 transform: translateX(-50%) rotate(-90deg);
 z-index: 9999;
}

.voluminox-icon.slider-icon {
 position:  fixed;
 bottom: 67px; /* Position above the main icon */
 left: 93%;
   filter: drop-shadow(0 0 5px rgba(0, 50, 255, 1));
 transform: translateX(-50%);
 display: none;
 z-index:9999;
}

.voluminox-icon {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #fff; /* Icon color */
    font-size: 1.2em; /* Icon size */
}
.voluminox.active {
    /* Add styles for active state */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    border-color: #007bff;
	    background-color: #007bff24;
    transform: scale(1.1); /* Slightly enlarge */
    transition: transform 0.2s ease;
}


@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Include media queries for .music-info h3, .music-info p similar to .naxarion-text-container */


.music-info h3 {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

.music-info p {
  font-size: 12px;
  color: #fff;
}

.music-info .producer-text-container {
  width: 80px; /* Default for small screens */
  overflow: hidden;
}