.elementor-2376 .elementor-element.elementor-element-c337818{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2376 .elementor-element.elementor-element-c337818:not(.elementor-motion-effects-element-type-background), .elementor-2376 .elementor-element.elementor-element-c337818 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#29160C;}.elementor-2376 .elementor-element.elementor-element-5ea9d6f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2376 .elementor-element.elementor-element-8dc3e30{width:var( --container-widget-width, 12.931% );max-width:12.931%;--container-widget-width:12.931%;--container-widget-flex-grow:0;}.elementor-2376 .elementor-element.elementor-element-8dc3e30.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2376 .elementor-element.elementor-element-8dc3e30.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2376 .elementor-element.elementor-element-64a55b9{--display:flex;}.elementor-2376 .elementor-element.elementor-element-40fc0e6.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2376 .elementor-element.elementor-element-9fed955{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2376 .elementor-element.elementor-element-78bcd3c{width:var( --container-widget-width, 19% );max-width:19%;--container-widget-width:19%;--container-widget-flex-grow:0;}.elementor-2376 .elementor-element.elementor-element-78bcd3c > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-2376 .elementor-element.elementor-element-78bcd3c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2376 .elementor-element.elementor-element-78bcd3c.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2376 .elementor-element.elementor-element-78bcd3c .elementor-heading-title{font-size:19px;color:var( --e-global-color-astglobalcolor6 );}.elementor-2376 .elementor-element.elementor-element-5f75ee7{--display:flex;}.elementor-2376 .elementor-element.elementor-element-d7f4393 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-2376 .elementor-element.elementor-element-d7f4393.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2376 .elementor-element.elementor-element-d7f4393{font-family:"Roboto Serif", Sans-serif;font-weight:600;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:var( --e-global-color-astglobalcolor5 );}.elementor-2376 .elementor-element.elementor-element-b85d22f.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu-container{background-color:#02010100;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu-container .eael-simple-menu.eael-simple-menu-horizontal{background-color:#02010100;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu >li > a, .eael-simple-menu-container .eael-simple-menu-toggle-text{line-height:21px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li a span, .elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li span.eael-simple-menu-indicator{font-size:15px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li a span, .elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li span.eael-simple-menu-indicator i{font-size:15px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li span.eael-simple-menu-indicator svg{width:15px;height:15px;line-height:15px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li span svg{width:15px;height:15px;line-height:15px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li .eael-simple-menu-indicator:hover:before{color:#f44336;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li .eael-simple-menu-indicator:hover i{color:#f44336;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li .eael-simple-menu-indicator:hover svg{fill:#f44336;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li .eael-simple-menu-indicator:hover{background-color:#ffffff;border-color:#f44336;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li .eael-simple-menu-indicator.eael-simple-menu-indicator-open:before{color:#f44336 !important;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li .eael-simple-menu-indicator.eael-simple-menu-indicator-open svg{fill:#f44336 !important;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li .eael-simple-menu-indicator.eael-simple-menu-indicator-open i{color:#f44336 !important;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li .eael-simple-menu-indicator.eael-simple-menu-indicator-open{background-color:#ffffff !important;border-color:#f44336 !important;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu-container .eael-simple-menu-toggle{background-color:#000000;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu-container .eael-simple-menu-toggle i{color:#ffffff;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu-container .eael-simple-menu-toggle svg{fill:#ffffff;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu.eael-simple-menu-horizontal li ul li a{padding-left:20px;padding-right:20px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu.eael-simple-menu-horizontal li ul li > a{border-bottom:1px solid #f2f2f2;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu.eael-simple-menu-vertical li ul li > a{border-bottom:1px solid #f2f2f2;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li ul li a span{font-size:12px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li ul li span.eael-simple-menu-indicator{font-size:12px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li ul li span.eael-simple-menu-indicator i{font-size:12px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li ul li .eael-simple-menu-indicator svg{width:12px;height:12px;line-height:12px;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li ul li .eael-simple-menu-indicator:hover:before{color:#f44336 !important;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li ul li .eael-simple-menu-indicator.eael-simple-menu-indicator-open:before{color:#f44336 !important;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li ul li .eael-simple-menu-indicator:hover{background-color:#ffffff !important;border-color:#f44336 !important;}.elementor-2376 .elementor-element.elementor-element-b85d22f .eael-simple-menu li ul li .eael-simple-menu-indicator.eael-simple-menu-indicator-open{background-color:#ffffff !important;border-color:#f44336 !important;}.elementor-2376 .elementor-element.elementor-element-99fad9d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2376 .elementor-element.elementor-element-ad2118b .elementor-repeater-item-84ee535.elementor-social-icon{background-color:var( --e-global-color-4dfdbca );}.elementor-2376 .elementor-element.elementor-element-ad2118b .elementor-repeater-item-9cc397b.elementor-social-icon{background-color:var( --e-global-color-accent );}.elementor-2376 .elementor-element.elementor-element-ad2118b{--grid-template-columns:repeat(0, auto);--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-2376 .elementor-element.elementor-element-ad2118b .elementor-widget-container{text-align:center;}.elementor-2376 .elementor-element.elementor-element-ad2118b.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2376 .elementor-element.elementor-element-99ce7fe{--display:flex;}.elementor-2376 .elementor-element.elementor-element-2c1358a.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-2376 .elementor-element.elementor-element-7db0279.xpro-widget-bg-overlay:before{transition:background 0.3s;}@media(min-width:768px){.elementor-2376 .elementor-element.elementor-element-5ea9d6f{--width:50%;}.elementor-2376 .elementor-element.elementor-element-9fed955{--width:50%;}.elementor-2376 .elementor-element.elementor-element-99fad9d{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-2c1358a */#vinyl-player {
  position: fixed;
  bottom: -60px;
  right: 50px;
  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;
}

/* Skip Controls - positioned below vinyl */
.controls {
  position: absolute;
  top: 90px;  /* ADJUST THIS: Distance from top of vinyl (higher number = lower position) */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;  /* ADJUST THIS: Space between buttons */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

#vinyl-player:hover .controls {
  opacity: 1;
  pointer-events: auto;
}

.control-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.3);
  width: 20px;  /* ADJUST THIS: Arrow width */
  height: 20px;  /* ADJUST THIS: Arrow height */
  font-size: 0;  /* Hide the text icons */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  position: relative;
  clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}

#next-btn {
  /* Right arrow - flip horizontally */
  transform: scaleX(-1);
}

.control-btn:hover {
  background: rgba(0, 0, 0, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  color: #d4af37;  /* Gold color on hover for extra flair */
}

#prev-btn:hover {
  transform: scale(1.15);
}

#next-btn:hover {
  transform: scaleX(-1) scale(1.15);
}

.control-btn:active {
  transform: scale(0.95);
}

#next-btn:active {
  transform: scaleX(-1) scale(0.95);
}/* End custom CSS */