#fw-section-custom-html-65c50427-3436-4eba-a0fe-5b9852072f0a {

.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 16px;
  padding: 20px;
}

.carousel iframe {
  flex: 0 0 calc(33.333% - 16px); /* 3 items per view, accounting for gap */
  height: 315px;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

.scroll-left {
  left: 0;
}

.scroll-right {
  right: 0;
}

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 16px;
  padding: 20px;
  
  /* Hide scrollbar */
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
}

.carousel::-webkit-scrollbar {
  display: none;                 /* Chrome, Safari, Opera */
}
}



#fw-section-custom-html-80dcef10-435f-4d75-957e-a3786770b4fb {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center everything */
  align-items: center;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: center;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: center;  /* Center all elements inside the container */
  justify-content: center;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork Styling */
.album-artwork {
  margin: 30px 0;
}

.album-cover {
  width: 280px;  /* Larger album cover */
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Shadow for depth */
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

}




#fw-section-custom-html-4e5159cb-a987-49a3-b998-6a9bd243c0b0 {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: left;  /* Vertically center everything */
  align-items: left;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: left;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: left;  /* Center all elements inside the container */
  justify-content: left;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork & Text Container */
.album-artwork {
  margin: 30px 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;  /* Space between image and text box */
}

/* Album Cover */
.album-cover {
  width: 280px;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

.download-buttons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: left;
  flex-wrap: wrap;
}

.download-button {
  background-color: #f1f861;
  color: #1a1a1a;
  display: none;
  text-decoration: none;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.download-button:hover {
  background-color: #f1c231;
  transform: translateY(-3px);
}

/* Feedback Form Container */
form {
  background-color: #1a1a1a;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* Labels */
form label {
  color: #f1f1f1;
  font-size: 16px;
  font-weight: 600;
}

/* Text Inputs, Textarea, and Select Dropdown */
form input[type="text"],
form textarea,
form select {
  background-color: #121212;
  border: 1px solid #333;
  color: #f1f1f1;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
  resize: vertical;
  box-sizing: border-box;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

form input:focus,
form textarea:focus,
form select:focus {
  border-color: #f1f861;
  box-shadow: 0 0 0 2px rgba(241, 248, 97, 0.3);
  outline: none;
}

/* Submit Button (Styled like Audio Player button) */
form button[type="submit"] {
  background-color: #f1f861;
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 30px;  /* wider padding for a nice button size */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: auto;  /* remove full width */
  align-self: flex-start; /* align left within form */
}
}


#fw-section-rich-text-bf11d733-b6b5-459b-902f-aefca29c149e {
--color-primary: #f1f861;
--color-primary-rgb: 241, 248, 97;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #f1f861;
--color-on-background-rgb: 241, 248, 97;
--color-product-image-background: #f1f861;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}


#fw-section-custom-html-da40faf7-08f8-49ef-997e-0188c865fca6 {

.product-image img {
    width: 100%;
    height: auto;
    border-radius: 0px;
}

.product-description {
    margin-top: 20px;
    font-size: 0.9em;
    font-weight: 400;
    color: #f3f87a;
    text-align: left; /* Default for desktop */
}

.product-display {
    width: 31.6%;
}

main {
    display: flex;
    flex-wrap: wrap;
    gap: 31.6px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .product-display {
        width: 100%; /* Stack items on mobile */
    }

    .product-description {
        font-size: 0.75em;
        font-weight:300;
      text-align: left; /* Center text on mobile */
    }

    header h2 {
        text-align: center; /* Center header text on mobile only */
    }
}

}
#fw-section-custom-html-22e068ab-143c-4b88-8758-95bad9db722a {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center everything */
  align-items: center;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: center;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: center;  /* Center all elements inside the container */
  justify-content: center;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork Styling */
.album-artwork {
  margin: 30px 0;
}

.album-cover {
  width: 280px;  /* Larger album cover */
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Shadow for depth */
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

}

#fw-section-custom-html-6ca02790-ab8c-4379-9b4c-78743647eaa6 {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center everything */
  align-items: center;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: center;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: center;  /* Center all elements inside the container */
  justify-content: center;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork Styling */
.album-artwork {
  margin: 30px 0;
}

.album-cover {
  width: 280px;  /* Larger album cover */
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Shadow for depth */
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

}

#fw-section-custom-html-115f09b9-d950-4e48-a9fc-0eba8dbb7ca0 {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center everything */
  align-items: center;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: center;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: center;  /* Center all elements inside the container */
  justify-content: center;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork Styling */
.album-artwork {
  margin: 30px 0;
}

.album-cover {
  width: 280px;  /* Larger album cover */
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Shadow for depth */
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

}

#fw-section-custom-html-e4d03134-eef7-47cc-a20a-4a75b310568f {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center everything */
  align-items: center;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: center;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: center;  /* Center all elements inside the container */
  justify-content: center;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork Styling */
.album-artwork {
  margin: 30px 0;
}

.album-cover {
  width: 280px;  /* Larger album cover */
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Shadow for depth */
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

}
#fw-section-custom-html-4e66b9f4-7dd0-4140-b0b0-d06c1f073058 {

/* Ensure body and html take up full height */
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif; /* Use Arial for body and all other elements */
}

/* Full-width image container with 70vh height */
.image-container {
    position: relative;
    width: 100%;
    height: 70vh; /* 70% of viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    overflow: hidden;  /* Ensures that the overlay stays within the bounds */
}

/* Image background settings */
.image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make the image cover the container */
    z-index: -1; /* Ensure image stays behind the button */
}

/* Add overlay on hover */
.image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);  /* Black overlay with transparency */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* Show overlay on hover */
.image-container:hover::before {
    opacity: 1;
}

/* Scoped button styles, only affecting button inside image-container */
.ep-button {
    position: absolute;
    bottom: 40px; /* 20px from the bottom */
    left: 40px;   /* 20px from the left */
    padding: 25px 30px;
    background-color: #ffffff;  /* White background */
    color: #0d0d0d;  /* Dark text */
    border: 2px solid #ffffff; /* White border */
    border-radius: 0px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase; /* Uppercase letters */
    font-family: 'Carbon', sans-serif;  /* Apply Carbon font only to the button */
}

/* Button hover effect */
.ep-button:hover {
    background-color: #0d0d0d; /* Dark background on hover */
    color: #ffffff;  /* White text on hover */
    border: 2px solid #0d0d0d;  /* Dark border on hover */
}

/* Second image container */
.second-container {
    position: relative;
}

/* Mobile optimizations */
@media screen and (max-width: 100%) {
    .image-container, .second-container {
        height: 30vh; /* Adjust height for mobile */
    }

    .ep-button {
        font-size: 16px;
        padding: 12px 25px;
        left: 10px;  /* Move button further inside */
        bottom: 10px;
    }
}

@media screen and (max-width: 480px) {
    .image-container, .second-container {
        height: 20vh; /* Further reduce height for small screens */
    }

    .ep-button {
        font-size: 14px;
        padding: 10px 20px;
        left: 25px;  /* Move button further inside on very small screens */
        bottom: 25px;
    }
}

}






#fw-section-custom-html-e2581a44-06eb-439c-bb43-ebe43798c026 {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center everything */
  align-items: center;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: center;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: center;  /* Center all elements inside the container */
  justify-content: center;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork Styling */
.album-artwork {
  margin: 30px 0;
}

.album-cover {
  width: 280px;  /* Larger album cover */
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Shadow for depth */
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

}





#fw-section-custom-html-60d7de9b-71f6-4a02-8ccd-c512eda5b1ff {

.product-image img {
    width: 100%;
    height: auto;
    border-radius: 0px;
}

.product-description {
    margin-top: 20px;
    font-size: 0.9em;
    font-weight: 400;
    color: #f3f87a;
    text-align: left; /* Default for desktop */
}

.product-display {
    width: 31.6%;
}

main {
    display: flex;
    flex-wrap: wrap;
    gap: 31.6px;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .product-display {
        width: 100%; /* Stack items on mobile */
    }

    .product-description {
        font-size: 0.75em;
        font-weight:300;
      text-align: left; /* Center text on mobile */
    }

    header h2 {
        text-align: center; /* Center header text on mobile only */
    }
}

}

#fw-section-custom-html-bbdde3ce-4c62-42bc-a755-b7dd483a0cd0 {

/* Ensure body and html take up full height */
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif; /* Use Arial for body and all other elements */
}

/* Full-width image container with 70vh height */
.image-container {
    position: relative;
    width: 100%;
    height: 70vh; /* 70% of viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    overflow: hidden;  /* Ensures that the overlay stays within the bounds */
}

/* Image background settings */
.image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make the image cover the container */
    z-index: -1; /* Ensure image stays behind the button */
}

/* Add overlay on hover */
.image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);  /* Black overlay with transparency */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* Show overlay on hover */
.image-container:hover::before {
    opacity: 1;
}

/* Scoped button styles, only affecting button inside image-container */
.ep-button {
    position: absolute;
    bottom: 40px; /* 20px from the bottom */
    left: 40px;   /* 20px from the left */
    padding: 25px 30px;
    background-color: #ffffff;  /* White background */
    color: #0d0d0d;  /* Dark text */
    border: 2px solid #ffffff; /* White border */
    border-radius: 0px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase; /* Uppercase letters */
    font-family: 'Carbon', sans-serif;  /* Apply Carbon font only to the button */
}

/* Button hover effect */
.ep-button:hover {
    background-color: #0d0d0d; /* Dark background on hover */
    color: #ffffff;  /* White text on hover */
    border: 2px solid #0d0d0d;  /* Dark border on hover */
}

/* Second image container */
.second-container {
    position: relative;
}

/* Mobile optimizations */
@media screen and (max-width: 100%) {
    .image-container, .second-container {
        height: 30vh; /* Adjust height for mobile */
    }

    .ep-button {
        font-size: 16px;
        padding: 12px 25px;
        left: 10px;  /* Move button further inside */
        bottom: 10px;
    }
}

@media screen and (max-width: 480px) {
    .image-container, .second-container {
        height: 20vh; /* Further reduce height for small screens */
    }

    .ep-button {
        font-size: 14px;
        padding: 10px 20px;
        left: 25px;  /* Move button further inside on very small screens */
        bottom: 25px;
    }
}

}


#fw-section-rich-text-36516631-548e-43eb-86cc-e615b439a9e2 {
--color-primary: #f1f861;
--color-primary-rgb: 241, 248, 97;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #f1f861;
--color-on-background-rgb: 241, 248, 97;
--color-product-image-background: #f1f861;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);

}
#fw-section-custom-html-9cbd4f5a-71d7-4f04-8cfb-39635ebe99ca {

.container {
  max-width: 90%;
  margin: 50px;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.heading {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: left; /* Left align heading */
}

.content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.content img {
  max-width: 40%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.text {
  max-width: 60%;
  text-align: left;
  font-size: 1rem;
  line-height: 1.5;
}

.social-links {
  margin-top: 15px;
  text-align: left; /* Left align social links */
}

.social-links a {
  margin-right: 10px;
  text-decoration: none;
  font-weight: bold;
  color: #555;
  transition: color 0.3s;
}

.social-links a:hover {
  color: #1da1f2;
}

}
#fw-section-custom-html-a49b83af-6e59-440c-80ed-7e92676a3d5b {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center everything */
  align-items: center;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: center;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: center;  /* Center all elements inside the container */
  justify-content: center;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork Styling */
.album-artwork {
  margin: 30px 0;
}

.album-cover {
  width: 280px;  /* Larger album cover */
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Shadow for depth */
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

}











#fw-section-custom-html-491843e3-dd99-4bcc-8263-0b57aef1e596 {

/* Ensure body and html take up full height */
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif; /* Use Arial for body and all other elements */
}

/* Full-width image container with 70vh height */
.image-container {
    position: relative;
    width: 100%;
    height: 70vh; /* 70% of viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
    overflow: hidden;  /* Ensures that the overlay stays within the bounds */
}

/* Image background settings */
.image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Make the image cover the container */
    z-index: -1; /* Ensure image stays behind the button */
}

/* Add overlay on hover */
.image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);  /* Black overlay with transparency */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* Show overlay on hover */
.image-container:hover::before {
    opacity: 1;
}

/* Scoped button styles, only affecting button inside image-container */
.ep-button {
    position: absolute;
    bottom: 40px; /* 20px from the bottom */
    left: 40px;   /* 20px from the left */
    padding: 25px 30px;
    background-color: #ffffff;  /* White background */
    color: #0d0d0d;  /* Dark text */
    border: 2px solid #ffffff; /* White border */
    border-radius: 0px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase; /* Uppercase letters */
    font-family: 'Carbon', sans-serif;  /* Apply Carbon font only to the button */
}

/* Button hover effect */
.ep-button:hover {
    background-color: #0d0d0d; /* Dark background on hover */
    color: #ffffff;  /* White text on hover */
    border: 2px solid #0d0d0d;  /* Dark border on hover */
}

/* Second image container */
.second-container {
    position: relative;
}

/* Mobile optimizations */
@media screen and (max-width: 100%) {
    .image-container, .second-container {
        height: 30vh; /* Adjust height for mobile */
    }

    .ep-button {
        font-size: 16px;
        padding: 12px 25px;
        left: 10px;  /* Move button further inside */
        bottom: 10px;
    }
}

@media screen and (max-width: 480px) {
    .image-container, .second-container {
        height: 20vh; /* Further reduce height for small screens */
    }

    .ep-button {
        font-size: 14px;
        padding: 10px 20px;
        left: 25px;  /* Move button further inside on very small screens */
        bottom: 25px;
    }
}

}
#fw-section-custom-html-11182a33-9796-42cb-ab58-1bff30ff3d0d {

.product-image img {
    width: 100%; /* Ensures the image is responsive */
    max-width: 31%; /* Set based on Outer Edge Audio’s product display */
    height: auto; /* Maintains aspect ratio */
    border-radius: 0px; /* Optional: Adjusts rounded corners */
}

.product-description {
    margin-top: 20px;
    font-size: 1.0em;
    color: #f3f87a; /* Yellow color */
    text-align: left; /* Center-align text */
}
/* Media query for mobile devices */
@media (max-width: 768px) {
    .product-image img {
        max-width: 100%; /* Allows the image to take up full width on mobile */
    }
}
}



#fw-section-custom-html-0da8bf0e-e349-4206-af28-0ea43cd82877 {

/* General Page Styling */
body {
  font-family: 'Roboto', sans-serif;  /* Modern sans-serif font for clean look */
  background-color: #121212;  /* Deep dark background */
  color: #f1f1f1;  /* Soft white text for good contrast */
  margin: 0;
  padding: 0;
  height: 100vh;  /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertically center everything */
  align-items: center;  /* Horizontally center everything */
}

/* Audio Player Container */
.audio-player-container {
  text-align: center;
  padding: 30px;
  width: 100%;
  max-width: 100%;  /* Restrict width for a cleaner, centered design */
  background-color: #1a1a1a;  /* Slightly lighter dark grey background for the container */
  border-radius: 12px;  /* Rounded corners */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  /* Soft shadow for depth */
  
  display: flex;
  flex-direction: column;  /* Ensure vertical stacking of elements */
  align-items: center;  /* Center all elements inside the container */
  justify-content: center;  /* Center everything vertically */
}

/* Title Styling */
h1.player-title {
  font-size: 32px;
  color: #f1f861;  /* Bright yellow accent color */
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;  /* Slight letter-spacing for a modern touch */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);  /* Subtle text shadow for pop */
}

/* Track Info Styling */
.track-info p {
  font-size: 18px;
  color: #ccc;  /* Light grey text for track info */
  margin: 5px 0;
  font-weight: 500;
}

/* Album Artwork Styling */
.album-artwork {
  margin: 30px 0;
}

.album-cover {
  width: 280px;  /* Larger album cover */
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);  /* Shadow for depth */
}

/* Custom Audio Player Styling */
.audio-container {
  margin-top: 20px;
  width: 100%;
}

audio {
  width: 100%;  /* Audio player takes up full width of its container */
  background-color: #222;  /* Dark background for the player */
  border-radius: 8px;  /* Rounded corners */
  border: 1px solid #333;  /* Subtle border */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);  /* Shadow for depth */
  outline: none;  /* Remove default outline */
}

/* Styling Audio Controls */
audio::-webkit-media-controls-panel {
  background-color: #333;  /* Dark background for the controls panel */
  border-radius: 8px;  /* Rounded corners for the controls */
  border: none;
}

audio::-webkit-media-controls-play-button {
  background-color: #f1f861;  /* Accent yellow for play button */
  color: #1a1a1a;  /* Dark color for contrast */
  border-radius: 50%;
  padding: 10px;
}

audio::-webkit-media-controls-volume-slider {
  background: #555;  /* Dark grey volume slider */
  border-radius: 5px;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: #fff;  /* White text for time display */
}

audio::-webkit-media-controls-seekback-button,
audio::-webkit-media-controls-seekforward-button {
  color: #f1f861;  /* Accent yellow for seek buttons */
}

audio::-webkit-media-controls-mute-button {
  color: #f1f861;  /* Accent yellow for mute button */
}

/* Hover Effect for Audio Controls */
audio:hover::-webkit-media-controls-play-button {
  background-color: #f1c231;  /* Lighter yellow for hover effect */
}

audio:hover::-webkit-media-controls-seekback-button,
audio:hover::-webkit-media-controls-seekforward-button {
  color: #f1c231;  /* Lighter yellow for seek buttons on hover */
}

audio::-webkit-media-controls-volume-slider:active {
  background: #f1f861;  /* Accent yellow when the volume slider is clicked */
}

/* Button Styling */
button {
  background-color: #f1f861;  /* Bright yellow button for visibility */
  color: #1a1a1a;
  width: 150px;  /* Square button size (equal width and height) */
  height: 50px; /* Make height equal to width for a square button */
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth transitions */
  align-self: center; /* Center button inside the flex container */
}

/* Button Hover Effect */
button:hover {
  background-color: #f1c231;  /* Lighter yellow on hover */
  transform: translateY(-4px);  /* Slight lift effect */
}

/* Accessibility and Mobile Responsiveness */
@media (max-width: 600px) {
  .audio-player-container {
    padding: 15px;
    max-width: 100%;
  }

  .album-cover {
    width: 200px;
    height: 200px;
  }

  h1.player-title {
    font-size: 26px;
  }

  button {
    width: 130px;  /* Maintain width */
    height: 50px; /* Maintain height (keep square shape) */
    font-size: 14px;
  }
}

}