@import url('https://fonts.googleapis.com/css?family=Cairo:300,400,600,700&subset=arabic');



header,
section,
article,
aside,
nav,
footer,
p,
h1,
h2,
h3,
h4,
h5,
ul,
li details,
figcaption,
figure,
footer,
hgroup,
main,
summary { margin: 0; padding: 0; display: block; }
*,
*:after,
*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
audio,
canvas,
video { display: inline-block; *display:inline;
*zoom:1
}
audio:not([controls]) { display: none; height: 0 }
[hidden] {
display:none
}
html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-align:justify; font-family: 'Cairo', sans-serif; }
html,
button,
input,
select,
textarea { font-family: 'Cairo', sans-serif; }
body { margin: 0; margin: 0px; }
a:focus { outline: thin dotted }
a:active,
a:hover { outline: 0 }
h6 { font-size: .67em; margin: 2.33em 0 }
abbr[title] { border-bottom: 1px dotted }
b,
strong { font-weight: bold }
blockquote { margin: 1em 40px }
dfn { font-style: italic }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0 }
mark { background: #ff0; color: #000 }
code,
kbd,
pre,
samp {  font-size: 1em }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word }
q { quotes: none }
q:before,
q:after { content: ''; content: none }
small { font-size: 80% }
sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sup { top: -0.5em }
sub { bottom: -0.25em }
dl,
menu,
ol,
ul { margin: 0 0 }
dd { margin: 0 0 0 0px }
menu,
ol,
ul { padding: 0 0 0 0px }
nav ul,
nav ol,
li { list-style: none; list-style-image: none }
img { border: 0; -ms-interpolation-mode: bicubic }
svg:not(:root) { overflow: hidden }
figure { margin: 0 }
form { margin: 0 }
fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em }
legend { border: 0; padding: 0; white-space: normal; *margin-left:-7px
}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align:middle
}
p{ text-align:justify;}
button,
input { line-height: normal; border: none; }
button,
select { text-transform: none }
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow:visible
}
button[disabled],
html input[disabled] { cursor: default }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0; *height:13px;
*width:13px
}
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0
}
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {
}
input:invalid, textarea:invalid {
background-color: #f0dddd;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {    /* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] { -moz-appearance: textfield; }
textarea { overflow: auto; vertical-align: top }
table { border-collapse: collapse; border-spacing: 0 }
html,
button,
input,
select,
textarea { color: #222; }
html { font-size: 1em; line-height: 1.4; }
::-moz-selection {

text-shadow: none;


}
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio,
canvas,
img,
video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }

html,
body,
form { width: 100%; height: 100%; font-family: 'Cairo', sans-serif;}
html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% }
html,
button,
input,
select,
textarea {    font-size: 14px; }
html,
body,
form { width: 100%; height: 100%; }
html { overflow-y: scroll; }
body { margin: 0;  font-family: 'Cairo', sans-serif; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
a { text-decoration: none; }
a:focus { outline: thin dotted }
a:active,
a:hover { outline: 0 }
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: normal; }
:focus::-webkit-input-placeholder {
color:transparent;
}
:focus::-moz-placeholder {
color:transparent;
}
:-moz-placeholder {
color:transparent;
}
a { transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; }
/* ===== Main Style  ============================================================================================================================ */


#wrapper { width: 100%; height: auto; float: left; min-height: 100%; height: 100%; }
.main-warp { width: 100%; height: auto; float: left; min-height: 100%; overflow: hidden;  }
.page { width: 100%; height: auto; float: left; }
.container { width: 100%; height: auto; max-width: 1500px; position: relative; padding: 0 20px; margin:0px auto; }
.page h2{ color:#e85a05; font-size:36px; line-height:35px; font-weight:700; padding-bottom:30px;}

.delivery-icon{
 
 width: 100px;
 height: 80px;
 flex: none;
 position: absolute;
 top: 15px;
 right:15px;
 z-index: 9999;
}


.delivery-icon img{
 
 width: 100%;
}


 /* Header Part  */

.header{ width:100%; float:left; position:absolute;}
.logo{  position:relative; z-index:99;   width:170px; height:170px;}
.menu{ width:80%; float:left; position:absolute; z-index:99; right:0;}

 /* Banner Slider  */
.orb { width: 1920px; height: auto; background: #324f9c; display: inline-block; margin: 0px 0 0 0; padding: 0px; float: left; transition: all .2s ease-out; }
.orb img { width: 100%; float: left; margin: 0px 0 0; padding: 0px; }
.marquee { height: 300px; width: 100%; overflow: hidden; box-sizing: border-box; position: relative; z-index: 1; }
  .banner{
    width: 100%; height:60vh;
    float: left; position: relative;
  }

.mbaner { height:60vh; width: 100%; overflow: hidden; box-sizing: border-box; position: relative;  }
.marquee--inner img{height: 60vh;}
.marquee--inner1 { display: block; width: 200%; margin: 0 0 0 0; position: absolute;  animation: marquee1 10s linear infinite;  }
.marquee--inner { display: block; width: 200%; margin: 0 0 0 0; position: absolute; animation: marquee 7s linear infinite; height: 100%; min-height: 100%;}
span { float: left; width: 50%; }
.car { width: 776px; height: 340px; position: absolute; bottom:-60px;  left: 50%; margin: 0 0 0 -400px; animation: push ease 1s alternate infinite;  z-index: 9999;
  }
  .tire {
    position: absolute;
    bottom: 8px;
    left: 62px;
    width: 92px;
    height: 92px;
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 0.6s linear infinite;
}

.tire1{
  position: absolute;
    bottom: 10px;
    right: 183px;
    width: 92px;
    height: 92px;
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 0.6s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

 @keyframes marquee1 { 0% {
right: 0;
}
 100% {
right: -100%;
}
}

 @keyframes marquee { 0% {
right: 0;
}
 100% {
right: -100%;
}
}

 @keyframes push {
 
}


 /* Home about  */

#about{
 
 width:100%; float:left; height:auto;
}
.home-about{ width:100%; float:left; height:auto; margin:81px 0 0 0; position:relative;}
.gradient-box{ width:40%; height:800px; float:left; position:absolute; right:0;
  background: -webkit-gradient(linear, left top, right top, from(#f26a0f), to(#fd8e4a));
  background: -webkit-linear-gradient(left, #f26a0f, #fd8e4a);
  background: -moz-linear-gradient(left, #f26a0f, #fd8e4a);
  background: -ms-linear-gradient(left, #f26a0f, #fd8e4a);
  background: -o-linear-gradient(left, #f26a0f, #fd8e4a);
}
.home-cont{ width:50%; float:left; height: auto; text-align:right; line-height:33px; font-size:17px; padding:50px 30px;}
.home-cont h2{ padding-top:50px;}
.home-abt-image{ width:50%; float:left; padding:100px 20px;}
.home-abt-image img{ width:96%; float:left;}

.abt-top{
 
 width: 100%;
 height: auto;
 float: left;
 padding: 70px 0 70px 0;
 text-align: right;
 margin-top:-100px;
}

.abt-top h1{
 
 width: 100%;
 height: auto;
 float: left;
 font-size: 28px;
 color: #000;
 font-weight: 700;
}

.home-btm{
 width: 100%;
 height: auto;
 float: left;
}

.abt-top h2{
 
 width: 100%;
 height: auto;
 float: left;
 font-size: 28px;
 margin: 0px;
 padding:15px 0 0 0;

}

 /* Home mission vision  */
.mission-vision{ width:100%; float:left; height:100%; margin:80px 0 0 0; position:relative; padding:30px 0;}
.gradient-box2{ width:40%; height:630px; float:left; position:absolute; left:0;
  background: -webkit-gradient(linear, left top, right top, from(#f26a0f), to(#fd8e4a));
  background: -webkit-linear-gradient(left, #f26a0f, #fd8e4a);
  background: -moz-linear-gradient(left, #f26a0f, #fd8e4a);
  background: -ms-linear-gradient(left, #f26a0f, #fd8e4a);
  background: -o-linear-gradient(left, #f26a0f, #fd8e4a);
}
.mission-vision-image{ width:45%; float:left; position:absolute; left:0; padding:65px 0px 26px 20px;}
.mission-vision-image img{ width:100%;} 
.mission-cont{width:50%; float:right; height: auto; text-align:right; line-height:30px; font-size:16px; padding:30px 30px; font-weight:600;}
.mission-cont h2{ color:#e85a05; padding-top: 40px;}
/*company management  */

.management{ width:100%; float:left; height:auto; margin:200px 0 0 0; padding:0; position:relative;}
.bg-box{ width:66%; float:left; height:150px; background:#f67b38; position:absolute; bottom:139px;}
.company-management{width:80%; float:left; height:auto;}
.management-list{ width:100%; float:left; margin:0; padding:0;}
.management-head{ width:20%; float:left;}
.management-head h2{ font-size:46px; color:#000; line-height:50px; text-align:right; margin-top:160px;}
.management-list li{ width:33%; float:left; padding:40px 15px;}
.members img{ width:100%;}
.members{ width:100%; float:left;}
.text{ text-align:center; color:#000; width:100%; float:left; display:block; padding:20px 0;}
.text h3{ color:#e95b0d; font-size:20px; font-weight:700; padding:0px 0 8px 0}
.text p{ text-align:center; font-size:16px;}


/*Footer  */
.footer-part{ width:100%; float:left; position:relative;}
.footer-bg{ width:60%; float:left; right:0; position:absolute; height:260px; background:#f67b38; bottom:0;}
.footer-cont{ width:100%; float:left; height:auto; margin:40px 0 0 0; position:relative;}
.footer-img{ width:40%; float:left; margin:0; height:auto;}
.footer-img img{ width:100%;}
.adrs{ width:60%; float:left; text-align:center; position:absolute; bottom: 30px; left: 40%;  z-index: 999;}
.adrs h2{ font-size:46px; font-weight:700; color:#000;}
.adrs p{ text-align:center; color:#FFF; padding:6px 0; font-size: 28px; margin:0px; font-weight:600; } 

.adrs p a{
 color:#FFF;
 
}

.adrs p a:hover{
 color:#000;
 text-decoration:underline;
 
}


.adrs p span{
 width:auto;
 float:none;
 font-size:45px;
}
.copy-right{ width:100%; float:left; color:#000; padding:20px 0;}
.design{ width:50%; float:left; text-align:right;}
.design p{ width:100%; text-align:right;}
.design a{ width:100%; text-align:right; color:#000;}
.design span{ float:right; width:auto; padding:0 0 0 5px}
.copy{ width:50%; float:left;}