.animate-box{overflow: hidden; height: auto; opacity: 0;}

.animate{animation: linear 1.6s ggwp forwards; position: relative; text-transform: initial;}

.delay-1{animation-delay: 0.5s !important;}

.delay-2{animation-delay: 0.6s !important;}

.delay-3{animation-delay: 0.9s !important;}

.delay-4{animation-delay: 1.2s !important;}

.delay-5{animation-delay: 1.5s !important;}

.delay-6{animation-delay: 1.9s !important;}

.delay-7{animation-delay: 2.0s !important;}

.delay-8{animation-delay: 2.7s !important;}


.delay-8{animation-delay: 2.3s !important;}

.delay-9{animation-delay: 2.5s !important;}

.delay-10{animation-delay: 2.7s !important;}

.delay-11{animation-delay: 2.9s !important;}

.delay-12{animation-delay: 3.0s !important;}

.delay-13{animation-delay: 3.2s !important;}

.delay-14{animation-delay: 3.5s !important;}


@keyframes ggwp {

0%{opacity: 0;}

100%{opacity: 1;}

}


.animate-box-left{overflow: hidden; height: auto; opacity: 0;}

.animate-box-right{overflow: hidden; height: auto; opacity: 0;}

.animate-box-top{overflow: hidden; height: auto; opacity: 0;}

.animate-box-left.playanime{animation: linear 0.9s imgBox forwards; transform: translateX(-50px);  filter: blur(10px); opacity: 0;}

.animate-box-right.playanime{animation: linear 0.9s imgBox forwards; transform: translateX(50px);  filter: blur(10px); opacity: 0;}

.animate-box-top.playanime{animation: linear 0.9s imgBox forwards; transform: translateY(-50px);  filter: blur(10px); opacity: 0;}


@keyframes imgBox {

    0%{
    filter: blur(10px);
    opacity: 0;
    }
    
    100%{
    filter: blur(0px);
     opacity: 1; 
     transform: translate(0px, 0px);
    }
    
}


.drawsvg{stroke-dashoffset: 0px; stroke-dasharray:0px; animation: linear 2.2s svgD forwards;}

@keyframes svgD {
    
    0%{stroke-dashoffset: 0px; stroke-dasharray:0px;}

    100%{stroke-dasharray: 1447.3348388671875px;}

}



/* loader */


.loader{height: 100dvh; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 9999; width: 100%; position: fixed; top: 0px; overflow: hidden; left: 0px;}

.loader.scale{animation: linear scale 1.5s forwards;}

@keyframes scale {
    0%{opacity: 1;}

    50%{opacity: 0.5;}

    100%{transform: scale(140.5); opacity: 0;}
}

.loader .svg-line{position: absolute; opacity: 1; z-index: -1;}


.animate-dot{animation: linear 0.9s dotanime infinite;}

@keyframes dotanime {
  
  0%{opacity: 0;}

  50%{opacity: 0.5;}

  100%{opacity: 1;}

}