/* type 1 autorotate animation */
@keyframes autorotateanimation {
  from { 
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}

.autorotate { 
  animation : autorotateanimation ; 
  animation-timeline : view() ;
}

/* type 2 auto show */

@keyframes autoshowanimation  { 
  from { 
    opacity: 0 ; 
    transform: translateY(200px) scale(0.3);
  }
  to { 
    opacity: 1 ; 
    transform: translateY(0) scale(1) ; 
  }
}

.autoshow { 
  animation: autoshowanimation both ; 
  animation-timeline: view() ;
  animation-delay: 5s;
}

.autoshow2 { 
  animation: autoshowanimation both ; 
  animation-timeline: view(70% 5%) ;
  animation-delay: 0s;
}

.autoshow3 { 
  animation: autoshowanimation both ; 
  animation-timeline: view(70% 5%) ;
  animation-delay: 1s;
}

.image-hover { 
  position: relative;
  transform: scale(1);
}
.image-hover:hover { 
  position: absolute;
  transform: scale(1.2);
}


/* type 3 auto blur */

@keyframes autobluranimation { 
  0% { 
    filter: blur(40px);
  }
  10% { 
    filter: blur(30px);
  }
  20% { 
    filter: blur(20px);
  }
  30% { 
    filter: blur(10px) ; 
  }
  40% { 
    filter: blur(5px);
  }
  45%,55% { 
    filter: blur(0px);
  }
  100% { 
    filter: blur(0px);
  }
}

.autoblur { 
  animation: autobluranimation linear both ;
  animation-timeline : view()
}

/* type4 shake */
@keyframes shake { 
  0% ,100%{ 
    transform: translate(0px);
  }
  10% , 30% , 50% , 70% { 
    transform: translate(-10px);
  }
  80% { 
    transform: translate(8px);
  }
  100% { 
    transform: translate(-8px);
  }
}

.shake { 
  animation: shake 1s infinite ;
}

/* type5 background animation */

@keyframes bganimation { 
  from { 
    background-size: 110% 110% ;
  }
  to { 
    background-size: 100% 100% ;
  }
}

.backgroundanimation { 
  background-position: center center  ; 
  animation: bganimation 5s  infinite alternate;
}


/* type6 textanimation */

@keyframes textanimation{ 
  from { 
    transform: translateX(-200px) scale(0.3);
  }
  to { 
    transform: translateX(0px) scale(1);
  }
}

.textanimation { 
  animation: textanimation both; 
  animation-timeline: view(70% 5%);
}

/* type7 textanimation2 */

@keyframes textanimation2{ 
  0% { 
    transform: translateX(-600px) scale(1);
  }
  45% , 50% { 
    transform: translateX(0px) scale(1);
  }
  70% { 
    transform: translateX(300px) scale(0.5);
  }
  100% { 
    transform: translateX(500px) scale(0) ; 
  }
}

.textanimation2 { 
  animation: textanimation2 both; 
  animation-timeline: view();
}

/* type8 lineanimation */


/* .visionmission  { 
  /* border-right: 2px solid black;
} */ 

/* @keyframes scaleProgress{ 
  0% { 
    transform: scaleY(0);
  }
  45%,50% { 
    transform: scaleY(0.5);
  }
  100% { 
    transform: scaleY(1);
  }
}

@keyframes colorchange { 
  0% { 
    background-color: white ;
  }
  25% { 
    background-color: rgb(185, 185, 185);
  }
  50% { 
    background-color: rgb(125, 125, 125);
  }
  75% { 
    background-color: rgb(75, 75, 75);
  }
  100% { 
    background-color: black;
  }
}

.lineanimation { 
  animation: scaleProgress both , colorChange both;
  animation-timeline: view();
} */


/* @keyframes lineanimation{ 
  0% { 
    transform: translateY(200px) scaleY(0.3);
  }
  45%,50% { 
    transform: translateY(100px) scaleY(0.5);
  }
  100% { 
    transform: translateY(0px) scaleY(1);
  }
}

.lineanimation { 
  animation: lineanimation both;
  animation-timeline: view();
} */


.vl { 
  position: relative;
}
.vl::before { 
  content: '';
  width: 3px;
  height: 2px;
  display: block;
  background-color: #3A387A;
  position: absolute;
  right: 50px;
  top: 5px;
  animation: vl both;
  animation-timeline: view(30% 0% ) ;
}



@keyframes vl { 
  from { 
    transform: scaleY(0);
    height: 0px;
  }
  to { 
    transform: scaleY(1);
    height: 450px;
  }
}

/* @keyframes vl{ 
  0% { 
    transform:  scaleY(0) ; 
    height: 45px; 
  }
  10% { 
    transform: scaleY(0.1);
    height: 90px;
  }
  20% { 
    transform: scaleY(0.2);
    height: 135px;
  }
  30% { 
    transform: scaleY(0.3);
    height: 180px;
  }
  40% { 
    transform: scaleY(0.4);
    height: 225px;
  }
  50% { 
    transform: scaleY(0.5);
    height: 270px;
  }
  60% { 
    transform: scaleY(0.6);
    height: 315px;
  }
  70% { 
    transform: scaleY(0.7);
    height: 360px;
  }
  80% { 
    transform: scaleY(0.8);
    height: 405px;
  }
  90% { 
    transform: scaleY(0.9);
    height: 450px;
  }
  100% { 
    transform: scaleY(1);
    height: 450px;
  }
} */

body { 
  position: relative;
}

svg.squiggle { 
  position: absolute;
  top: 0px;
  left: 100px;
  right: 0;
  width: 100vw;
  height: 200vw;
  z-index: -1;
  margin-left: -9.25%;
  
}

svg.squiggle path{ 
  stroke: #2E2C74;
  stroke-width: 0.5rem;
}


@keyframes autowidth {
  from { 
    width: 0%;
  }
  to { 
    width: 100%;
  }
}

.autowidth { 
  animation: autowidth;
  animation-timeline: view();
  animation-delay: 1s;
}

.item { 
  transition: .3s;
}

.item:hover { 
  transform: scale(1.2);
  margin-top: 10%;
  margin-right: 10%;
}




.item2 {
  filter: blur(3px);
  transition: .3s;
}

.item2:hover { 
  filter: none;
  transform: scale(0.9);
  margin-top: 10%;
  margin-right: 10%;
}

/* button { 
  position: relative;
  transition: .5s;
}

button:hover { 
  color: black !important;
  background-color: white !important;
}

button:hover:after , button:hover:before { 
  content: '';
  position: absolute;
  height: 110%;
  width: 110%;
  background: conic-gradient(gold, white );
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 10px;
}

button:hover:before { 
  filter: blur(1.5rem);
  opacity: 0.5;
} */

.pulse { 
  position: absolute;
  top: 36px ;
  right: 33.5px;
  width: 10px;
  height: 10px;
  background-color: #2E2C74;
  border-radius: 50%;
}

.bannersection { 
  position: relative;
}

.pulse span { 
  position: absolute;
  width: 100% ; 
  height: 100% ; 
  background-color: inherit;
  border-radius: inherit;
  opacity: .8;
  animation: pulseanimate 2.5s ease-out infinite;
  animation-delay: calc(1s * var(--i));
}

@keyframes pulseanimate {
  100% { 
    opacity: 0 ;
    transform: scale(4);
  }
}


/* counter animation */
.ev_stations_counter::before {
  font: 800 40px system-ui;
  content: counter(count);
  animation: counter 1s 1  alternate;
  counter-reset: count 70;
}

@keyframes counter {
  0% {
    counter-increment: count 70;
  }
  10% {
    counter-increment: count 7;
  }
  20% {
    counter-increment: count 14;
  }
  30% {
    counter-increment: count 21;
  }
  40% {
    counter-increment: count 28;
  }
  50% {
    counter-increment: count 35;
  }
  60% {
    counter-increment: count 42;
  }
  70% {
    counter-increment: count 49;
  }
  80% {
    counter-increment: count 56;
  }
  90% {
    counter-increment: count 63;
  }
  100% {
    counter-increment: count 70;
  }
}