/* Saed Style */


/*== Fun Fact Area CSS Start ==*/

.section-padding {
	padding: 0 0 50px 0;
}
.carrerForm-required-label{
  color: red;
  font-weight: bold;
}

#funfact-area {
	background-image: url(../img/counter-bg.jpg);
	background-position: 0px 50%, 50% 0;
	background-size: auto, cover;
	color: #fff;
	position:relative;
	margin-top: 120px;
}
#funfact-area h1{
		color: #fff;
    display: block;
    width: 100%;
    text-align: center;
    padding: 50px;
}
.single-funfact {
	background-color: rgba(97, 202, 254,0.9);
	padding: 25px 40px;
	text-align: center;
}

.funfact-icon {
	color: #163142;
	font-size: 45px;
}

.funfact-icon,
.funfact-content {
	display: table-cell;
	vertical-align: middle;
}

.funfact-content h4 {
	color: #eaeaea;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

/*== Fun Fact Area CSS End ==*/

#header #logo img{
	max-height: 80px;

}

.banner-area{

	background:url("../img/1.jpg");
	background-size: cover;	
	background-position: center;
	background-repeat: no-repeat;
 
}
.parallax {
    background-attachment: fixed;
    min-height: 100vh;
    padding-top: 100px;
}
.banner-support{
		background-image: url(../img/support.jpeg);
    background-position: center;
    background-size: cover;
}
.header-scrolled .nav-menu a{
	color:#1f4d8f !important;	
}
.item-1, .item-2, .item-3 {
  position: absolute;
  display: block;
	top: 50px;
  width: 100%;
  font-size: 2em;
	animation-duration: 30s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	color: #204e8f;
	
}
.item-1 > h2{
	color: #204e8f;
	font-size:2vw;
}
ul{
    text-align: left;
    line-height: 1;
}
/*.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

@keyframes anim-1 {
	0%, 5.33% { top:0; opacity: 0; }
  10.33%, 33.63% { top:35% ;opacity: 1; }
	41.63%, 100%{ top:100% ;opacity: 0;}
}

@keyframes anim-2 {
	0%, 33.33% { top: 0%; opacity: 0; }
  41.63%, 58.29% { top: 35%; opacity: 1; }
  66.66%, 100% { top: 100%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% { top: 0%; opacity: 0; }
  74.96%, 91.62% { top: 35%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
*/
.header-btn{
	font-size: 15px;	
}
.preloader{
	width:100%;
	height:100%;
	background:#001c31 ;
	position:fixed;
	background-image:url(../img/loader.gif);
	z-index:1000;
	background-position:center;
	background-repeat: no-repeat;
	display:none;
}
.header-top{
	display:none;
}
#header {
    background: #ffffff78;
}
.haderButton{
	background: #46c2fe;
	color: #fff;
	border: solid 2px #46c2fe;
	border-radius: 5px;
	padding: 5px 15px;
	margin-top: 30px;	
}
.haderButton:hover{
	background: #001e31;
	border: solid 2px #001e31;
	transition:0.5s;
}
.PartnerDiv{
		padding: 20px;
    margin: 10px auto;
}
.arabic_flag{
		background: url(../img/Jordan.png);
    height: 15px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    background-size: 100% 100%;
    margin: auto 10px;
}
.english_flag{
		background: url(../img/United_States.png);
    height: 15px;
    width: 30px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    background-size: 100% 100%;
    margin: auto 10px;
}
.nav-menu a:hover{
	background: #a1e1fa;
	transition:0.5s;
}
.footer-area{padding-bottom:0}
.benefits{padding:10px 30px; text-align:center}
.contactDiv{
	max-width: 500px;
	float: right;
	text-align: left;
	font-size: 15px;
	font-weight: 100;
	background: rgba(0,0,0,0.4);
	padding: 10px 15px;
	line-height: 1.55;
	border-radius: 5px;
	}
.col img{
	padding: 10px;
	border: solid 2px #e8e8e8;
	box-shadow: 0 0 10px #e8e8e8;	
	height: 120px;
}
#service{
		padding-top:100px;
	}
.benefits h3{
	margin:10px auto;
}
.SolutionDiv{
	background:#f7f7f7;
	min-height:300px;
	margin-bottom: 20px;
	position:relative;
}
.SolutionDiv > .SolutionTitle {
		font-size: 18px;
    padding: 10px 5px;
    color: #368dbe;
    font-weight: bold;
    letter-spacing: 0px;
		min-height: 50px;
}
.SolutionDiv > p{
		color: #303131;
    padding: 10px;
    font-size: 16px;
    text-align: justify;
    line-height: 1.4;
}
.SolutionDiv > img{
		position: absolute;
    top: 5px;
}

.BlueText{
	color:#45c2ff;
}
.AboutUsSection{
  text-align: center;
  max-width: 100%;
  background: #fdfdfd;
  padding: 10px;
  position:relative;
  padding-bottom: 30px;
}
.AboutUsSection img{
	margin-bottom:10px;
}
.AboutUsSection p{
	text-align:justify
}
.AboutUsSection p + [data-readmore-toggle]{
	position: absolute;
    bottom: 0;
    right: 10px;
    text-align: right;
    color: #cc0000;
}
.home-about-right h4{
	color:#fff

}
.single-services {
	padding:10px
}
.single-services h4{
	color: #032134;
}
.coming-soon-section-area {
	/*background:linear-gradient(225deg, rgba(0,30,49,0.2), #45c2ff), url(../img/new-banner-2.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;*/
	padding:100px 0;
	background: linear-gradient(286deg, #2e4174, #1e83b9, #f15a3b, #ee3b3a);
	background-size: 800% 800%;
	animation: GradientAnimated 28s ease infinite;
	box-shadow: 0 5px 25px #ccc;
	
}
.coming-soon-section-area h1{
	text-align:center;
	font-size:48px;	
	/*animation:flash 5s infinite;*/
}
#BackToTop {
	position:fixed;
	bottom: 10px;
	right: 20px;
	height:60px;
	width:60px;
	background:url(../img/BackToTop.png);
	background-size:100% 100%;
	z-index:1000;
	cursor: pointer;
	display:none
}
@keyframes flash{
	/*0% { color:#fff;}
	25% { color:#000;}
	50% {color:#fff}
	75% {color:#000}
	100%{color:#fff}*/
	0%{background:linear-gradient(225deg, rgba(0,30,49,0.2), #45c2ff), url(../img/new-banner-2.jpg);}
	33%{background:linear-gradient(225deg, rgba(0,30,49,0.2), #adf), url(../img/new-banner-2.jpg);}
	75%{background:linear-gradient(100deg, rgba(0,30,49,0.2), #45c2ff), url(../img/new-banner-2.jpg);}
	100%{background:linear-gradient(225deg, rgba(0,30,49,0.2), #45c2ff), url(../img/new-banner-2.jpg);}
	
	} 


@keyframes GradientAnimated { 
	0%{background-position:0% 40%}
	50%{background-position:100% 61%}
	100%{background-position:0% 40%}
}	
/*----------- scrollbar -----------*/
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #204e8f;
}
#CallUsNow{
	position:fixed;
	bottom: 10px;
	left: 20px;
	height:50px;
	width:140px;
	background:url(../img/CallUsNow.png);
	background-size:100% 100%;
	z-index:1000;
	cursor: pointer;
}
#SendMessageByWhatssApp{
	position:fixed;
	bottom: 10px;
	left: 160px;
	height:50px;
	width:120px;
	background:url(../img/SendMessageByWhatssApp.png);
	background-size:cover;
  background-repeat: no-repeat;
	z-index:1000;
	cursor: pointer;
}
.ServicesSection .container{
	padding:40px;
	display:table;
}
.ServicesSection div{
	display:table-cell;
	vertical-align:middle;
	text-align:center
}

html .icon-decoration-border {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    padding: 10px 10px;
}
html .icon-decoration-border:before, html .icon-decoration-border:after, html .icon-decoration-border-inner:before, html .icon-decoration-border-inner:after {
    content: '';
    position: absolute;
    width: 17px;
    height: 17px;
    background-image: url(../img/decoration-border.png);
    will-change: transform;
    pointer-events: none;
}
html .icon-decoration-border-inner:before {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
html .icon-decoration-border:after {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
html .icon-decoration-border-inner:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
html .icon-decoration-border:after, html .icon-decoration-border-inner:after {
    bottom: 0;
}
html .icon-decoration-border-inner:before, html .icon-decoration-border-inner:after {
    right: 0;
}
html .icon-decoration-border:before, html .icon-decoration-border-inner:before {
    top: 0;
}
html .icon-decoration-border:before, html .icon-decoration-border:after {
    left: 0;
}
.product h1, .product h2, .product h3, .product h4, .product h5, .product h6, .product .h1, .product .h2, .product .h3, .product .h4, .product .h5, .product .h6 {
    color: #000;
    text-align: center;
}
h1 a, h1 a:active, h1 a:focus, h2 a, h2 a:active, h2 a:focus, h3 a, h3 a:active, h3 a:focus, h4 a, h4 a:active, h4 a:focus, h5 a, h5 a:active, h5 a:focus, h6 a, h6 a:active, h6 a:focus, .h1 a, .h1 a:active, .h1 a:focus, .h2 a, .h2 a:active, .h2 a:focus, .h3 a, .h3 a:active, .h3 a:focus, .h4 a, .h4 a:active, .h4 a:focus, .h5 a, .h5 a:active, .h5 a:focus, .h6 a, .h6 a:active, .h6 a:focus {
    color: inherit;
}
.product {
    padding: 24px 37px;
    text-align: center;
    transition: .22s;
}

.product h4 {
    height: 66px;
    overflow: hidden;
}
.product:hover {
    -webkit-box-shadow: 0 0 5px 0 rgba(1, 3, 4, 0.13);
    box-shadow: 0 0 5px 0 rgba(1, 3, 4, 0.13);
    transition: all 0.3s ease;
    border-radius: 5px;
}
.product:hover h4 {
    color: #1b67b3;
}
.product p {
    height: 94px;
    overflow: hidden;
}
.shell, .shell-wide, .shell-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
html .range-30 {
    position: relative;
    transform: translateY(-30px);
    margin-bottom: -30px;
    pointer-events: none;
}

.range {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.range {
    margin-left: -15px;
    margin-right: -15px;
}
.range > [class*='cell'] {
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
}
shell, .shell-wide {
    min-width: 300px;
    max-width: 480px;
}
html .range-30 > *:before {
    content: '';
    display: table;
    width: 0;
}
@media (max-width: 992px){
  .shell, .shell-wide {
      max-width: 970px;
  }
  .col-sm-12{
        flex: 0 0 50%;
  }
}
@media (max-width: 768px){
    
    .shell, .shell-wide {
        max-width: 750px;
    }
    .range > .cell-sm-6 {
        -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }
    .range-sm-center {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .careerImg{
      display: none;
    }
  
}
@media (min-width: 1200px){
    .shell, .shell-wide {
        max-width: 1200px;
    }
    .range > .cell-lg-4 {
        -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }
}

@media (min-width: 992px){
    html .range-md-60 {
        transform: translateY(-60px);
        margin-bottom: -60px;
    }
    html .range-md-60 > * {
        margin-top: 60px;
    }
    
}


.desktop .bg-cover {
    -webkit-background-size: cover;
    background-size: cover;
}
.section-bottom-55 {
    padding-bottom: 55px;
}
.bg-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.vsc-text-icon.icon-top {
    padding-top: 62px;
}
article.vsc-service-elem {
    margin: 0 0 60px;
    padding: 0 10px;
}
.vsc-text-icon {
    position: relative;
    margin: 0 0 30px;
    padding: 0;
}
article {
    text-align: right;
}
.vsc-text-icon.icon-top .vsc-service-icon {
    left: auto;
    right: 0;
}

.vsc-text-icon.icon-top .vsc-service-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.vsc-text-icon.icon-top .vsc-service-content {
    text-align: center;
}
.vsc-text-icon .vsc-service-content h6 {
    margin-top: 0;
    line-height: 27px;
    font-size: 16px;
    font-weight: 700;
}
.vsc-text-icon .vsc-service-content p {
    font-size: 15px;
    color: #8a8a8a;
    text-align: center;
}
.vsc-text-icon .vsc-service-icon .icon {
    margin: 0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.vsc-text-icon .vsc-service-icon .icon:before {
    line-height: 1;
    color: inherit;
}
a, a:hover, a:active, a:focus, .fa, .icon, i, i:hover, h1 b, h2 b, h3 b, h4 b, h5 b, h6 b, .h7 b, .featured > a, .current > a:not(.dropdown-toggle), .dropdown-menu > .menu-item > a, .dropdown-menu > .menu-item > a:hover, .dropdown-menu > .menu-item > a:focus, .dropdown-menu > .menu-item > a:active, .dropdown-menu > .menu-item.active > a, .dropdown-menu > .menu-item.active > a:hover, .dropdown-menu > .menu-item.active > a:focus, .dropdown-menu > .menu-item.active > a:active, .dropdown:hover:after, .vsc-countdown .countdown-period, .base_clr_txt, .base_clr_txt:hover, .base_clr_txt:focus, .base_clr_txt:active, .gform_wrapper .button, .base_clr_bg:not(:hover) .btn-outline:not(:active):not(:hover), .lighter-overlay .base_clr_txt, .vc_tta-tabs-container .vc_tta-tabs-list .vc_tta-tab a i, .darker-overlay .base_clr_txt {
    color: #2f5a96;
}
.vsc-text-icon .vsc-service-icon {
    display: block;
    text-align: center;
}
article.vsc-service-elem .icon {
    font-size: 3.3em;
    width: 100%;
    height: auto;
    line-height: 1;
    font-weight: 700;
}
.light, .darker-overlay i, .darker-overlay p, .darker-overlay span, .darker-overlay h1, .darker-overlay h2, .darker-overlay h3, .darker-overlay h4, .darker-overlay h5, .darker-overlay h6, .more-link:hover, .navigation-bar .user-profile:hover:before, .darker-overlay .sub-title {
    color: #000;
}
.light h1{padding-bottom: 0;color:#000}
.btn-outline{
  padding: 12px 24px;
  font-size: 22px;
  line-height: 2;
  border-radius: 4px;
  margin-top: 15px;
}
span.counter {
    font-size: 66px;
    color: #555;
    margin:20px auto;
    display: inline-block;
    font-weight: 400;
    text-align: center;
}
.row-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.vc_row-fluid {
    position: relative;
}
.long-block {
    padding-top: 30px;
    padding-bottom: 30px;
}
#contacts .pull-left.icon {
    left: auto;
    right: 20px;
}
.long-block h2 {
    margin-bottom: 12px !important;
}
.page-template-page-home-php p, .home p {
    line-height: 27px;
}
.pull-left h2,.pull-left p{
  color: #fff;
}
.pull-left .btn-outline{
  margin-top: 30px;
  color: #fff;
}
.free-trial-frame{
  background-color: #f8fdfe;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  padding: 20px 20px 15px;
  margin: 0;
  width: 100%;
  border-radius: 3px;
}

.careerImg{
  height: 100%;
  position: absolute !important;
  right: 0;
  background: url(../img/career.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.VideoFrame{
  background: url(../img/banner-img5.png);
  padding: 0;
  width: 100%;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  height: 100%;
}

.banner-img video
{
width: 378px;
    margin: auto;
    margin-top: 13px;
    height: 274px;
    z-index: 2;
    position: absolute;
    left: 62px;
  outline: none;
}
.banner-img{
    position: absolute;
    width: 500px;
    top: 7%;
    height: 400px;
    text-align: center;
}
@media (max-width: 480px)
{
	
	#header {
		background: #f9f9ff;
	}	
	.item-1, .item-2, .item-3{
		padding-top: 0;
		color:#333;	
	}
  .careerImg{
    display: none;
  }
  .form label{
    font-size: 11px;
  }
  .form h3{
    text-align: center;
    font-size: 18px;
  }
  #careerSection{
    margin: auto !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
  }
	.service-area .col-md-12{
		text-align:center
	}
	.home-about-area {
    background: #031e31;
    z-index: 1;
    text-align: center;
    padding: 60px 10px !important;
	}
	h1 {
    font-size: 26px;
	}
	.row{
		margin: auto 0;
	}
	#service{
		padding-top:30px;
	}
  .banner-img{
      display: none;
  }
	.ServicesSection div{
		display:block;
		max-width:100%;
	}
	.ServicesSection div img{
		max-height:250px;
	}
    .range > .cell-xs-12 {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }
    #CallUsNow{
        bottom: 60px;  
    }
    #SendMessageByWhatssApp{
        bottom: 10px;
        left: 20px;
    }
    .banner-content {
    width: 100% !important;
    padding: 20px;
}

    .item-1 > h1{
        font-size: 16px;
    }
    .item-1 > h5{
        font-size: 13px;
    }
    .item-1 li{
        font-size: 12px;
      line-height: 1.8
    }
    h1, .h1 {
        font-size: 24px;
    }
    .coming-soon-section-area h1{
        font-size: 20px;
    }
    footer{
        padding-bottom: 100px !important;
    }
  .col-md-12 .pull-left{
    text-align: center !important;
    float: none !important;
    padding-left:  0 !important;
  }
  .btn-lg{
    padding: 7px 20px !important;
    font-size: 18px !important;
  }
  h1, .h1 {
    font-size: 18px !important;
}
  .section-title{
    text-align: center
  }
  p{
    text-align: center;
  }
  .preloader{
        background-size: 150%;
  }
  #header #logo img{
    height: 60px !important;
  }
  #logo
  {
    width: 100%;
  }
  .icon-graphic-design-13{
    display: none !important;
  }
  .banner-img {
    display: block;
    height: 250px;
    /*margin-top: 100px;*/
    width: 350px;
    position: relative;
    right: auto !important;
    top: 0;
  }
  .VideoFrame {
    width: 350px;
    height: 250px;
  }
  .banner-img video {
    width: calc(100% - 24%);
    left: 44px;
    height: 184px;
    margin-top: 0;
  }
  .item-1, .item-2, .item-3{
    position: relative;
    top: 0;
  }
  

}