#fw-section-links-list-9f18cd60-a46b-4ce6-8673-f6be1bebb231 {
--color-primary: #693ad8;
--color-primary-rgb: 105, 58, 216;
--color-background: #1c073c;
--color-background-rgb: 28, 7, 60;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #f6f6f6;
--color-on-background-rgb: 246, 246, 246;
--color-product-image-background: #eeeeee;
--color-background-brightness: 19;
background-color: var(--color-background);
color: var(--color-on-background);
/*
  Add this CSS to your Fourthwall page's Custom CSS section.
  Adjust the selectors (.links-list, .links-list-item, .links-list-link)
  to match the actual classes or IDs used on your Fourthwall links page.
  You can find these by inspecting the elements on your live page.
*/

/* Style the main container of your links list */
.links-list {
  list-style: none; /* Removes default bullet points */
  padding: 0; /* Removes default padding */
  margin: 20px auto; /* Centers the list and adds vertical space */
  max-width: 500px; /* Sets a maximum width */
  width: 90%; /* Makes it responsive */
}

/* Style each individual link item */
.links-list-item {
  margin-bottom: 15px; /* Space between links */
  background: linear-gradient(to right, #a770ef, #cf8bf3, #fdb99b); /* Soft gradient background */
  border-radius: 10px; /* Rounded corners */
  overflow: hidden; /* Ensures background respects border-radius */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for link items */
.links-list-item:hover {
  transform: translateY(-5px); /* Lifts the item */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Larger shadow */
}

/* Style the actual link element */
.links-list-link {
  display: block; /* Makes the link fill the container */
  padding: 15px 20px; /* Inner spacing */
  text-decoration: none; /* Removes underline */
  color: #ffffff; /* White text */
  font-size: 1.1em; /* Font size */
  font-weight: bold; /* Bold text */
  text-align: center; /* Centers text */
  transition: color 0.3s ease; /* Smooth text color change on hover */
}

/* Hover effect for link text */
.links-list-link:hover {
  color: #f0f0f0; /* Slightly lighter text on hover */
}

}









#fw-section-hero-video-0 {

/* Make video banner full width and responsive */
.video-banner video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Optional: Give it a fixed height on desktop */
@media (min-width: 768px) {
  .video-banner video {
    height: 500px;
  }
}

/* Optional: Reduce height on mobile */
@media (max-width: 767px) {
  .video-banner video {
    height: 250px;
  }
}

/* Position the overlay text in the center */
.video-banner {
  position: relative;
  overflow: hidden;
}

.video-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  padding: 1rem;
  z-index: 2;
}

/* Animated float-in effect */
.video-text-overlay h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: floatIn 3s ease-out forwards;
}

.video-text-overlay p {
  font-size: 1.2rem;
  opacity: 0;
  animation: floatIn 3s ease-out 0.5s forwards;
}

@keyframes floatIn {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

}







#fw-section-header {
--color-primary: #693ad8;
--color-primary-rgb: 105, 58, 216;
--color-background: #1c073c;
--color-background-rgb: 28, 7, 60;
--color-on-primary: #F9F8FF;
--color-on-primary-rgb: 249, 248, 255;
--color-on-background: #f6f6f6;
--color-on-background-rgb: 246, 246, 246;
--color-product-image-background: #eeeeee;
--color-background-brightness: 19;
background-color: var(--color-background);
color: var(--color-on-background);

}