/*
Theme Name: My Custom Child Theme
Template: hello-elementor
*/
@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
  }
.counter_animation_one {
    font-family: "PP Neue Montreal";
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    padding: 2rem;
    counter-reset: num var(--num);
    color: #fff;
    opacity: 0; /* Start with a downward offset */
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .counter_animation_one::after {
    content: counter(num);
  }

  .counter_animation_one.animate {
    animation: counter 3s ease-in-out forwards; /* Run animation only once */
    opacity: 1; /* Reset position when visible */
  }

  @keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 1000;
    }
  }
  @-webkit-keyframes counter {
    from {
        --num: 0;
    }
    to {
        --num: 1000;
    }
}
  .counter_animation_two {
    font-family: "PP Neue Montreal";
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    padding: 2rem;
    counter-reset: num var(--num);
    color: #fff;
    opacity: 0; /* Start with a downward offset */
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .counter_animation_two::after {
    content: counter(num);
  }

  .counter_animation_two.animate {
    animation: counter_two 2s ease-in-out forwards; /* Run animation only once */
    opacity: 1; /* Reset position when visible */
  }

  @keyframes counter_two {
    from {
      --num: 0;
    }
    to {
      --num: 200;
    }
  }
  @-webkit-keyframes counter_two {
    from {
        --num: 0;
    }
    to {
        --num: 200;
    }
}
  .counter_animation_three {
    font-family: "PP Neue Montreal";
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    padding: 2rem;
    counter-reset: num var(--num);
    color: #fff;
    opacity: 0; /* Start with a downward offset */
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .counter_animation_three::after {
    content: counter(num);
  }

  .counter_animation_three.animate {
    animation: counter_three 2s ease-in-out forwards; /* Run animation only once */
    opacity: 1; /* Reset position when visible */
  }

  @keyframes counter_three {
    from {
      --num: 0;
    }
    to {
      --num: 200;
    }
  }
  @-webkit-keyframes counter_three {
    from {
        --num: 0;
    }
    to {
        --num: 200;
    }
  }
  @media (min-width:1200px) {
    

    .fade_in_animation{
        opacity: 0.1 !important;
        transition:2s linear !important;
        filter:blur(5) !important;
    }
    .fade_in_animation.elements_appear{
        opacity: 1 !important;
        filter: blur(0) !important;
        color:lightblue !important;
    }
    .top_sliding_animation{
        opacity: 0.1 !important;
        transform: translateY(50px) !important;
        transition:0.5s linear !important;
        filter:blur(5) !important;
    }
    .top_sliding_animation.elements_appear{
        opacity: 1 !important;
        transform: translateY(0px) !important;
        filter: blur(0) !important;
    }
    .fade_in_animation img{
        opacity: 0.1 !important;
        transition:1s linear !important;
        filter:blur(5) !important;
    }
    .fade_in_animation.elements_appear img{
        opacity: 1 !important;
        filter: blur(0) !important;
        color:lightblue !important;
    }
    .top_sliding_animation_second{
      opacity: 0.1 !important;
      transform: translateY(90px) !important;
      transition:0.7s linear !important;
      filter:blur(5) !important;
    }
    .top_sliding_animation_second.elements_appear{
        opacity: 1 !important;
        transform: translateY(0px) !important;
        filter: blur(0) !important;
    }
    .top_sliding_animation_third{
      opacity: 0.1 !important;
      transform: translateY(140px) !important;
      transition:1s linear !important;
      filter:blur(5) !important;
    }
    .top_sliding_animation_third.elements_appear{
        opacity: 1 !important;
        transform: translateY(0px) !important;
        filter: blur(0) !important;
    }
}