*{
    margin: 0px; /* removes all default margins */
    border: none; /* removes all borders */
    padding: 0px; /* removes all padding */
  } /* browser reset */

/* font imports */ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@font-face {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Gilroy-Medium'), url('fonts/Gilroy-Medium.woff') format('woff');
    
    font-display: swap; /* ensures the text is shown while the font is loading */ 
  } 

  
/* general styles */
body {
    font-family: 'Poppins', sans-serif; /* i set the font to Poppins for a modern, clean look */
    margin: 0; /* no margin around the body */
    background: #1a1a1a; /* i picked a dark background color for a sleek, cinematic vibe */
    color: #fff; /* set text color to white for good contrast */
    padding: 0; /* i set padding to zero to remove default spacing */
    font-size: 16px; /* i set the font size to 16px for regular body text */
  }
  
  /* typography */
  :root {
    --font-h1: 8vw; /* i used relative units for heading sizes to make them responsive */
    --font-h2: 6vw;
    --font-h3: 4.5vw;
    --font-body: 16px; /* set the base font size for body text */
    --line-height-body: 1.6; /* i adjusted line height for better readability */
    --font-weight-bold: 700; /* made bold text stand out */
    --font-weight-medium: 600; /* used medium weight for important text */
    --font-weight-light: 300; /* used light weight for body text */
  }
  
  /* headings */
  h1 {
    font-size: var(--font-h1); /* h1 is big, so i made it 8% of the viewport width */
    font-weight: var(--font-weight-bold); /* bold font for h1 */
    margin: 0 0 1rem; /* space below h1 for breathing room */
    line-height: 1.2; /* tighter line height for a compact look */
  }
  
  h2 {
    font-size: var(--font-h2); /* slightly smaller than h1 */
    font-weight: var(--font-weight-medium); /* medium weight for h2 */
    margin: 0 0 1rem;
    line-height: 1.3; /* a little more space between lines */
  }
  
  h3 {
    font-size: 24px; /* h3 is smaller than h2 */
    font-weight: 600;
    margin: 0 0 1rem;
    line-height: 1.4; /* a bit more space to keep it readable */
  }

  h4{
    font-size: 32px; /* h4 is bigger than h3 dont ask please im sorry */
    font-weight: 600;
    margin: 0 0 1rem;
    line-height: 1.4; /* a bit more space to keep it readable */
  }

  
  /* body text */p, .body-text {
    font-size: var(--font-body); /* body text uses the font size set earlier */  font-weight: var(--font-weight-light); /* light weight for easy reading */
    line-height: var(--line-height-body); /* comfortable line height */  margin: 0; /* no extra margin */
  }
  header input {  padding: 10px; /* space inside the input */
    font-size: 14px; /* smaller font size */  border: 1px solid rgba(255, 255, 255, 0.7); /* subtle border */
    border-radius: 8px; /* rounded corners */  background: none; /* no background */
    color: rgba(255, 255, 255, 0.7); /* transparent white text */}

  /* Styling for the header input */header input {
  padding: 10px; /* space inside the input */  font-size: 14px; /* smaller font size */
  border: 1px solid rgba(255, 255, 255, 0.7); /* subtle border */  border-radius: 8px; /* rounded corners */
  background: none; /* no background */  color: rgba(255, 255, 255, 0.7); /* transparent white text */
  margin-right: -45px; /* adjust space to the right of the search bar */}

/* Icons container styling */

.icons {  display: flex; /* flexbox for easy centering of icons */
  align-items: center; /* vertically center the icons */}

/* Styling for the search icon */
#search-icon {  cursor: pointer; /* make it clickable */
  width: 24px; /* adjust size of the search icon */  height: 24px;
  margin-right: 10px; /* space between icon and input */}

/* Styling for the search input */
#search-input {  padding: 10px; /* padding for spacing inside the input */
  font-size: 14px; /* smaller font size */  border: 1px solid rgba(255, 255, 255, 0.7); /* subtle border */
  border-radius: 8px; /* rounded corners */  background: none; /* no background */
  color: rgba(255, 255, 255, 0.7); /* transparent white text */  width: 200px; /* fixed width for the search input */
}

/* Header styling */header {
  background-color: #000000; /* bold black background for the header */  border-bottom: 1px solid #262626; /* subtle border under the header for separation */
  height: 140px; /* fixed height for the header */  display: flex; /* flexbox for easy centering of elements */
  align-items: center; /* vertically center the content */  justify-content: center; /* center the content horizontally */
  padding: 0; /* no padding */}

/* Container inside the header to hold elements */
header .container {
  width: 100%; /* ensures the container stretches across the full width */  display: flex;
  justify-content: space-between; /* space between items in the header */  align-items: center; /* vertically center the content */
  position: relative; /* relative positioning for inner elements */}

/* Logo styling */
header .logo img {  height: 5vw; /* logo size adjusts based on viewport width */
  max-height: 45px; /* max size capped at 45px to keep it proportionate */}

/* Navigation links styling */
.nav-links {  display: flex; /* flexbox for horizontal alignment of the links */
  gap: 3vw; /* space between each navigation link */  list-style: none; /* removes default list styling */
  margin: 0; /* removes margin */  justify-content: center; /* horizontally center the links */
  position: absolute; /* absolute positioning for centering */  top: 50%; /* center vertically */
  left: 50%; /* center horizontally */  transform: translate(-50%, -50%); /* perfect vertical and horizontal centering */
}

/* Styling for each nav link */.nav-links li a {
  text-decoration: none; /* no underlines on links */  color: #f9f9f9; /* light color for the links */
  font-family: 'Poppins', sans-serif; /* using the same font as the rest of the site */  font-weight: 400; /* regular weight for a clean look */
  font-size: 16px; /* setting the font size for the links */}

/* Icons container styling again */
.icons {  display: flex; /* flexbox for easy alignment */
  gap: 5vw; /* space between icons */}

.icons img {
  height: 2vw; /* icons size adjusts based on viewport width */}


  
  .Scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 900px;
    gap: 20px;
  }
  
  /* responsiveness using media queries */
  @media screen and (max-width: 768px) {
    .nav-links {
      flex-direction: column; /* stack the nav links vertically on smaller screens */
      gap: 1rem; /* space between links */
      margin-right: 0;
    }
  
    .hero h1 {
      font-size: 12vw; /* smaller font for smaller screens */
    }
  
    .hero img {
      max-width: 90%; /* make the image more responsive */
      max-height: 400px; /* cap the height for smaller screens */
    }
  
    header .logo img {
      height: 40px; /* smaller logo size on mobile */
    }
  
    .icons img {
      height: 20px; /* reduce icon size for smaller screens */
    }
  }
  
  @media screen and (max-width: 480px) {
    .hero h1 {
      font-size: 18vw; /* even smaller font for tiny screens */
    }
  
    .hero img {
      max-width: 80%; /* adjust the image size further */
    }
  
    .nav-links li a {
      font-size: 1rem; /* standardize font size for mobile */
    }
  
    .section-title {
      font-size: 2rem; /* smaller section titles for mobile */
    }
  }
  
  /* icons styling */
  .icons {
    display: flex; /* i used flexbox to align the icons horizontally */
    gap: 60px; /* i added space between the icons */
  }
  
  .icons img {
    height: 24px; /* i set the height of the icons */
    width: 24px; /* i set the width of the icons */
  }
  
  
  
  /* custom properties */
  :root {
    --shoe-offset: 100px; /* i adjusted the shoe image’s vertical position */
    --woodlands-offset: 60px; /* i set the text distance below the header */
    --shoe-scale: 2; /* i scaled the shoe size up */
  }
  
  /* body styling */
  body {
    font-family: 'Poppins', sans-serif; /* i set the font for the body */
    font-size: 16px; /* i set the font size */
    color: #f9f9f9; /* i made the text color light grey */
    background-color: #000000; /* i set the background color to black */
  }
  
  /* header styling */
  header {
    background-color: #000000; /* black background for the header */
    border-bottom: 1px solid #262626; /* i added a light border for contrast */
    height: 140px; /* i set the height of the header */
    display: flex; /* i used flexbox for layout */
    align-items: center; /* i vertically centered the items in the header */
  }
  
  header .container {
    max-width: calc(100% - 400px); /* i centered the container with some space on the sides */
    margin: 0 auto; /* centers the content */
    display: flex; /* i used flexbox for layout */
    justify-content: space-between; /* i spaced out the items inside the container */
    align-items: center; /* i vertically centered the items */
  }
  
  header .logo {
    margin-right: 185px; /* i added space to the right of the logo */
  }
  
  header .logo img {
    height: 45px; /* i set the logo's height */
  }
  
  .nav-links {
    display: flex; /* i used flexbox to align the links horizontally */
    gap: 30px; /* space between the links */
    list-style: none; /* no bullet points for the list */
    margin-right: 185px; /* added some margin to the right */
  }
  
  .nav-links li a {
    text-decoration: none; /* i removed the underline from links */
    color: #f9f9f9; /* i set the color to light grey */
    font-weight: 400; /* normal text weight */
  }
  
/* hero section */
.hero {
  position: relative; /* i set the position relative to allow absolute positioning of children */
  min-height: 660px; /* hero section takes up the full viewport height (800px) minus header (140px) */
  display: flex;
  justify-content: center; /* center the content horizontally */
  align-items: center; /* center the content vertically */
  text-align: center;
  background-color: #000000; /* black background to match the theme */
  overflow: visible; /* no overflow, so things stay tidy */
}

.hero h1 {
  position: absolute; /* positions the text over the image */
  top: calc(140px + var(--woodlands-offset)); /* positions the text below the header */
  left: 50%; /* centers text horizontally */
  transform: translateX(-50%); /* truly centers the text */
  font-size: 150px; /* makes the text 150px */
  font-weight: bold; /* ensures the heading stands out */
  line-height: 1.2; /* better spacing between lines */
  z-index: 1; /* ensures it's above the image */
  font-family: 'Gilroy-Medium', sans-serif; /* gives it a unique style */
  background: linear-gradient(to bottom, #41f6aa, #baf97c); /* creates a gradient text effect */
  background-clip: text; /* clips the gradient to the text */
  color: transparent; /* makes the text transparent so gradient is visible */
}

.hero img {
  position: absolute; /* Keeps the image positioned relative to its container */
  top: calc(140px + var(--shoe-offset) + 50px); /* moves the image down by 100px */
  left: 50%; /* centers the image horizontally */
  transform: translate(-50%, 0) scale(2); /* scales the image by 10% and centers it */
  width: auto;
  max-width: 800px; /* max width to prevent it from getting too large */
  height: auto;
  z-index: 2; /* places the image in front of the text */
  object-fit: contain; /* keeps the aspect ratio of the image */
}


  
  /* scroll indicator */
  .scroll-indicator {
    position: absolute;
    bottom: 20px; /* positions the indicator at the bottom */
    text-align: center; /* centers the indicator text */
    width: 100%; /* full width */
  }
  
  .scroll-indicator p {
    margin: 5px 0; /* adds a little space around the text */
    font-size: 1rem; /* sets the font size */
    color: #ffffff; /* white text */
  }
  
  .scroll-indicator .line {
    width: 50px; /* width of the line */
    height: 2px; /* height of the line */
    background-color: #ffffff; /* white color for the line */
    margin: 0 auto; /* centers the line */
  }
  
  /* glassmorphic section */
  .glassmorphic-section {
    padding: 2rem; /* adds padding inside the section */
    text-align: center; /* centers the text */
  }
  
  .section-title {
    font-size: var(--font-h3); /* used the font size from h3 */
    margin-bottom: 2rem; /* space below the title */
  }
  
  .highlight {
    background: linear-gradient(to bottom, #41F6AA, #BAF97C); /* gradient color */
    background-clip: text; /* clips the background to the text */
    -webkit-text-fill-color: transparent; /* makes the text transparent to show the gradient */
    display: inline-block; /* ensures proper rendering for inline elements */
  }
  
  /* glass card styling */
  .glass-section {
    display: flex; /* used flexbox to arrange the cards */
    justify-content: center; /* centers the cards */
    gap: 1rem; /* space between the cards */
  }
  
  .glass-card {
    position: relative;
    width: 355px; /* card width */
    border-radius: 16px; /* rounded corners */
    background: rgba(255, 255, 255, 0.2); /* semi-transparent background */
    border: 1px solid rgba(255, 255, 255, 0.3); /* light border */
    backdrop-filter: blur(12px); /* blur effect for the background */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* adds a shadow for depth */
    text-align: left; /* text aligned to the left */
    padding-bottom: 20px; /* added bottom padding */
  }
  
  .card-image-wrapper {
    position: relative;
    width: 100%; /* full width */
    height: 70%; /* sets the height of the image wrapper */
    padding: 20px; /* adds padding inside the image wrapper */
    box-sizing: border-box; /* includes padding in the element's total width/height */
  }
  
  .image-container {
    width: 100%; /* full width */
    height: 100%; /* full height */
    border-radius: 16px; /* matches the card's rounded edges */
    overflow: hidden; /* ensures the image stays inside the rounded edges */
  }
  
  .card-image {
    width: 100%; /* makes the image fill the container */
    height: 100%; /* makes the image fill the container */
    object-fit: cover; /* makes sure the image covers the container while maintaining its aspect ratio */
  }
  /* title text on Image */
  .glass-title {
    position: absolute; /* i made the title position absolute so i can place it anywhere in the container */
    bottom: 20px; /* positions the title at the bottom with padding */
    left: 20px; /* adds padding from the left edge */
    color: #fff; /* i want the title to be white so it's visible on dark backgrounds */
    font-size: 24px; /* i chose a medium size for the title so it’s readable but not too big */
    font-weight: 600; /* i made it bold because i wanted the title to stand out more */
    margin: 0; /* removed any default margin to keep things tight */
    z-index: 10; /* made sure it’s above other elements */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* added a shadow to the text to make it pop */
    padding: 10px; /* gave some padding inside the image so the text doesn't touch the edges */
    border-radius: 8px; /* added a slight curve to the background for a more modern look */
  }
  
  .card-content {
    padding: 0 20px; /* kept horizontal padding but reduced vertical padding for compactness */
  }
  
  /* glassmorphic Section */
  .glass-body {
    margin: 20px 0; /* added margin for spacing around the body */
    line-height: 1.6; /* made sure text doesn’t look cramped */
    font-size: 16px; /* regular size for body text */
    font-weight: 300; /* lighter weight for readability */
  }
  
  .card-content {
    padding: 20px; /* added padding to ensure content has space inside */
  }
  
  .glass-section {
    display: flex; /* i wanted to use flexbox to lay out items in a row */
    flex-wrap: wrap; /* made sure items wrap onto new lines when there’s not enough space */
    gap: 20px; /* added some space between the items */
    justify-content: center; /* centered the items */
  }
  
  .glassmorphic-section {
    position: relative; /* gave the section a relative position to position elements inside it */
    padding: 2rem; /* added padding for some space around the content */
    text-align: center; /* centered the text */
    background-color: #000; /* used black as the fallback background color */
    overflow: hidden; /* hidden overflow to maintain clean edges */
  }
  
  .glassmorphic-section::before {
    content: ""; /* added a pseudo-element before the section to use as background */
    position: absolute; /* positioned it absolutely within the section */
    top: 0; /* aligned it to the top */
    left: 0; /* aligned it to the left */
    width: 100%; /* made it take up the whole section */
    height: 100%; /* same for height */
    background: url('your-image-path.jpg') no-repeat center center / cover; /* added an image as the background */
    z-index: 0; /* placed it behind all content */
    opacity: 0.3; /* i reduced the opacity so the text stands out more */
  }
  
  .glass-section {
    position: relative; /* ensured the section content is above the background */
    z-index: 1; /* kept it above the background image */
  }
  
  /* indicator Styling */
  .indicator {
    position: absolute; /* positioned the indicator absolutely to place it anywhere */
    bottom: 10px; /* aligned it to the bottom of the card */
    right: 10px; /* aligned it to the right side of the card */
    width: 2px; /* made it a thin line */
    height: 50px; /* set a height for the line */
    background-color: rgba(255, 255, 255, 0.25); /* made it a transparent white line */
    transform: rotate(var(--rotation)); /* rotated the indicator using a CSS variable */
  }
  
  /* Clear floats if any */
  .clearfix::after {
    content: ""; /* pseudo-element to clear floats */
    display: table; /* made it display as a table */
    clear: both; /* cleared floats */
  }
  
  /* section container */
  .craftsmanship-section {
    text-align: center; /* centered the text */
    padding: 60px 20px; /* added padding for space around the section */
    background-color: #000; /* black background */
  }
  
  .section-heading {
    all: unset; /* reset all inherited styles to make sure it's fresh */
    display: block; /* made it block-level */
    font-family: inherit; /* inherited the font from h1 or root styles */
    font-size: var(--font-h3); /* used the font size from h3 */
    font-weight: var(--font-weight-bold); /* made it bold */
    line-height: 1.2; /* kept line height consistent with h3 */
    color: #fff; /* white text color */
    margin-bottom: 60px; /* added space below the heading */
  }
  
  /* Gradient Text */
  .gradient-text {
    background: linear-gradient(to bottom, #41F6AA, #BAF97C); /* used a gradient for the text */
    background-clip: text; /* clipped the background to the text */
    -webkit-text-fill-color: transparent; /* made the text color transparent to show the gradient */
  }
  
 /* video container */ 
.video-container { 
  display: inline-block; /* made the video container inline */ 
  border: 12px solid #242424; /* dark border for contrast */ 
  border-radius: 35px; /* rounded the corners */ 
  overflow: hidden; /* made sure no content spills out */ 
  max-width: 100%; /* responsive width */ 
  width: 790px; /* fixed width to match my design */ 
  height: 525px; /* fixed height to match my design */ 
  position: relative; /* positioned container */ 
} 
 
/* video element */ 
.video-container video { 
  display: block; /* made sure the video is block-level */ 
  width: 100%; /* ensure the video takes the full width of the container */ 
  height: 100%; /* ensure the video takes the full height of the container */ 
  object-fit: cover; /* ensures the video fills the rectangle without distorting */ 
}
  
  /* newsletter section */
  .newsletter-section {
    position: relative; /* positioned it relative */
    height: 984px; /* fixed height for consistency */
    display: flex; /* flexbox to align items */
    justify-content: flex-end; /* aligned glass box to the right */
    align-items: center; /* centered it vertically */
    overflow: hidden; /* hidden overflow */
    padding-right: 400px; /* added space on the right */
  }
  
  /* background glow */
  .background-glow {
    position: absolute; /* absolute positioning to make it cover the whole area */
    top: 0; /* top aligned */
    left: 0; /* left aligned */
    width: 100%; /* full width */
    height: 100%; /* full height */
    object-fit: cover; /* made the image cover the area */
    object-position: top; /* kept the top part of the image in view */
    z-index: 0; /* placed it behind all content */
    pointer-events: none; /* prevented it from blocking interactions */
  }
  
  /* shopping image */
  .shopping-image {
    position: absolute; /* absolute positioning for custom placement */
    bottom: 0; /* placed it at the bottom */
    left: 200px; /* adjusted the horizontal position */
    height: auto; /* adjusted the height automatically */
    max-height: 100%; /* prevented it from overflowing */
    z-index: 3; /* placed it above the background but below the glass box */
  }
  
  /* glass Box */
  .glass-box {
    position: relative; /* relative positioning */
    z-index: 4; /* kept it above other elements */
    width: 441px; /* fixed width */
    height: 278px; /* fixed height */
    border-radius: 16px; /* rounded corners */
    overflow: hidden; /* no overflow */
    background: rgba(255, 255, 255, 0.2); /* semi-transparent background */
    border: 1px solid rgba(255, 255, 255, 0.3); /* subtle border */
    backdrop-filter: blur(12px); /* added blur effect for glassmorphism */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* shadow for depth */
    display: flex; /* flexbox to align the content */
    flex-direction: column; /* vertical layout */
    justify-content: center; /* centered content */
    padding: 20px; /* added space inside */
  }
  
  /* logo inside glass box */
  .glass-box .logo {
    width: 45px; /* set a fixed width */
    height: auto; /* auto height to keep proportions */
    margin-bottom: 16px; /* added space below */
  }
  
  /* Heading Inside Glass Box */
  .glass-box h3 {
    font-size: 24px; /* heading size */
    font-weight: 600; /* bold weight */
    margin: 0 0 8px; /* no top margin, bottom margin for space */
    color: #ffffff; /* white text */
  }
  /* Signup Text */
  .signup-text {
    font-size: 16px; /* standard text size */
    font-weight: 400; /* normal weight */
    color: rgba(255, 255, 255, 0.7); /* 70% transparency */
    margin-bottom: 16px; /* added space below */
  }
  
  /* Form Inside Glass Box */
  .glass-box form {
    display: flex; /* flex layout */
    flex-direction: column; /* stacked layout */
    width: 100%; /* full width */
  }
  
  .glass-box input {
    padding: 10px; /* space inside the input */
    font-size: 14px; /* smaller font size */
    border: 1px solid rgba(255, 255, 255, 0.7); /* subtle border */
    border-radius: 8px; /* rounded corners */
    margin-bottom: 10px; /* space below inputs */
    background: none; /* no background */
    color: rgba(255, 255, 255, 0.7); /* transparent white text */
  }
  
  /* Subscribe Button */
  .glass-box button {
    padding: 10px; /* space inside the button */
    font-size: 14px; /* smaller font size */
    font-weight: 400; /* normal weight */
    border: none; /* no border */
    border-radius: 8px; /* rounded corners */
    background: linear-gradient(to bottom, #41F6AA, #BAF97C); /* gradient background */
    color: #000000; /* black text */
    text-transform: uppercase; /* uppercase text */
    cursor: pointer; /* pointer cursor */
    position: relative; /* positioning to handle glow */
    z-index: 1; /* placed above the glow */
  }
  
  .glass-box button:hover {
    background: linear-gradient(to bottom, #3CE99A, #ADEF7A); /* hover effect with darker gradient */
  }
  
  /* Button Glow Effect */
  .glass-box button::before {
    content: ''; /* added glow effect*/
    position: absolute; /* absolute positioning */
    top: 0; /* aligned to top */
    left: 0; /* aligned to left */
    right: 0; /* aligned to right */
    bottom: 0; /* aligned to bottom */
    border-radius: 8px; /* rounded corners */
    background: linear-gradient(to bottom, #8FFFD0, #7EFF00); /* glowing gradient */
    filter: blur(15px); /* blurred effect for glow */
    z-index: -1; /* placed behind the button */
  }
  
  /* call-to-action section */
  .cta-section {
    position: relative; /* i set this to relative so the child elements can be positioned absolutely inside it */
    width: 100%; /* full width, so it stretches across the entire screen */
    height: 60vh; /* made the height 60% of the viewport height, so it's not too tall or too short */
    background: #000; /* black background to make the section stand out */
    display: flex; /* flexbox makes aligning content easier */
    flex-direction: column; /* stack the content vertically */
    justify-content: flex-start; /* align the content to the top */
    align-items: flex-start; /* align everything to the left */
    overflow: hidden; /* hide anything that overflows from the section */
    padding: 0 200px; /* added some space on the sides to make it look neat */
    margin: 0; /* removed default margins */
    box-sizing: border-box; /* makes sure padding is included in the element's width and height */
  }
  
  /* cta content */
  .cta-content {
    position: relative; /* relative positioning so it stays in place */
    z-index: 2; /* puts the content above the image */
    margin: 0; /* removed margin to keep things tight */
    width: 100%; /* stretches the content across the section */
    text-align: left; /* aligns the text to the left */
  }
  
  /* cta image */
  .cta-image {
    position: absolute; /* i used absolute so the image can be placed anywhere inside the section */
    top: 0; /* places the image at the top */
    left: 0; /* places the image at the left */
    transform: scale(1); /* kept the image's size as is */
    width: auto; /* maintains the aspect ratio of the image */
    z-index: 1; /* makes sure the image stays behind the text */
    pointer-events: none; /* makes sure the image doesn't interfere with clicking the button */
  }
  
  /* heading text */
  .cta-heading {
    font-size: 350px; /* made the font super big to make it eye-catching */
    font-weight: 700; /* bold text for emphasis */
    margin: 0; /* removed any extra margin */
    line-height: 1; /* made the line height 1 to keep it tight */
    background: linear-gradient(to bottom, #41F6AA, #BAF97C); /* green-to-yellow gradient */
    background-clip: text; /* clips the gradient to the text itself */
    -webkit-text-fill-color: transparent; /* makes the text color transparent so the gradient shows */
    text-align: right; /* aligned the text to the right, tried left first but right looked better haha */
    z-index: 2; /* ensures the heading stays above the image */
  }
  
  /* pre-order button */
  .cta-button {
    padding: 15px 30px; /* added some padding to make it look nice */
    font-size: 18px; /* set a decent font size */
    font-weight: 700; /* made the text bold for clarity */
    border: none; /* removed the border */
    border-radius: 8px; /* rounded the corners for a smoother look */
    background: linear-gradient(to bottom, #41F6AA, #BAF97C); /* same gradient as the heading for consistency */
    color: #000000; /* black text so it stands out on the gradient */
    text-transform: uppercase; /* made the text uppercase for a stronger look */
    cursor: pointer; /* changed the cursor to pointer so people know it's clickable */
    position: relative; /* relative positioning so it can sit above the glow effect */
    z-index: 1; /* keeps it above the glow effect */
    display: inline-flex; /* makes the button behave like an inline element but still have flex properties */
    align-items: center; /* centers the content vertically */
    justify-content: center; /* centers the content horizontally */
    text-align: center; /* ensures the text is centered */
    left: 50%; /* i tried centering the button but it wasn't working perfectly, so i used left 50% lool */
  }
  
  /* hover effect */
  .cta-button:hover {
    background: linear-gradient(to bottom, #3CE99A, #ADEF7A); /* slightly darker gradient when hovering */
  }
  
  /* button glow effect */
  .cta-button::before {
    content: ''; /* no content needed, just an effect */
    position: absolute; /* absolutely position it inside the button */
    top: 0; /* top edge */
    left: 0; /* left edge */
    right: 0; /* right edge */
    bottom: 0; /* bottom edge */
    border-radius: 8px; /* rounded corners */
    background: linear-gradient(to bottom, #8FFFD0, #7EFF00); /* green glow effect */
    filter: blur(15px); /* blurred the glow to make it soft */
    z-index: -1; /* places the glow behind the button */
  }
  
  /* button icon */
  .cta-icon {
    width: 16px; /* set the width of the icon */
    height: auto; /* let the height adjust automatically to maintain the aspect ratio */
    display: inline-block; /* made the icon behave like an inline element */
  }
  
  /* footer section */
  .footer {
    background-color: #171717; /* dark background for the footer */
    color: #88898C; /* soft grey text color */
    font-size: 16px; /* readable font size */
    text-transform: uppercase; /* uppercase letters for emphasis */
    display: flex; /* using flex to easily align the content */
    justify-content: center; /* center-aligns the items horizontally */
    align-items: center; /* centers the items vertically */
    gap: 30px; /* added some space between the links */
    height: 100px; /* set the height of the footer */
    padding: 0 20px; /* added padding for responsiveness */
    font-family: 'poppins', sans-serif; /* set to poppins font */
    letter-spacing: 0.5px; /* added a bit of spacing between the letters for a clean look */
  }
  
  /* footer links */
  .footer a {
    text-decoration: none; /* removed underlines from the links */
    color: #88898C; /* set the text color to match the footer */
    cursor: pointer; /* changed cursor to pointer to show it's clickable */
    transition: color 0.3s ease; /* smooth transition for hover effect */
  }
  
  .footer a:hover {
    color: #ffffff; /* changed the color to white when hovering over the links */
  }
  

  /* PREORDER STYLING */

  /*body of page*/
.Hero {
    margin: 75px; /* adds margin around the hero section */
    text-align: center; /* centers the text */
    display: flex; /* displays hero section as flex */
    justify-content: center; /* centers content horizontally */
    align-items: center; /* centers content vertically */
    flex-direction: column; /* arranges content in a column */
  }
  .Hero button::before {
    content: ''; /* added glow effect*/
    position: absolute; /* absolute positioning */
    top: 0; /* aligned to top */
    left: 0; /* aligned to left */
    right: 0; /* aligned to right */
    bottom: 0; /* aligned to bottom */
    border-radius: 8px; /* rounded corners */
    background: linear-gradient(to bottom, #8FFFD0, #7EFF00); /* glowing gradient */
    filter: blur(15px); /* blurred effect for glow */
    z-index: -1; /* placed behind the button */
  }
  .Hero button{
    font-family: "Poppins", serif; /* uses Poppins font */
    font-weight: 500; /* sets font weight to medium */
    font-style: normal; /* sets font style to normal */
    font-size: large; /* sets font size to large */
    padding: 15px 150px; /* adds padding inside the button */
    margin: 50px; /* adds margin around the button */
    background-color: #84EC73; /* sets background color to light green */
    border-radius: 5px; /* rounds the button corners */
    z-index: 1;
    position: relative;
  }
      

  .vertical-line {
    width: 2px; /* sets the width of the line */
    height: 30px; /* sets the height of the line */
    background-color: white; /* sets line color to white */
  }
  
  /* product info section */
  
  .Pre-Order{
    display: flex; /* displays the section as flex */
    padding: 0 200px; /* adds padding on the left and right */
    justify-content: center; /* centers content horizontally */
    gap: 25px; /* adds space between items */
  }
  
  .Left{
    display: flex; /* displays the left section as flex */
    flex-direction: column; /* arranges items vertically */
  }
  
  .Primary-Image {
    position: relative; /* positions the image relative to its container */
    height: 384px; /* sets height of the image */
    width: 576px; /* sets width of the image */
  }
  
  .Primary-Image img{
    height: 100%; /* makes image fill the container height */
    width: 100%; /* makes image fill the container width */
  }
  
  .Primary-Image button{
    position:absolute; /* positions button absolutely within the image */
    top: 45%; /* places button vertically in the center */
    background-color: white; /* sets button background to white */
    color: grey; /* sets button text color to grey */
    padding: 20px 10px; /* adds padding inside the button */
  }
  
  .Left-Arrow{
    left: 0px; /* places the left arrow at the left of the container */
  }
  
  .Right-Arrow{
    right: 0px; /* places the right arrow at the right of the container */
  }
  
  .Secondary-Images{
    display: flex; /* displays secondary images as flex */
    margin: 5px 0px; /* adds vertical margin */
    gap: 5px; /* adds space between images */
  }
  
  .Sub-Details{
    display: flex; /* displays sub details as flex */
    flex-direction: column; /* arranges items vertically */
  }
  
  .Sub-Info{
    display: flex; /* displays sub info items as flex */
    gap: 25px; /* adds space between sub info items */
  }
  
  .Sub-Info img{
    height: 75%; /* sets image height to 75% */
  }
  
  .Detail-Indicator {
    display: flex; /* displays the detail indicator as flex */
    align-items: center; /* aligns items vertically */
    gap: 10px; /* adds space between items */
  }
  
  .Right {
    display: flex; /* displays right section as flex */
    flex-direction: column; /* arranges items vertically */
  }
  
  .Sizing {
    display: flex; /* displays sizing as flex */
    flex-direction: column; /* arranges items vertically */
  }
  
  .Region {
    display: flex; /* displays region as flex */
    justify-content: center; /* centers items horizontally */
    gap: 20px; /* adds space between items */
    width: 150px; height: 35px; /* sets width and height */
    background-color: #4B4B4B; /* sets background color to grey */
    color: white; /* sets text color to white */
    border-radius: 30px; /* rounds the corners */
    margin: 15px 0px; /* adds vertical margin */
  }
  
  .Region button{
    background-color: transparent; /* sets transparent background */
    color: white; /* sets button text color to white */
  }
  
  .Size-Options{
    margin: 15px 0px; /* adds vertical margin */
  }
  
  .Size-Options button{
    width: 50px; height: 35px; /* sets button size */
    background-color: transparent; /* sets transparent background */
    border: 1px solid rgba(255, 255, 255, 0.768); /* adds border with slight opacity */
    color: white; /* sets button text color to white */
    border-radius: 10px; /* rounds the corners */
    font-family: "Poppins", serif; /* uses Poppins font */
    font-weight: 400; /* sets font weight to regular */
    font-style: normal; /* sets font style to normal */
    font-size: medium; /* sets font size to medium */
    margin: 2%; /* adds margin around the button */
  }
  
  .Purchase-Info{
    display: flex; /* displays purchase info as flex */
    flex-direction: column; /* arranges items vertically */
    font-family: "Poppins", serif; /* uses Poppins font */
    font-weight: 500; /* sets font weight to medium */
    font-style: normal; /* sets font style to normal */
    gap: 15px; /* adds space between items */
  }
  
  .Quantity-Input{
    display: flex; /* displays quantity input as flex */
    justify-content: left; /* aligns items to the left */
    gap: 300px; /* adds space between items */
  }
  
  .Quantity{
    display: flex; /* displays quantity section as flex */
    justify-content: center; /* centers items horizontally */
    align-items: center; /* centers items vertically */
    gap: 20px; /* adds space between items */
    width: 150px; height: 35px; /* sets width and height */
    background-color: #4B4B4B; /* sets background color to grey */
    color: white; /* sets text color to white */
    border-radius: 30px; /* rounds the corners */
  }
  
  .Quantity button{
    background-color: transparent; /* sets transparent background */
    color: white; /* sets text color to white */
    font-size: x-large; /* sets font size to extra large */
    margin: 17px; /* adds margin around the button */
  }

  .Purchase{
    display: flex; /* displays purchase section as flex */
    flex-direction: column; /* arranges items vertically */
    width: 505px; /* sets width */
  }
  
  .Purchase sub{
    font-family: "Poppins", serif; /* uses Poppins font */
    font-weight: 300; /* sets font weight to light */
    font-style: normal; /* sets font style to normal */
    font-size: x-small; /* sets font size to extra small */
    color: grey; /* sets color to grey */
  }
  
  .Form-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin: 50px;
  }

  .Form{
    display: flex;
    justify-content: center;
    width: 1107px;
    gap: 25px;
  }

  .Fill{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    gap: 10px;
  }
  .Form input, select{  padding: 10px; /* padding for spacing inside the input */
    font-size: 14px; /* smaller font size */  
    border: 1px solid rgba(255, 255, 255, 0.7); /* subtle border */
    border-radius: 8px; /* rounded corners */  
    background: none; /* no background */
    color: rgba(255, 255, 255, 0.7); /* transparent white text */  
    width: 520px; 
  }
  select{
    width: 540px;
  }
  .Form option{
      background-color: grey;
  }
  .Form-container button{
    height: 50px; /* sets button height */
    width: 1107px;
    background-color: #84EC73; /* sets background color to light green */
    border-radius: 10px; /* rounds the corners */
    font-family: "Poppins", serif; /* uses Poppins font */
    font-weight: 500; /* sets font weight to medium */
    font-style: normal; /* sets font style to normal */
    font-size: large; /* sets font size to large */
    z-index: 1;
    position: relative;
    cursor: pointer;
  }
  .Form-container button::before{
    content: ''; /* added glow effect*/
    position: absolute; /* absolute positioning */
    top: 0; /* aligned to top */
    left: 0; /* aligned to left */
    right: 0; /* aligned to right */
    bottom: 0; /* aligned to bottom */
    border-radius: 8px; /* rounded corners */
    background: linear-gradient(to bottom, #8FFFD0, #7EFF00); /* glowing gradient */
    filter: blur(15px); /* blurred effect for glow */
    z-index: -1; /* placed behind the button */
  }

  .similar-section{
    display: flex; /* displays similar section as flex */
    flex-direction: column; /* arranges items vertically */
    margin-top: 100px; /* adds margin on top */
    margin-bottom: 100px; /* adds margin at the bottom */
    align-items: center; /* centers items */
  }
  
  .similar-section h4{
    margin-right: 1050px; /* adds right margin */
  }
  
  .Posts{
    display: flex; /* displays posts as flex */
    flex-direction: row; /* arranges items in a row */
    gap: 75px; /* adds space between posts */
  }
  
  .similar-post{
    position: relative; /* positions the post relative to its container */
    width: 322px; height: 322px; /* sets width and height */
    border-radius: 20px; /* rounds the corners */
    margin-top: 25px; /* adds margin on top */
  }
  
  .similar-post img{
    width: 110%; /* sets image width to 110% */
    height: 110%; /* sets image height to 110% */
  }
  
  .similar-post h3{
    position: absolute; /* positions title absolutely */
    top: 5%; /* places title near top */
    left: 5%; /* places title near left */
    color: white; /* sets title color to white */
  }
  
  .similar-post p{
    position: absolute; /* positions description absolutely */
    top: 65%; /* places description near bottom */
    left: 5%; /* places description near left */
    color: white; /* sets description color to white */
  }
  
  .similar-post a{
    text-decoration: none; /* removes underline from links */
    color: #84EC73; /* sets link color to light green */
    margin: 5px; /* adds margin around the link */
  }