/* custom*/
	@font-face {
		font-family: "bold";
		font-style: normal; 
		src: url("../fonts/HelveticaNeueLTArabic-Bold_2.ttf") format("truetype")
	} 
	
	@font-face {
		font-family: "roman";
		font-style: normal; 
		src: url("../fonts/HelveticaNeueLTArabic-Roman_0.ttf") format("truetype")
	} 
	@font-face {
		font-family: "light";
		font-style: normal; 
		src: url("../fonts/HelveticaNeueLTArabic-Light_0.ttf") format("truetype")
	} 
	:root{
		--main-color: rgb(242,178,0);
		--second-color: rgb(242,178,0);
		--normal-color: #000001; 
		--light-color: #878D8E; 
	}
	h1,h2,h3,h4,h5,h6,label{
		line-height: 1.5;
		font-family: "bold";
	}
	body { 
		font-family: "roman";
		height: 100%;
		font-size: 16px;
		line-height: 1.8;
		color: var(--normal-color);
	}
	a{
		cursor: pointer; 
	} 
	a:hover { 
		text-decoration: none;
	} 
	section {
		padding: 5rem 0; 
	}
	section .row{
		margin-bottom: 2rem;
	} 
	section .row:last-child{
		margin-bottom: 0px;
	}
	.text-bold{
		font-weight: bold;
	} 
	.bg-light{
		background-color: #F8F8F8 !important;
	}
	.btn{
		padding: 0 3rem;
		height: 50px;
		line-height: 45px;
		border-width: 2px;
		border-radius: 0;
	}
	.btn:hover,
	.btn:focus{
		outline: none;
		box-shadow: none;
	}
	.text-primary { 
		color: var(--main-color) !important;
	}
	.btn-primary {
		color: #fff;
		background-color: var(--main-color);
		border-color:var(--main-color); 
	} 
	.btn-primary:hover { 
		background-color: var(--second-color);
		border-color:var(--second-color);
	}
	.btn-primary:not(:disabled):not(.disabled).active,
	.btn-primary:not(:disabled):not(.disabled):active,
	.show>.btn-primary.dropdown-toggle { 
		background-color: var(--second-color);
		border-color: var(--second-color);
	}
	.btn-primary:focus{ 
		border: none;
		outline: none;
		box-shadow: none !important;
	}
	.btn-outline-primary {
		color: var(--main-color);
		border-color: var(--main-color);
	}
	.btn-link{
		border-color: var(--main-color);
		color: var(--main-color) !important;
	}
	.btn-link:hover,
	.btn-link:focus{
		text-decoration: none;
		color: var(--second-color) !important;
	}
	.btn-outline-primary:hover,
	.btn-outline-primary:not(:disabled):not(.disabled).active,
	.btn-outline-primary:not(:disabled):not(.disabled):active,
	.show>.btn-outline-primary.dropdown-toggle { 
		background-color: var(--main-color);
		border-color: var(--main-color);
	}
	.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
	.btn-outline-primary:not(:disabled):not(.disabled):active:focus, 
	.show>.btn-outline-primary.dropdown-toggle:focus {
		box-shadow: 0 0 0 0.2rem rgba(var(--main-color) .5);
	}
	  
	/* ---------------------------------------------------
		btn-ripple 
	----------------------------------------------------- */
	.btn {
		display: inline-block;
		position: relative;
		overflow: hidden;
		transition: all ease-in-out .5s;
	}
	.btn::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 25%;
		height: 100%;
		width: 50%;
		background-color: #fff;
		border-radius: 50%;
		opacity: 0;
		pointer-events: none;
		transition: all ease-in-out 0.5s;
		transform: scale(5, 5);
	} 
	.btn:active::after {
		padding: 0;
		margin: 0;
		opacity: .2;
		transition: 0s;
		transform: scale(0, 0);
	} 
	.alert{ 
		padding: 1rem;
		border-radius: 6px;
	}
	.alert-success{
		color: #24A961;
		background: rgba(36, 169, 98, 0.2);
	}
	.alert-danger{
		color: #D14747 ;
		background: rgba(209, 71, 71, 0.2);
	} 
	/* 
		Scroll 2 top
	*/ 
	.scroll-to-top {
		position: fixed; 
		width: 50px;
		height: 50px;
		line-height: 40px;
		border-radius: 50%;
		background: transparent;
		border: 3px solid var(--main-color);
		color: var(--main-color);
		font-size: 22px;
		right: -50%;
		bottom: 50px;
		z-index: 1;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	.scroll-to-top.show { 
		right: 30px; 
	}
	.scroll-to-top:hover {  
		background-color: var(--main-color);
		color: #fff;
	}
	ul, ol{
		padding: 0;
		margin: 0;
	}
	 
/*---------------------------------------------- 
	Navbar  
	------------------------------------------*/ 
	.navbar {
		position: absolute; 
		top: 0;
		left: 0;
		width: 100%;
		transition: all 0.6s ease-in;
		z-index: 99999;
		background: transparent;  
	} 
	.navbar-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center; 
	}  
	.navbar .logo{
		width: 150px;
	}  
	.navbar .nav-item{
		padding: 0 1em;
	}
	.navbar .nav-link{
		position: relative;
		color: var(--normal-color);
		position: relative;  
		padding: 1rem 0 !important; 
		text-transform: capitalize;
		transition: all 0.3s ease;
	}  
	.navbar .nav-link::after{
		position: absolute;
		content: "";
		bottom: 0;
		right: 0;
		width: 0; 
		height: 6px;
		background-color: var(--main-color);
		transition: all 0.3s ease;
	} 
	.navbar .nav-link:hover::after,
	.navbar .nav-link.active::after{
		width: 100%; 
	}
	
	.navbar .nav-item:last-child .nav-link::after{
		display: none;
	}
	.navbar .nav-link .lang{
		color: #fff;
		background-color: var(--main-color);
		display: block;
		min-width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
	[dir="ltr"] .navbar .nav-link::after{ 
		right: auto; 
		left: 0; 
	}
	.navbar .nav-link:hover,
	.navbar .nav-link.active{ 
		color: var(--main-color);
	} 
	.navbar .nav-link.active{
		font-weight: bold;
	}
	@media (max-width: 992px) { 
		.navbar-collapse.collapsing .navbar-nav {
			display: block;
			position: fixed;
			top: 0;
			bottom: 0;
			right: -100%;
			transition: all 0.2s ease;
		}
		.navbar-collapse.show .navbar-nav {
			position: fixed;
			top: 0;
			bottom: 0;
			right: 0;
			flex-direction: column;
			height: auto;
			width: 300px;
			background: #fff;
			transition: right 0.2s ease;
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
			z-index: 99999999;
			padding: 1rem;   
			overflow-y: scroll;
		} 
		.navbar-collapse.show .navbar-nav .nav-link{
			padding: 1.5rem 1rem !important;   
			border-bottom: 0.5px solid rgba(26, 7, 38, 0.06); 
		} 
		.navbar-collapse.show .navbar-nav .nav-item:last-child .nav-link{ 
			border-bottom: none; 
		}
		.navbar-collapse.show .close-nav{
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 50%;
			background: var(--main-color);  
			display: block;
			margin-bottom: 2rem;
		}
	}
	.navbar .btn-collapse{
		cursor: pointer;
	}
	.navbar.fixed-top { 
		position: fixed;
		-webkit-animation: navbar-animation 0.6s;
		animation: navbar-animation 0.6s;
		background-color: #fff;
		box-shadow: 0px 3px 6px #00000029; 
		padding: 0.5rem 1rem;
		z-index: 999;
	} 
	@-webkit-keyframes navbar-animation {
		0% {
		  opacity: 0;
		  -webkit-transform: translateY(-100%);
		  -ms-transform: translateY(-100%);
		  transform: translateY(-100%);
		}
		100% {
		  opacity: 1;
		  -webkit-transform: translateY(0);
		  -ms-transform: translateY(0);
		  transform: translateY(0);
		}
	}
	@keyframes navbar-animation {
		0% {
		  opacity: 0;
		  -webkit-transform: translateY(-100%);
		  -ms-transform: translateY(-100%);
		  transform: translateY(-100%);
		}
		100% {
		  opacity: 1;
		  -webkit-transform: translateY(0);
		  -ms-transform: translateY(0);
		  transform: translateY(0);
		}
	}
 
/*-------------------------------------------
	Header
--------------------------------------------*/ 
	.header {
		position: relative;
		width: 100%;
		height: 797px; 
		display: flex;
		align-items: center; 
		justify-content: center; 
		background-image: url(../img/header.jpeg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		background-color: #ccc; 
		clip-path: polygon(50% 100%, 100% 88%, 100% 0, 0 0, 0 88%);
	}
	.header::after{
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		top: 0;
		left: 0; 
		background: #FFFFFF;
		opacity: .6;
		z-index: 1;
	} 
	.header .header-box {
		position: relative;
		z-index: 2;
	}
	.header .header-box .title{ 
		line-height: 1.3;
		font-size: 40px; 
		color: var(--dark-color);
	}
	.header .pattren{
		max-width: 100%;
		position: absolute; 
		right: 5%; 
		top: 50%;
		transform: translateY(-50%);
	} 
	
	.sub-header {
		position: relative;
		width: 100%;
		height: 320px;
		display: flex;
		align-items: center;  
		background-image: url(../img/sub-header.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;  
	}
	.sub-header::after{
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		top: 0;
		left: 0; 
		background: rgb(242,178,0) ;
		opacity: .5;
		z-index: 1;
	} 
	
	.sub-header .header-box {
		position: relative;
		z-index: 2;
		margin-top: 10rem;
	}
	.sub-header .header-box .title{ 
		line-height: 1.3;
		font-size: 40px; 
		color: #fff;
	}
/*-------------------------------------------
	Title Section
--------------------------------------------*/ 
	.title-section{
		position: relative;
		margin-bottom: 2rem;
	}
	.title-section .title{
		padding: 0;
		font-size: 40px; 
	}
	.title-section .description{
		font-size: 14px; 
	}

/*-------------------------------------------
	About
--------------------------------------------*/ 
	
	.about-info .title{
		font-size: 40px;  
	}	 
	.about-info .details{
		font-size: 18px;
		line-height: 2;
		color: var(--normal-color);
	}  
	.about-box{
		height: 100%;
		padding: 2rem 1rem;
		border:  1px solid var(--main-color);
		transition: all 0.3s ease;
	}
	.about-box .icon {
		width: 50px;
		height: 50px;
	}
	.about-box .icon svg{ 
		height: 50px;
	}
	.about-box .icon svg path{ 
		fill:  var(--main-color);
	}
	.about-box .title{ 
		color: var(--main-color);
		font-size: 32px;
		padding: 1rem 0;
	}
	.about-box .details{
		font-size: 16px;
		line-height: 2;
		color: var(--normal-color);
	}
	.about-box:hover{ 
		transform: translateY(-1rem);
		background-color: var(--main-color);
	}
	
	.about-box:hover .title,
	.about-box:hover .details{
		color: #fff;
	}
	.about-box:hover svg path{
		fill: #fff;
	}
	@media (max-width: 992px){
		.about-box{
			margin-bottom: 2rem;
			height: auto;
		}
	}

/*-------------------------------------------
	Project
--------------------------------------------*/
	.project-section{
		padding: 10rem 0;
		position: relative;
		background-color: var(--main-color);
	}
	.project-section .pattren{
		max-width: 100%;
		position: absolute; 
		left: 5%; 
		top: 50%;
		transform: translateY(-50%);
	}
	.project-box{
		display: block;
		position: relative;
		width: 100%;
		height: 280px;
		overflow: hidden;
		/*margin-bottom: 2rem;*/
		background-color: var(--second-color);
	}
	.project-box .pic{ 
		width: 100%;
		height: 100%; 
		object-fit: cover;
		transition: all 0.3s ease;
	}
	.project-box:hover .pic{ 
		transform: scale(1.1);
		opacity: .5;
	}
	.project-box .content{ 
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		text-align: center; 
		transition: all 0.3s ease .1s;
		z-index: 1;
		color: #fff;
	}
	.project-box:hover .content{ 
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.project-box .content .details{  
		transition: all 0.6s ease .3s;
		opacity: 0;
	}
	.project-box:hover .content .details{   
		opacity: 1;
	}
	.project-box .content .title{
		margin-bottom: 2rem;
	}
	.project-box .content svg{
		width: 30px;
		margin-right: 1rem;
	}
	[dir="ltr"] .project-box .content svg{
		transform: rotate(-180deg);
		margin-right: 0;
		margin-left: 1rem;
	}

	
	.project-box-info .title{
		position: relative;
		font-size: 24px;
		padding-bottom: 1.5rem;
		margin-bottom: 2rem;
		color: var(--main-color);
	} 
	.project-box-info .details{ 
		font-size: 16px; 
	} 
	.project-box-info .title::after{
		position: absolute;
		content: "";
		width: 60px;
		height: 6px;
		background-color: var(--main-color);
		bottom: 0;
		right: 0;
	}

	[dir="ltr"] .project-box-info .title::after{ 
		right: auto;
		left: 0;
	}

	.project-nav .nav-link{ 
		font-size: 18px;
		font-weight: bold;
		color: #A1A1A1;
		border: 1px solid #A1A1A1;
		border-radius: 0;
		padding: 1rem;
		margin-bottom: 1rem;
		text-align: center;
	}
	.project-nav .nav-link.active{  
		color: #fff;
		background-color: var(--main-color);
		border: 1px solid var(--main-color);
	}

/*-------------------------------------------
	partner
--------------------------------------------*/ 
	.partner-box{
		width: 100%; 
		height: 180px;
		background: #FFFFFF;  
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem;
		transition: all .3s ease;
		margin-bottom: 2rem;
		box-shadow: 0px 1px 6px #00000029;
	}  
	.partner-box img{
		width: auto !important;
		max-width: 100%;
		max-height: 100%;
		object-fit: cover;
		transition: all .3s ease;
	}
	.partner-box:hover img{
		transform: scale(.9);
	}

	[dir="ltr"] .phone svg{
		transform: rotateY(180deg);
	}
/*-------------------------------------------
	FOOTER
--------------------------------------------*/
	.footer-section{  
		background-color: var(--normal-color);
		font-size: 16px;
	}
	.footer-section h5{ 
		font-size: 24px;
		margin-bottom: 1rem;
	} 
	.footer-section a{ 
		color: #fff;
	} 
	.footer-section a:hover{ 
		color: var(--main-color);
	} 
	.footer-section .links .nav-link{ 
		margin-bottom: .25rem;
	}  
	.copyright {
		color: #fff;
		font-size: 13px;
	}
/*-------------------------------------------
	Social Media
--------------------------------------------*/ 
	.social-media {
		max-width: 200px;
		margin: auto;	
	}
	.social-media .nav-link{
		width: 40px;
		height: 40px;
		line-height: 40px;
		padding: 0;
		font-size: 18px; 
		color: #fff;
		text-align: center;
		border-radius: 5px; 
		transition: all 0.3s ease;
	}
	.social-media .nav-link:hover{
		transform: scale(1.1);
		color: #fff;
	}
	
/*-------------------------------------------
	contact
--------------------------------------------*/ 

	.contact-box{
		display:flex; 
		align-items: flex-start;
		margin-bottom: 2rem;
	}
	.contact-box h5{
		font-size: 18px;
	}

/*-------------------------------------------
	FORM
--------------------------------------------*/ 
	.form{
		font-size: 18px;
	} 
	.form .form-control{
		font-size: 18px;	
		min-height: 60px; 
		border: 1px solid #A1A1A1; 
		border-radius: 0px; 
	} 
	.form .form-control:focus { 
		border-color: transparent;  
		box-shadow: 0 0 0 0.2rem rgb(89, 136, 43, .25);
	} 
	.form .form-control::placeholder{
		color: #A1A1A1;  
	}
 
/*--------------------------------------------
	carousel
--------------------------------------------*/  

	.carousel{
		padding: 0;
	}
	.carousel-control-next-icon, 
	.carousel-control-prev-icon { 
		width: 40px;
		height: 40px;
	}
	.carousel-item{
		width: 100%;
		height: 550px;
		overflow: hidden;
		border-radius: 18px;
	} 
	.carousel-item .pic{
		width: 100%;
		height: 100%;
		object-fit: cover;
		-webkit-animation: zoom 20s;
		animation: zoom 20s;
	}
	@-webkit-keyframes zoom {
		from {
		  -webkit-transform: scale(1, 1);
		}
		to {
		  -webkit-transform: scale(1.5, 1.5);
		}
	  }
	  
	  @keyframes zoom {
		from {
		  transform: scale(1, 1);
		}
		to {
		  transform: scale(1.5, 1.5);
		}
	  }
/*--------------------------------------------
	Inner page
--------------------------------------------*/  
	
	.inner-page .project-section{
		background-color: #fff;
	}
	.inner-page .navbar { 
		background: rgb(255, 255, 255, .6);  
	}
	.inner-page .navbar.fixed-top { 
		background: rgb(255, 255, 255, 1);  
	}

	.page-link { 
		width: 50px;
		height: 50px;
		line-height: 45px;
		text-align: center;
		display: block;
		padding: 0;
		margin-right: 0; 
		color: #A1A1A1; 
		border: 1px solid #A1A1A1;
		border-radius: 0 !important;
		font-size: 20px;
		font-weight: bold;
		margin-left: .5rem;
	} 
	.page-item .page-link:hover,  
	.page-item.active .page-link{  
		color: #fff; 
		border: 1px solid var(--main-color); 
		background-color: var(--main-color); 
	}
	[dir="ltr"] .page-link{
		margin-left: 0;
		margin-right: .5rem;
	} 

	
	[dir="ltr"] .header .pattren { 
		right: auto;
		left: 5%; 
	}
	
	[dir="ltr"] .project-section .pattren { 
		right: 10%;
		left: auto;  
	}
/*--------------------------------------------
	Direction
--------------------------------------------*/ 

/*--------------------------------------------
	Media Query
--------------------------------------------*/
 
	@media all and (max-width: 1079px){
	}
	@media all and (min-width: 999px){  
	}
	@media all and (max-width: 991px){
	}
	@media all and (max-width: 768px){ 
		.carousel-item{
			width: 100%;
			height: auto;
		}
		.header .header-box{
			padding: 1rem;
			text-align: center;
		}
	}	
	@media (max-width: 580px) {
		.pattren{
			display: none
		}
	}  
	@media (max-width: 420px) { 
	}
	@media (max-width: 375px) { 
	}
	@media (max-width: 330px) { 
	}