@font-face {
    font-family: "DroidSansArabic";
    src: url('DroidSansArabic.ttf') format('truetype'),
         url('DroidSansArabic.eot') format('embedded-opentype'),
         url('DroidSansArabic.woff') format('woff'),
         url('DroidSansArabic.svg') format('svg');
}
h1 {
    color: #712f7d;
}
body {
    font-family: 'DroidSansArabic', sans-serif; 
}
a:hover {
    text-decoration: none;
}
a:focus {
    text-decoration: none;
    color: #712f7d;
}
.main-header {
    position: absolute;
    margin-top: 15px;
    width: 100%;
    z-index: 999;
}
.white {color:#fff}
.green {
    color: #00acb0;
    padding-bottom: 50px;
    background-image: url('../img/lines.png');
    background-repeat: no-repeat;
    background-position: center 43px;
}
nav {
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 10px;
    width: 70%;
    margin-top: 15px;
}
nav a {
    color:#fff;
    padding-right: 16px;
}
nav a:hover {
    color: #fff;
    font-weight: bold;
    border-radius: 7px;
    margin-left: 10px;
    padding: 15px;
    background-color: #712f7d;
    -webkit-transition: all .7s ease-out;
    -o-transition: all .7s ease-out;
    -moz-transition: all .7s ease-out;
    transition: all .7s ease-out;
    -ms-transition: all .7s ease-out;
}
nav li{
    float: right;
    font-size: 22px;
    padding-left: 9px;
    padding-top: 8px;
}
nav ul {
    list-style: none;
    margin: 0;
    display: inline-block;
    width: 100%;
    padding: 0;
}
.responsve_nav {
    position: absolute;
    top: 0;
    width: 170px;
    right: -300px;
    height: 100%;
    background-color: #712f7d;
    -webkit-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
    color: #fff;
    visibility: hidden;
}
.responsve_nav.active{
    right: 0;
    padding-top: 20px;
    visibility: visible;
}
.responsve_nav ul {
    list-style: none;
    margin-right: -17px;
}
.responsve_nav ul li {
    padding-top: 10px
}
.responsve_nav ul li a {
    color: #fff;
    font-size: 20px;
}
.search-form {
    display: none;
}
.search-form.active{
    display: inline-block;
    padding-left: 20px;
}
.search-click {
    width: 30%;
    display: inline;
    -webkit-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
}
.search-field {
    border: none;
    height: 36px;
    padding: 7px 17px 8px 8px;
    border-radius: 13px;
    color: #000;
    position: relative;
    z-index: -1;
}
.Search__page {
    padding-top: 160px;
}
.search-submit {
    border: none;
    background-color: #712f7d;
    color: #fff;
    font-size: 16px;
    padding: 6px 38px 8px 38px;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
    margin-right: -43px;
    font-weight: bold;
}
nav .ict_rtl {
    display: none !important;
}
.icl_rtl {
    vertical-align: middle;
    padding-right: 10px;
}
#lang_sel li {
    text-align: center;
    width: 85px;
}
#lang_sel a.lang_sel_sel, #lang_sel a.lang_sel_sel:visited {
    color: #fff !important;
    background-color: transparent !important;
    font-weight: bold;
    font-size: 14px;
}
#lang_sel a {
    border: 2px solid #fff;
    border-radius: 8px;
}
#lang_sel a:hover, #lang_sel a.lang_sel_sel:hover {
    color: #fff !important;
}
#lang_sel ul ul {
    border-top: none !important;
}
.navbar-toggle {
    border-color: #fff !important;
    float: left;
    margin-top: 20px;
    clear: both;
}
.navbar-collapse.show nav{
    opacity: 1;
    background-color: #fff;
}
.navbar-collapse.show nav a{
    color: #000;
}
.navbar-toggle span{
    background-color: #fff;
}
.head {
    color: #fff;
    border-left: 1px solid #fff;
    width: 20%;
    display: inline;
}
.head select {
    border: 1px solid #fff;
    border-radius: 5px;
    background-color: transparent;
    margin-right: 24px;
    margin-left: 15px;
}
.head img {
    padding-left: 10px;
}
.search {
    padding-right: 15px;
}
.main {
    background-image: url('../img/main_banner.png');
    background-repeat: no-repeat;
    height: 863px;
    background-size: cover;
}
.wa7ha {
    background-image: url('../img/wa7ha.png');
    background-repeat: no-repeat;
    height: 890px;
    background-size: cover;
    text-align: center;
}
.wa7ha img {margin: auto;}
.wa7ha p {
    padding: 20px;
    line-height: 44px;
    font-size: 22px;
}
.wa7ha a {
    color: #712f7d;
    font-size: 22px
}
.order {
    background-image: url('../img/order.png');
    background-repeat: no-repeat;
    height: 750px;
    text-align: center;
    position: relative;
    background-position: center;
}
.order a {
    color: #fff;
    background-color: #712f7d;
    padding: 9px 23px 11px 23px;
    border-radius: 5px;
    position: absolute;
    bottom: 0px;
    font-size: 17px
}
.download {
    background-image: url('../img/download.jpg');
    background-repeat: no-repeat;
    height: 915px;
    background-size: cover;
    position: relative;
}
.download div {
    position: absolute;
    bottom: 173px;
    right: 278px;
}
.certificate {padding-top: 50px}
.certificate img {padding-left: 30px}
.contact {
    background-image: url('../img/contact.jpg');
    background-repeat: no-repeat;
    height: 930px;
    background-size: cover;
    padding-top: 346px;
}
.contact table {
    width: 46%;
    border-spacing: 18px;
    float: left;
    margin-left: 50px;
    color: #fff;
    border-collapse: inherit;
    font-size: 18px;
}
.contact .info {
    background-color: purple;
    padding: 21px;
    border-radius: 10px;
}
.contact .infoz {
    background-color: #ef238c;
    padding: 15px;
    border-radius: 10px;
}
.contact .infox {
    background-color: #03abaf;
    padding: 20px;
    border-radius: 10px;
}
 /* -=> About */
/* About Page Style */
.about_banner {
    background-image: url('../img/banner_ab.jpg');
    background-size: cover;
    height: 830px;
    background-repeat: no-repeat;
    background-position: center center;
}
.about_cont {
    margin-bottom: 75px
}
.about_cont img {
    display: block;
    margin: auto;
    padding-bottom: 50px
}
.about_cont p {
    font-size: 17px;
    padding-bottom: 20px;
    text-align: justify;
}
.about_cont p span {
    color: #74327b;
    font-weight: bold:;
}
.morals_abar {
    background-color: #712f7d;
    background-image: url('../img/logo_ab.png');
    background-repeat: no-repeat;
    padding-top: 40px;
    padding-bottom: 50px
}
.morals_abar p {
    color: #fff;
    font-size: 15px;
}
.morals_abar img {
   padding-bottom: 37px 
}
.comp {
    margin-bottom: 20px;
    margin-top: 20px;
}
.comp p {
    width: 22%;
    color:#712f7d;
    float: right;
}
.comp .gomf {
    float: left;
    color:#712f7d;
}

.contact_banner {
    background-image: url('../img/banner_con.jpg');
    background-size: cover;
    height: 800px;
    background-repeat: no-repeat;
}
.cont_info {
    margin-bottom: 75px
}
.cont_info img {
    display: block;
    margin: auto;
    padding-bottom: 50px
}
.cont_info p {
    font-size: 20px;
    padding-bottom: 20px;
    font-size: justify
}
.cont_info p span {
    color: #74327b;
    font-weight: bold:;
}
.cont_info table {
    width: 95%;
    border-spacing: 28px;
    color: #fff;
    border-collapse: inherit;
}
.cont_info .info {
    background-color: purple;
    padding: 21px;
    border-radius: 10px;
}
.cont_info .infoz {
    background-color: #ef238c;
    padding: 15px;
    border-radius: 10px;
    font-size: 14px;
}
.cont_info .infox {
    background-color: #03abaf;
    padding: 20px;
    border-radius: 10px;
}
.cont_info form {
    border-right: 1px solid #e8e8e8;
    padding-right: 60px;
}
.cont_info  form p {
    color: #712f7d;
    padding: 17px 0px 0px 0px;
}
.cont_info  input, .cont_info textarea {
    display: block;
    border: 1px solid #712f7d;
    border-radius: 8px;
    padding: 6px;
    width: 70%;
}
.cont_info textarea {height: 100px;}
.cont_info [type="submit"] {
    margin-top: 20px; 
    border: none;
    background-color: #712f7d;
    color: #fff;
    font-size: 16px;
    padding: 8px 34px 8px 34px;
    border-radius: 8px;
    float: left;
    display: inline-block;
    width: auto;
}
.pro_banner {
    background-image: url('../img/banner_pro.jpg');
    background-size: cover;
    height: 830px;
    background-repeat: no-repeat;
}
.pro_cont img {
    display: block;
    margin: auto;
    padding-bottom: 50px
}
.pro_cont p {
    font-size: 20px;
    padding-bottom: 10px;
    text-align: center; 
}
.pro_cont p span {
    color: #712f7d;
    font-weight: bold;
}
.products {
    background-image: url('../img/products.jpg');
    background-size: cover;
    height: 890px;
    background-repeat: no-repeat;
}
.join_banner {
    background-image: url('../img/join-us.jpg');
    background-size: cover;
    height: 830px;
    background-repeat: no-repeat;
}
.join_cont {
    margin-bottom: 75px
}
.join_cont img {
    display: block;
    margin: auto;
    padding-bottom: 50px
}
.join_team p {
    padding-bottom: 10px;
    line-height: 35px;
}
.mail_join {
    color: #ef238c;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}
.title_join {
    color: #03abaf;
    text-align: center;
    font-weight: bold;
}
.join_cont form {
    border-right: 1px solid #e8e8e8;
    padding-right: 60px;
}
.join_cont form p {
    color: #712f7d;
    padding: 17px 0px 0px 0px;
}
.join_cont input {
    display: block;
    border: 1px solid #712f7d;
    border-radius: 8px;
    padding: 6px;
    width: 100%;
}
.join_cont input[type="submit"] {
    margin-top: 20px; 
    border: none;
    background-color: #712f7d;
    color: #fff;
    font-size: 16px;
    padding: 8px 34px 8px 34px;
    border-radius: 8px;
    float: left;
    width: auto;
}
/* App Page Style */

.app_banner {
    background-image: url('../img/banner_app.jpg');
    background-size: cover;
    height: 830px;
    background-repeat: no-repeat;
    background-position: center center;
}
.app_downp {
    padding-top: 160px;
    padding-right: 200px;
    width: 50%;
}
.app_downp .text_app_one {
    display: block;
    margin-right: 41px;
    margin-bottom: 17px;
}
.app_cont .img-responsive {
    margin: auto;
}
.list {
    margin-top:  50px;
    overflow: hidden;
}
.list h3 {
    padding-bottom: 10px
}
.app_steps {padding-bottom: 50px}


/* Quality Page Style */

.quality_banner {
    background-image: url('../img/banner_qu.jpg');
    background-size: cover;
    height: 830px;
    background-repeat: no-repeat;
}
.pro_cont img {
    display: block;
    margin: auto;
    padding-bottom: 50px
}
.pro_cont p {
    font-size: 17px;
    padding-bottom: 10px;
    text-align: center; 
}
.pro_cont p span {
    color: #712f7d;
    font-weight: bold;
}
.quality {
    background-image: url('../img/map.jpg');
    background-size: cover;
    height: 890px;
    background-repeat: no-repeat;
    margin-top: 30px;
    display: table;
    width: 100%;
}
.quality_cert {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.quality_cert img {
    padding-left: 30px;
}

/* Branches Page Style */

.branch_banner {
    background-image: url('../img/map444.jpg');
    background-size: cover;
    height: 830px;
    background-repeat: no-repeat;
    background-position: center center; 
}
.arb_bran {
    margin-right: 50px;
    padding-bottom: 50px
}
.branches ol {
    color: #702f7c;
}

.branches ol li {
    width: 50%;
    float: right;
    padding-bottom: 25px;
    font-size: 23px
}
.branches {
    margin: 0px 156px 0px 59px;
}


/* -=> Responsive */
@media (min-width: 2560px) {
    .logo {width: 18%;}
    nav {margin-top: 30px}
    nav li {
        font-size: 35px;
        padding-left: 35px;
    }
    .container {width: 1950px;}
    .main {height: 1627px !important;}
    .wa7ha img {width: 61%;}
    .wa7ha {height: 1700px !important;}
    .wa7ha p {
        line-height: 99px;
        font-size: 48px;
    }
    .wa7ha a {font-size: 48px;}
    .download {height: 1769px !important;}
    .download div {
        bottom: 473px !important;
        right: 627px !important;
    }
    .certificate img {
        padding-left: 68px;
        width: 22%;
    }
    .contact {
        height: 1757px !important;
        padding-top: 476px;
    }
    .contact table {
        font-size: 40px !important;
        margin-left: -65px !important;
    }
    .order a {
        padding: 11px 31px 17px 31px;
        font-size: 33px;
        left: 64px;
    }
    .comp {font-size: 23px;}
    .about_banner {height: 1513px;}
    .about_cont p {font-size: 40px;}
    .morals_abar p {font-size: 34px}
    .pro_banner {height: 1570px;}
    .pro_cont p {font-size: 35px}
    .products {height: 1640px !important}
    .quality_banner {height: 1620px !important;}
    .pro_cont p {font-size: 31px}
    .quality {height: 1643px !important;}
    .quality_cert img {
        width: 20%;
        padding-bottom: 20px
    }
    .app_banner {height: 1600px;}
    .app_downp img {width: 50%}
    .list h3 {font-size: 46px}
    .list {font-size: 36px;}
    .branch_banner {height: 1620px;}
    .arb_bran {width: 28%;}
    .branches ol li {font-size: 47px;}
    .join_banner, .contact_banner {height: 1600px !important;}
    .join_team p {font-size: 30px}
    .mail_join, .join_cont form p, .cont_info table, .cont_info .infoz {font-size: 30px}
}

@media (min-width: 1440px) {
    .main {height: 968px;}
    .wa7ha {height: 990px;}
    .order a {bottom: 0px}
    .download {height: 995px;}
    .contact {height: 1043px;}
    .contact table {font-size: 20px;}
    .download div {
        bottom: 267px;
        right: 329px;
    }
    .app_downp .text_app_one {margin-right: 45px}
    .products {height: 925px;}
    .quality_banner {height: 915px;}
    .quality {height: 961px;}
    .contact_banner {height: 870px;}
}

@media (max-width: 1200px) and (min-width: 992px){
    .title {
        display: block;
        padding-bottom: 15px;
        text-align: center;
        margin: auto;
     }
    .order {background-size: contain;}
    .order a {bottom: 0px;}
    .download {height: 684px;}
    .download div {
        bottom: 110px;
        right: 214px;
    }
    .certificate {text-align: center}
    .comp p { width: 26%;}
    .about_cont p {
        margin-top:20px;
        padding-bottom: 0px;
    }
    iframe {
        display: block;
        margin: auto;
    }
    .app_downp {
        padding-right: 160px;
    }
    .app_downp img {
        width: 43%;
    }
    .app_downp .text_app_one {width: 68%;}
    .pro_banner {background-position: center center;}
    .products {
        background-position: center center;
        height: 710px;
     }
    .join_cont form {
        border: none;
        padding-right: 9px;
        padding-bottom: 60px
    }
    .join_cont input {
        width: 70%;
    }
    .join_banner {height: 652px;}
    .cont_info form {
        padding-right: 9px;
        padding-bottom: 60px;
        border: none;
    }
    nav li {font-size: 16px}
    .branch_banner {height: 623px;}
    .quality_banner {background-position: center center;}
    .quality_cert img {padding-bottom: 20px}
    .cont_info table {
        width: 54%;
        margin: auto;
    }
}

@media (max-width: 768px) {
    .logo {width: 23%;}
    .main {height: 553px;}
    .wa7ha {height: 540px;}
    .wa7ha img {width: 65%;}
    .wa7ha p {font-size: 18px}
    .order {
        height: 570px;
        background-size: contain;
    }
    .app_banner {height: 537px ;}
    .branch_banner {height: 488px;}
    .about_banner {height: 652px;}
    .join_team {padding-bottom: 50px}
    .download {height: 515px;}
    .download div {
        bottom: 50px;
        right: 173px;
    }
    .title {
        display: block;
        margin: auto;
    }
    .join_cont form, .cont_info form {
        padding-right: 0px;
        border: none;
    }
    .certificate img {padding-top: 30px;}
    .certificate {text-align: center}
    .contact {
        background-size: contain;
        padding-top: 144px;
        height: 555px;
    }
    .contact .infox {padding: 11px}
    .contact table {
        font-size: 15px;
        margin-left: 26px;
    }

    .comp p {width: 35%;}
    .about_cont img { width: 80%;}
    .pro_banner {
        height: 621px;
        background-position: -64px center;
    }
    .products {
        height: 557px;
        background-position: center center;
    }
    .join_banner {height: 455px;}
    nav li {
        font-size: 14px;
        padding-left: 5px;
    }
    nav a {
        padding-right: 5px;
    }
    .app_downp {
        padding-right: 0px;
        width: 100%;
        text-align: center;
        padding-top: 163px;
    }
    .app_downp img {
        width: 24%;
        display: block;
        margin: auto;
    }
    .app_downp .text_app_one {
        margin: auto;
        padding-bottom: 10px;
        width: 31%;
    }
    .quality_banner {height: 563px;}
    .contact_banner {height: 465px;}
}

@media (max-width: 700px) {
    nav {
        clear: both;
        width: 100%;
        opacity: 0;
    }
    nav li {
        display: block;
        float: none;
    }
}

@media (min-width: 319px) and (max-width: 475px) { 
    nav {
        background-color: #712f7d !important;
        border: none;
    }
    .head span, .lang_selector {display: none}
    nav .ict_rtl {display: inline-block;}
    .navbar-collapse.show nav a {color: #fff;}
    .main {
        background-image: url('../img/main_banner_res4.png');
        height: 478px;
    }
    .logo {width: 27%;}
    .quality_banner {
        background-position: center;
        height: 300px;
    }
    .app_banner {height: 273px;}
    .app_cont .img-responsive {width: 88%;}
    .list img {
        padding-bottom: 50px;
        margin: auto;
    }
    .arb_bran {
     margin-right: 10px;
     width: 80%;
    } 
    .branch_banner { height: 271px; }
    .branches { margin: 0px -8px 0px 6px; }
    .quality {
        background-image: url('../img/water-bg.jpg');
        background-size: contain;
        background-repeat: repeat;
    }
    .quality_cert img { width: 75%; }
    .wa7ha {
        background-image: url('../img/wa7ha_res4.png');
        height: 500px;
    }
    .wa7ha img {width: 85%;}
    .download div {
        right: 153px;
        bottom: 29px;
    }
    .wa7ha p {
        padding: 10px;
        line-height: 28px;
        font-size: 16px;
    }
    .order {
        background-image: url('../img/order_res4.png');
        background-size: cover;
    }
    .order a {
        left: 132px;
        bottom: -25px;
        font-size: 13px;
        padding: 8px 19px 8px 19px;
    }
    .download {
        background-image: url('../img/download_res4.png');
        height: 399px;
        background-size: cover;
    } 
    .download img {width: 78%; }
    .certificate {text-align: center}
    .certificate img {padding-bottom: 30px}
    .contact {
        background-size: cover;
        height: 342px;
        padding-top: 90px;
    }
    .contact table {
        width: 50%;
        margin-left: -14px;
        border-spacing: 8px;
        font-size: 11px
    }
    .contact .info {padding: 11px;}
    .contact .infox {padding: 8px;}
    .comp p {
        width: 100%;
        text-align: center;
    }
    .comp .gomf {
        float: none;
        text-align: center;
    }
    .about_banner { height:270px; }
    .morals_abar p {line-height: 33px}
    .pro_banner {
        height: 293px;
        background-position: center center;
    }
    .pro_cont p {line-height: 38px}
    .pro_cont img {width: 80%;}
    .products {
        height: 295px;
        background-position: center center;
    }
    .join_banner {height: 310px;}
    .join_cont img { width: 59%;}
    .contact_banner {height: 308px;}
    .cont_info img { width: 70%; }
    .cont_info table {width: 100%;}
    .cont_info  input, .cont_info textarea {width: 100%;}
    .app_banner {height: 273px;}
    .app_cont .img-responsive {width: 88%;}
    .list img {
        padding-bottom: 50px;
        margin: auto;
    }
    .head select {display: none;}
    .head {border: none;}
    .navbar-toggle {display: block}
    .branches ol li {font-size: 17px}
    .app_downp {
        padding-right: 0px;
        width: 100%;
        text-align: center;
        padding-top: 99px;
    }
    .app_downp img {
        width: 32%;
        display: block;
        margin: auto;
    }
    .app_downp .text_app_one {
        margin: auto;
        padding-bottom: 10px;
        width: 39%;
    }
}
  
@media (max-width: 320px) {
    .main {
        background-image: url('../img/main_banner_res3.png');
        height: 424px;
    }
    .wa7ha {
        background-image: url('../img/wa7ha_res3.png');
        padding-top: 0px;
        height: 490px;
    }
    .wa7ha img {width: 85%;}
    .wa7ha p {
        padding: 0px;
        line-height: 28px;
        font-size: 15px;
    }
    .order{
        background-image: url('../img/order_res3.png');
        height: 1028px;
        background-position: -12px;
    }
    .order a { 
        left: 116px;
        bottom: -23px;
        padding: 9px 15px 9px 14px;
        font-size: 11px;
    }
    .download {
        background-image: url('../img/download_res3.png');
        height: 477px;
        background-size: cover;
        }
    .download div {
        right: 115px;
        bottom: 55px;
    }
    .download div img {width: 200px;}
    .certificate {text-align: center;}
    .certificate img {
        padding-left: 0px;
        padding-bottom: 30px;
    }
    .contact {
        padding-top: 76px;
        height: 350px;
        background-size: cover;
        background-position: -84px;
    }
    .contact .info {padding: 9px}
    .contact .infox {padding: 9px;}
    .contact .infoz {padding: 10px;}
    .comp p {
        text-align: center;
        width: 100%
    }
    .about_cont img {width: 86%; }
    .about_cont {margin-bottom: 20px}
    .pro_banner {height: 240px;}
    .products {
        background-position: center center;
        height: 241px;;
    }
    .contact_banner {height: 283px;}
    .join_banner {
        height: 316px;
    }
    .quality_banner {
        height: 254px;
    }
    .head span {font-size: 11px;}
    .branch_banner {height: 227px;}
}