How to create a Shrinking Sticky Header in Elementor with GSAP

.lux-header {
  position: fixed; /* Sticks the header to the top of the viewport */
  top: 0; /* Aligns the header at the very top */
  width: 100%; /* Full width of the viewport */
  height: clamp(6.25rem, 3.205vw + 5.529rem, 9.375rem); /* Responsive height using CSS clamp */
  background: rgba(255, 255, 255, 0.2); /* Transparent white background */
  backdrop-filter: blur(10px); /* Applies a blur effect for a frosted glass look */
  display: flex; /* Flexbox layout for alignment */
  align-items: center; /* Centers items vertically */
  justify-content: space-between; /* Spaces items evenly */
  padding: 0 20px; /* Adds padding to the left and right */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  z-index: 1000; /* Ensures the header stays above other elements */
  transition: all 0.3s ease; /* Smooth transition for all properties */
  will-change: transform; /* Optimizes for transform animations */
}

.lux-logo img {
  width: clamp(6.25rem, 3.205vw + 5.529rem, 9.375rem);
  height: auto; /* Maintains aspect ratio */
  object-fit: contain; /* Ensures the image fits within its container */
  display: block; /* Removes extra spacing from inline images */
  transition: all 0.3s ease; /* Smooth transition for all properties */
  transform-origin: center center; /* Scales from the center */
  will-change: transform; /* Optimizes for transform animations */
}

.lux-navigation {
  display: flex; /* Flexbox layout for navigation links */
  justify-content: center; /* Centers links horizontally */
  align-items: center; /* Aligns links vertically */
  width: 100%; /* Full width for alignment */
  position: relative; /* Allows positioning of child elements */
  transform-origin: center center; /* Scaling from the center */
  transition: all 0.3s ease; /* Smooth transition */
}

.lux-navigation a {
  text-decoration: none; /* Removes underline from links */
  font-size: 1rem; /* Default font size */
  margin: 0px; /* Spacing between links */
  transition: font-size 0.3s ease, color 0.3s ease; /* Smooth transitions for size and color */
  will-change: transform, color; /* Optimizes for these properties */
  text-align: center; /* Centers text inside the links */
}

.elementor-menu-toggle {
  align-self: center; /* Vertically centers the toggle */
  font-size: 35px; /* Default font size */
  cursor: pointer; /* Changes cursor to pointer */
  transition: transform 0.3s ease; /* Smooth transition for scaling */
  transform-origin: center center; /* Scales from the center */
}

.lux-button {
  box-sizing: border-box; /* Includes padding and border in width/height */
  display: inline-flex; /* Flexbox for alignment */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  transform-origin: center center; /* Scales from the center */
  transition: transform 0.3s ease; /* Smooth scaling */
}

.lux-button a {
  display: inline-block; /* Allows padding and width adjustments */
  text-align: center; /* Centers text inside the button */
  padding: 10px 25px; /* Adds padding inside the button */
  white-space: nowrap; /* Prevents text wrapping */
  line-height: 1.5; /* Improves readability */
  transition: all 0.3s ease; /* Smooth transition for all properties */
}

.lux-icon {
  width: 30px; /* Default width for the icon */
  height: 2px; /* Height for the bars */
  background: #333; /* Dark gray color for the bars */
  display: block; /* Displays the icon as a block element */
  margin: 6px 0; /* Spacing between bars */
  transition: all 0.3s ease; /* Smooth transition */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .lux-logo img {
    /* Adjust width for tablets */
    transition: all 0.3s ease; /* Smooth transition */
    transform-origin: center center; /* Scaling from the center */
  }

  .elementor-menu-toggle {
    font-size: 30px; /* Smaller toggle size for tablets */
    transition: all 0.3s ease; /* Smooth transition */
  }

  .lux-navigation a {
    font-size: 1.2rem; /* Larger font size for better readability */
    transition: all 0.3s ease; /* Smooth transition */
  }
}

@media (max-width: 767px) {
  .lux-logo img {
    /* Adjust width for mobile */
    transition: all 0.3s ease; /* Smooth transition */
    transform-origin: center center; /* Scaling from the center */
  }

  .elementor-menu-toggle {
    font-size: 30px; /* Adjust size for mobile */
    transition: all 0.3s ease; /* Smooth transition */
  }

  .lux-navigation a {
    font-size: 1.2rem; /* Default font size for links */
    color: rgba(30, 30, 30, 1); /* Darker link color */
    transition: all 0.3s ease; /* Smooth transition */
  }
}