/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/



/* TEXT STYLING */

/* Gradeient Text */

.gradient-text {
    background: #00C6F7;
    background: linear-gradient(to right, #00C6F7 0%, #1e88e6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text-neon {
    background: #00C6F7;
    background: linear-gradient(to right, #007CF0 0%, #00DFD8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* LINK STYLING */

/* Gradeient Link */

.gradient-link-hover a:hover,
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  background: #00C6F7;
  background: linear-gradient(to right, #00C6F7 0%, #1e88e6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer Compliance Menu */

.footer-compliance a {
  -o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
/* ...and now for the proper property */
transition: all .3s ease-in-out;    
}

.footer-compliance a:hover {
color: #50C2F6 !important;
}

/* BUTTON STYLING */

/* Magic Button */
#magic-button {
    position: relative;
    border-radius: 8px;
    border: 1px solid rgb(33, 118, 192);
    font-size: 11px;
    background: transparent;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  
  #magic-button:hover {
    background-image: linear-gradient(90deg, #082D8C 26%, #50C2F6 100%);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  
  #magic-button:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
  }
  
  #magic-button::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
  }
  
  @keyframes sh02 {
    from {
      opacity: 0;
      left: 0%;
    }
  
    50% {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      left: 100%;
    }
  }
  
  #magic-button:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
  }

/* Magic Button Light */
#magic-button-light {
  position: relative;
  border-radius: 8px;
  border: 1px solid #FFF;
  font-size: 11px;
  background: transparent;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

#magic-button-light:hover {
  background-image: linear-gradient(90deg, #082D8C 26%, #50C2F6 100%);
  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#magic-button-light:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}

#magic-button-light::before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes sh02 {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
    left: 100%;
  }
}

#magic-button-light:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}

/* Magic Button Solid */

#magic-button-solid {
    position: relative;
    border-radius: 8px;
    border: 1px solid rgb(33, 118, 192);
    background: transparent;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    background-image: linear-gradient(90deg, #082D8C 26%, #50C2F6 100%);
        box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
  }

  #magic-button-solid-round {
    position: relative;
    border-radius: 100px;
    border: 1px solid rgb(33, 118, 192);
    background: transparent;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    background-image: linear-gradient(90deg, #082D8C 26%, #50C2F6 100%);
  }
  
  #magic-button-solid:hover,
  #magic-button-solid-round:hover {
    background-image: linear-gradient(90deg, #082D8C 26%, #50C2F6 100%);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  
  #magic-button-solid:hover::before,
  #magic-button-solid-round:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
  }
  
  #magic-button-solid::before,
  #magic-button-solid-round::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
  }
  
  @keyframes sh02 {
    from {
      opacity: 0;
      left: 0%;
    }
  
    50% {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      left: 100%;
    }
  }
  
  #magic-button-solid:active,
  #magic-button-solid-round:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
  }

/* Gradeient Border Button */

#border-gradient i {
	color: #00c6f7;
}

#border-gradient:hover i {
	color: #fff;
	transition: all 0.6s ease-in-out;
}

#border-gradient {
	border: none;
	display: inline-block;
	background: transparent;
	border-radius: 80px;
	position: relative;
	z-index: 1;
}

#border-gradient:before, 
#border-gradient:after {
	content: ' ';
	position: absolute;
	border-radius: 80px;
}

#border-gradient:before {
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -2;
	background: #00c6f7;
	background: -moz-linear-gradient(left, #00c6f7 0%, #1e88e6 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00c6f7), color-stop(100%,#1e88e6));
	background: -webkit-linear-gradient(left, #00c6f7 0%,#1e88e6 100%);
	background: -o-linear-gradient(left, #00c6f7 0%,#1e88e6 100%);
	background: -ms-linear-gradient(left, #00c6f7 0%,#1e88e6 100%);
	background: linear-gradient(to right, #00c6f7 0%,#1e88e6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c6f7', endColorstr='#1e88e6',GradientType=1 );
}

#border-gradient:after {
	top: 1px; 
	bottom: 1px;
	left: 1px;
	right: 1px;
	background-color: black;
	z-index: -1;
	opacity: 1;
	transition: all 0.6s ease-in-out;
}

#border-gradient:hover:after {
	opacity: 0;
}


/* UI Elements */

/* Video Lightbox */
.elementor-video-container video {
  border-radius: 16px;
}

/* Gradient Field Border */

#form-field-gradientfield {
    border: solid 1px transparent;
    border-radius: 14px;
    background-image: linear-gradient(#1A1A1A, #1A1A1A), 
                      linear-gradient(to right, #00c6f7, #1e88e6);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Animated Scroll Icon */

@-webkit-keyframes scroll-ani {
    0% {
      opacity: 1;
      top: 29%;
    }
    15% {
      opacity: 1;
      top: 50%;
    }
    50% {
      opacity: 0;
      top: 50%;
    }
    100% {
      opacity: 0;
      top: 29%;
    }
  }
  
  @-moz-keyframes scroll-ani {
    0% {
      opacity: 1;
      top: 29%;
    }
    15% {
      opacity: 1;
      top: 50%;
    }
    50% {
      opacity: 0;
      top: 50%;
    }
    100% {
      opacity: 0;
      top: 29%;
    }
  }
  
  @keyframes scroll-ani {
    0% {
      opacity: 1;
      top: 29%;
    }
    15% {
      opacity: 1;
      top: 50%;
    }
    50% {
      opacity: 0;
      top: 50%;
    }
    100% {
      opacity: 0;
      top: 29%;
    }
  }
  
  .mouse-scroll {
    display: inline-block;
    line-height: 18px;
    font-size: 12px;
    font-weight: normal;
    color: #7F8C8D;
    color: #FFF;
    font-family: "Sussie Intl", Sans-serif;
    letter-spacing: 2px;
    text-decoration: none;
    overflow: hidden;
  }
  .mouse {
      position: relative;
      display: block;
      width: 30px;
      height: 46px;
      margin: 0 auto 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 2px solid #FFF;
      border-radius: 28px;
  }   
      .mouse-movement { 
        position: absolute;
        display: block;
        top: 29%;
        left: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        background: #50c2f6;
        border-radius: 50%;
        -webkit-animation: scroll-ani 4s linear infinite;
        -moz-animation: scroll-ani 4s linear infinite;
        animation: scroll-ani 4s linear infinite;
      }
  .mouse-message { 
        float: left;
        margin: 0 0 0 7px;
        padding: 0;
        -webkit-animation: scroll-ani 4s linear infinite;
        -moz-animation: scroll-ani 4s linear infinite;
        animation: scroll-ani 4s linear infinite;
    }

 /* Page Seperator Numbers */ 
 .path-line {
    width: 1px;
    align-self: center;
    background: linear-gradient(#000,#00C6F7);
    padding-right: 1px;
    display: inline-block;
    height: 100px;
}

.section-label-number {
    display: inline-flex;
    border-radius: 100%;
    color: #000;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 24px;
    background: linear-gradient(90deg,#00C6F7,#1e88e6);
}

/* Client Logo Carousel */

    .swiper-slide-image {
        width: 26%;
    }
    
    selector .swiper-wrapper{
      -webkit-transition-timing-function: linear !important;
      transition-timing-function: linear !important; 
    }

/* Product Solutions Carousel */

    .product-card {
        min-height: 300px;
    }


/* CANVAS ANIMATIONS & HERO CONTENT */

/* Haleos Forge */

#forge-animation {
    position: absolute;
    z-index: 4
}



#beacon-hero-content {
    position: absolute;
}

/* Haleos Vault */

#vault-line-animation {
    position: absolute;
    z-index: 1
}

.lines {
    z
      position: fixed;
      height: 100vh;
      margin: 0;
      min-width: 100vw;
  }
  
  .line {
      position: absolute;
      width: 1px;
      height: 100%;
      top: 0;
      left: 50%;
      background: rgba(40, 40, 40, 1.0);
      overflow: hidden;
  }
  
  .line::after {
      content: "";
      display: block;
      position: absolute;
      height: 15vh;
      width: 100%;
      top: -50%;
      left: 0;
      background: linear-gradient(to bottom, rgba(80, 194, 246, 0) 0%, #50c2f6 75%, #50c2f6 100%);
      -webkit-animation: drop 7s 0s infinite;
      animation: drop 7s 0s infinite;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
      animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
  }
  
  .line:nth-child(1) {
      margin-left: -20%;
  }
  
  .line:nth-child(1)::after {
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
  }
  
  .line:nth-child(3) {
      margin-left: 20%;
  }
  
  .line:nth-child(3)::after {
      -webkit-animation-delay: 2.5s;
      animation-delay: 2.5s;
  }
  
  .line:nth-child(4) {
      margin-left: 40%;
  }
  
  .line:nth-child(4)::after {
      -webkit-animation-delay: 3s;
      animation-delay: 3s;
  }
  
  .line:nth-child(5) {
      margin-left: -40%;
  }
  
  .line:nth-child(5)::after {
      -webkit-animation-delay: 3.5s;
      animation-delay: 3.5s;
  }
  
  @-webkit-keyframes drop {
      0% {
          top: -50%;
      }
  
      100% {
          top: 110%;
      }
  }
  
  @keyframes drop {
      0% {
          top: -50%;
      }
  
      100% {
          top: 110%;
      }
  }



  #sentry-animation {
    position: absolute;
    z-index: 4
}

  /* HALEOS CAREERS */

/* Job Listing Card */ 

.job-card {
    -webkit-backdrop-filter: grayscale(0) blur(0.3px) !important;
        backdrop-filter: grayscale(0) blur(0.3px) !important;
}