.banner-btn{
    animation: btn;
    animation-duration: 1s;

}
@keyframes btn{
    0%{
        
        transform: scale(0.5);
    }
    100%{
        
         transform: scale(1);
    
    }
}

.banner-logo2{
    animation-name: ironman;
    animation-duration: 2s;
}
@keyframes ironman{
    0%{
        filter: blur(3px) contrast(3);
        transform: scale(0.7);
    }
    100%{
          filter: none;
        transform: scale(1);
    }
}

.img-box{
    animation-name:spider ;
    animation-timeline: view();
}
@keyframes  spider {

    0%{
        transform: translateX(-300px);
    }
    100%{
          transform: translateX(0px);
    }
    
}

.details-box{
    animation-name:details ;
    animation-timeline: view();
    animation-range: entery 20% cover 100%;
}
@keyframes details {

    0%{
        transform: translateX(300px);
    }
    100%{
          transform: translateX(0px);
    }
    
}

.headline{
    animation-name: text2;
     animation-timeline: view();

}
@keyframes text2 {

    0%{
        transform: scale(0.7);
    }
    100%{
          transform: scale(1);
    }
    
}

#img1{
    animation-name: box-img ;
     animation-timeline: view();
}
#img2{
    animation-name: box-img ;
     animation-timeline: view();
}
#img3{
    animation-name: box-img ;
     animation-timeline: view();
}
#img4{
    animation-name: box-img ;
     animation-timeline: view();
}
@keyframes box-img{
  0%{
        filter:saturate(0) contrast(4) brightness(0.1) blur(4px);
       opacity: 0;
       scale: 0.7;
       translate: 0 4rem;
    }
  100%{
          filter: none;
        scale: 1;
        opacity: 1;
        translate: 0 0;

    }
}

.banner-3{
    animation: banner3;
      animation-timeline: view();
}
@keyframes banner3{
    0%{
        filter: blur(0);
       
    }
    100%{
          filter: blur(4px);
    
    }
}

.banner-logo{
    animation-name: bannertext;
    animation-duration:2s ;
}

@keyframes bannertext{
    0%{
        transform: translateX(-200px);
    }
    100%{
        transform: translateX(0px);
    }
}
#box4-12first{
    animation-name: box;
    animation-timeline: view();
    animation-range: entery 0% cover 25% ;
}
#box4-12second{
     animation-name: box22;
    animation-timeline: view();
    animation-range: entery 25% cover 50% ;
}
#box4-12third{
    animation-name: box;
    animation-timeline: view();
    animation-range: entery 50% cover 75% ;
}
#box4-12four{
     animation-name: box22;
    animation-timeline: view();
    animation-range: entery 75% cover 100% ;
}
@keyframes box{

    0%{
        scale: 0.7;
          transform: translateX(30px);
          filter: blur(2px) contrast(4);
          opacity: 0;
    }
    100%{
        scale: 1;
        transform: translateX(-20px);
        filter: none;
        opacity: 1;
        border: 3px solid rgb(153, 255, 0);
    }

} 
@keyframes box22{

    0%{
        scale: 0.7;
          transform: translateX(-20px);
          filter: blur(2px) contrast(4);
          opacity: 0;
    }
    100%{
        scale: 1;
        transform: translateX(30px);
        filter: none;
         opacity: 1;
         border: 3px solid rgb(153, 255, 0);
    }

}