@tailwind base;
@tailwind components;
@tailwind utilities;


       .class1{
         /* display : none; */
       
        animation: slide 2s ease 4.35s 1;
      } 
      .class2{
     
        animation: slide 2s ease 11s 1;
      }
      .class3{
        animation: slide 2s ease 16s 1;
      }
      .class4{
        animation: slide 2s ease 20s 1;
      }
      .class5{
        animation: slide 2s ease 24s 1;
      }
      .class6{
        animation:slide 2s ease 28s 1;
      }
      
      
      @keyframes slide {
        from{
          opacity: 100%;
       transform: translate(0px);
     }
  to{
     transform:translateY(30px);
     opacity:0;
     
    
  }
  
  }
  @keyframes slidein{
    from{
      opacity: 0;
    }
    to{
     opacity: 100%;
    }
  }
  
   .animate1{
  animation: slidein 4s ease 0s  1;
      /* animation: slide 4s ease  1 ;
      transform:translate(30px); */
      } 
  .animate2{
    animation : slidein 4s  ease 0.8s 1;
    /* animation: slide 4s ease 1 ;
    transform: translate(20px); */
  }
  .animate3{
       animation : slidein 4s ease 0.12s 1;
    /* animation: slide 4s ease 1;
    transform: translate(10px); */
  }
  .animate4{
    animation: slidein 4s ease 0.16s 1;
     /* animation : slide 4s ease 1;
     transform: translate(5px); */
  }
  /* .dissapear{
    animation:slide 2s ease-in-out 10s infinite; 
  } */
  .animate5{
    animation: slidein 4s ease 8.3s  1;
        /* animation: slide 4s ease  1 ;
        transform:translate(30px); */
        } 
    .animate6{
      animation : slidein 4s  ease 9s 1;
      /* animation: slide 4s ease 1 ;
      transform: translate(20px); */
    }
    .animate7{
         animation : slidein 4s ease 9.5s 1;
      /* animation: slide 4s ease 1;
      transform: translate(10px); */
    }
    .animate8{
      animation: slidein 4s ease 9.10s 1;
       /* animation : slide 4s ease 1;
       transform: translate(5px); */
    }
    /* class3 */
    .animate9{
        animation: slidein 4s ease 13s 1;
    }
    .animate10{
        animation:slidein 4s ease 13.6s 1;
    }
    .animate11{
        animation:slidein 4s ease 13.10s 1;
    }
    .animate12{
        animation:slidein 4s ease 13.14s 1;
    }
    .animate13{
        animation:slidein 4s ease 13.18s 1;
    }
    .animate14{
        animation:slidein 4s ease 13.22s 1;
    }
    /* class4 */
    .animate15{
        animation:slidein 4s ease 17s 1;
    }
    .animate16{
        animation:slidein 4s ease 17.6s 1;
    }
    .animate17{
        animation:slidein 4s ease 17.22s 1;
    }
    .animate18{
        animation:slidein 4s ease 17.24s 1;
    }

    .animate19{
        animation:slidein 4s ease 17.28s 1;
    }
    .animate20{
        animation:slidein 4s ease 17.32s 1;
    }
    .animate21{
        animation:slidein 4s ease 17.36s 1;
    }
    /* class5 */
    .animate22{
        animation:slidein 4s ease 21s 1;
    }
    .animate23{
        animation:slidein 4s ease 21.6s 1;
    }
    .animate24{
        animation:slidein 4s ease 21.22s 1;
    }
    .animate25{
        animation:slidein 4s ease 21.24s 1;
    }

    .animate26{
        animation:slidein 4s ease 21.28s 1;
    }
    .animate27{
        animation:slidein 4s ease 21.32s 1;
    }
    .animate28{
        animation:slidein 4s ease 21.36s 1;
    }
    .animate29{
        animation:slidein 4s ease 21.40s 1;
    }
    /* class6 */
    .animate30{
        animation:slidein 4s ease 25s 1;
    }
    .animate31{
        animation:slidein 4s ease 25.6s 1;
    }
    .animate32{
        animation:slidein 4s ease 25.22s 1;
    }
    .animate33{
        animation:slidein 4s ease 25.24s 1;
    }

    .animate34{
        animation:slidein 4s ease 25.28s 1;
    }
    .animate35{
        animation:slidein 4s ease 25.32s 1;
    }
    .animate36{
        animation:slidein 4s ease 25.36s 1;
    }
    .animate37{
        animation:slidein 4s ease 25.40s 1;
    }
    .animate38{
        animation:slidein 4s ease 25.44s 1;
    }