/* Target the text span directly so the line fits the words perfectly */
.jet-nav-link-text {
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 0 2px; /* Starts at 0 width */
    background-position: left bottom;
    transition: background-size 0.3s ease-in-out;
    padding-bottom: 4px; /* Space between text and the line */
}

/* Smoothly grow the line from left to right on hover */
.jet-nav-list__item:hover .jet-nav-link-text,
.menu-item:hover .jet-nav-link-text {
    background-size: 100% 2px;
}

/* Make the entire website scrollbar modern, thin, and hidden by default */
html {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent; /* Transparent for Firefox */
  transition: scrollbar-color 0.3s ease;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

/* When hovering over the page/scroll area, reveal a sleek scrollbar */
html:hover {
  scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
}

/* For Chrome, Edge, and Safari (WebKit browsers) */
::-webkit-scrollbar {
  width: 8px; /* Slim width */
}

::-webkit-scrollbar-track {
  background: transparent; /* No ugly background track */
}

::-webkit-scrollbar-thumb {
  background: transparent; /* Invisible by default */
  border-radius: 4px;
  transition: background 0.3s ease;
}

/* Reveal the scrollbar thumb only when hovering over the page */
html:hover ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark grey (change color as you like) */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.6); /* Darker when actively hovering the bar itself */
}

/* Create a positioning wrapper for your Tally form */
.tally-cover-wrapper {
  position: relative;
  overflow: hidden;
}

/* Place an absolute box over the bottom right corner to block out the badge */
.tally-cover-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 140px; /* Adjust width to cover the badge */
  height: 40px; /* Adjust height to cover the badge */
  background-color: #ffffff; /* CHANGE THIS to match your website background color */
  z-index: 10;
  pointer-events: none; /* Allows users to still click things underneath if needed */
}






/* ------------------------------------------------
   2. FIX PAGE PRELOADER
   The preloader might be stuck covering the page
   ------------------------------------------------ */

.page-preloader-cover {
    display: none ;
    opacity: 0 ;
    visibility: hidden ;
    pointer-events: none ;
}




/* ------------------------------------------------
   1. NAVIGATION & HOVER EFFECTS
   ------------------------------------------------ */
.jet-nav-link-text {
    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 0 2px;
    background-position: left bottom;
    transition: background-size 0.3s ease-in-out;
    padding-bottom: 4px;
}

.jet-nav-list__item:hover .jet-nav-link-text,
.menu-item:hover .jet-nav-link-text {
    background-size: 100% 2px;
}

/* ------------------------------------------------
   2. SCROLLBAR CUSTOMIZATION
   ------------------------------------------------ */
html {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  padding-top: 0 ;
}

@media (max-width: 767px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

html:hover {
  scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.3s ease;
}

html:hover ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------
   3. TALLY FORM WRAPPER FIX
   ------------------------------------------------ */
.tally-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.tally-cover-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 140px;
  height: 40px;
  background-color: #ffffff;
  z-index: 10;
  pointer-events: none;
}

/* ------------------------------------------------
   4. PAGE PRELOADER OVERRIDE
   ------------------------------------------------ */
.page-preloader-cover {
    display: none ;
    opacity: 0 ;
    visibility: hidden ;
    pointer-events: none ;
}