html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;

  font-family: unset;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important; /* Prevents native smooth scrolling */
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain; /* Prevents unwanted scroll chaining */
}

.lenis.lenis-stopped {
  overflow: hidden; /* Stops scrolling when Lenis is stopped */
}

.lenis.lenis-smooth iframe {
  pointer-events: none; /* Prevents issues with iframes and smooth scrolling */
}

.bg-main {
  background: linear-gradient(
    180deg,
    rgba(44, 49, 55, 1) 10%,
    rgba(23, 25, 29, 1) 100%
  );
}

.bg-about {
  background: linear-gradient(
    180deg,
    rgba(42, 46, 52, 0) 0%,
    rgba(31, 34, 39, 1) 0%
  );
}

.header-bg {
  background: linear-gradient(
    122deg,
    rgba(51, 56, 65, 0.2) 21%,
    rgba(44, 48, 55, 0.2) 100%
  );
}

.menu-bg {
  background: linear-gradient(122deg, #2d3238 21%, #2c3037 100%);
}

.txt-g {
  background-image: linear-gradient(
    50deg,
    #f2ca98 0%,
    #a1794c 75%,
    #784d22 100%
  );
}

.text-fgold {
  color: #caa475;
}

.main-cont {
  background: linear-gradient(270deg, #2c3137 3%, #17191d 100%);
}

.main-cont-top {
  background: linear-gradient(270deg, #2d3138 16%, #262a30 89%);
}

.product-bg1 {
  background: linear-gradient(180deg, #262729 47%, #2b3036 87%);
}

.truffle-date-bg {
  background: linear-gradient(180deg, #22272e 0%, #24272d 100%);
}

.btn-gra {
  background: linear-gradient(270deg, #b48a58 0%, #dcb98e 100%);
  transition: filter 0.3s ease-in-out;
  will-change: filter;
}

.button-wrapper {
  transition: filter 0.4s ease-out; /* Add transition to the wrapper */
}

.button-wrapper:hover {
  filter: brightness(
    1.2
  ); /* This filter applies to the entire wrapper content */
}

/* Apply to the outer `<a>` tag */
.button-container {
  transition: transform 0.3s ease-out, /* For scale */ box-shadow 0.3s ease-out; /* For outer shadow changes */
}

/* Apply to the inner `div` */
.button-inner {
  transition: background 0.3s ease-out, box-shadow 0.3s ease-out,
    /* For inner shadow */ text-shadow 0.3s ease-out;
}

.button-container:hover {
  transform: translateY(1px); /* Slight downward shift for press feel */
}

.button-container:hover .button-inner {
  background: #25282e; /* Slightly darker inner background */
  box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.4),
    /* Darker inner shadow for depth */ inset 0px 0px 5px
      rgba(255, 255, 255, 0.1); /* Subtle highlight for curvature */
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); /* Adds depth to text */
}

.button-container2 {
  transition: transform 0.3s ease-out, filter 0.3s ease-out,
    box-shadow 0.3s ease-out; /* Include box-shadow for drop-shadow changes */
}

.button-inner2 {
  transition: background 0.3s ease-out;
}

.button-container2:hover {
  box-shadow: -28px 28px 60px rgba(219, 76, 11, 0.25),
    28px 28px 68px rgba(69, 9, 0, 0.56),
    /* Outer shadow for depth */ inset -10px -10px 20px rgba(255, 255, 255, 0.1);
  transform: scale(1.05); /* Slightly larger */
  /* Enhance the existing drop-shadow to give a more "floating" glow */
}

.button-inner2:hover {
  box-shadow: -8px -8px 20px rgba(122, 134, 151, 0.1),
    8px 8px 20px rgba(0, 0, 0, 0.35);
}

.bg-b-gra1 {
  background: linear-gradient(270deg, #11141700 0%, #111417 100%);
}

.bg-b-gra2 {
  background: linear-gradient(90deg, #11141700 0%, #111417 100%);
}

.abo {
  font-family: "Aboreto", system-ui;
  font-weight: 400;
  font-style: normal;
}

.cormo {
  font-family: "Cormorant Infant", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* Add to your custom CSS */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}
.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animation */
.head-fadeup {
  display: hidden;
  opacity: 0;
  transform: translateY(10rem);
}

.head-fadeup.active {
  animation: headFadeup 1000ms ease-out forwards;
  /* animation-delay: 2000ms; */
}

.move-in {
  display: hidden;
  opacity: 0;
  transform: translateY(100%);
}

.move-in.active {
  animation: moveIn 800ms ease-out forwards;
}

@keyframes headFadeup {
  0% {
    display: hidden;
    opacity: 0;
    transform: translateY(10rem);
  }

  50% {
    display: block;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.des-fadeup {
  display: hidden;
  opacity: 0;
  transform: translateY(8rem);
}

.des-fadeup.active {
  animation: desFadeup 1000ms ease-out forwards;
  animation-delay: 400ms;
}

.float-up {
  animation: floatUp 800ms ease-out forwards;
  animation-delay: 200ms;
}

@keyframes desFadeup {
  0% {
    display: hidden;
    opacity: 0;
    transform: translateY(10rem);
  }

  80% {
    display: block;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(100%0);
  }
}

.fade-image {
  opacity: 1; /* Initial state: fully visible */
  transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity over 0.5 seconds */
}

.fade-image.hidden {
  opacity: 0; /* State when hidden */
}