@media all and (min-width: 960px) and (max-width: 1024px) {
  /* put your css styles in here */
  
}

@media all and (min-width: 801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width: 769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width: 569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width: 481px) and (max-width: 568px) {
  /* put your css styles in here */
  section .px-5 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

@media all and (min-width: 321px) and (max-width: 480px) {
  /* put your css styles in here */
  section .px-5 {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .details.p-3.w-100 {
    display: block;
  }
  #player-thumb {
    display: block!important;
  }
  #player-thumb img {
    min-width: 100%;
    padding-bottom: 12px;
  }
  .playing-info {
    text-align: center;
  }
  .controls {
    justify-content: center !important;
  }
  .slider_container {
    display: block !important;
  }
  
}

@media all and (min-width: 0px) and (max-width: 320px) {
  /* put your css styles in here */
}
@media (max-width: 768px) {
  .player-card {
    padding: 20px; /* Add more padding for better spacing */
  }

  .details {
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center align content */
  }

  .controls {
    justify-content: center; /* Center the controls */
    gap: 10px; /* Add spacing between controls */
    font-size: xx-large;
  }

  .volume_slider {
    width: 80%; /* Make the volume slider smaller */
  }

  .playing-info {
    text-align: center; /* Center align track info */
  }

  #player-thumb img {
    max-width: 100px; /* Reduce the size of the thumbnail */
  }
  .container-sm,
  .container {
    max-width: 790px;
  }
}
/* Portrait tablets only */
@media only screen and (min-width: 600px) and (max-width: 768px) {
  #playlist {
    max-height: 250px;
    overflow-y: auto;
    /* width: 400px; */
  }
  #player-thumb {
    display: none!important;;
  }
}

/* Landscape tablets only */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #playlist {
    max-height: 250px;
    overflow-y: auto;
    /* width: 400px; */
  }
  #player-thumb {
    display: none!important;
  }
}