/* Global */
*{
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body{
    font-family: "Myriad Pro";
}

body.open{
    position: relative;
    overflow: hidden;
}

.clearfix{
	clear:both;
}

.container{
	margin: 0 180px ;
    position: relative;
    
}

.float-right{
	float: right;
}

.float-left{
	float: left;
}

.center{
	text-align: center;
}

input, button { border:none; }

textarea:focus, input:focus ,button:focus{
    outline: none;
}

ul {
	list-style:none;	
}

a {
    color: inherit;
    text-decoration: none;
}
.active { color:#FAAF3F;}

/* Start */

.hero {
    background-color:#161615;
    width: 100%;
    height: 100vh;
    padding-top: 50px;
    overflow: hidden;
    position: relative;
    background-image: url('../img/pattern2.svg') ;
    background-size: cover;
}

header{
    width: 100%;
}

.hero .logo-box{
    width: 50%;
}

.hero .logo {
    width: 450px;
    padding-left: 180px;
    cursor: pointer;
}

.hero .sections-link {
    width: 50%;
    color: #fff;
    padding: 18px 180px 0 0;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: right;
}


.hero  .twinty-rial{
    position: absolute;
    left: -80px;
    bottom: -80px;
    width: 20%;
    transform: rotate(40deg);
    animation: RotateCoins 60s linear infinite reverse;
}

.hero .half-amwal{
    position: absolute;
    right:0px;
    bottom:0px;
    width: 300px;
    opacity: 0;
}


.hero .half-amwal.start-anmimat{
    animation: YellowBackground 4s linear;
    opacity: 1;

}


@keyframes YellowBackground {

    0% {
        right:-300px;
        bottom:-600px;
    }
    70% {
        right:-300px;
        bottom:-600px;
    }
    100% {
        right:0px;
        bottom:0px;
    }
  
}


.sections-link ul li {
    display: inline;
    text-transform: uppercase;
    margin-left: 45px;
    -moz-transition: all 0.3s ;
    -webkit-transition: all 0.3s ;
    -ms-transition: all 0.3s ;
    -o-transition: all 0.3s ;
    transition: all 0.3s ;
    cursor: pointer;
}

.sections-link ul li:hover{color: #FAAF3F;}


/*small phone menu*/

.xs-menu{
    width: 28px;
    height: 24px;
    float: right;
    left: 20px;
    top: 25px;
    position: absolute;
    z-index: 31;
}

.xs-menu span{
    width: 100%;
    height: 4px;
    background-color: #fff;
    position: absolute;
    -moz-transition: all .5s ;
    -webkit-transition: all .5s ;
    -ms-transition: all .5s ;
    -o-transition: all .5s ;
    transition: all .5s ;
    border-radius: 1px;
}

.xs-menu .line1{top:0;}
.xs-menu .line2{top:10px; background-color: #FAAF3F;}
.xs-menu .line3{top:20px;}

.xs-menu.open .line1{top:10px; background-color:#161615}
.xs-menu.open .line2{top:10px; transform: rotate(50deg); background-color:#161615}
.xs-menu.open .line3{top:10px;  background-color:#161615}

.xs-menu-list{
    position: absolute;
    background-color:#161615ab;
    background-color: #F1F0F7;
    width: 40%;
    height: 100vh;
    left: -100%;
    z-index: 30;
    -moz-transition: all 0.8s ;
    -webkit-transition: all 0.8s ;
    -ms-transition: all 0.8s ;
    -o-transition: all 0.8s ;
    transition: all 0.8s ;
}


.overlay{
    position: absolute;
    background-color:#1616157e;
    width: 100%;
    height: 100vh;
    /* left: -100%; */
    z-index: 29;
    opacity: 0;
    -moz-transition: all 0.3s ;
    -webkit-transition: all 0.3s ;
    -ms-transition: all 0.3s ;
    -o-transition: all 0.3s ;
    transition: all 0.3s ;
}

.overlay.open{opacity: 1;}

.xs-menu-list.open{left: 0%;}

.xs-menu-list .xs-list{
    position: absolute;
    top: 60px;
    width: 100%;
    z-index: 32;
}

.xs-list li{
    font-size: 20px;
    color: #000;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #b3b3b3;
}
    

.hero .main-text {
    width: 50%;
    color: #fff;
    font-size: 23px;
    padding: 15% 0 0 180px;
    height: 90vh;
    position: relative;
}

.hero .main-text h2{
   line-height: 1.5;
   width: 84%;
}


.hero .main-text h2 .hight-light {
   background-image: url('../img/line.svg') ;
   background-repeat: no-repeat;
   background-position: 0px 30px;
}

.hero .man-img {
    width: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}


.hero .fifty-dollar{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 500px;
    opacity: 0;
}


.hero .fifty-dollar.start-anmimat{
    animation: Ulys 1s linear  ;
    opacity: 1;
}





.hero .fifty-dollar .img-for-ulys{
    position: absolute;
    bottom: -10px;
    right: 30px;
    z-index: 4;
    height: 510px;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


.hero .fifty-dollar .img-for-ulys.start-anmimat{
    animation: UlysBigger 4s linear , Shake .7s 1.3s linear  ;
}



.hero .fifty-dollar .img-for-ulys-background{
    position: absolute;
    bottom: -100px;
    right: -470px;
    width:1270px;
    opacity: 0;
    -moz-transition: all 3s ;
    -webkit-transition: all 3s ;
    -ms-transition: all 3s ;
    -o-transition: all 3s ;
    transition: all 3s ;
}

.hero .fifty-dollar .img-for-ulys-background.start-anmimat{
    animation: UlysHidden 3s linear  ;
}



@keyframes Shake {
    0% { transform: translate(-2px, 0px) ; }
    10% { transform: translate(-2px, 0px) ; }
    20% { transform: translate(2px, 0px); }
    30% { transform: translate(-2px, 0px) ; }
    40% { transform: translate(2px, 0px) ; }
    50% { transform: translate(-2px, 0px) ; }
    60% { transform: translate(2px, 0px) ; }
    70% { transform: translate(-2px, 0px); }
    80% { transform: translate(2px, 0px); }
    90% { transform: translate(-2px, 0px) ; }
    100% { transform: translate(2px, 0px) ; }
  }
/* 
@keyframes Shake {
    0% { transform: translate(-4px, 2px) ; }
    10% { transform: translate(-4px, -2px) ; }
    20% { transform: translate(4px, 0px); }
    30% { transform: translate(-4px, 1px) ; }
    40% { transform: translate(4px, -1px) ; }
    50% { transform: translate(-4px, 2px) ; }
    60% { transform: translate(4px, 2px) ; }
    70% { transform: translate(-4px, 1px); }
    80% { transform: translate(4px, -1px); }
    90% { transform: translate(-4px, 0px) ; }
    100% { transform: translate(4px, -2px) ; }
  } */

@keyframes UlysBigger {
    0% {
        height: 340px;

        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
        filter: grayscale(0%);
    }
    50% {
        height: 340px;
        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
        filter: grayscale(0%);
    }
    100% {
        height: 510px;
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }
}


@keyframes UlysHidden {
    0% {opacity: 1;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}


@keyframes Ulys {
    0% {transform: translateX(100%);}
    100% {transform: translateX(0);}
}



.hero .man-img .five-rial{
    position: absolute;
    right: 100px;
    bottom: 200px;
    width: 65px;
    transform: rotate(-40deg);
    opacity: 0;
}

.hero .man-img .five-rial.start-anmimat{
    animation: RotateCoins 20s linear infinite reverse , FiveRight 4s linear;
    opacity: 1;
}



@keyframes FiveRight {
    0% {right: -100px;}
    80% {right: -100px;}
    100% {right: 100px;}
}



.hero .man-img .center-five-rial{
    position: absolute;
    left: -100px;
    bottom: 100px;
    width: 60px;
    transform: rotate(40deg);
    animation: RotateCoins 10s linear infinite reverse ;
}

.hero .man-img .ten-rial{
    position: absolute;
    left:40px;
    bottom: 210px;
    width: 100px;
    transform: rotate(130deg);
    opacity: 0;
}

.hero .man-img .ten-rial.start-anmimat{
    animation: RotateCoins 50s linear infinite, CoinToUp 3s linear;
    opacity: 1;

}


@keyframes CoinToUp {
    0% {bottom: -100px;}
    60% {bottom: -100px;}
    100% {bottom: 210px;}
 }


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

/* About */

.about {
    background-color:#F1F0F7;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    position: relative;
    background-image: url('../img/pattern.svg') ;
    background-size: cover;
}

.about .about-text , .about .about-image {
    width: 50%;
    position: relative;
}

.about .about-text .heading{
    height: 100px;
}

.about .about-text .heading .first-img{
    width: 35%;
} 

.about .about-text .heading .first-img img{
    width: 180px;
} 

.about .about-text .heading .first-heading{
    width: 65%;
    padding: 0px 50px;
    text-transform: uppercase;
} 

.about .about-text .heading .first-heading img{
    width: 20px;
    margin: 20px 0 0px 5px;
}


.about .about-text .heading .first-heading h3{
    font-size: 60px;
    font-weight: normal;
    color: #FAAF3F;
    /* color: #9c691c; */

}


.about .about-text .heading .first-heading p{
    font-size: 13px;
    font-weight: bold;
    color: #7C7874;
}


.about .about-text .heading div img{
    width:100%;
    height: 100%;
    object-fit: cover;
}


.about .about-text article {
    padding-top: 50px;
    font-size: 22px;
    line-height: 1.4;
}

.about .about-text article p{
   margin-bottom: 20px;
   width: 95%;
}

.about .about-text article p span{font-weight: bolder;}


.about .about-image { 
    margin-top: 100px;
    padding-right:40px ;
    position: relative;
}

.about .about-image img { 
    display: block;
    margin-left: auto;
    position: absolute;
    top:50%;
    transform: translate(50%,0);
    width: 60%;
}

.about .about-text .heading.fade , .about .about-text article .fade{
    transform: translateY(200px);
    opacity: 0;
    -moz-transition: all 1s ;
    -webkit-transition: all 1s ;
    -ms-transition: all 1s ;
    -o-transition: all 1s ;
    transition: all 1s ;

}


.about .about-text .heading.fade.arrive , .about .about-text article .fade.arrive{
    transform: translateY(0);
    opacity: 1;

}


/* Vision and Mission */

.vision-mission {
    background-color:#31302E;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    position: relative;
    background-image: url('../img/pattern2.svg') ;
    background-size: cover;

}

.second {
    height: 300px;
    transform: translateY(230px);
    opacity: 0;
    -moz-transition: all 1s ;
    -webkit-transition: all 1s ;
    -ms-transition: all 1s ;
    -o-transition: all 1s ;
    transition: all 1s ;
    
}

.second.arrive{
    transform: translateY(0px);
    opacity: 1;
}

.second:last-child {margin-top: 100px;}

.second .second-img{width: 35%;}

.second .second-img img{
    display: block;
    width: 160px;
}

.second:last-child .second-img img{ margin-left: 25%;}

.second .second-text{width: 65%;}

.second:last-child .second-text{ padding-left: 150px;}

.second .second-text img{
    width: 20px;
    margin-top: 60px;
}

.second .second-text h3{
    margin: 15px 0;
    font-size: 26px;
    color: #FAAF3F;
}

.second .second-text p{
    width: 370px;
    padding-top: 5px;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
}
.second:last-child .second-text p{width: 500px;}

/* Start What we do - service */

.service {
    background-color:#fff;
    width: 100%;
    padding: 100px 0 140px 0;
    overflow: hidden;
    position: relative;
}

.service::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url('../img/service-backgroung.jpg') ;
    background-size: cover;
    opacity: 0.5;
}

.service h2{
     color: #363432;
    margin-bottom: 50px;
}

.service .service-text {
    width: 40%;
    height: 340px;
    overflow: hidden;
}

.service-text-border {
    width: 90%;
    height: 340px;
    overflow: hidden;
    position: relative;
}


 .service .service-text .yellow-sequre {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 7px;
    background-color:#FAAF3F;
} 

.service .service-text p {
    width: 300px;
    font-size: 23px;
    margin-left: 25px;
    line-height: 1.4;
}


.service-text-container {
    position: absolute;
    top: 0;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    -moz-transition: all .5s ;
    -webkit-transition: all .5s ;
    -ms-transition: all .5s ;
    -o-transition: all .5s ;
    transition: all .5s ;
}

.service-text-container.text0 {
    left: 0;
    visibility: visible;
}


.service-text-container.text1{
    left: 100%;
    visibility: visible;
}
   
.service-text-container.text2,
.service-text-container.text3,
.service-text-container.text4 {
    left: 100%;
    visibility: hidden;
   }

.service-text-container.text7{
    left: -100%;
    visibility: visible;
}

.service-text-container.text5,
.service-text-container.text6{
    left: -100%;
    visibility: hidden;
}


.service-text-container.text7{
    left: -200%;
}

/* ///////////////////////////// start  slider /////////////////////////////////////////////// */

.service .service-slider {
    width: 60%;
    height: 380px;
    perspective: 600px;
    overflow: hidden;
}

.service .service-slider .arrows-container{
    position: absolute;
    z-index: 20;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    width: 200px;
}

.service .service-slider .arrows-container .next,
.service .service-slider .arrows-container .prev{
    position: absolute;
    right: 0;
    background-color: #FAAF3F;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    padding: 14px;
    cursor: pointer;
    opacity: .8;
}


.service .service-slider .arrows-container .next:hover,
.service .service-slider .arrows-container .prev:hover{opacity: 1;}

.service .service-slider .arrows-container .prev{right: 70px;}

.service .service-slider .arrows-container div img{
    width:  80%;
    object-fit: cover;
}

.service-slider .the-service{
    width:50%;
    height: 380px;
    position: absolute;
    right: 300px;
    background-color:transparent;
    overflow: hidden;   
    -moz-transition: all .5s ;
    -webkit-transition: all .5s ;
    -ms-transition: all .5s ;
    -o-transition: all .5s ;
    transition: all .5s ;
}

.service-slider .service-background{
    width: 100%;
    height: 100%;
    position: relative;
    background-color:#31302E;
    background-image: url('../img/services/service-bg.jpg') ;
    background-size: cover;
}

.service-slider .the-service.num0 .service-background{
    -moz-transition: all 3s ;
    -webkit-transition: all 3s ;
    -ms-transition: all 3s ;
    -o-transition: all 3s ;
    transition: all 3s ;
    opacity: 1;
}

.service-slider .the-service.num0 .service-background{opacity:1;}
.service-slider .the-service.num1 .service-background{opacity:.8;}
.service-slider .the-service.num2 .service-background,
.service-slider .the-service.num3 .service-background{opacity: .7;}
.service-slider .the-service.num4 .service-background,
.service-slider .the-service.num5 .service-background,
.service-slider .the-service.num6 .service-background {opacity: 0;}
.service-slider .the-service.num7 .service-background { opacity: 1;}


.service-slider .the-service.num0{
    background-color: #fff;
    transform: scale(1) rotateY(0deg);
    z-index: 10;
    left: 0%;
}

.service-slider .the-service.num1{
    background-color: #fff;
    transform: scale(.6,.83) rotateY(-15deg);
    z-index: 9;
    left: 38%;
}

.service-slider .the-service.num3,
.service-slider .the-service.num2{
    background-color:#fff;
    transform: scale(.6,.73) rotateY(-30deg);
    left: 60%;
}

.service-slider .the-service.num3{  
    z-index: 5; 
    left: 100%;
}

.service-slider .the-service.num2{ z-index: 8;}

.service-slider .the-service.num4,
.service-slider .the-service.num5,
.service-slider .the-service.num6{z-index: 0;}

.service-slider .the-service.num3{
    z-index: 1;
    background-color: fff;
}

.service-slider .the-service.num7
{
    transform: scale(.7) rotateY(-10deg);
    z-index: 0;
    left: -30%;
}

.service-slider .the-service.num4,
.service-slider .the-service.num5,
.service-slider .the-service.num6{display: none;}


/* Services images control */

/* Service 1 */

.service-slider .the-service .service-background .half-amwal {
    position: absolute;
    z-index: 1;
    width: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%) ;
}


.service-slider .the-service .service-background .daralhajer {
    position: absolute;
    z-index: 2;
    width: 300px;
    bottom: -30px;
    right: -100px;
    animation: right-left 6s linear infinite ;
}


.service-slider .the-service .service-background .jackson {
    position: absolute;
    z-index: 3;
    width: 300px;
    bottom: -40px;
    left: -80px;
    animation: left-right 6s linear infinite ;
}


@keyframes left-right {
    0% ,100%  {
        transform: translateX(-30px);
    }
    50% {
        transform: translateX(0px);
    }
}



@keyframes right-left {

    0% ,100%  {
        transform: translateX(0px);
    }
  
    50% {
        transform: translateX(-30px);
    }
}


/* Service 2 */

.service-slider .the-service .service-background .calculator {
    position: absolute;
    z-index: 5;
    width: 150px;
    top:50%;
    left:  53%;
    transform: translate(-50%,-50%) rotate(10deg);
}

.service-slider .the-service .service-background .payroll {
    position: absolute;
    z-index: 6;
    width: 108px;
    top:36%;
    left: 56%;
    transform: translate(-50%,-50%) rotate(10deg);
    animation: Payroll 4s linear infinite ;
}


@keyframes Payroll {
    0% ,100%  {
        opacity: 0;
    }
  
    40%, 60% {
      opacity: 1;
    }
}

.service-slider .the-service .service-background .seq {
    position: absolute;
    z-index: 2;
    width: 100px;
    top:55%;
    left:  35%;
    transform: translate(-50%,-50%) rotate(50deg);
    animation: seqAnimate 7s linear infinite ;
}

@keyframes seqAnimate {

    0% ,100%  {
        left:  35%;
    }
  
    50% {
          left:  52%;
    }
}

.service-slider .the-service .service-background .dollar-big-u {
    position: absolute;
    z-index: 2;
    width: 120px;
    top:20%;
    left:  20%;
    transform: translate(-50%,-50%);
}


.service-slider .the-service .service-background .dollar-u {
    position: absolute;
    z-index: 2;
    width: 120px;
    top:90%;
    left:  90%;
    transform: translate(-50%,-50%);
}



/* Service 2 */

.service-slider .the-service .service-background .earth-container {
    position: absolute;
    z-index: 2;
    width: 250px;
    top:75%;
    left:  25%;
    transform: translate(-50%,-50%) rotate(10deg);
}


.service-slider .the-service .service-background .earth {
    position: absolute;
    z-index: 2;
    width: 255px;
    top:255px;
    left:  70px;
    transform: translate(-50%,-50%) rotate(10deg);
}


.service-slider .the-service .service-background .coin-circel {
    position: absolute;
    z-index: 2;
    width: 350px;
    top:85px;
    left:-96px;
    animation: CoinCircel 20s linear infinite ;
}


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


/* Service 3 */

.service-slider .the-service .service-background .num3-elements{
    position: absolute;
    z-index: 3;
    width: 200px;
    height: 200px;
    top:50%;
    left:  50%;
    transform: translate(-50%,-50%); 
}

.service-slider .the-service .service-background .num3-elements .heart {
    position: absolute;
    z-index: 5;
    width: 150px;
    top:30px;
    left:  unset;
    right: 0;
}

.service-slider .the-service .service-background .num3-elements .dollar-coin {
    position: absolute;
    z-index: 7;
    width: 110px;
    top:75px;
    right: 95px;
    animation: RotateCoins 60s linear infinite;
}



.service-slider .the-service .service-background .half-amwal-num3 {
    position: absolute;
    z-index: 1;
    width: 150px;
    bottom: -35%;
    transform: translate(0%) ;
}


/* Service 4 */

.service-slider .the-service .service-background .num4-elements{
    position: absolute;
    z-index: 3;
    width: 220px;
    height: 220px;
    top:50%;
    left:  50%;
    transform: translate(-50%,-50%); 
}

.service-slider .the-service .service-background .num4-elements .account {
    position: absolute;
    z-index: 5;
    width: 220px;
    top:30px;
    left:  unset;
    right: 0;
}


.service-slider .the-service .service-background .num4-elements .pin {
    position: absolute;
    z-index: 6;
    width: 62px;
    top:85px;
    left:  unset;
    right: 50px;
    transform: rotate(82deg) ;
}

.service-slider .the-service .service-background .num4-elements .half-amwal-num4 {
    position: absolute;
    width: 120px;
    bottom: -25px;
    left: 45px;
    animation: upDown 20s linear infinite;
}


@keyframes upDown {

    0% ,100%  {
        bottom: -25px;
    }
  
    50% {
        bottom: 85px;
    }
}

.service-slider .the-service .service-background .num4-elements .dollar-u {
    position: absolute;
    top: 80px;
    left: 60px;
    width: 100px;
}


/* Service 5 */

.service-slider .the-service .service-background .line{
    position: absolute;
    z-index: 3;
    width: 150px;
    height: 10px;
    background-color: #FAAF3F;
    top:0%;
    left:  50%;
    transform: translate(-50%,-50%); 
}

.service-slider .the-service .service-background .bills{
    position: absolute;
    z-index: 3;
    width: 150px;
    top:45%;
    left:  50%;
    transform: translate(-50%,-50%); 
}
.service-slider .the-service .service-background .billa{
    position: absolute;
    z-index: 3;
    width: 60px;
    top:50%;
    left:  35%;
    transform: translate(-50%,-50%) rotate(-25deg); 
    animation: billMove 10s  linear infinite;
}

@keyframes billMove{

 0%,50%,100%{
    transform: translate(-50%,-50%) rotate(-35deg); 
 } 

 25%,75%{
    transform: translate(-50%,-50%) rotate(-10deg); 
 }

}


.service-slider .the-service .service-background .pay{
    position: absolute;
    z-index: 3;
    background-color: #FAAF3F;
    padding: 4px 16px;
    font-size: 12px;
    border-radius: 4px;
    bottom:8%;
    left:  40%;
    transform: translate(-50%,-50%); 
    animation: shakeme 4s linear infinite;
}


@keyframes shakeme {
    0% {
      transform:scale(1);
    }
    20% {
        transform:scale(1.1);
    }
    40% {
        transform:scale(1.2);
    }
    60% {
        transform:scale(1.1);
    }
    80% {
        transform:scale(1.2);
    }
    100% {
        transform:scale(1);
    }
  }
  

/* Service 6 */

.service-slider .the-service .service-background .yemen{
    position: absolute;
    z-index: 3;
    width: 250px;
    top:65%;
    left:  50%;
    transform: translate(-50%,-50%); 
}

.service-slider .the-service .service-background .flying-doller{
    position: absolute;
    z-index: 3;
    width: 90px;
    top:28%;
    left:  -30%;
    animation: flying 4s linear infinite;
}


.service-slider .the-service .service-background .flying-doller2{
    position: absolute;
    z-index: 3;
    width: 90px;
    top:28%;
    left:  -40%;
    animation: flying 4s 2s linear infinite;
}


@keyframes flying {
    0% {
      transform:translate(0%,0%);
    }
    20% {
      transform:translate(100%,-50%);
    }
    40% {
      transform:translate(200%,-100%);
    }
    60% {
      transform:translate(300%,-150%);
    }
    80% {
        transform:translate(400%,-200%);
    }
    100% {
        transform:translate(500%,-250%);
    }
  }


  /* Service 7 */

.service-slider .the-service .service-background .background{
    position: absolute;
    z-index: 3;
    width: 320px;
    top:50%;
    left:  50%;
    transform: translate(-50%,-50%); 
    opacity: .2;
}

.service-slider .the-service .service-background .international-box{
    position: absolute;
    z-index: 3;
    width: 200px;
    top:75%;
    left:  50%;
    transform: translate(-50%,-50%); 
}

.service-slider .the-service .service-background .exchange-logos{
    top:32%;
    left:  50%;
    transform: translate(-50%,-50%); 
    width: 140px;
    height: 235px;
    position: absolute;
    z-index: 6;
    overflow: hidden;
}

.service-slider .the-service .service-background .amwal-logo-white{
    position: absolute;
    z-index: 4;
    width: 50px;
    top:30%;
    left:30%;
    transform: translate(-50%,-50%); 
    animation: amwalAnimat 15s linear infinite;
}

@keyframes amwalAnimat{
    0%{
        top:30%;
        transform: rotate(0deg); 
    }

    1.5%{
        top:30%;
        transform: rotate(-10deg); 
    }

    3%{
        top:30%;
        transform: rotate(10deg); 
    }

    5%{
        top:30%;
        transform: rotate(0deg); 
    }

    18%,84%{
        top:130%;
        transform: rotate(0deg); 
    }

    100%{
        top:30%;
        transform: rotate(0deg); 
    }
}

.service-slider .the-service .service-background .westernunion{
    position: absolute;
    z-index: 4;
    width: 50px;
    top:130%;
    left:30%;
    transform: translate(-50%,-50%); 
    animation: westernunionMove 15s linear infinite;
}

@keyframes westernunionMove{
    0%,18%{
        top:130%;
        transform: rotate(0deg); 
    }

    33%{
        top:30%;
        transform: rotate(0deg); 
    }

    34.5%{
        top:30%;
        transform: rotate(-10deg); 
    }

    36%{
        top:30%;
        transform: rotate(10deg); 
    }

    38%{
        top:30%;
        transform: rotate(0deg); 
    }

    53%{
        top:130%;
        transform: rotate(0deg); 
    }

    100%{
        top:130%;
        transform: rotate(0deg); 
    }
}


.service-slider .the-service .service-background .moneygram{
    position: absolute;
    z-index: 4;
    width: 50px;
    top:130%;
    left:30%;
    transform: translate(-50%,-50%); 
    animation: moneygramMove 15s linear infinite;
}



@keyframes moneygramMove{
    0%,53%{
        top:130%;
        transform: rotate(0deg); 
    }

    68%{
       top:30%;
        transform: rotate(0deg); 
    }

    69.5%{
        top:30%;
        transform: rotate(-10deg); 
    }

    71%{
        top:30%;
        transform: rotate(10deg); 
    }

    73%{
        top:30%;
        transform: rotate(0deg); 
    }

    87%{
        top:130%;
        transform: rotate(0deg); 
    }

    100%{
        top:130%;
        transform: rotate(0deg); 
    }
}

/* -------------------------------------- End Services images control */

/* Footer Start  */

footer{
    color: #fff;
    width: 100%;
    background-color: #141414;
    background-image: url('../img/footer-bg.jpg') ;
    background-size: cover;
    font-weight:400;
    padding: 50px 0 150px 0;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

.first , .footer-contact{
    width: 50%;
    overflow: hidden;
}


.footer-logo, .social-media{
    display: flex;
}

.footer-logo img{
    width: 270px;
}

.social-media .center-icons{
    display: flex;
    padding-left:60px ;
}


.social-media a {
    margin-top: 30px;
    border: 1px solid #fff;
    padding: 7px;
    margin-right: 15px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    -moz-transition: all .3s ;
    -webkit-transition: all .3s ;
    -ms-transition: all .3s ;
    -o-transition: all .3s ;
    transition: all .3s ;

}

.social-media #fb:hover {
    background-color: #3b5998;
    border: 1px solid #3b5998;
}


.social-media #insta:hover {
    border:none;
}

.social-media #insta {
    position: relative;
    overflow: hidden;
}


.social-media #insta .insta-color{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -moz-transition: all .4s ;
    -webkit-transition: all .4s ;
    -ms-transition: all .4s ;
    -o-transition: all .4s ;
    transition: all .4s ;
}


.social-media #insta img[alt=instagram]{
    position: absolute;
    z-index: 0;
    width: 18px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: transparent;
}


.social-media #insta:hover .insta-color{opacity: 1;}

.social-media #tw:hover {
    background-color: #00acee;
    border: 1px solid  #00acee;
}


.contact-heading{
    color: #FAAF3F;
    margin: 10px 0;
}


.the-contact {
    width: 100%;
    height: 40px;
    margin-top: 12px;
    border-bottom: 1px solid #7C7874;
    -moz-transition: all .3s ;
    -webkit-transition: all .3s ;
    -ms-transition: all .3s ;
    -o-transition: all .3s ;
    transition: all .3s ;
 }

.the-contact:last-child {border-bottom: none;}

.the-contact .contact-img{
    width: 5%;
    display: flex;
    justify-content: center;
    overflow: hidden;

}
 
.the-contact .contact-img img{
    width:25px;
    object-fit: cover;
}


.the-contact p {
    width: 95%;
    padding: 2px 0 0 10px;
    cursor: pointer;
}

.the-contact:hover {opacity: .8;}


footer .footer-links{
    position: absolute;
    bottom: 50px;
    width: 100%;
    height: 70px;
    background-color: #FAAF3F;
}

footer .footer-links div{
    padding-top: 12px;
    font-size: 15px;
}


    
.footer-menu ul li {
    display: inline-block;
    margin-right: 23px;
    cursor: pointer;
    -moz-transition: all .3s ;
    -webkit-transition: all .3s ;
    -ms-transition: all .3s ;
    -o-transition: all .3s ;
    transition: all .3s ;
}
    
    
.footer-menu ul li:hover {color: #000;}

footer .copy-right{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 55px;
    background-color: #1d1d1d;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}

footer .copy-right div{
    padding-top: 17px;
    font-size: 14px;
}



/* Scroll to begining of the page button */


.scroll-up-btn {
    position: fixed;
    bottom: 10px;
    right: 50px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #faaf3fd3;
    color: white;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    -moz-transition: ease-in-out 0.2s ;
    -webkit-transition: ease-in-out 0.2s ;
    -ms-transition: ease-in-out 0.2s ;
    -o-transition: ease-in-out 0.2s ;
    transition: ease-in-out 0.2s ;
    opacity: 0;
}

.scroll-up-btn:hover {
    background-color: #555;
  }

.scroll-up-btn img {
    width: 40%;
    margin-top: 10%;
}