.text,.icon{
        opacity: 0;
        animation-name: ani1;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        
    }
.text_rect,.icon{
    cursor: pointer;
}
    .text0,.icon0{
        animation-delay: 2s;
    }
    .text4,.icon4 {
        animation-delay: 2.5s;
    }
    .text3,.icon3 {
        animation-delay: 3s;      
    }
    .text2,.icon2 {
        animation-delay: 3.5s;
    }
    .text1,.icon1 {
        animation-delay: 4s;
    }
    
    .main_svg{
        opacity: 0;
        transform: scale(1) rotate(-50deg);
        animation-fill-mode: forwards;
        box-sizing: initial;
        animation-name: fade;
        animation-duration: 1s;
        animation-delay: 1s;
}
.ani_fil_none{
    animation-fill-mode: none;
}
.start_ele {
        animation-fill-mode: forwards;
        animation-name: ani3;
        animation-delay: 4.5s;
    }
.start_txt{
        opacity: 0;
        animation-name: ani5 , ani4;
        animation-delay: 2s, 4.5s;
}
 @keyframes ani3 {
      0% {
            fill: #d0dbf8;
      }
      100% {
            fill: #abc1ff;
      }
    }

 @keyframes ani5 {
      0% {
           opacity: 0;
      }
      100% {
           opacity: 0.5;
      }
    }
 @keyframes ani4 {
      0% {
           opacity: 0.5;
      }
      100% {
           opacity: 1;
      }
    }
 @keyframes ani1 {
      0% {
          opacity: 0;
          transition: opacity .5s ease-in-out; 
      }
      100% {
          opacity: 1;
          transition: opacity .5s ease-in-out; 
      }
    }

 @keyframes ani2 {
      0% {
          opacity: 0;
            transition: 0.5s all linear;
      }
      100% {
          opacity: 0.3;
            transition: 0.5s all linear;
      }
    }
 @keyframes fade {
      0% {
          opacity: 0;
            transition: 1s all ease-in-out;
            transform: scale(0) rotate(-50deg);
      }
        50%{
            opacity: 1;
            transition: 1s all ease-in-out;
            transform: scale(1) rotate(-50deg);
        }
      100% {
            opacity: 1;
            transition: 2s all ease-in-out;
            transform: scale(1) rotate(0deg);
      }
    }

.hide_me{
     animation: cssAnimation 4.5s forwards;
}
@keyframes cssAnimation {
    0%   {opacity: 1;}
    90%  {opacity: 1;}
    100% {opacity: 0;display: none;}
}

.fill_plum path{
    fill: #7373d8;
    transition: fill .5s ease-in-out; 
}
.fill_plum1 path{
    fill: #7373d8;
    transition: fill .5s ease-in-out; 
}

.image_zoom
{
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: pulse 1s ease-in-out forwards;
    transform: scale(1);
}
.image_zoom1
{
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: pulse 1s ease-in-out forwards;
    transform: scale(0.9);
}
@keyframes pulse{
  0% {
    transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
    10% {
    transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
  }
  100% {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
}

.icon,.hover,.image{
    cursor: pointer;
}
.image{
   
}