/*----------------- page scroll transition animation start -------------------*/
#smooth-content {
    overflow: visible;
    width: 100%;
    /* set a height because the contents are position: absolute, thus natively there's no height */
    height: auto;
  
    /* background-image:
      linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),
      linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; */
  }

  /*----------------- page scroll transition animation end -------------------*/


  .section-black svg path{
    fill: #fff;
  }
  .country-stroke{
    stroke-dasharray: 2 5;
        stroke-dashoffset: 2 5;
    animation: country-anim 2s alternate linear;
  }
  @keyframes country-anim{
    40%{
        stroke-dasharray: 2 390;
        stroke-dashoffset: 2 390;
    }
    
    100%{
        stroke-dasharray: 2 5;
        stroke-dashoffset: 2 5;
    }
    
    
  }

  .new-common-btn{
    transition: 0.3s linear;
  }
  .new-common-btn:hover{
    letter-spacing: 1px;
    color: #fff;
  }

  .without span {
    display: inline-block;
    white-space: pre;
    line-height: 1;
  }
  .without .word {
    overflow: hidden;
  }
  .without .word .char {
    position: relative;
    /* animation: slide-up 1s cubic-bezier(0.75, 0, 0.25, 1) both;
    animation-delay: calc(0.5s + (0.3s * var(--word-index))); */
  }
  .without .word .char.active{
    animation: slide-up 1s cubic-bezier(0.75, 0, 0.25, 1) both;
    animation-delay: calc(0.5s + (0.15s * var(--word-index)));
  }
  @keyframes slide-up {
    from {
      transform: translateY(100%);
    }
  }
  .without [data-word=without] {
    overflow: visible;
  }
  .without [data-word=without] .char.active {
    animation: none;
    visibility: hidden;
  }
  .without [data-word=without] .char.active:before,
  .without [data-word=without] .char.active:after {
    visibility: visible;
    color: #d601f4;
    overflow: hidden;
    height: 100%;
    width: 2em;
    text-indent: 0.25em;
    margin-left: -0.25em;
    animation: fade-in 5s cubic-bezier(0.75, 0, 0.25, 1) both alternate;
    animation-delay: calc( 1s + -0.2s * (var(--char-total) - var(--char-index)) );
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @media (prefers-color-scheme: dark) {
    body {
      background: #282828;
    }
  
    .without [data-word=without] .char.active:before,
  .without [data-word=without] .char.active:after {
      color: #ffffff;
    }
  }

  .image-wipe-animation{
    position: relative;
    opacity: 0;
    transition: 0.3s ease;
  }
  .image-wipe-animation::after{
    position: absolute;
    height:100%;
    width: 100%;
    background: rgb(255, 255, 255);
    content: '';
    top: 0;
    left: 0;
    z-index: 9;
    transition: 0.6s ease-in-out;
    opacity: 1;
    visibility: hidden;
  }
  .image-wipe-animation.anim{
    visibility: visible;
    opacity: 1;
  }
  .image-wipe-animation.anim::after{
    height: 0;
    opacity: 1;
    visibility: visible;
  }
  .image-wipe-animation img{
    opacity: 0;
    transition: 0.3s ease;
  }
  .image-wipe-animation.anim img{
    opacity: 1;
  }

  .dark-blue-anim{
    animation-name: dark-blue-anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  @keyframes dark-blue-anim{
    0%{
      fill: #1C35B8;
    }
    25%{
      fill: #1B5DDD;
    }
    50%{
      fill: #0559FA;
    }
    75%{
      fill: #0E9CEC;
    }
    100%{
      fill: #1C35B8;
    }
  }
  .mid-blue-anim{
    animation-name: mid-blue-anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-delay: 0.2s;
  }
  @keyframes mid-blue-anim{
    0%{
      fill: #1B5DDD;
    }
    25%{
      fill: #0559FA;
    }
    50%{
      fill: #0E9CEC;
    }
    75%{
      fill: #1C35B8;
    }
    100%{
      fill: #1B5DDD;
    }
  }
  .blue-anim{
    animation-name: blue-anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 0.3s;
  }
  @keyframes blue-anim{
    0%{
      fill: #0559FA;
    }
    50%{
      fill: #0E9CEC;
    }
    100%{
      fill: #0559FA;
    }
  }
  .light-blue-anim{
    animation-name: light-blue-anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 0.4s;
  }
  @keyframes light-blue-anim{
    0%{
      fill: #0E9CEC;
    }
    50%{
      fill: #0559FA;
    }
    100%{
      fill: #0E9CEC;
    }
  }
  
  
    .location-anim{
    animation: location-anim 1s infinite;
  }
  .canada{
    animation-delay: 0.5s;
  }
  .india{
    animation-delay: 0.3s;
  }
  @keyframes location-anim{
    0%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }
  
  
  .hand-left-anim{
  animation: tranform-left 1.5s ease-in infinite;
}
@keyframes tranform-left{
  0%{
    transform: translateX(8px);
  }
  50%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(8px);
  }
}
.hand-right-anim{
  animation: tranform-right 1.5s ease-in infinite;
}
@keyframes tranform-right{
  0%{
    transform: translateX(-8px);
  }
  50%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-8px);
  }
}

.object-anim{
  animation: tranform-top 1.5s ease-in infinite;
}
@keyframes tranform-top{
  0%{
    transform: translate(3px, 3px) scale(0.98);
  }
  50%{
    transform: translate(0, 0) scale(1);
  }
  100%{
    transform: translate(3px, 3px) scale(0.98);
  }
}

/* .star-anim{
  animation: fade-anim 0.7s ease-in infinite;
}
@keyframes fade-anim{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
.star-anim.two{
  animation-delay: 0.3s;
} */

.hand-top{
  animation: hand-top 1.5s ease-in infinite;
}
@keyframes hand-top{
  0%{
    transform: translateY(5px);
  }
  50%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(5px);
  }
}
.hand-bottom{
  animation: hand-bottom 1.5s ease-in infinite;
}
@keyframes hand-bottom{
  0%{
    transform: translateY(-5px);
  }
  50%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-5px);
  }
}