/* Hides scrollbar for Firefox, IE, and Edge */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Hides scrollbar for Chrome, Safari, and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
</style>

<style>
  /* 1. Define the track (the bar/background) */
  .minimal-scrollbar::-webkit-scrollbar-track {
  background: transparent; /* Makes the area behind the scrollbar invisible */
  border-radius: 16px;
}

/* 2. Define the scrollbar itself (overall size) */
.minimal-scrollbar::-webkit-scrollbar {
  width: 12px; /* Sets the vertical scrollbar width */
  height: 12px; /* Sets the horizontal scrollbar height */
}

/* 3. Define the thumb (the draggable handle) */
.minimal-scrollbar::-webkit-scrollbar-thumb {
  background-color: #a0320b; /* A light grey color for the minimal bar */
  border-radius: 12px; /* Rounded edges for a smooth look */
}

/* 4. Optional: Style the thumb when hovering for better UX */
.minimal-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #a0320bbf;
}

/* Desktop */
:root {
  --size-unit: 16; /* screen-size in design = no px */
  --size-container-ideal: 1920; /* screen-size in design - no px */
  --size-container-min: 1024px;
  --size-container-max: 1920px;
  --size-container: clamp(
    var(--size-container-min),
    100vw,
    var(--size-container-max)
  );
  --size-font: calc(
    var(--size-container) / (var(--size-container-ideal) / var(--size-unit))
  );
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 1024; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 1024px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 500; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

body {
  font-size: var(--size-font);
}

.container {
  max-width: var(--size-container);
}

.container.medium {
  max-width: calc(var(--size-container) * 0.85);
}

.container.small {
  max-width: calc(var(--size-container) * 0.7);
}

.nav-parent {
  /* Replace #FFFFFF with your header's actual background color */
  /* background-color: rgba(237, 224, 192, 0.1); */
  background-color: rgba(30, 30, 30, 0.2);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  /* 🔑 The Fade Effect using a Mask Gradient 🔑 */
  mask-image: linear-gradient(
    to bottom,
    /* Fully Visible (Opaque/Black in the mask) for the header content */
      rgba(0, 0, 0, 1) 40%,
    /* Fully Hidden (Transparent in the mask) for the fading edge */
      rgba(0, 0, 0, 0) 100%
  );
  /* Add vendor prefix for cross-browser support */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 100%
  );
}