.elementor-2022 .elementor-element.elementor-element-c623208{--display:flex;}.elementor-2022 .elementor-element.elementor-element-e93a30a.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2022 .elementor-element.elementor-element-b6db608.xpro-widget-bg-overlay:before{transition:background 0.3s;}/* Start custom CSS for html, class: .elementor-element-e93a30a */#vinyl-player {
  position: fixed;
  bottom: -60px;
  right: 20px;
  z-index: 9999;
  transition: bottom 0.3s ease;
}

#vinyl-player:hover {
  bottom: 20px;
}

.vinyl-container {
  position: relative;
  cursor: pointer;
}

.vinyl-record {
  width: 120px;
  height: 120px;
  /* This creates the deep grooves and the light reflection */
  background: 
    /* The Shine/Reflection */
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.1) 45deg,
      transparent 90deg,
      rgba(255, 255, 255, 0.1) 135deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.1) 225deg,
      transparent 270deg,
      rgba(255, 255, 255, 0.1) 315deg,
      transparent 360deg
    ),
    /* The Concentric Grooves */
    repeating-radial-gradient(
      circle at center,
      #1a1a1a,
      #1a1a1a 1px,
      #000 2px,
      #000 3px
    );
  
  border-radius: 50%;
  position: relative;
  animation: spin 3s linear infinite;
  /* Added a slight border to define the edge better */
  border: 2px solid #111;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.vinyl-record.paused {
  animation-play-state: paused;
}

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

.vinyl-center {
  width: 25px;
  height: 25px;
  background: #d4af37;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#vinyl-player:hover .vinyl-label {
  opacity: 1;
}

#mute-text {
  font-size: 12px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.song-info {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  white-space: nowrap;
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 14px;
}

#vinyl-player:hover .song-info {
  opacity: 1;
}/* End custom CSS */