/*Root Styles*/
html {
  font-family: "Hanken Grotesk";
  scroll-behavior: smooth;
}

.montserrat-light {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.montserrat-extrabold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.hanken-light {
  font-family: "Hanken Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.raleway-light {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.raleway-medium {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.raleway-bold {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.dm-serif-display {
  font-family: "DM Serif Display", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
}

/*Loader Styles*/
.shimmer-mask {
  mask-image: linear-gradient(
    60deg,
    transparent 40%,
    white 50%,
    transparent 60%
  );
  -webkit-mask-image: linear-gradient(
    -60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.6) 48%,
    white 50%,
    rgba(255, 255, 255, 0.6) 52%,
    rgba(255, 255, 255, 0.3) 55%,
    rgba(255, 255, 255, 0.1) 60%,
    transparent 70%
  );
  mask-size: 100% 100%;
  -webkit-mask-size: 200% 100%;
  animation: sweep-light 4s ease-in-out infinite;
}

@keyframes sweep-light {
  0% {
    mask-position: 150% 0%;
    -webkit-mask-position: 140% 0%;
  }
  100% {
    mask-position: -130% 0%;
    -webkit-mask-position: -50% 0%;
  }
}

.leftAppearHero {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: color 150ms ease-in-out,
    background-color 150ms ease-in-out,
    opacity 1500ms ease, transform 1500ms ease, filter 1500ms ease;
}

.fadeIntersect {
  opacity: 0;
  filter: blur(5px);
  transform: translatey(10%);
  transition: all 1.0s;
}

.show {
  opacity: 1;
  filter: none;
  transform: translateY(0%);
}


  ::-webkit-scrollbar {
    width: 9px; /* Width of the scrollbar */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #085979;
    background: -webkit-linear-gradient(90deg, rgba(8, 89, 121, 1) 0%, rgba(17, 132, 177, 1) 50%);
    background: -moz-linear-gradient(90deg, rgba(8, 89, 121, 1) 0%, rgba(17, 132, 177, 1) 50%);
    background: linear-gradient(90deg, rgba(8, 89, 121, 1) 0%, rgba(17, 132, 177, 1) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#085979", endColorstr="#1184B1", GradientType=1);
    border-radius: 8px; /* Rounded corners */
    border: 0px solid transparent; /* Optional: border around the thumb */
    background-clip: padding-box;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Track color */
    border-radius: 8px; /* Rounded track corners */
  }
  
  /* Optional: Add a hover effect for the scrollbar */
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(163,163,163);
    background: -moz-linear-gradient(90deg, rgba(163,163,163,1) 0%, rgba(163,163,163,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(163,163,163,1) 0%, rgba(163,163,163,1) 100%);
    background: linear-gradient(90deg, rgba(163,163,163,1) 0%, rgba(163,163,163,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a3a3a3",endColorstr="#a3a3a3",GradientType=1);
  }

  @keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
  }
  
  .animate-wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: wave 1.6s infinite;
  }

          /* Smooth fade-in for logo and text */
          @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Smooth fade-out for loader */
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; visibility: hidden; }
        }

        .fade-in {
            animation: fadeIn 1s ease-out;
        }
     
        .fade-out {
            animation: fadeOut 1s ease-out forwards;
        }