*{padding:0; margin:0}


body {font-family: 'Tajawal', sans-serif; color:#212529;}
a {
  color: #141414;
  -webkit-transition: all .35s ease-in-out!important;
  -o-transition: all .3s ease-in-out!important;
  -webkit-transition: all .3s ease-in-out!important;
  transition: all .3s ease-in-out!important;
}


@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?76374276');
  src: url('../font/fontello.eot?76374276#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?76374276') format('woff'),
       url('../font/fontello.ttf?76374276') format('truetype'),
       url('../font/fontello.svg?76374276#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
.demo-icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* You can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

body h3 {
  color: #1b1c1b; 
  font-weight: 600; 
  font-size: 40px; 
}

body p {
  color: #404040; 
  font-size: 16px; 
  line-height: 28px; 
}


.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.btn {
  font-size: 18px!important;
  line-height: normal!important;  
  padding: 15px 20px 10px!important;
  border-radius: 50px;
  font-weight: 500;
}

.btn:hover {
  background: #141414!important;
}

.arabic {
  font-size: 16px!important;
  padding: 15px 13px 10px!important;
  width: 48px;
  height: 48px;
  color: #000!important;
}

.arabic:hover {
  background: #141414!important;
  color: #00ab6a!important;
}


.zoom {
  overflow: hidden;
}


.zoom img {
    transition-duration: 0.5s;
    margin: 0 auto;
    display: block;
    width: 100%;
}

.zoom img:hover {
    -webkit-transform: scale(1.08);
}

.mob {display: none!important;}

header .mega-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
  z-index: 1;
  transition: all 1s!important;
  padding: 20px;
  border-radius: 10px;
  justify-content: center;
  text-align: center;

  }
header #cssmenu > ul > li:hover .mega-menu {
  display: flex;
  transition: all 1s!important;
  align-items: center;
}  

header .mega-menu .menu {margin: 0 40px; width: 80px;}
header .mega-menu .menu img {width: 45%;}
header .mega-menu .menu a {text-decoration: none; margin-top: 10px; line-height: normal!important;}
header .mega-menu .menu:hover a {color: #019a54; font-weight: 500;}



/*header*/
header {position: absolute; transition: background-color 0.4s ease-out; z-index: 999; top: 0; left: 0; width: 100%; padding-top: 30px; padding-bottom: 30px;}
header .align {align-items: center;}
header .logo {position:relative; z-index:123; float:left;}
header .logo img {max-width: 90%;}
header nav#cssmenu ul {float: right; padding: 0 20px 0px 0px; position: relative; background: #0009; border-radius: 15px; display: flex; align-items: center; border: 1px solid #019a54;}
header #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile {border:0; list-style:none; line-height:1.8; display:block; -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
header #cssmenu:after,#cssmenu > ul:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
header #cssmenu #head-mobile {display:none}
header #cssmenu > ul > li {float:left; padding-left: 30px;}
header #cssmenu > ul > li > a {padding: 25px 0px; font-size: 16px; text-decoration: none; color: #fff; transition: transform .6s ease-in-out;}
header #cssmenu > ul > li > a:hover {color: #00ab6a;}
header #cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {-webkit-transition: background .3s ease; -ms-transition: background .3s ease; transition: background .3s ease;}

header #cssmenu > ul > li.has-sub:hover > a:before {top:23px;height:0}
header #cssmenu ul ul {position: absolute; left: -9999px; margin-top: 17px;}
header #cssmenu ul ul li {height:0; -webkit-transition:all .25s ease; -ms-transition:all .25s ease; background:#333; transition:all .25s ease;}
header #cssmenu li:hover > ul {display: none;}
header #cssmenu li:hover > ul > li {height:35px}
header #cssmenu ul ul ul {margin-left:100%; top:0;}
header #cssmenu ul ul li a {border-bottom: 1px solid rgba(150,150,150,0.15); padding: 11px 15px; width: 190px; font-size: 12px; text-decoration: none; color: #ddd; font-weight: 400;}
header #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {border-bottom:0}
header #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover {color:#fff}
header #cssmenu ul ul li.has-sub > a:after {position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#ddd;content:''}
header #cssmenu ul ul li.has-sub > a:before {position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
header #cssmenu ul ul > li.has-sub:hover > a:before {top:17px;height:0}
header #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {background:#363636;}
header #cssmenu ul ul ul li.active a {border-left:1px solid #333}
header #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a {border-top:1px solid #333}


@media screen and (max-width:991px){

.lap {display: none!important;}  
header #cssmenu > ul > .has-sub {position: relative;}
header .align {align-items: inherit;}
header nav#cssmenu ul {flex-wrap: wrap; padding: 0; border-radius: 0; border: none;}
header .header-main {position: relative;}  
header nav{width:100%;}
header #cssmenu{width:100%}
header #cssmenu ul{width:100%; display:none; position: absolute; z-index: 999;}
header #cssmenu ul li {width: 100%; border-top: 1px solid #04a966; float: left; margin-top: 0; background: #fff;}
header #cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
header #cssmenu ul li a,#cssmenu ul ul li a{width:100%; border-bottom:0; padding: 8px 15px; margin-left: 0; color: #000;}
header #cssmenu > ul > li.has-sub > a:before {background: transparent;}
header #cssmenu ul ul li a{padding-left:25px}
header #cssmenu ul ul li{background:#333!important;}
header #cssmenu ul ul li:hover{background:#363636!important;}
header #cssmenu ul ul ul li a{padding-left:35px}
header #cssmenu ul ul li a{color:#ddd; background:none;}
header #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
header #cssmenu ul ul,#cssmenu ul ul ul{position:relative; left:0; width:100%; margin:0; text-align:left}
header #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none;}
header #cssmenu #head-mobile{display:block; padding:23px; color:#ddd; font-size:12px; font-weight:700;}
header .button{width:55px; height:46px; position:absolute; right:0; top:0; cursor:pointer; z-index: 12399994;}
header .button:after{position:absolute; top:22px; right:0px; display:block; height:10px; width:30px; border-top:2px solid #fff; border-bottom:2px solid #fff; content:''}
header .button:before{-webkit-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; position:absolute; top:14px; right:0px; display:block; height:2px; width:30px; background:#fff; content:''}
header .button.menu-opened:after{-webkit-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; top:23px; border:0; height:2px; width:19px; background:#fff; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg)}
header .button.menu-opened:before{top:23px; background:#fff; width:19px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg)}
header #cssmenu .submenu-button{position:absolute; z-index:99; right:0; top:0; display:block; border-left:1px solid #04a966; height:46px; width:46px; cursor:pointer}
header #cssmenu .submenu-button.submenu-opened{background:#262626;}
header #cssmenu ul ul .submenu-button{height:34px; width:34px}
header #cssmenu .submenu-button:after{position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#04a966; content:''}
header #cssmenu ul ul .submenu-button:after{top:15px; right:13px}
header #cssmenu .submenu-button.submenu-opened:after{background:#fff}
header #cssmenu .submenu-button:before{position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#04a966; content:''}
header #cssmenu ul ul .submenu-button:before{top:12px; right:16px;}
header #cssmenu .submenu-button.submenu-opened:before{display:none;}
header #cssmenu ul ul ul li.active a{border-left:none;}
header #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none;}
header .butt {margin-top: 20px;}
}



.clients .owl-theme .owl-controls {display: none!important;}


.getin {background-image: url(../images/get.jpg); background-size: cover; background-repeat: no-repeat;}
.getin .btn {border-color: #fff;}


footer {background: url(../images/footer.jpg) no-repeat top center; background-size: cover;}
footer .content h5 {font-size: 18px; font-weight: 500; margin-bottom: 20px; color: #009a54;}
footer .content a {font-size: 16px; color: #6a6a6a; line-height: 34px; font-weight: 500; text-decoration: none; -webkit-transition: 0.5s; transition: 0.5s;}
footer .content a:hover {color: #009a54;}
footer .content .social a {font-size: 16px; margin-right: 20px;}
footer .bot a {color: #009a54!important;}
footer .bot p {font-size: 16px; font-weight: 500; color: #6a6a6a;}



/*inner banner*/
.inner-banner {padding: 12rem 0 3rem 0; position: relative; background-position: center center; background-size: cover; background-repeat: repeat; background-attachment: scroll; width: 100%; z-index: 1;}
.inner-banner .breadcrumb-item a {color: #fff; text-decoration: none; font-weight: 500;}
.breadcrumb-item.active a {color: #009a54;}
.breadcrumb{ background-color: #f5f5f500 !important;}










@media only screen and (min-width : 1920px) and (max-width : 2560px){}

@media only screen and (min-width : 1600px) and (max-width : 1919px){}

@media only screen and (min-width : 1440px) and (max-width : 1599px){}

@media only screen and (min-width : 1366px) and (max-width : 1439px){}

@media only screen and (min-width : 1280px) and (max-width : 1365px){
header #cssmenu > ul > li > a {font-size: 14px;}
header #cssmenu > ul > li {padding-left: 20px;}
header #cssmenu > ul > li.has-sub > a:before {top: 19px;}
header #cssmenu > ul > li.has-sub > a:after {top: 22px;}

.btn {font-size: 16px!important; height: 45px;}
.arabic {width: 45px; height: 45px; font-size: 14px!important;}

body h3 {font-size: 38px;}



}

@media only screen and (min-width : 1200px) and (max-width : 1279px){
header #cssmenu > ul > li > a {font-size: 14px;}
header #cssmenu > ul > li {padding-left: 15px;}
header #cssmenu > ul > li.has-sub > a:before {top: 19px;}
header #cssmenu > ul > li.has-sub > a:after {top: 22px;}

.btn {font-size: 16px!important; height: 47px;}
.arabic {width: 47px; height: 47px; font-size: 14px!important;}

body h3 {font-size: 36px;}


}

@media only screen and (min-width : 1024px) and (max-width : 1199px){
header .container-fluid {width: 95%;}  
header #cssmenu > ul > li > a {font-size: 14px;}
header #cssmenu > ul > li {padding-left: 15px;}
header #cssmenu > ul > li.has-sub > a:before {top: 19px;}
header #cssmenu > ul > li.has-sub > a:after {top: 22px;}

.btn {font-size: 14px!important; height: 45px; padding: 15px 30px!important;}
.arabic {width: 45px; height: 45px; font-size: 14px!important; padding: 15px!important;}

body h3 {font-size: 36px;}




}

@media only screen and (min-width : 768px) and (max-width :1023px){
header {padding-top: 20px; padding-bottom: 20px;}  
header .logo img {max-width: 50%;}
header #cssmenu > ul > li {padding-left: 0;}
header .btn {font-size: 14px!important; height: 45px; padding: 15px 15px!important; border-radius: 0px; text-align: left;}

.btn {font-size: 14px!important; height: 45px; padding: 15px 30px!important;}
.arabic {width: 45px; height: 45px; font-size: 14px!important; padding: 15px!important;}

body h3 {font-size: 34px;}

.py-5 {padding-top: 4rem !important; padding-bottom: 4rem !important;}
.pb-5 {padding-bottom: 4rem !important;}
.pt-5 {padding-bottom: 4rem !important;}

.w-sm-20 {width: 25% !important;}



}

@media only screen and (min-width : 150px) and (max-width : 767px){
header {padding-top: 20px; padding-bottom: 10px;}  
header .logo img {max-width: 35%;}
header #cssmenu > ul > li {padding-left: 0;}
header .btn {font-size: 14px!important; height: 45px; padding: 15px 15px!important; border-radius: 0px; text-align: left;}
header .d-flex {display: block !important;}

.btn {font-size: 14px!important; height: 45px; padding: 15px 30px!important;}
.arabic {width: 45px; height: 45px; font-size: 14px!important; padding: 15px!important;}

body h3 {font-size: 28px;}

.py-5 {padding-top: 3.5rem !important; padding-bottom: 3.5rem !important;}
.pb-5 {padding-bottom: 3.5rem !important;}
.pt-4 {padding-top: 3rem !important;}
.pt-3 {padding-top: 2rem !important;}

footer .content h5 {margin-bottom: 5px; margin-top: 20px;}


}

@media only screen and (max-width : 375px){}

@media only screen and (max-width : 360px){}

@media only screen and (max-width : 320px){}