.animate-top{
    animation:appear linear ;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;

  }
  @keyframes appear{
    from{
        opacity: 0;
        transform: translateY(20px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);

      
    }
  }

  @media(max-width:997px){
    .animate-top-card{
      animation:none !important;
    }
    .animate-bottom-card{
      animation:none !important ;
    }
  }

  .animate-top-card{
    animation:top-card linear ;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;

  }
  @keyframes top-card{
    from{
    
        transform: translateY(20px);
    }
    to{
      
        transform: translateY(0px);

      
    }
  }

  .animate-bottom-card{
    animation:bottom-card linear ;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;

  }
  @keyframes bottom-card{
    from{
    
        transform: translateY(-20px);
    }
    to{
      
        transform: translateY(0px);

      
    }
  }