#line2 {
	animation: pulse 10s infinite;
}


@keyframes pulse {
0% { opacity: 0; }
25% { opacity: 1; }
50% { opacity: 0; }
75% { opacity: 1; }
100% {opacity: 0;}
}

#line2:before {
	content: "";
	animation: swap1 10s linear infinite;
	font-weight:600;
}


#line2:after {
    font-weight:600;
	content: "";
	animation: swap2 10s linear infinite;

}


@keyframes swap1 {
  0% { content:"Arshire is dedicated"; }
  100% { content:"Create"; }
}

@keyframes swap2 {
  0% { content:"to web & mobile"; }
  100% { content:"high quality digital products"; }
}


.imagegroup {
   display: flex;
   width: 95%;
  }

.imagegroup img{
  flex-shrink: 0;
  object-fit: cover;
  margin:2% 3%;
  width:12%;
}

.imagegroup {
   animation: travel 30s linear infinite;
  }

@keyframes travel {
   0%{
      transform: translate3d(0,0,0);
    }
   100% {
      transform: translate3d(-100%,0,0);
    }
 }

.button-white2{background-color: #2c2c2c;color: #fff;transition: 0.3s ease-in-out;border:none;}

.button-white2:hover{background-color: #fff;color: #2c2c2c;transition: 0.3s ease-in-out;}

.moveleftbottom {  
animation: leftbottom 6s ease infinite;}

@keyframes leftbottom{
  0%,100%{ transform: translate(0);}
  50% {transform: translate(42px, 18px);}
 }


.moverightbottom {  
animation: rightbottom 6s ease infinite;}

@keyframes rightbottom{
  0%,100%{ transform: translate(0);}
  50% {transform: translate(-42px, 18px);}
 }


img.shining { -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 0;
    mask-position: 0;
	animation: shining22 3s ease infinite;}

@keyframes shining22{
  50% {transition: mask-position 2s ease,
       -webkit-mask-position 2s ease;
        -webkit-mask-position: 120%;
      mask-position: 120%;
    opacity: 1;}
 }

.p1_hole{
    animation-name: rotate;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.p2_hole{
    animation-name: rotate;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.p3_hole{
    animation-name: rotate;
    animation-duration: 90s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.p4_hole{
    animation-name: rotate;
    animation-duration: 120s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {0% {transform: rotate(0)} 100% {transform: rotate(360deg);}}



.comet1{
  animation-name: comet1_;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes comet1_ {
    0% {opacity: 0;left:400px;top:0px;} 
   25% {opacity: 1;left:300px;top:70px;}
   50% {opacity: 0;left:250px;top:111px;}
  100% {opacity: 0;left:250px;top:111px;}
}

.comet2{
  animation-name: comet2_;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
  opacity: 0;
}

@keyframes comet2_ {
    0% {opacity: 0;left:150px;top:0px;} 
   25% {opacity: 1;left:80px;top:60px;}
   50% {opacity: 0;left:70px;top:70px;}
  100% {opacity: 0;left:70px;top:70px;}
}

.comet3{
  animation-name: comet3_;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 1s;
  opacity: 0;
}

@keyframes comet3_ {
    0% {opacity: 0;left:100px;top:-50px;} 
   25% {opacity: 1;left:50px;top:0px;}
   50% {opacity: 0;left:20px;top:30px;}
  100% {opacity: 0;left:20px;top:30px;}
}

.comet4{
  animation-name: comet4_;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
  opacity: 0;
}

@keyframes comet4_ {
    0% {opacity: 0;left:90px;top:-20px;} 
   25% {opacity: 1;left:40px;top:30px;}
   50% {opacity: 0;left:10px;top:60px;}
  100% {opacity: 0;left:10px;top:60px;}
}



.star1{
  animation-name: star1;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
  opacity: 0;
}

.star2{
  animation-name: star1;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 2s;
  opacity: 0;
}

.star3{
  animation-name: star1;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 3s;
  opacity: 0;
}

.advantage_bk {background-color:#333;border-top-left-radius:25px;border-bottom-right-radius:25px;}


@keyframes star1 {
      0% {opacity: 0;transform: rotate(0);} 
     50% {opacity: 1;transform: rotate(180deg);}
    100% {opacity: 0;transform: rotate(360deg);}
}


@media(max-width: 767px)
{
  .a1{min-height:500px !important;}
  .a2{width: 100%;display: block;}
  .a21{width: calc(100% - 32px);padding: 0px 16px 0px 16px;justify-content:flex-start;align-items:flex-start;position: absolute;left:0px;top: 0px;z-index: 2;}

  .a211{font-size: 34px;}
  .a211_1{font-size: 34px;}
  .a211_2{font-size: 14px;}
  .a211_3{padding: 30px 0px 0px 0px;}

  .a22{width:100%;padding: 0px 0px 0px 0px;justify-content: flex-end; position: absolute;right:0px;top:120px;}
  .a221{width:360px;}

  
}