*{margin: 0%;padding: 0%;box-sizing: border-box;}
@font-face {
    font-family: servic;
    src: url(FengardoNeue_Black.otf);
}
@font-face {
    font-family: icon;
    src: url(Swiss721BoldBT.ttf);
}
@font-face {
    font-family: 'MyPersianFont';
    src: url('BYekan+.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
p{font-family: icon, 'MyPersianFont'و Tahoma, Arial, sans-serif;
    direction: rtl;
    unicode-bidi: embed;}

.balabck{width: 100%;height: 50vh;}
.pass1{background-color: rgb(35, 31, 32);width: 100%;height: 120vh;}
.logo{z-index: 1;top: 1vh;position: absolute;width: 23%;left: 38.5%;}
.l23calp{z-index: 4;position: absolute;top: 16vh;left: 9%;;width: 4.8vh;touch-action:none;}
.l23calp2{z-index: 2;}
.jsvgscalpbalap{position: relative;bottom: 6vh;left: 29%;z-index: 13;overflow-x: hidden;
    white-space: nowrap;width:45%;height: auto;}
    .image-scalpbalap{max-width: 10%;max-height: 5%;z-index: 13;
        vertical-align: top;}
    .Layer_scalpbalap {
        z-index: 3;
        width: 45%; /* 225px / 2 */
        height: auto; /* 225px / 2 */z-index: 13;
    
    }
    .image-scalpbalakh{width: 10.2vh;z-index: 5;height: auto;}
    .Layer_scalpbalakh{
        position: absolute;
        top: 16vh;left: 9%;
        z-index: 5;
    
      }
      .my-svg-image {
        z-index:2;
        width: 20%
          }
          .Layer_1{
            position: absolute;
            top: 9vh;
            left: 59%;
            z-index: 15;
          }
          .my-svg-image2 {

            z-index: 99;
            width: 7.8%; 
          }
          .Layer_ghotbv2{    position: absolute;
            top: 16vh; 
            left: 82.5%;
            z-index: 15;
        }
        .image-ghotbv{
            z-index:2;
            width: 10%; 
        }
          #adamv{z-index:2;}
          .Layer_2{position: absolute;top: 16.9vh; left: 59%; z-index: 15;}
          .testch{left: 61.5%;top: 9.3vh;}
.testr{left: 56.5%;top: 8.3vh;}


      .scalphover{left: 5%;top: 16.2vh;width: 17.6%;;height: 9.5vh;position: absolute;z-index: 13;}
      .drophover{width: 13.7%;;height: 9.5vh;;position: absolute;top: 16vh;left: 31.5%;z-index: 13;}
      .abouthover{width: 11.5%;left: 57.5%;z-index: 99;}
      .conthover{width: 14%;left: 80.5%;z-index: 99;}
.bainscalp{width: 7%;height: 5vh;background-color:rgb(35, 31, 32);position: absolute;top: 13vh;left: 4%;z-index: 3;transform: rotate(135deg);}
.bainscalpsel{top: 7.8vh;left: 28.7%;}
.baindrop{position: absolute;background-color: rgb(35, 31, 32);top: 16vh;width: 9%;height: 6vh;z-index: 2;left: 34%;}

.iconbala{color: #bdb94f;z-index:3;position: absolute;top: 16vh;;height: auto;left: 35%;width: 7%;}
.pbala{font-size: 1.5vh;color: rgb(189, 185, 97);z-index: 2;position: absolute;}
.peng{font-size: 1.5vh;color: rgb(189, 185, 97);z-index: 2;position: absolute;top: 3vh;right: 2vh;font-family: icon;}

.pbalazi{font-size: 1.5vh;color: white;z-index: 5;position: absolute;top: 22vh;font-family: icon;}
.pms{left:5.5%}
.pmat{left:31%}
.pabout{left:58.3%}
.pcont{right: 6.5%;}
.morab{z-index: 4;position: absolute;transform: rotate(45deg);width: 0.3vh;height: 0.3vh;background-color: rgb(97, 94, 51);top: 25vh;border-radius: 50%}
.morab1{top: 15vh;right: 5%;height: 0.7vh;width: 0.7vh;background-color: rgb(189, 185, 97);border-radius: 0%}
.morab2{top: 15vh;left: 5%;height: 0.7vh;width: 0.7vh;background-color: rgb(189, 185, 97);border-radius: 0%}
.morab31{left: 13.5%;}
.morab32{left: 38%;}
.morab33{left: 63%;}
.morab34{left: 87%;}
.morabj{background-color: rgb(189, 185, 97);
    overflow-x: hidden;
    animation-name: morabj;width: 0.56vh;height: 0.56vh;}
.acs{z-index: 3;position: absolute;top: 21vh;left: 9%;;width: 6vh;touch-action:none;}
.acshead{width: 100%;;z-index: 2;position: absolute;top: 29vh;}


.butmorsel{width: 55%;height: 7.2vh;;position: absolute;top: 61vh;z-index: 14;left: 42.9%;left: 22.5%;}
.butmor{width: 55%;height: 7.2vh;border: 0.5vh solid rgb(189, 185, 97);position: absolute;top: 61vh;z-index: 3;left: 22.5%;border-radius: 2%;}

.psing{color: white;font-size: 2vh;font-weight: bolder;z-index: 3;position: absolute;top: 1.9vh;left: 17.5%;font-weight: bolder;font-family: servic;}
.padresen{z-index: 2;color: white;font-size: 2em;position: absolute;top: 74vh;left: 35%;}
.pnumber{z-index: 2;color: white;font-size: 2em;position: absolute;top: 81vh;left: 39%;}
.social1{position: absolute;top: 89.5vh;font-size: 3em;color: #ffffff;z-index: 3;}
.telegram1{left: 37%;}
.insta1{left: 48%;}
.face1{left: 59%;}
.charkh{position: absolute;top:90vh;width: 100%;height: auto;z-index: 0;}
.pass2{background-color: #ffffff;width: 100%;height: 120vh;z-index:1;position: absolute;top: 96vh;}

.aab{position: absolute;top: 85vh;width: 100%;z-index: 2;}
.MICROSCALP2{position: absolute;top: 114vh;font-size: 5em;z-index: 3;font-weight: bolder;right: 30%;font-family: servic;color: rgb(35, 31, 32);}

.fasledelete{position: absolute;top: 197vh;left: 25%;height: 5vh;width: 5%;z-index: 7;}

.khatbozorg{z-index: 2;width: 42%;height: auto;position: absolute;top: 130vh;right: 55%;transform: rotate(180deg);}
.star{z-index: 2;position: absolute;top: 129vh;font-size: 2vh;right: 0;}
.whatmicro{position: absolute;font-size: 2.9em;z-index: 2;font-weight: bolder;font-family: servic;color: rgb(35, 31, 32);top: 129vh;right: 8%;}
.star2{top: 149vh;}
.whatisjav{font-size: 2.4em;z-index: 2;color: rgb(35, 31, 32);top: 135vh;position: absolute;right: 6%;}
.khatbozorg2{top: 150vh;}
.repetq{top: 149vh;}
.repeatq{font-size: 2.4em;z-index: 2;font-family: servic;color: rgb(35, 31, 32);top: 156vh;position: absolute;right: 6%;}
.javab1repeat{font-size: 2.4em;z-index: 2;color: rgb(35, 31, 32);top: 160vh;position: absolute;right: 6%;}
.repeatq2{top: 171vh;}
.javab2repeat{top: 177vh;}
.repeatq3{top: 187vh;}
.javab3repeat{top: 191vh;}
.repeatq4{top: 198vh;}
.javab4repeat{top: 202vh;}

.pass31{background-color: rgb(35, 31, 32);width: 73%;height: 250vh;position: absolute;top: 221vh;left: 13.5%;}
.pass32{width: 100%;height: 247vh;left: 0;top: 228vh;}
.tarhbalamaterial{position: absolute;top: 214.6vh;z-index: 2;width: 32%;height: auto;left: 34%;}
.khatsorkh{z-index: 1;width: 17%;position: absolute;left: 26%;top: 230vh;}
.khatsorkh2{left: 58.5%;transform: rotate(180deg);}
.tattopenbala{position: absolute;top: 227vh;left: 43.5%;z-index: 2;width: 13%;height: auto;transform: rotate(315deg);}
.khatsefiidmate{width: 0.4%;height: 10vh;position:absolute;top: 236vh;left: 49.8%;z-index: 1;background-color: #ffffff;border-radius: 25%;}
.MATERIAL{top: 238vh;left: 33%;color: rgb(255, 255, 255);}
.rangpeak{z-index: 2;position: absolute;top: 250vh;left: 10%;height: auto;width: 80%
}
.circlematerialch{z-index: 1;width: 9.5vh;height: 9.5vh;border-radius:50%;border: 0.15vh solid rgb(189, 185, 97);;position: absolute;top: 288vh;justify-content: center;}
.feleshmaterialch{z-index: 1;width: 6.5vh;height: auto;position: absolute;top: 3.8vh;}
.circlematerialr{right:1%;}
.feleshmaterialr{left: 13%;transform: rotate(180deg);}
.feleshoncr{z-index: 12;width: 9.5vh;height: 9.5vh;border-radius:50%;;position: absolute;top: 288vh;}
.organicmaterial{top: 295vh;left: 27%;color: rgb(255, 255, 255);}
.organicmaterialcolor{top: 300vh;right: 40%;color: rgb(255, 255, 255);}
.nanomaterial{top: 298vh;right: 10%;}
.disposable{top: 303vh;right: 16%;}
.machine{right: 16%;top: 298vh;left: 0%;}

.tozihrangm{color: rgb(255, 255, 255);top: 308vh;left: 8%;right: 8%;}
.tozihsoozan{top: 312vh;}
.tozihmachin{top: 308vh;}
.soozanpeak{z-index: 2;position: absolute;top: 250vh;left: 15%;height: auto;width: 70%;}
.dastgahpeak{z-index: 2;position: absolute;top: 250vh;left: 23.5%;height: auto;width: 53%;}
.butmor2{top: 325vh;}
.morabmaterial1{top: 342vh;width: 0.7vh;left: 30%;height: 0.7vh;}
.morabmaterial2{top: 342vh;width: 0.7vh;left: 50%;height: 0.7vh;}
.morabmaterial3{top: 342vh;width: 0.7vh;left: 70%;height: 0.7vh;}
.aksinstamaterial{z-index:1;width:13.5%;height: auto;position: absolute;top: 352vh;left: 43.25%;}
.khatarminsta{width: 38%;height: 0.3vh;z-index: 2;position: absolute;top: 353.2vh;background-color: rgb(97, 94, 51);left: 2.5%;}
.khatarminsta2{left: 59.5%;}
.nevinstamaterial{font-size: 2.4em;color: rgb(191, 188, 80);top: 356vh;position: absolute;right:  44%;}
.masalaaksay{width: 100%;height: 50%;position: absolute;top: 362vh;background-color: rgb(35, 31, 32);z-index: 1;}
.feleshmaterial-paiin{z-index: 2;width: auto;height: 9vh;position: absolute;top: 415vh;left: 48%;}
.pmovetins{font-size: 2.4em;position: absolute;top: 362vh;left: 39%;color: rgb(255, 255, 255);border-bottom: 2px solid #ffffff;z-index: 2;}
.aksdins{position: absolute;top: 367.3vh;left: 10%;width: 80%;height: auto;z-index: 2;}
.charkh-paiin{z-index: 1;position:absolute;top: 419.5vh;width: 100%;height: auto;}
.akszeirfelmat{z-index: 2;position: absolute;top: 429vh;width: 100%;height: auto;}
.graydelete{width: 100%;height: 8vh;z-index: 1;background-color: rgb(192, 192, 192);position: absolute;top: 469vh;background-color: black;}

.pass4{background-color: #ffffff;width: 100%;height: 250vh;position: absolute;top: 480vh;}
.editpass41{background-color: rgb(255, 255, 255);width: 49.9%;height: 10vh;position: absolute;top: 475vh;z-index: 2;left: 49.9%;transform: rotate(-2deg);
    border-top-left-radius: 19%;}
.editpass42{background-color: rgb(255, 255, 255);width: 50%;height: 10vh;position: absolute;top: 475vh;z-index: 2;left: 0;
border-top-right-radius: 19%;transform: rotate(2deg);}
.navarabout{background-color: rgb(35, 31, 32);width: 100%;height: 6.5vh;position: absolute;top: 485.5vh;z-index: 3;}
.pnavaboutus{top: 1vh;z-index: 3;right: 39%;color: rgb(255, 255, 255);}
.akstabloaboutus{position: absolute;top: 492vh;width: 40%;height: auto;left: 30%;}
.peducation{position: absolute;top: 494.5vh;font-size: 2.4em;font-weight: bolder;right: 44%;z-index: 1;}
.madarekavalm1{position: absolute;top: 503vh;width: 30%;height: auto;left: 35%;transform: rotate(270deg);}
.madarekavalk1{position: absolute;top: 503vh;width: 50%;height: auto;left: 25%;}

.pmadrakaval{top: 523vh;font-weight: bolder;right: 18%}
.madarekavalm2{top: 529vh;}
.pmadrakdovom{top: 549vh;font-weight: bolder;right: 18%}
.madarekavalm3{top: 556vh;transform: rotate(0deg);}
.pmadraksevom{top: 577vh;font-weight: bolder;right: 36%}
.madarekavalm4{top: 582vh;transform: rotate(0deg);}
.pmadrakchar{top: 604vh;font-weight: bolder;right: 41%}
.ghotbnamad{position: absolute;top: 612vh;width: 45%;height: auto;left:27.5%;}
.ghotbnamav{left:27.5%;}

.pmadrakavalmast{top: 524vh;right: 27.5%;}
.pmadrakaval2022{top: 527vh;right: 45%;}

.pcontact{top: 637vh;right: 36%;}
.shomarecont{top: 647vh;left: 25%;position: absolute;font-size: 5em;font-weight: bolder;color: rgb(35, 31, 32);}
.social2{position: absolute;top: 660vh;font-size: 3vh;color: #231f20;}
.khatzirsocial2{background-color: rgb(241, 240, 218);width: 6%;height: 0.2vh;top: 664.5vh;left: 37%;position: absolute;}
.khatzirsocial21{left: 48%;}
.khatzirsocial22{left: 59%;}
.map{position: absolute;top: 672vh;width: 100%;height: auto;}
.zarbdarcont11{position: absolute;top: 690vh;left: 55%;background-color: #bdb94f;width: 5%;height: 0.5vh;transform: rotate(45deg);}
.zarbdarcont12{transform: rotate(-45deg);}
.maplogo{position: absolute;top: 715vh;width: 11%;height: auto;left: 44.5%;}
.khatzirmap{top: 721.3vh;left: 44.75%;width: 10.5%;}
.targetElementdas{width: 80%;height: 37vh;left: 10%;position: absolute;top: 247vh;z-index: 99;}
.colorgtz{
    animation-name: colorgtz;background-color: #bdb94f;
}    @keyframes colorgtz
{
    0%{background-color: rgb(97, 94, 51);}
    100%{background-color: #bdb94f;}
}
.colorztg{
    animation-name: colorztg;
}    @keyframes colorztg
{
    0%{background-color: #bdb94f}
    100%{background-color: rgb(97, 94, 51);}
}
.moveleft-left{
    overflow-x: hidden;
    animation-name: moveleft-left;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: inherit;
    animation-delay:0s;}

    @keyframes moveleft-left
{
    0%{left: 55%;top: 255vh;width: 40%;opacity: 0;}
    100%{left: 15%;top: 250vh;width: 70%;opacity: 1;}
}
.moveleft-left-nano{
    overflow-x: hidden;
    animation-name: moveleft-left-nano;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: inherit;    white-space: pre; 
    animation-delay:0s;}

    @keyframes moveleft-left-nano
{
    0%{        transform: translateX(7%);color: rgb(35, 31, 32);}
    100%{        transform: translateX(0);color: rgb(255, 255, 255);}
}

.moveleft-left-tozisoz{
    position: absolute;
    left: 8%;
    top: 312vh; /* مستند به صفحه شما */
    animation-name: move-left-tozisoz;
    animation-duration: 0.5s;
    animation-timing-function: ease;
}

@keyframes move-left-tozisoz {
    0% { transform: translateX(7vw); color: rgb(35, 31, 32);}
    100% { transform: translateX(0); color: rgb(255, 255, 255);}
}
.moveleft-left-tozimash{
    position: absolute;
    left: 8%;
    top: 308vh; /* مستند به صفحه شما */
    animation-name: moveleft-left-tozimash;
    animation-duration: 0.5s;
    animation-timing-function: ease;
}

@keyframes moveleft-left-tozimash {
    0% { transform: translateX(7vw); color: rgb(35, 31, 32);}
    100% { transform: translateX(0); color: rgb(255, 255, 255);}
}
.moveleft-left-tozirang{
    position: absolute;
    left: 8%;
    top: 308vh; /* مستند به صفحه شما */
    animation-name: moveleft-left-tozirang;
    animation-duration: 0.5s;
    animation-timing-function: ease;
}

@keyframes moveleft-left-tozirang {
    0% { transform: translateX(7vw); color: rgb(35, 31, 32);}
    100% { transform: translateX(0); color: rgb(255, 255, 255);}
}
.moveleft-left2{
    overflow-x: hidden;
    animation-name: moveleft-left2;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: inherit;
    animation-delay:0s;}

    @keyframes moveleft-left2
{
    0%{left: 55%;top: 255vh;width: 40%;opacity: 0;}
    100%{left: 23.5%;top: 250vh;width: 53%;;opacity: 1;}
}
.moveleft-left3{
    overflow-x: hidden;
    animation-name: moveleft-left3;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: inherit;
    animation-delay:0s;}

    @keyframes moveleft-left3
{
    0%{left: 55%;top: 255vh;width: 40%;opacity: 0;}
    100%{left:10%;top: 250vh;width: 80%;;opacity: 1;}
}
@keyframes moveleft
{
    0%{left: 14%;opacity: 1;}
    100%{left: 5%;opacity: 0;}
}

.move-left{animation-name: moveleft;
    animation-duration: 0.41s;
    animation-iteration-count: 1;
    animation-timing-function: inherit;
    animation-delay:0s;}

    .move-left-organ{
        overflow-x: hidden;
        animation-name: move-left-organ;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-timing-function: inherit;
        animation-delay:0s;}
    
        @keyframes move-left-organ
    {
        0%{left: 27%;color: rgb(255, 255, 255);}
        100%{left:20%;color: rgb(35, 31, 32);}
    }
    .move-left-organ2{
        overflow-x: hidden;
        animation-name: move-left-organ2;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-timing-function: inherit;
        animation-delay:0s;}
    
        @keyframes move-left-organ2
    {
        0%{left: 39%;color: rgb(255, 255, 255);}
        100%{left:32%;color: rgb(35, 31, 32);}
    }
    .move-left-tozir {
        animation-name: move-left-tozir;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-timing-function: inherit;
        animation-delay: 0s;

        transform: translateX(0%); /* موقعیت اولیه */
        transition: transform 0.5s ease-in-out;  /* برای حالت ثابت */
    }
    
    @keyframes move-left-tozir {
        0% {
            transform: translateX(0%);
            color: rgb(255, 255, 255);
        }
        100% {
            transform: translateX(-7%);
            color: rgb(35, 31, 32);
        }
    }
    .move-left-nano {
        animation-name: move-left-nano;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        position: absolute;

      }

      
      @keyframes move-left-nano {
          0% {transform: translateX(0);color: rgb(255, 255, 255)}
          100% {transform: translateX(0%);color: rgb(35, 31, 32);}
      }
      .move-left-nano2 {
        animation-name: move-left-nano2;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        position: absolute;

      }

      
      @keyframes move-left-nano2 {
          0% {transform: translateX(0);color: rgb(35, 31, 32)}
          100% {transform: translateX(0%);color: rgb(255, 255, 255);}
      }
      .move-left-tozisoz2 {
        animation-name: move-left-tozisoz2;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        position: absolute;

      }

      
      @keyframes move-left-tozisoz2 {
          0% {transform: translateX(0);color: rgb(255, 255, 255)}
          100% {transform: translateX(-7%);color: rgb(35, 31, 32);}
      }
    .move-right-sr {
        animation-name: move-right-sr;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        position: absolute;

      }
      
      @keyframes move-right-sr {
          0% { transform: translateX(0); opacity: 1; }
          100% { transform: translateX(20vw); opacity: 0; }
      }
      .move-right-nano {
        animation-name: move-right-nano;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        position: absolute;

      }

      
      @keyframes move-right-nano {
          0% {transform: translateX(0);color: rgb(255, 255, 255)}
          100% {transform: translateX(7%);color: rgb(35, 31, 32);}
      }
      .move-right-tozisoz {
        animation-name: move-right-tozisoz;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        position: absolute;

      }

      
      @keyframes move-right-tozisoz {
          0% {transform: translateX(0);color: rgb(255, 255, 255)}
          100% {transform: translateX(7%);color: rgb(35, 31, 32);}
      }
      .move-left-right{
        overflow-x: hidden;
        animation-name: move-left-right;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-timing-function: inherit;
        animation-delay:0s;}
    
        @keyframes move-left-right
    {
        0%{  opacity: 0; transform: translateX(-10vw);width: 42%;top: 255vh;}
        100%{opacity: 1; transform: translateX(0vw);width: 80%;top: 250vh;}
    }
    .move-left-right-organ {
        animation-name: move-left-right-organ;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        position: absolute;

      }

      
      @keyframes move-left-right-organ {
          0% {transform: translateX(-7%);color:  rgb(35, 31, 32)}
          100% {transform: translateX(0%);color: rgb(255, 255, 255);}
      }
    .move-left-right2{
        overflow-x: hidden;
        animation-name: move-left-right2;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-timing-function: inherit;
        animation-delay:0s;}
    
        @keyframes move-left-right2
    {
        0%{  opacity: 0; transform: translateX(-15vw);width: 42%;top: 255vh;}
        100%{opacity: 1; transform: translateX(0vw);width: 70%;top: 250vh;}
    }
    .move-left-right3{
        overflow-x: hidden;
        animation-name: move-left-right3;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-timing-function: inherit;
        animation-delay:0s;}
    
        @keyframes move-left-right3
    {
        0%{  opacity: 0; transform: translateX(-20vw);width: 42%;top: 255vh;}
        100%{opacity: 1; transform: translateX(0vw);width: 53%;top: 250vh;}
    }

@keyframes morabj
{
    0%{width: 0.3vh;height: 0.3vh;background-color: rgb(97, 94, 51)}
    100%{width: 0.56vh;height: 0.56vh;background-color: rgb(189, 185, 97);}
}
.morabjback{background-color: rgb(97, 94, 51);
    overflow-x: hidden;
    animation-name: morabjback;}
@keyframes morabjback
{
    0%{width: 0.56vh;height: 0.56vh;background-color: rgb(189, 185, 97);}
    100%{width: 0.3vh;height: 0.3vh;background-color: rgb(97, 94, 51)}
}
.movebainscalp{
    animation-name: movebainscalp;top: 14.5vh;left: 7%;
}
@keyframes movebainscalp
{
    0%{top: 13vh;left: 4%;}
    100%{top: 14.5vh;left: 7%;}
}
.movebainscalpback{
    animation-name: movebainscalpback;
}
@keyframes movebainscalpback
{
    0%{top: 14.5vh;left: 7%;}
    100%{top: 13vh;left: 4%;}
}
.pmatc{animation-name: pmatc;
    animation-duration: 1.1s;
    animation-iteration-count: 1;
    animation-timing-function: inherit;
    animation-delay:0s;
color: rgb(123, 121, 120);}
    @keyframes pmatc{
        0%{color: #ffffff;}
        100%{color: rgb(123, 121, 120);}
    }
.pmatcback{animation-name: pmatcback;
        animation-duration: 1.1s;
        animation-iteration-count: 1;
        animation-timing-function: inherit;
        animation-delay:0s;
    color: white;
    }
    @keyframes pmatcback{
        0%{color: rgb(123, 121, 120);}
        100%{color: #ffffff;}
    }

.movebaindrop{
        animation-name: movedrop;top: 21vh;

    }
    @keyframes movedrop{
        0%{top: 16vh;}
        100%{top: 21vh;}
    }
.moveBACKbaindrop{    animation-name: movebackdrop;
}
        @keyframes movebackdrop{
            0%{top: 21vh;}
            100%{top: 16vh;}
        }

        
.moveadamch{
    animation-name: moveadamch;

}    @keyframes moveadamch{
    0%{left: 61.5%;top: 9.3vh;}
    60%{left: 59%;top: 9vh;}
    100%{left: 59%;top: 9vh;}
}
.moveadamr{
    animation-name: moveadamr;

}    @keyframes moveadamr{
    0%{left: 56.5%;top: 8.3vh;}
    60%{left: 59%;top: 9vh;}
    100%{left: 59%;top:9vh;}
}
.moveadamchback{
    animation-name: moveadamchback;

}    @keyframes moveadamchback{
    0%{left: 59%;top: 9vh;}
    60%{left: 61.5%;top: 9.3vh;}
    100%{left: 61.5%;top: 9.3vh;}
}
.moveadamrback{
    animation-name: moveadamrback;

}    @keyframes moveadamrback{
    0%{left: 59%;top:9vh;}
    60%{left: 56.5%;top: 8.3vh;}
    100%{left: 56.5%;top: 8.3vh;}
}
.balamoshghotbv{
    animation-name: balamoshghotbv;
transform: rotate(45deg);
}
@keyframes balamoshghotbv{
    0%{transform: rotate(0);}
    80%{transform: rotate(45deg);}
    100%{transform: rotate(45deg);}
}
.balamoshghotbvback{
    animation-name: balamoshghotbvback;

}
@keyframes balamoshghotbvback{
    0%{transform: rotate(45deg);}
    80%{transform: rotate(0deg);}
    100%{transform: rotate(0deg);}
}

.balamoshghotbd{
    animation-name: balamoshghotbd;transform: rotate(15deg);
}
@keyframes balamoshghotbd{
    0%{transform: rotate(0);}
    80%{transform: rotate(15deg);}
    100%{transform: rotate(15deg);}
}
.balamoshghotbdback{
    animation-name: balamoshghotbdback;

}
@keyframes balamoshghotbdback{
    0%{transform: rotate(15deg);}
    80%{transform: rotate(0deg);}
    100%{transform: rotate(0deg);}
}

.ghotbnamav{
    animation-name: ghotbv;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: inherit;
    animation-delay:0s;}
    @keyframes ghotbv
{
    0%{transform: rotate(0deg);}
    5%{transform: rotate(-5deg);}
    15%{transform: rotate(5deg);}
    25%{transform: rotate(-7deg);}
    35%{transform: rotate(0deg);}
    40%{transform: rotate(3deg);}
    45%{transform: rotate(-2deg);}
    50%{transform: rotate(2deg);}
    57%{transform: rotate(6deg);}
    65%{transform: rotate(-7deg);}
    70%{transform: rotate(-3deg);}
    80%{transform: rotate(-5deg);}
   90%{transform: rotate(2deg);}
   95%{transform: rotate(5deg);}
   100%{transform: rotate(0deg);}
}

.ghotbnamadmove{
    animation-name: ghotbnamadmove;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: inherit;
    animation-delay:0s;
}
@keyframes ghotbnamadmove
{
    0%{transform: rotate(0deg);}
    16.66%{transform: rotate(2deg);}
    33.33%{transform: rotate(-3deg);}
    49.99%{transform: rotate(0deg);}
    66.66%{transform: rotate(-3deg);}
    83.33%{transform: rotate(3deg);}
   100%{transform: rotate(0deg);}
}


.moveall{

        animation-duration: 1.1s;
        animation-iteration-count: 1;
        animation-timing-function: inherit;
        animation-delay:0s;}



        /* Styles for mobile 's' (320px) */