/*
Theme Name: Trailrunnerint
Theme URI: https://trailrunnerint.com
Description: Trailrunnerint theme support Hello
Author: Abdallah
Author URI: https://trailrunnerint.com
Template: hello-elementor
Version: 1.0
Text Domain: Trailrunnerint
*/

/* Carrusel img */
.leftimg {
    -webkit-mask-image: linear-gradient(to left, #051E2B 80%, transparent);
    mask-image: linear-gradient(to left, #051E2B 80%, transparent);
}
.bottomimg {
    -webkit-mask-image: linear-gradient(to bottom, #051E2B 80%, transparent);
    mask-image: linear-gradient(to bottom, #051E2B 80%, transparent);
}

.left-bottom-img {
    mask-image: 
        linear-gradient(to bottom, #051E2B 80%, transparent),
        linear-gradient(to left, #051E2B 80%, transparent);
}

#header-menu {
    position: relative;
    backdrop-filter: blur(4px) !important;
}

#header-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: linear-gradient(178deg, #063F5D 25%, #53BAD1 65%, #063F5D 100%);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

#box-form {
    position: relative;
    backdrop-filter: blur(2px) !important;
    background: linear-gradient(0deg, rgba(6, 63, 93, 0.15), rgba(6, 63, 93, 0.15)),
    radial-gradient(30% 50% at 0% 0%, rgba(83, 486, 359, 0.1) 0%, rgba(5, 30, 43, 0.9) 100%);
}

#box-form::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: linear-gradient(170deg, #063F5D 25%, #53BAD1 40%, #063F5D 80%);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Border - Skyline */
#border-colors {
  position: relative;
  border-radius: 16px;
}
#border-colors::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;

  background: linear-gradient(
    180deg,
    rgba(6, 63, 93, 1) 0%,
    rgba(83, 186, 209, 0.1) 80%,
    rgba(6, 63, 93, 0) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
z-index: -1 !important;
}



#light-bg {
    background: linear-gradient(0deg, rgba(6, 63, 93, 0.15), rgba(6, 63, 93, 0.15)),
    radial-gradient(50% 280px at 50% 0%, rgba(83, 186, 209, 1) 40%, transparent 100%);
}

@media only screen and (max-width: 786px) {
  #light-bg {
    background: linear-gradient(0deg, rgba(6, 63, 93, 0.15), rgba(6, 63, 93, 0.15)),
    radial-gradient(100% 180px at 50% 0%, rgba(83, 186, 209, 1) 40%, transparent 100%);
}
}

#point-blue {
  color: rgba(83, 186, 209, 1);
}

/* background white */
.text-reveal {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.text-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(83, 186, 209, 1);
  border-radius: 4px;
  transform: translateX(100%);
}

.text-reveal.is-visible::before {
  animation: revealMask 1.2s ease forwards;
}

@keyframes revealMask {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}