@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");

/* universal style */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-bg: #111111;
  --color-text: #ffffff;
  --color-text-light: #777777;
  --color-text-light-2: #aaaaaa;
}

html {
  scroll-behavior: initial;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;  
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  overscroll-behavior: none;

  font-weight: 400;
  font-display: swap;
  overflow-x: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

::-webkit-scrollbar {
  width: 10px;
  background: var(--color-text-light);
}

::-webkit-scrollbar-thumb {
  background: var(--color-text);
  border-radius: 10px;
}

body.fonts-loaded {
  opacity: 1 !important;
}

p {
  color: var(--color-text-light);
}

*,
*:before,
*:after {
  box-sizing: inherit;
  user-select: none;
  outline: none;
  -webkit-touch-callout: none;
}

:focus {
  outline: none;
}

::-moz-focus-inner {
  border: 0;
}



.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear alternate infinite;
  }
  
  @keyframes dash {
    from {
      stroke-dashoffset: 822;
    }
    to {
      stroke-dashoffset: 0;
    }
  }


  .linedraw path {
    fill: none;
    
    stroke-width: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 1000;
    -webkit-animation: 25s linear infinite dash;
    animation: 25s linear infinite dash
}

@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0
    }
}


.pulse-width, .menuTrigger span {
    animation: pulse 2s infinite ease-in-out;
  }

  @keyframes pulse {
    0% {
      width: 10%;
    }
    50% {
      width: 100%;
    }
    100% {
      width: 10%;
    }
  }
  .menuTrigger span:nth-child(2) {
    max-width: 60% !important;
    animation: pulse 3s infinite ease-in-out;
}
.menuTrigger span:nth-child(3) {
    animation: pulse 4s infinite ease-in-out;
}


/* Bounce To Right */
.hvr-bounce-to-right {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
  }
  .hvr-bounce-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #2098D1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  .hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
    color: white;
  }
  .hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  }
  

  .underline-animation{    
    transition: background-position-x 0.9s linear;
  }
  
  .underline-animation:hover{
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKICB3aWR0aD0iMzkwcHgiIGhlaWdodD0iNTBweCIgdmlld0JveD0iMCAwIDM5MCA1MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzkwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMCw0Ny41ODVjMCwwLDk3LjUsMCwxMzAsMApjMTMuNzUsMCwyOC43NC0zOC43NzgsNDYuMTY4LTE5LjQxNkMxOTIuNjY5LDQ2LjUsMjQzLjYwMyw0Ny41ODUsMjYwLDQ3LjU4NWMzMS44MjEsMCwxMzAsMCwxMzAsMCIvPgo8L3N2Zz4K");
    -webkit-animation: line 1s;
    animation: line 1s;
  
  }

body .footer_links li a:hover{
   background: url("assets/images/svg-line.svg");
}
  
  
  @-webkit-keyframes line {
    0% {
      background-position-x: 390px;
    }
  }
  
  @keyframes line {
    0% {
      background-position-x: 390px;
    }
  }
  




  .circle-rotate {
    background-image: linear-gradient(#a6192d, #fcbdc6, #f2f2f2);    
    border-style: solid;
    border-color: transparent;
    border-radius: 50%;
    border-width: 0;
    -webkit-animation: rotateCircle 2s linear infinite;
            animation: rotateCircle 2s linear infinite;
            width: 252px;
    height: 252px;
  }
  .circle-rotate > div {
    background: linear-gradient(90deg, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 100%);    
    border-style: solid;
    border-color: transparent;
    border-radius: 50%;
    border-width: 1px;
    animation: rotateCircle 2s linear infinite reverse;
    display: table;
    text-align: center;
  }
  
  @-webkit-keyframes rotateCircle {
    0% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(90deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(270deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes rotateCircle {
    0% {
      transform: rotate(0);
    }
    25% {
      transform: rotate(90deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(270deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }


  /* Shine */
.shine-hover {
	position: relative;
}
.shine-hover::before {
	position: absolute;
	top: 0;
	left: -85%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.shine-hover:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}




.snip {
  position: relative;
  overflow: hidden; 
  transform: translateZ(0);
}



.snip::before,
.snip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #35e7f4;
  opacity: 0.3;
  transition: all 0.45s ease;
}

.snip::before {
  transform: skew(30deg) translateX(-150%);
}

.snip::after {
  transform: skew(-30deg) translateX(-140%);
}

.snip:hover::before {
  transform: skew(30deg) translateX(60%);
  transition-delay: 0.05s;
}

.snip:hover::after {
  transform: skew(-30deg) translateX(50%);
}

.snip:hover .snip__figcaption::before {
  transform: skew(30deg) translateX(-40%);
  transition-delay: 0.15s;
}

.snip:hover .snip__figcaption::after {
  transform: skew(-30deg) translateX(-30%);
  transition-delay: 0.1s;
}


.heading-animation {  
  animation-name: text;
  animation-duration: 4s;
  animation-iteration-count: calc(10s);
}

@keyframes text {
  0% {
    color: black;
    margin-bottom: -40px;
  }
  30% {
    letter-spacing: 25px;
    margin-bottom: -40px;
  }
  85% {
    letter-spacing: 8px;
    margin-bottom: -40px;
  }
  100% {
    margin-bottom: 20px;
  }
}


.heading-animations { animation-delay: 0s; opacity: 0;
  animation: slideIn 1.5s ease-in-out forwards; }
h2 { animation-delay: 0.5s; }
h3 { animation-delay: 1s; }
h4 { animation-delay: 1.5s; }
h5 { animation-delay: 2s; }
h6 { animation-delay: 2.5s; }

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}





 @-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill:#fff;
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill:#fff;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}


.fill-color svg path{
  fill: #000000;
  animation: filter-animation 6s infinite;  
}

@keyframes filter-animation {
  0% {fill: #fff; }
  50% { fill: #000; }
  100% { fill: #ffffff;  }
}

/* Underline From Right */
.hvr-underline-from-right, .footer_links li a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-right:before, .footer_links li a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  bottom: 0;
  background: #35E8F4;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-right:hover:before, .hvr-underline-from-right:focus:before, .hvr-underline-from-right:active:before,  .footer_links li a:hover:before, .footer_links li a:focus:before, .footer_links li a:active:before{
  left: 0;
}


.infinite-loop-track {
  width: calc(6.25rem * 16);
  animation: osmo-loop 10s linear infinite;
}

@keyframes osmo-loop {
  0% {
      transform: translate3d(0, 0, 0);
  }
  100% {
      transform: translate3d(calc(-6.25rem * 8), 0, 0);
  }
}

.split-heading {
  opacity: 0;  
  will-change: transform;
}

.split-heading * {
  will-change: transform;
}

.animate-me {  
  box-sizing: border-box;
  padding:0;
  width: 100%; 
  perspective: 500px;
}