.bg-gradient-rainbow {
  background: linear-gradient(
    270deg,
    #ffa63d,
    #ff3d77,
    #338aff,
    #3cf0c5,
    #ffa63d
  );
  background-size: 400% 400%;
}

.bg-hero {
  background: transparent;
  background: linear-gradient(
    0deg,
    rgba(254, 254, 254, 0) 0%,
    rgba(240, 245, 246, 1) 1%,
    rgba(255, 255, 255, 0.9164040616246498) 19%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 100%
  );
}

.nav-scroller {
  position: relative;
  z-index: 2;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.hover-text-decoration-underline:hover {
  text-decoration: underline !important;
}

/* lqip start */

img {
  transition: opacity 0.5s ease;
}
img.lqip-blur {
  opacity: 1; /* or any value less than 1 to make it slightly transparent */
}

img.lqip-blur {
  filter: blur(20px);
  -webkit-filter: blur(20px);
}

/* lqip end */

a.link-body-emphasis {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

.bg-globe {
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,
    0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
}

/* Custom illuminated button style */
.illuminated {
  position: relative;
  overflow: hidden;
  z-index: 1;
  animation: shimmer 3s infinite linear; /* Apply the animation to the button */
}

/* Shimmer gradient */
.illuminated::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  background-size: 400% 400%;
  z-index: -1;
  animation: shimmer 3s infinite; /* Apply the animation to the gradient */
}

/* Custom illuminated button style */
.illuminated-slow {
  position: relative;
  overflow: hidden;
  z-index: 1;
  animation: shimmer 10s infinite linear; /* Apply the animation to the button */
}

/* Shimmer gradient */
.illuminated-slow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 75%
  );
  background-size: 400% 400%;
  z-index: -1;
  animation: shimmer 10s infinite; /* Apply the animation to the gradient */
}

/* Define the shimmer effect using keyframes */
@keyframes shimmer {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -400% 0;
  }
}

.word-wrap-break-word {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hover-opacity:hover {
  opacity: 0.7 !important;
}

.hover-grow {
  transition: 0.3s;
  transform: scale(1);
}

.hover-grow:hover,
.d-grow {
  transform: scale(1.03);
  transition: 0.3s;
}
