@import url("JiSlider.css");
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Tajawal');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Barlow');
html, body {height: 100%;}
#JiSlider {width: 100%; height: 550px;}
* { margin: 0; padding: 0; box-sizing: border-box;}
body { margin:0; padding:0; font-size: 16px; font-family: 'Tajawal', sans-serif; background:#fff; overflow-x: hidden;}
.nav { z-index:10002; background:none; position: absolute; top: 0; left: 0; width: 100%; text-align: right; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-transform:uppercase; }
.nav-shrink { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: fixed; background: #000;}
.nav-shrink .nav-wrap { margin: 14.28571px auto;  }
.nav-shrink .nav-list { font-size: 17px; }
.nav-shrink .nav-link { color: #fff; }
 div ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; height: 7px;} 
.nav-wrap { max-width: 1280px; width: 90%; margin: 20px auto;}
.nav-list { list-style: none; display: inline-block; font-size: 17px; margin-top:5px; padding:10px 0; margin-right: 20px;}
.top-menu ul {width:100%;}
.top-menu li {width:33%; float:left; }
.top-menu li:last-child {border-right:none;}
.top-menu li a {display: block;	width:80%; background:#ddd;	padding:4% 10%;	font-size:1.35em;text-decoration: none; 	}


 




.logo{ width:180px; height:auto; padding:0; margin:0; position:absolute; left:10%; top:12px; }
.logo img{ width:100%;}
.header-image{ width:100%; height:100% !important; display:block; margin:0; padding:0; position:absolute; top:0; z-index:1; background:url(../images/header1.jpg) center;background-size: 50%;background-size: 3.2em;background-size: 12px; background-size: auto;}
.header-caption{ width:65%;font-weight:normal; position:absolute; line-height: 55px; font-size:55px; top:50%; left:30%;padding:0; margin:0; transform: translate(-30%, -50%); box-sizing:border-box; text-align:left;font-family: 'Roboto', sans-serif;   color:#fff; text-shadow: -1px 3px 7px #000000; }
.heading-sub{width:70%;font-family: 'Roboto', sans-serif; font-weight:normal; font-size:25px; line-height:32px; margin:20px 0 0 0 !important; background:none; padding:0;}
.content-area{ position:relative; left:0; right:0; width:80%; margin:0 auto; text-align:center; padding:90px 0 30px 0;  }
.main-heading{ font-size:50px; color:#015ec6;  font-weight:100; font-family: 'Catamaran', sans-serif; padding-bottom:30px;}
.gray-text{ color:#666; line-height:30px; text-align:left;}
.button-text{ margin:15px 0 20px 0;}
.button-text a{ color:#6d6d6d; font-weight:bold; text-decoration:none;}
.button-text a:hover{ color:#f38630;}
.arrow{color:#f38630; font-weight:normal; font-size:17px; padding-left:6px; }
.wrapper { position:relative; padding: 5px; max-width: 100%; width: 95%; margin: 100px auto; }
.wrapper-bottom {  padding: 5px; max-width: 100%; width: 95%; margin: -100px auto 0 auto !important; }
.columns {position:relative;display: flex; flex-flow: row wrap;	justify-content: center; margin: 5px 0;  }
.column {position:relative;flex: 1; margin: 2px; padding: 30px; 
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }
}
.column2 {position:relative;flex: 1; margin: 2px; padding: 2px; 
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }
}
.column h2{ font-size:21px; line-height:25px; color:#015ec6; padding:15px 0 10px 0; font-weight:bold;}
.column2 h3{ font-size:17px; line-height:25px; color:#487cb7; padding:5px 0 10px 0; font-weight:bold;}
.column	.gray-text{ color:#666; text-align:center; line-height:25px;}
.icon-sd{ margin:0; padding:0; }
.icon-sd img{ width:100%; height:auto;}
.wrapper-full { position:relative; padding:0px 30px;  width:100%; margin: 0px auto; }
.capabilities{  }
.range-list{ margin:0; padding:0;}
.range-list li{ margin:100px 0 0 0; padding:75px 40px 0 40px; list-style:none; display:inline-block; }
.container{ margin:0; padding:0;}
.container .tabs {position: relative; width: 100%; overflow: hidden; font-weight: 300; }
/* Nav */
.container .tabs nav {text-align: center;}
.container .tabs nav ul { padding: 0; margin: 0; list-style: none; display: inline-block;}
.container .tabs nav ul li {border: 1px solid #becbd2; border-radius: 10px; margin: 0 0.25em; display: block; float: left; position: relative;}
.container .tabs nav li.tab-current {border: 1px solid #becbd2; 	box-shadow: inset 0 2px #47a3da;  border-radius: 10px; 	z-index: 100;}

.container .tabs nav li.tab-current:before,
.container .tabs nav li.tab-current:after {	content: ''; position: absolute; height: 1px; right: 100%; bottom: 0; width: 1000px;}
.container .tabs nav li.tab-current:after {	right: auto; left: 100%; width: 4000px;}
.container .tabs nav a { color: #8b8f91; text-transform:uppercase; display: block; font-size: 1.05em; line-height: 2.5; padding: 0 1.25em; font-weight:bold;
	white-space: nowrap; text-decoration:none;}
.container .tabs nav a:hover {color: #768e9d;}
.container .tabs nav li.tab-current a {	color: #fff; background:#FC0;border-radius: 10px; }

/* Inside pages */
.inside-Header{ margin: 0 auto; padding: 0; height: 450px; text-align: center;}
.about-us{ width:100%; height:450px !important; display:block; margin:0; padding:0; background:url(../images/about-insidePages.jpg) center;background-size: 50%;background-size: 3.2em; background-size: 12px; background-size: auto; position: relative;}
.inside-header-caption{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-weight: 100; text-transform: uppercase;  font-size: 25px; }
.page-heading{ position: relative; text-align: center; font-size: 35px;  text-transform: uppercase; font-weight: 100; padding-bottom: 30px; color: #4d62b6;  width: 100%;}
.page-heading:before{ position: relative; top: -5px; left: 0px; right: 0; text-align: center; margin: 0 auto; content: "::: "; font-size: 40px; color:#F49C0C; letter-spacing: -1px;}
.align-just{ text-align: justify; }


.copyright-wrapper1{ display: flex;width:80% !important; margin: 0 auto;} 
.copyright-wrapper1 .left-side{ padding-left: 30px; }
.copyright-wrapper1 .right-side{ padding-right: 30px; }

.about-container{display: flex;	/*background-color: #f1eee9;*/height: 100%; }
.about-left-column, .about-right-column{ display: flex;  flex-direction: row; }
.about-left-column{	background-color: none; width: 50%; padding: 30px 35px;  flex-direction: column;}
.about-right-column{background-color: none; width: 50%; padding: 30px 35px;  flex-direction: column; justify-content: center; align-items: center;}
.link-wrap-left, .link-wrap-right{  display: flex;} 
.link-wrap-left a, .link-wrap-right a{font-size: 30px;	font-weight: 600;  color: white;}
 

.team-container {
  padding: 0.5rem;
  margin: 2rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.profile-pic{width: 60%; position: relative; top:0px; left: 0; right: 0; text-align: center; margin: 0 auto;  padding: 0;  background: #fff;}
.profile-pic img{ width: 100%; padding: 10px 10px 10px 10px; border-radius:200px; border: 1px solid #d8d8d8;}
.team-item p{ font-size: 16px !important; color: #555555; margin-top: 10px; }
.team-item h1{ font-size: 25px; color: #199edc; font-weight: 700; text-align: center;}
.team-item h1 div{ font-size: 18px; font-weight: 100; text-align: center;  color: #199edc;}
.profile-pic-lach{width: 270px; height: auto; position: relative; top:0px; left: 0; right: 0; text-align: center; margin: 0 auto;  padding: 0;  background: #fff;}
.profile-pic-lach img{ width: 100%; padding: 10px 10px 10px 10px; border-radius:200px; border: 1px solid #d8d8d8;}
.team-item { 
    background: #fff;
    position: relative;     
    text-align: justify;
    padding: 0px 30px 30px 30px;
    margin: 0px 0 0 0;
    flex: 1 1 auto;
    @media screen and (min-width: 320px) {
    width: 100%;
    }
    @media screen and (min-width: 640px) {
    width: calc(50% - 1rem);
    }
    @media screen and (min-width: 1100px) {
    width: calc(25% - 1rem);
    }
     
}





 
/* Inside pages */
/* Content */
.content section {font-size: 1.25em; padding: 0em 1em; display: none; width:100%; margin: 0 auto; }
.content section:before,
.content section:after {content: ''; display: table; }
.content section:after {clear: both;}

/* Fallback example */
.no-js .content section {display: block; padding-bottom: 2em;}
.content section.content-current {display: block; margin:0; padding:0;}
.mediabox  { margin:0; position:relative; top:0; padding:0; }
.mediabox img{ margin:0; padding:0; position:relative; top:-80px;}
.mediabox p{position:relative; top:-80px; padding: 0 0 1em 0; margin: 0; line-height: 1.3; }


.slider { width: 50%;  margin: 0px auto; }
.slick-slide { margin: 0px 20px; }
.slick-slide img {width: 100%; }
.slick-prev:before,  .slick-next:before { color: black; }
.slick-slide { transition: all ease-in-out .3s;  opacity: .2;  }
.slick-active { opacity: .5; }
.slick-current { opacity: 1; }
.full-wrapper-profile{width:100% !important; position:relative; bottom:0; margin:50px 0; padding:0; } 
.box-profile{ border:1px solid; width:200px !important;}
.name{margin:20px 0 0 0; color:#3662ab; font-weight:bold;}
.post{ color:#666; font-weight:normal; line-height:15px;}
.social-media{ margin:20px 0 0 0; padding:0; }
.social-media ul{ margin:0; padding:0; }
.social-media ul li{ margin:0; padding:0; list-style:none; display:inline-block; }
.businessGrowth{width:100% !important; position:relative;  margin:0px 0; padding:0; }
.getconnect{ background:#0cceff; padding:70px 0;}
.get-contect{ background:none; border:2px solid #fff; border-radius:5px; color:#fff; margin:30px 0 0 0; padding:10px 30px; font-size:20px; cursor:pointer; }
.get-contect:hover{ background:#0bc0ee; color:#000;transition: all 0.3s ease-in-out;}
.footer{ padding:70px 10% 70px 10% !important;  width: 99.1vw !important; position: relative; bottom:-110px; margin-left: -49.51vw; left: 50%;background:#acacac;}
.textleft{ text-align:left !important; color:#333 !important;  font-size:15px;}
.footer ul{ margin:0; padding:0;}
.footer ul li{ margin:0; padding:0; list-style:none; color:#333; font-size:15px;}
.footer > main{width:100% !important;}
.copyright-wrapper{ position:relative; width:100%;  margin: 30px auto 0 auto; padding: 0; text-align: center;}
.left-side{ position:absolute; margin:0; padding:0; left:0; color:#000; font-size:15px;}
.right-side{ position:absolute; margin:0; padding:0; right:0; color:#fff; font-size:15px;}

 

@media screen and (max-width: 1280px) {
.logo{ left:5%; }.nav { height:65px; text-align:right;}
.content-area { width:96%;}
.wrapper { width:100%;}
.column { padding: 20px; 
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }
}
.column2 { padding: 20px; 
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }
}
}
 
@media screen and (max-width: 1024px) { 
.nav-shrink{ padding:15px 0;}
.logo{ left:1%; } 
#menu {width:1.4em;	display: block !important; text-align:center; border:1px solid #fff; border-radius:5px; cursor:pointer; background:none; color:#fff; font-size:1.35em; float:right; margin:10px 15px 0 0;}
#nav.js {display: none;}
.top-menu ul {width:100%;  }
.top-menu li {width:100%; border-right:none;  }
 .nav ul{ width:100%; position:absolute; right:0; top:50px; background:#000;}
 .nav li{ display:block !important; }
.header-caption{ width:90%; font-size:45px;}
.captions{ font-size:35px; line-height:35px;}
}

@media screen and (max-width: 980px) {
  .columns .column  .column2 {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
		}
	}
	.column2 {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
		}
	}
	
.container .tabs nav ul li{ display:block; width:auto; padding:0px;  margin-bottom: 10px;border:1px solid #becbd2; }
.container .tabs nav li.tab-current a { 
	  border- radius: none; padding:0 20px;
}
.mediabox img{ display:block !important; width:100%; }
.mediabox p{ text-align:center; width:100%; }
    
    .about-container{ flex-direction: column;  }
   .about-left-column, .about-right-column{ width: auto;  height: 50%;  }
   .link-wrap-left, .link-wrap-right{  width: 100%; }
}

@media screen and (max-width: 680px) {
	.columns .column .column2  {
		flex-basis: 100%;
		margin: 0 0 5px 0;
	}
 
}

@media screen and (min-width: 769px) {
#menu {	display: none;}
}

















@media all and (max-width: 40em) {

.nav-list { font-size: 1rem; }
}

.nav-list:nth-child(1) {
  -webkit-animation: ohMy 0.5s ease-in-out;
  animation: ohMy 0.5s ease-in-out;
}

.nav-list:nth-child(2) {
  -webkit-animation: ohMy 0.6s ease-in-out;
  animation: ohMy 0.6s ease-in-out;
}

.nav-list:nth-child(3) {
  -webkit-animation: ohMy 0.7s ease-in-out;
  animation: ohMy 0.7s ease-in-out;
}

.nav-list:nth-child(4) {
  -webkit-animation: ohMy 0.8s ease-in-out;
  animation: ohMy 0.8s ease-in-out;
}

.nav-link {
  color: #fff; padding:0 8px; 
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.nav-link:hover {
  color: #e8b222;
  border-bottom-color: #828AB0;
}

.content {
  max-width: 728px;
  width: 90%;
  margin: 120px auto;
}
@media all and (max-width: 40em) {

.content { margin: 80px auto; }
}

.content p {
  margin-bottom: 20px;
  line-height: 1.6;
  color: #5F5566;
}

.content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}
 @-webkit-keyframes 
ohMy {  0% {
 opacity: 0;
 -webkit-transform: translate3d(0, -100px, 0);
 transform: translate3d(0, -100px, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}
 @keyframes 
ohMy {  0% {
 opacity: 0;
 -webkit-transform: translate3d(0, -100px, 0);
 transform: translate3d(0, -100px, 0);
}
 100% {
 opacity: 1;
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
}