/** Shopify CDN: Minification failed

Line 23:1 Unexpected "/"

**/
/* scroll-effect.css */

/* Base styles for the body (assuming these are global or overridden by theme defaults) */
body {
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* Pure white background */
  color: #000000; /* Pure black text for contrast */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* .new-content-wrapper {
  max-width: 48rem; /* 768px equivalent to max-w-3xl */
/* margin: 0 auto;
  padding: 0 1rem; */
/* } */
*/

/* Base heading styles */
.new-sticky-content-heading {
  font-size: 3rem; /* Default heading size */
  font-weight: 800; /* Bold weight for emphasis */
  margin-bottom: 1rem; /* Spacing below the heading */
  letter-spacing: 0.05em; /* Tracking wide equivalent */
  text-transform: uppercase;
  color: #000000; /* Black color */
}

/* Base paragraph styles */
.new-sticky-content-paragraph {
  font-size: 1.25rem; /* xl text size */
  color: #374151; /* Gray-700 equivalent */
  line-height: 1.625; /* leading-relaxed equivalent */
  margin-bottom: 2.5rem; /* mb-10 equivalent */
  margin-inline: auto;
  text-align: center;
  max-width: 55vw;
}

/* General sections before and after the special scroll effect */
.general-section {
  min-height: 80vh; /* Minimum height for these sections */
  background-color: #f0f0f0; /* Light gray background for sections */
  padding: 6rem 1rem; /* Generous padding */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid #cccccc; /* Subtle separator */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Lighter shadow for white background */
}

/* Accent color for headings and buttons - now black/dark gray */
.luxury-gold {
  color: #000000; /* Black color */
}

/* Outline button styling */
.outline-button {
  background-color: transparent;
  color: #000000; /* Black text */
  border: 2px solid #000000; /* Black outline */
  font-weight: semibold;
  padding: 1rem 2.5rem;
  letter-spacing: 0.1em;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
  border-radius: 5px;
  text-decoration: none;
}

/* Tablet */
@media (max-width: 1024px) {
  .outline-button {
    font-size: 0.95rem;
    padding: 0.9rem 2rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .outline-button {
    font-size: 0.9rem;
    padding: 0.8rem 1.75rem;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .outline-button {
    font-size: 0.85rem;
    padding: 0.7rem 1.5rem;
  }
}

.outline-button:hover {
  background-color: #000000; /* Black fill on hover */
  color: #ffffff; /* White text on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

/* Main wrapper for the new scroll effect section */
.new-scroll-section {
  position: relative;
  /* This height dictates the total scrollable area for the effect:
       - 100vh: For the sticky content to become sticky.
       - 100vh: For the images to slide completely from off-screen bottom to off-screen top.
       Total: 200vh - this matches the animation distance exactly */
  min-height: 200vh;
  background-color: #f0f0f0; /* Background for the overall section */
  display: flex;
  flex-direction: column; /* Stacks children vertically */
}

/* First Div: Sticky Content */
.new-sticky-content {
  position: sticky;
  top: 0;
  height: 100vh; /* Content takes full viewport height when sticky */
  overflow: hidden;
  z-index: 1; /* Ensure it's behind the sliding images initially */
  background-color: #f0f0f0; /* Light gray background for the content div */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Second Div: Sliding Images with Transparent Background */
.new-sliding-images {
  position: absolute; /* Changed to absolute to allow layering and full control */
  top: 0; /* Positioned at the top of its parent (.new-scroll-section) */
  left: 0;
  width: 100%;
  height: 100vh; /* Ensure it takes full viewport height when sliding over */
  z-index: 2; /* Ensure it slides over the sticky content */
  background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
  overflow: hidden; /* Hide anything that goes outside its bounds */
  /* No transition here, as we'll be directly manipulating transform with JS */
}

.new-sliding-images img {
  position: absolute;
  width: 350px; /* Square image size */
  height: 350px; /* Square image size */
  object-fit: cover;
  border: 1px solid #cccccc; /* Subtle border */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow for luxury */
  transition: transform 0.3s ease-out; /* Smooth transition for any future effects */
}

/* Image 1: Top-Left, tilted right */
.new-sliding-images .image-left {
  top: 10%;
  left: 5%;
  transform: rotate(8deg); /* Tilted right */
}

/* Image 2: Bottom-Right, tilted left */
.new-sliding-images .image-right {
  bottom: 10%;
  right: 5%;
  transform: rotate(-8deg); /* Tilted left */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .new-sliding-images img {
    width: 200px;
    height: 200px;
  }
  .new-sliding-images .image-left {
    top: 5%;
    left: 2%;
  }
  .new-sliding-images .image-right {
    bottom: 5%;
    right: 2%;
  }
}

@media (max-width: 480px) {
  .new-sticky-content-heading {
    font-size: 2.25rem; /* Smaller heading on small screens */
    font-weight: 700;
  }
  .new-sticky-content-paragraph {
    font-size: 1.2rem; /* Smaller paragraph text */
    max-width: none;
  }
  .new-sliding-images img {
    width: 150px;
    height: 150px;
  }
}

@media (min-width: 768px) {
  .new-sticky-content-heading {
    font-size: 5rem; /* Large heading */
    font-weight: 600; /* Bold weight for emphasis */
    margin-bottom: 1rem; /* Spacing below the heading */
  }
  .new-sticky-content-paragraph {
    font-size: 2rem; /* Slightly larger paragraph text */
    color: #333333; /* Dark gray for better readability */
    line-height: 1.6; /* Improved line height for readability */
    margin-bottom: 2rem; /* Spacing below the paragraph */
  }
}