@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);


*{ margin:0;  padding:0}
html, body{ height:100%}
body{ font-family:'Droid Arabic Kufi',sans-serif ;  color:#494949}
h1, h2, h3, h4, h5, p, a, img{ margin:0;  padding:0}
p{line-height:24px; font-size:14px; margin-bottom:20px}
h1{font-size:30px; text-transform:uppercase; font-weight:700; margin-bottom:15px}
h2{font-size:20px; font-weight:700; margin-bottom:15px}
h3{font-size:16px; font-weight:700; margin-bottom:15px}
h4{font-size:16px; font-weight:300; text-transform:uppercase}
h5{font-size:18px; text-transform:uppercase; margin-bottom:10px; color:#e42727}
h6{font-size:12px}

a, a:hover, a:focus, a:active{ text-decoration:none}

ul, ol{ list-style:none;  margin:0;  padding:0}

.preloader{position:fixed; width:100%; height:100%; top:0; left:0; z-index:100000; -webkit-backface-visibility:hidden; backface-visibility:hidden; background:#e42727}
.preloader img, 
#loader{display:block; width:50px; height:50px; position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px}

#topbar{background:#e42727; color:#FFF}
.topbar-social-icons ul{background:#e42727; padding:0 10px}
.topbar-contact-info li, 
.topbar-social-icons li{display:inline-block; padding:5px 0}
.topbar-contact-info li{padding-left:20px; font-size:16px}
.topbar-contact-info li span{padding-left:10px}
.topbar-social-icons li a{padding:2px 10px; font-size:16px; color:#fff}
.topbar-social-icons li a:hover{color:#000}

.en-topbar-social-icons ul{background:#e42727; padding:0 10px}
.en-topbar-contact-info li, 
.en-topbar-social-icons li{display:inline-block; padding:5px 0}
.en-topbar-contact-info li{padding-left:0px; font-size:16px}
.en-topbar-contact-info li span{padding-left:10px}
.en-topbar-social-icons li a{padding:2px 10px; font-size:16px; color:#fff}
.en-topbar-social-icons li a:hover{color:#000}

.sticky{position:fixed;  right:0;  left:0;  top:0;  z-index:1030;  background:#fff;  border-bottom:1px solid #dedede}
.navbar-brand .icon{background:#e42727; width:40px; height:40px; border-radius:50%; color:#fff; line-height:40px; text-align:center}
.navbar-brand .name{font-size:36px; margin-bottom:0; text-transform:uppercase}
.navbar-brand i{font-weight:700; font-style:normal}
.navbar-brand sub{display:block; margin-left:50px; color:#7F7F7F; font-size:11px; letter-spacing:2px}

.slider{height:615px; width:100%; overflow:hidden; direction:ltr}
.slider img{width:100%}
.slide-caption{position:absolute; top:100px; left:200px}
#sliderbar{background:#e42727 url('../images/pattern/pattern-1.png') repeat; padding:40px 0; vertical-align:middle; color:#fff}
#sliderbar span{font-size:36px}
.en span{padding-right:10px}
ul.en{margin-left:30px}
.border{border-right:1px solid #E1E1E1; border-left:1px solid #E1E1E1}

#work, 
#welcome, 
#news, 
.white-bg, 
#support, 
#testimonials, 
#team, 
#portfolio, 
#q-a, 
#contacts, 
#callto, 
footer{padding:80px 0}
#callto, 
#q-a{background:#F4F4F4}
.marg{margin-top:60px}
.pa{padding-top:40px}
.pa p{text-align:justify}
.pa h2{color:#e42727}
.pa ul{list-style-type:none !important; margin-right:0px !important}
.pa img{padding-bottom:30px}

.heading{margin-bottom:60px}
.heading span{color:#e42727; margin-left:20px}
.title-center, 
.title-left{ position:relative;  margin-bottom:20px;  padding:0 0 20px}
.title-center:before{ position:absolute;  bottom:-3px;  left:0;  right:0;  margin:0 auto;  width:50px;  height:3px;  content:"";  background:#e42727}
.title-left:before{ position:absolute;  bottom:-3px;  right:0;  width:50px;  height:3px;  content:"";  background:#e42727}
.default-title{font-size:16px; color:#494949; border-bottom:1px solid #ECECEC; padding:15px 0}
.default-title a{color:#494949}
.default-title a:hover{color:#e42727}
.en-title-left{ position:relative;  margin-bottom:20px;  padding:0 0 20px}
.en-title-left:before{ position:absolute;  bottom:-3px;  left:0;  width:50px;  height:3px;  content:"";  background:#fff}
.fo-title-left{ position:relative;  margin-bottom:20px;  padding:0 0 20px}
.fo-title-left:before{ position:absolute;  bottom:-3px;  left:0;  width:50px;  height:3px;  content:"";  background:#e42727}

.btn{border:0; font-size:14px; font-weight:500; padding:8px 20px}
.btn-default{background:#fff; border:2px solid #D5D5D5; color:#7F7F7F}
.btn-default:hover{border-color:#e42727;  background:#e42727;  color:#fff}
.btn-info{background:#000; border-bottom:4px solid #3d3d3d}
.btn-info:hover{ background:#e42727; border-bottom:4px solid #F07070}
.btn-text{color:#000; font-weight:700; text-transform:uppercase; padding-left:0}
.btn-text:hover{color:#e42727; font-weight:700; text-transform:uppercase}

.posts, .project{border-bottom:2px solid #ECECEC; padding-bottom:25px}
.project p{text-align:justify}
.project ol li{margin-top:10px}
.project ul li{margin-top:10px}
.posts i{padding-bottom:10px; padding-right:15px}
.posts i, .posts span{color:#7F7F7F}
#work ol li{color:#e42727}
#work ul{list-style-type:square; margin-right:30px}

#callus{background:#f3f3f3; padding-top:30px}
#callus:hover{background:#ececec}
#callus h5{color:#494949; padding-bottom:20px}
#callus h5 span{width:35px; height:35px; border-radius:50%; background:#e42727; line-height:35px; margin-right:15px; color:#fff}

#video-bg{padding:150px 0}
.pattern-overlay{position:absolute;   top:0;   left:0;   width:100%;   height:100%;   z-index:10;   background:#fff url('../images/pattern/pattern-2.png') repeat;  background-color:rgba(255,255,255,0.3)}
.video-info{position:relative; color:#fff; z-index:1000}
.video-info span{width:35px; height:35px; border-radius:50%; background:#e42727; line-height:35px; margin-right:15px}
.video-info span:hover{background:#000}
.video-info h2{font-weight:300}

#services{background:url('../images/backgrounds/bg-1.jpg') no-repeat fixed; background-size:cover}
#services .row{margin:0; direction:rtl}
.serv h2{color:#e42727}
.white-bg{background:#fff}
.r-number{width:30px; height:30px; border-radius:50%; background:#e42727; line-height:30px; text-align:center; color:#fff; font-weight:700; float:right; margin-left:15px; overflow:hidden}
.reasons p{overflow:hidden}
.reasons .row{padding-left:15px}

.item1, 
.item2, 
.item3{padding:15px 0}
.item1{border-right:1px solid #dedede}
.item2{border-right:1px solid #dedede}

.d{    width:100%;     overflow:hidden;     display:block;     position:relative;     background:rgba(0,0,0,0.6);     color:#fff;     padding:100px 0}

.d:after{    content:"";     background:url('../images/backgrounds/who.jpg') repeat fixed center bottom;     top:0;     left:0;     bottom:0;     right:0;     position:absolute;     z-index:-1;     background-size:cover}
#testimonials{padding-top:0}
.testimonials{background:url('../images/backgrounds/who.jpg') no-repeat fixed center bottom; background-size:cover; padding:100px 0; color:#fff; overflow:hidden; position:relative; display:block; width:100%; height:100%}
.testimonials:after{    content:"";     background:url(http://subtlepatterns.com/patterns/bo_play_pattern.png) repeat;  top:0;  left:0;  bottom:0;  right:0;  position:absolute;  z-index:-1}
.d h2{color:#e42727}
.d ul{list-style-type:square !important; margin-right:20px !important}
.dp{margin-top:20px}

.customer{padding:60px 0}
.customer-say img{width:100px; height:100px; margin:0 auto; margin-bottom:30px}
.rate{padding-bottom:30px}
.rate li{color:#e42727; font-size:24px}

.page-head{background:url('../images/backgrounds/bg-3.jpg') no-repeat fixed center center; background-size:cover; height:220px}

.team-social li{display:inline-block; width:35px; height:35px; border-radius:50%; background:#e42727; margin:0 10px}
.team-social li a{display:block; color:#fff; font-size:20px; line-height:35px}
.team-social li a:hover{background:#000; border-radius:50%}
.team-page h2{text-transform:uppercase; letter-spacing:3px}
.team-page h4{color:#e42727; margin-bottom:10px}

#portfolio .row{margin-bottom:30px}
.Portfolio-item{ position:relative;  overflow:hidden;  cursor:pointer}
.portfolio-pattern-color:before{ background:rgba(14,165,134,.7)}
.portfolio-pattern:before{ position:absolute;  content:'';  width:100%;  height:100%;  z-index:1;  -webkit-transform:scale(0,0) rotate(45deg);  -ms-transform:scale(0,0) rotate(45deg);  -o-transform:scale(0,0) rotate(45deg);  transform:scale(0,0) rotate(45deg);  -webkit-transition:all 500ms ease-in;  -o-transition:all 500ms ease-in;  transition:all 500ms ease-in}
.portfolio-pattern:hover:before{ -webkit-transform:scale(3) rotate(45deg);  -ms-transform:scale(3) rotate(45deg);  -o-transform:scale(3) rotate(45deg);  transform:scale(3) rotate(45deg)}
.portfolio-pattern img{ position:relative;  left:50%;  min-width:100%;  height:100%;  -webkit-transform:translateX(-50%);  -ms-transform:translateX(-50%);  -o-transform:translateX(-50%);  transform:translateX(-50%);  -webkit-transition:all 1000ms cubic-bezier(0.19,1,0.22,1);  -o-transition:all 1000ms cubic-bezier(0.19,1,0.22,1);  transition:all 1000ms cubic-bezier(0.19,1,0.22,1); -webkit-transform-origin:0% 50%; -moz-transform-origin:0% 50%; -ms-transform-origin:0% 50%; -o-transform-origin:0% 50%; transform-origin:0% 50%}
.portfolio-pattern:hover img{ -webkit-transform:scale(2,2) translateX(-50%) rotate(10deg);  -ms-transform:scale(2,2) translateX(-50%) rotate(10deg);  -o-transform:scale(2,2) translateX(-50%) rotate(10deg);  transform:scale(2,2) translateX(-50%) rotate(10deg)}
.portfolio-pattern .zoom, 
.portfolio-pattern .info{position:absolute; top:50%;  line-height:50px;  z-index:3;  width:50px;  height:50px;  color:rgba(242,242,242,0);  text-align:center;  -webkit-transform:translate(-50%,100%);  -ms-transform:translate(-50%,100%);  -o-transform:translate(-50%,100%);  transform:translate(-50%,100%);  -webkit-transition:all 1000ms cubic-bezier(0.19,1,0.22,1) 150ms;  -o-transition:all 1000ms cubic-bezier(0.19,1,0.22,1) 150ms;  transition:all 1000ms cubic-bezier(0.19,1,0.22,1) 150ms}
.portfolio-pattern .zoom{ left:40%}
.portfolio-pattern .info{ left:60%}
.portfolio-pattern:hover .zoom, 
.portfolio-pattern:hover .info{ color:#13332D;  background:#B0E1D9;  -webkit-transform:translate(-50%,-50%);  -ms-transform:translate(-50%,-50%);  -o-transform:translate(-50%,-50%);  transform:translate(-50%,-50%)}

.contact-info{background:#e42727; color:#fff; padding:30px 15px 15px 30px}
.contact-info h2{text-transform:uppercase; letter-spacing:3px}
.contact-info li{margin:10px 0; padding:5px 0; font-size:16px}
.contact-info li span{margin-right:15px; font-size:20px}
.contacts .contact-info{margin-bottom:30px}
.contact-form label{text-transform:uppercase; font-size:16px}
.contact-form input{border-radius:0; outline:none}
.form-control:hover{border:1px solid #000}
.team{background:url('../images/team/team-1.jpg') no-repeat center; min-height:294px}
.team:hover{border:10px solid #D5D5D5; transition:ease-in all .2s; -webkit-transition:ease-in all .2s; -moz-transition:ease-in all .2s; -ms-transition:ease-in all .2s; -o-transition:ease-in all .2s}
#maps{height:250px}
.noScroll{ line-height:1.35;  overflow:hidden;  white-space:nowrap}

footer{background:#E6F6F2 url('../images/backgrounds/bg-2.png') no-repeat center center;  background-color:rgba(228,39,39,1);  background-size:cover;  padding-bottom:0;  color:#fff}
footer h3{text-transform:uppercase}
footer .title-left:before{background:#fff; width:30px}
.credits li{display:inline-block; padding-right:5px; padding-top:10px}

.footer-social{margin-bottom:60px}
.c-info{margin-bottom:30px}
.c-info li{margin-bottom:15px}
.c-info li span{font-size:16px; margin-right:15px}
.footer-social li{display:inline-block; width:50px; height:50px; margin-right:15px}
.footer-social li a{display:block; border:2px solid #fff; border-radius:5px; color:#fff; text-align:center; line-height:50px; font-size:20px}
.footer-social li a:hover{background:#fff; color:#e42727}
.footer-bar{background:rgba(228,39,39,0.5)}
.footer-bar .navbar-brand .icon{background:#fff; color:#e42727}
.footer-bar .navbar-brand h1{font-size:25px; margin-bottom:0}
.footer-bar .navbar-brand sub{color:#fff; letter-spacing:0;  margin-bottom:10px}
.footer-bar p{margin-top:40px; text-align:center}
.caption-tr{position:absolute; top:45%; left:40%}
.caption-in{ height:200px;  line-height:200px;  vertical-align:middle;  color:#fff}
.lh-1{line-height:30px}
.lh-2{line-height:25px}
.lh-3{line-height:22px}
.lh-4{line-height:21px}
.mar-30{margin-bottom:30px}
.tc{text-align:center !important}
.bld{font-weight:bolder}
ol.feat li{line-height:30px}

.white-ar a{color:#fff}
.black-ar a{color:#494949}
.red-ar a{color:#e42727}

@media (max-width:480px){#topbar{text-align:center}
#sliderbar h2{font-size:16px}
#sliderbar span{font-size:20px; display:block; margin-bottom:15px}
.navbar-default .navbar-nav >li >a{ color:#494949;  padding-top:5px}
.navbar-default .navbar-nav >li >a:hover, .navbar-default .navbar-nav >li >a:focus{ color:#FFF;  border-bottom:0;  background:rgb(69,178,157)}
.item1{border-right:0}
.item2{border-right:0}
.hide-mob, 
.topbar-social-icons, 
.en-topbar-social-icons{display:none}
.slider{height:295px}
.footer-bar .navbar-brand{display:none}
.footer-bar p{text-align:center}
}