/* Asasat cooperative  - Construction, Industry, and Manufacturing*/

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header 
5. Search Popup 
6. Sidenav Bar
7. Section Title
8. Page Title
9. Banner Section
10. Banner Section Two
11. Banner Section Three
12. About Us 
13. About Me
14. About Section
15. Welcome Section
16. Fun Facts
17. Features Section 
18. Service Section / Two
19. Service Details
20. Video Section
21. Project Section / Two
22. Project Detail
23. FAQ's Section
24. FAQ Form Section
25. Call Back Section
26. Contact Page Section
27. Contact Info Section
28. Map Section
29. Team Section
30. Pricing Section
31. Testimonial Section / Two
32. Newsletter Section
33. News Section
34. Blog Single
35. Error Section
36. Styled Pagination
37. Clients Section
38. Main Footer
39. Sidebar Page Container
40. Comment Area
41. Comment Form
42. Our Shop
43. Product Details
44. Product Tabs
45. Cart Section
46. CheckOut Section
47. Login Section
**********************************************/

/*** 

====================================================================
			Fonts
====================================================================

***/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:400,500,700|Oswald:200,300,400,500,600,700|Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

/*
font-family: 'Rajdhani', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto', sans-serif;
*/

@import url('flaticon.css');
@import url('jquery-ui.css');
@import url('fontawesome-all.css');
@import url('animate.css');
@import url('owl.css');
@import url('swiper.css');
@import url('jquery.bootstrap-touchspin.css');
@import url('jquery.mCustomScrollbar.min.css');
@import url('jquery.fancybox.min.css');

/*** 

====================================================================
		Reset
====================================================================

***/

*{
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
	font-size: 100%;
}

/*** 

====================================================================
	Global Settings
====================================================================

***/

body {
	
	font-size:14px;
	color:#f1eded;
	line-height: 28px;
	font-weight:400;
	background:#252525;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-family: 'Roboto', sans-serif;
}

a{
	text-decoration:none;
	cursor:pointer;
	color:#FF6000;
}

a:hover,
a:focus,
a:visited{
	text-decoration:none;
	outline:none;
}

h1,h2,h3,h4,h5,h6 {
	position:relative;
	font-weight:normal;
	margin:0px;
	background:none;
	line-height:1.2em;
	font-family: 'Rajdhani', sans-serif;
}

textarea{
	overflow:hidden;	
	resize: none;
}

button{
	outline: none !important;
	cursor: pointer;
}

p,.text{
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
	color: #e6e1e1;
	margin: 0;
}

::-webkit-input-placeholder{color: inherit;}
::-moz-input-placeholder{color: inherit;}
::-ms-input-placeholder{color: inherit;}

::selection {
background:#FF6000;
color:#ffffff;
}

::-moz-selection {
background:#FF6000;
color:#ffffff;
}

::-webkit-selection {
background:#FF6000;
color:#ffffff;
}

.auto-container{
	position:static;
	max-width:1200px;
	padding:0px 15px;
	margin:0 auto;
}

.small-container{
	position:static;
	max-width:1000px;
	padding:0px 15px;
	margin:0 auto;
}

.page-wrapper{
	position:relative;
	margin:0 auto;
	width:100%;
	min-width:300px;
	overflow: hidden;
	z-index: 99;
}

main{
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: #121212;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

main .content-inner{
	position: relative;
}	


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

.theme-btn{
	display:inline-block;
	text-align: center;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
	font-family: "Roboto", sans-serif;
}

.centered{
	text-align:center !important;
}

/*Btn Style One*/

.btn-style-one{
	position:relative;
	font-size:16px;
	line-height:20px;
	color:#ffffff;
	padding: 13px 35px;
	font-weight: 500;
	background-color: #252525;
	border: 2px solid #252525;
	overflow: hidden;
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.30);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.30);
	-ms-box-shadow: 0 10px 30px rgba(0,0,0,0.30);
	-o-box-shadow: 0 10px 30px rgba(0,0,0,0.30);
	box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}

.btn-style-one .btn-title{
	position: relative;
}

.btn-style-one:hover{
	color:#ffffff;

}

.btn-style-one:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	content: "";
	background-color: #FF6000;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
	-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
	-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.btn-style-one:hover:before{
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	transform-origin: bottom left;
}

/*Btn Style Two*/
.btn-style-two{
	position:relative;
	font-size:16px;
	line-height:20px;
	color:#ffffff;
	padding: 15px 40px;
	font-weight: 700;
	background-color: #FF6000;
	overflow: hidden;
}

.btn-style-two .btn-title{
	position: relative;
}

.btn-style-two:hover{
	color:#FF6000;
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
	-ms-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
	-o-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
	box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

.btn-style-two:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	content: "";
	background-color: #ffffff;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
	-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
	-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.btn-style-two:hover:before{
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	transform-origin: bottom left;
}

/*Btn Style Three*/
.btn-style-three{
	position:relative;
	font-size:16px;
	line-height:30px;
	color:#000000;
	padding: 10px 40px;
	font-weight: 700;
	background-color: #ffffff;
	overflow: hidden;
}

.btn-style-three .btn-title{
	position: relative;
}

.btn-style-three:hover{
	color:#ffffff;
	-webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
	-moz-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
	-ms-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
	-o-box-shadow: 0 10px 30px rgba(0,0,0,0.10);
	box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

.btn-style-three:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	content: "";
	background-color: #000000;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
	-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
	-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.btn-style-three:hover:before{
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	transform-origin: bottom left;
}

/*Btn Style Four*/
.btn-style-four{
	position:relative;
	font-size:16px;
	line-height:30px;
	color:#ffffff;
	padding: 13px 40px;
	font-weight: 400;
	overflow: hidden;
	background-color: #FF6000;
	border: 2px solid #FF6000;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	transition: all 300ms linear;
}

.btn-style-four:hover{
	color: #FF6000;
	background-color: #222222;
	border:2px solid #222222;
	-webkit-box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset;
	-moz-box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset;
	-ms-box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset;
	-o-box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset;
	box-shadow: rgba(34, 34, 34, 1) 0 0px 0px 40px inset;
}

/*=== List Style One ===*/
.list-style-one{
	position: relative;
	display: block;
	margin-bottom: 30px;
}

.list-style-one li{
	position: relative;
	font-size: 14px;
	line-height: 24px;
	color: #f1f1f1;
	font-weight: 400;
	padding-left: 35px;
	margin-bottom: 15px;
}

.list-style-one li:before{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 14px;
	line-height: 25px;
	color: #FF6000;
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
}

/*=== List Style Two ===*/
.list-style-two{
	position: relative;
	display: block;
	margin-bottom: 30px;
}

.list-style-two li{
	position: relative;
	font-size: 14px;
	line-height: 20px;
	color: #999999;
	font-weight: 500;
	padding-left: 35px;
	margin-bottom: 15px;
	font-family: "Archivo", sans-serif;
}

.list-style-two li:before{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 14px;
	line-height: 20px;
	color: #FF6000;
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
	content: "\f061";
}

.theme_color{
	color:#FF6000;
}

.pull-right{
	float: right;
}

.pull-left{
	float: left;
}

.preloader{ 
	position:fixed; 
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	z-index:999999; 
	background-color:#252525; 
	background-position:center center; 
	background-repeat:no-repeat; 
	background-image:url(../images/icons/preloader.svg);
}

img{
	display:inline-block;
	max-width:100%;
	height:auto;	
}

.tabs-box{
	position: relative;
}

.tabs-box .tab{
	display: none;
}

.tabs-box .active-tab{
	display: block;
}

/*** 

====================================================================
	Scroll To Top style
====================================================================

***/

.scroll-to-top{
	position: fixed;
	left: 40px;
	bottom: 30px;
	height: 30px;
	width: 30px;
	font-size:14px;
	line-height:30px;
	color:#ffffff;
	text-align:center;
	cursor:pointer;
	z-index:100;
	background:#252525;
	display:none;
	border-radius: 0;
	margin: 0 auto;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;		
}

.scroll-to-top:hover{
	background:#ffffff;
	color: #222222;
}

/*** 

====================================================================
	Main Header
====================================================================

***/

.main-header{
	position: fixed;
	left: 0;
	top: 30px;
	width: 100%;
	z-index: 99999;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.main-header.fixed-header{
	top: 0;
	position: fixed;
	background-color: #222222;
	box-shadow: 0 0 30px rgba(0,0,0,.50);
}

.main-header .main-box{
	position: relative;
	padding: 10px 50px;
}

.main-header .logo-box{
	position: relative;
	float: left;
	padding: 5px 0;
}

.main-header .outer-box{
	position: relative;
	float: right;
}

.main-header .btn-box{
	position: relative;
	float: right;
	margin-left: 20px;
	padding: 8px 0;
}

.nav-toggler {
	position: relative;
	display: block;
	height: 44px;
	width: 44px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-color: transparent;
	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	-ms-transition: -moz-transform 0.2s;
	-o-transition: -moz-transform 0.2s;
	transition: transform 0.2s;
}

.nav-toggler span {
	position: absolute;
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	width: 32px;
	height: 3px;
	background-color: #ffffff;
}

.nav-toggler span::before, .nav-toggler span:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: inherit;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.2s, width 0.2s;
	-moz-transition: -moz-transform 0.2s, width 0.2s;
	transition: transform 0.2s, width 0.2s;
}

.nav-toggler span::before {
	-webkit-transform-origin: right top;
	-moz-transform-origin: right top;
	-ms-transform-origin: right top;
	-o-transform-origin: right top;
	transform-origin: right top;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	-o-transform: translateY(-10px);
	transform: translateY(-10px);
}

.nav-toggler span::after {
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	transform-origin: right bottom;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	-ms-transform: translateY(10px);
	-o-transform: translateY(10px);
	transform: translateY(10px);
}

.no-touch .nav-toggler:hover {
	/* rotate trigger on hover */
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.no-touch .nav-toggler:hover span::after,
.no-touch .nav-toggler:hover span::before {
	/* animate arrow --> from hamburger to arrow */
	width: 50%;
}

.no-touch .nav-toggler:hover span::before {
	-webkit-transform: translateX(1px) translateY(1px) rotate(45deg);
	-moz-transform: translateX(1px) translateY(1px) rotate(45deg);
	-ms-transform: translateX(1px) translateY(1px) rotate(45deg);
	-o-transform: translateX(1px) translateY(1px) rotate(45deg);
	transform: translateX(1px) translateY(1px) rotate(45deg);
}

.no-touch .nav-toggler:hover span::after {
	-webkit-transform: translateX(1px) translateY(-1px) rotate(-45deg);
	-moz-transform: translateX(1px) translateY(-1px) rotate(-45deg);
	-ms-transform: translateX(1px) translateY(-1px) rotate(-45deg);
	-o-transform: translateX(1px) translateY(-1px) rotate(-45deg);
	transform: translateX(1px) translateY(-1px) rotate(-45deg);
}

/*Search Box Widget*/

.main-header .search-box{
	position: relative;
	float: left;
	margin-left: 20px;
	padding: 8px 0;
}

.main-header .search-box .search-btn{
	position: relative;
	display: block;
	height:44px;
	width: 44px;
	line-height: 44px;
	text-align:center;
	font-size:22px;
	color:#ffffff;
	padding: 0;
	border-radius: 50%;
	background-color: transparent;
}

/*** 

====================================================================
	Search Popup
====================================================================

***/

.search-popup{
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100%;
	z-index: 99999;
	margin-top: -540px;
	transform: translateY(-100%);
	background-color: #111111;
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}



.search-popup:before{
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: 560px;
	background-image: url(../images/icons/waves-shape.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-top: -20px;
	content: "";
}

.search-active .search-popup{
	transform: translateY(0%);
	margin-top: 0;
}

.search-popup .close-search{
	position: absolute;
	left: 0;
	right: 0;
	top: 75%;
	margin: 0 auto;
	margin-top: -200px;
	border-radius: 50%;
	text-align: center;
	background-color: #252525;
	width: 70px;
	box-shadow: 0 0 10px rgba(0,0,0,0.05);
	border-bottom: 3px solid #FF6000;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	opacity: 0;
	visibility: hidden;
}

.search-popup .close-search span{
	position: relative;
	display: block;
	height: 70px;
	width: 70px;
	font-size: 30px;
	line-height: 70px;
	color: #ffffff;
}

.search-active .search-popup .close-search{
	visibility: visible;
	opacity: 1;
	top: 50%;
	-webkit-transition-delay: 1500ms;
	-moz-transition-delay: 1500ms;
	-ms-transition-delay: 1500ms;
	-o-transition-delay: 1500ms;
	transition-delay: 1500ms;
}

.search-popup form{
	position: absolute;
	max-width: 700px;
	top: 50%;
	left: 15px;
	right: 15px;
	margin:-35px auto 0;
	transform: scaleX(0);
	transform-origin: center;
	background-color: #111111;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.search-active .search-popup form{
	transform: scaleX(1);
	-webkit-transition-delay: 1200ms;
	-moz-transition-delay: 1200ms;
	-ms-transition-delay: 1200ms;
	-o-transition-delay: 1200ms;
	transition-delay: 1200ms;
}

.search-popup .form-group{
	position:relative;
	margin:0px;	
	overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
	position:relative;
	display:block;
	font-size:24px;
	line-height: 50px;
	color:#f1f1f1;
	height:70px;
	width:100%;
	padding: 10px 30px;
	background-color: #252525;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.40);
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
}

.search-popup .form-group input[type="submit"],
.search-popup .form-group button{
	position:absolute;
	right:30px;
	top:0px;
	height:70px;
	line-height: 70px;
	background: transparent;
	text-align:center;
	font-size:24px;
	color:#aaaaaa;
	padding: 0;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
	color: #FF6000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
	color:#aaaaaa;
}

/*search box btn*/




.sec-title{
	position:relative;
	padding-top: 60px;
	margin-bottom:60px;
}

.sec-title h2{
	position: relative;
	display: inline-block;
	font-size: 50px;
	line-height: 1.2em;
	color: #FF6000;
	font-weight: 700;
	transform: scaleY(0);
	transform-origin: bottom;
	-webkit-transition: all 800ms ease;
	-moz-transition: all 800ms ease;
	-ms-transition: all 800ms ease;
	-o-transition: all 800ms ease;
	transition: all 800ms ease;
	-webkit-transition-delay: 500ms;
	-moz-transition-delay: 500ms;
	-ms-transition-delay: 500ms;
	-o-transition-delay: 500ms;
	transition-delay: 500ms;
}

.sec-title h2 span{
	color: #ffffff;
}

.sec-title.active h2{
	transform: scale(1);
}

.sec-title .text{
	position: relative;
	margin-top: 20px;
	font-size: 16px;
}

.sec-title .float-text{
	position: absolute;
    left: 0;
    top: 0;
    font-size: 200px;
    line-height: .65em;
    color: #131313;
    font-weight: 700;
    font-family: "Rajdhani",sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -ms-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}

.sec-title.text-center .float-text{
	right: 0;
	margin: 0 auto;
}

.sec-title.active .float-text{
    text-shadow: 0 0 40px rgba(0,0,0,0.50);
    letter-spacing: 0;
}

/*** 

====================================================================
	Page Title
====================================================================

***/

.page-title{
	position:relative;
	text-align:center;
	padding:200px 0px 150px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.page-title:before{
	position:absolute;
	content: '';
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: block;
	background-color: rgba(0,0,0,0.60);
}

.page-title .auto-container{
	position:relative;
}

.page-title h2{
	position:relative;
	color:#ffffff;
	font-size:74px;
	line-height:1.2em;
	margin-bottom: 10px;
	font-weight: 700;
	text-transform:capitalize;
	}

.page-breadcrumb{
	position:relative;
	margin-top:5px;
}

.page-breadcrumb li{
	position:relative;
	display:inline-block;
	margin-right:10px;
	padding-right:15px;
	color:#ffffff;
	font-size:18px;
	font-weight:400;
	text-transform:capitalize;
}

.page-breadcrumb li:after{
	position:absolute;
	content: ">";
	right:-2px;
	top:1px;
	color:#ffffff;
	font-size:14px;
	font-weight: 900;
	font-family: 'Font Awesome 5 Free';
}

.page-breadcrumb li:last-child::after{
	display: none;
}

.page-breadcrumb li:last-child{
	padding-right:0px;
	margin-right:0px;
}

.page-breadcrumb li a{
	color:#ffffff;
	font-weight:500;
	text-transform: capitalize;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.page-breadcrumb li a:hover{
	color:#FF6000;
}

.play-now {
	position: relative;
	display: block;
	z-index: 9;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.play-now .icon{
	position: relative;
	display: inline-block;
	height: 80px;
	width: 80px;
	text-align: center;
	line-height: 80px;
	background-color: #000000;
	color: #ffffff;
	z-index: 1;
	padding-left: 5px;
	font-size: 24px;
	display: block;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
	-moz-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
	-ms-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
	-o-box-shadow: 0 0px 10px 0 rgba(255, 255, 255, .3);
	box-shadow: 0  0px 10px 0 rgba(255, 255, 255, .3);
	-webkit-transform-origin:center; 
	transform-origin:center; 
}

.play-now .ripple,
.play-now .ripple:before,
.play-now .ripple:after {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 70px;
	width: 70px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-webkit-animation: ripple 3s infinite;
	-moz-animation: ripple 3s infinite;
	-ms-animation: ripple 3s infinite;
	-o-animation: ripple 3s infinite;
	animation: ripple 3s infinite;
}

.play-now .ripple:before {
	-webkit-animation-delay: .9s;
	-moz-animation-delay: .9s;
	-ms-animation-delay: .9s;
	-o-animation-delay: .9s;
	animation-delay: .9s;
	content: "";
	position: absolute;
}

.play-now .ripple:after {
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-ms-animation-delay: .6s;
	-o-animation-delay: .6s;
	animation-delay: .6s;
	content: "";
	position: absolute;
}

@-webkit-keyframes ripple {
	70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);}
	100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}

@keyframes ripple {
	70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);}
	100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
} 

/*** 

====================================================================
		Banner Section
====================================================================

***/

.banner-section{
	position: relative;
}

.banner-section .swiper-slide{
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.banner-section .swiper-slide .content-box{
	position: relative;
	height: 100vh;
	width: 100%;
	display: table;
	vertical-align: middle;
}

.banner-section .swiper-slide .content{
	position: relative;
	display: table-cell;
	vertical-align: middle;
	z-index: 9;
}

.banner-section .swiper-slide .content .inner{
	position: relative;
	max-width: 600px;
	text-align: center;
	margin: 0 auto;
}

.banner-section .swiper-slide .content .inner:before{
	position: absolute;
	left: -50px;
	top: -60px;
	bottom: -50px;
	width: 350px;
	transform: scaleX(0);
	transform-origin: left;
	text-transform: uppercase;
	border: 10px solid #FF6000;
	border-right: 0;
	content: "";
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	transition: all 300ms linear;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section .swiper-slide-active .content .inner:before{
	opacity: 1;
	transform: scaleX(1);
	-webkit-transition-delay: 500ms;
	-moz-transition-delay: 500ms;
	-ms-transition-delay: 500ms;
	-o-transition-delay: 500ms;
	transition-delay: 500ms;
}

.banner-section .swiper-slide .content .inner:after {
    position: absolute;
    right: -50px;
    top: -60px;
    bottom: -50px;
    width: 350px;
    transform: scaleX(0);
    transform-origin: right;
    text-transform: uppercase;
    border: 10px solid #FF6000;
    border-left: 0;
    z-index: -1;
    content: "";
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.banner-section .swiper-slide-active .content .inner:after {
    opacity: 1;
    transform: scaleX(1);
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

.banner-section .swiper-slide h2{
	position: relative;
	display: block;
	font-size: 100px;
	line-height: 1em;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 20px;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top;
	text-transform: uppercase;
	font-family: "Oswald", sans-serif;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section .swiper-slide-active h2{
	opacity: 1;
	transform: scaleY(1);
	-webkit-transition-delay: 750ms;
	-moz-transition-delay: 750ms;
	-ms-transition-delay: 750ms;
	-o-transition-delay: 750ms;
	transition-delay: 750ms;
}

.banner-section .swiper-slide h3{
	position: relative;
	display: block;
	font-size: 50px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 20px;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top;
	text-transform: uppercase;
	font-family: "Oswald", sans-serif;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section .swiper-slide-active h3{
	opacity: 1;
	transform: scaleY(1);
	-webkit-transition-delay: 750ms;
	-moz-transition-delay: 750ms;
	-ms-transition-delay: 750ms;
	-o-transition-delay: 750ms;
	transition-delay: 750ms;
}

.banner-section .swiper-slide .text{
	position: relative;
	display: block;
	font-size: 18px;
	line-height: 30px;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 30px;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section .swiper-slide-active .text{
	opacity: 1;
	transform: scaleY(1);
	-webkit-transition-delay: 1000ms;
	-moz-transition-delay: 1000ms;
	-ms-transition-delay: 1000ms;
	-o-transition-delay: 1000ms;
	transition-delay: 1000ms;
}

.banner-section .swiper-slide .btn-box{
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top;
	-webkit-transition: all 700ms ease;
	-moz-transition: all 700ms ease;
	-ms-transition: all 700ms ease;
	-o-transition: all 700ms ease;
	transition: all 700ms ease;
}

.banner-section .swiper-slide-active .btn-box{
	opacity: 1;
	transform: scaleY(1);
	-webkit-transition-delay: 1000ms;
	-moz-transition-delay: 1000ms;
	-ms-transition-delay: 1000ms;
	-o-transition-delay: 1000ms;
	transition-delay: 1250ms;
}

.swiper-slide-active {
	z-index: 3;
}

.banner-slider-wrapper {
	position: relative;
	width: 100%;
	float: left;
	height: 100vh;
}

.banner-slider {
	position: relative;
}

.banner-slider .swiper-slide {
	overflow: hidden;
}

.banner-slider-arrows {
	position: absolute;
	left: 50px;
	bottom: 50px;
	z-index: 9;
}

.banner-slider-arrow{
	position: relative;
	margin-right: 10px;
	width: 30px;
	height: 30px;
	text-align: center;
	background: #fff;
	line-height: 30px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
	opacity: .30;
}

.banner-slider-arrow:hover{
	opacity: 1;
}

.banner-slider-arrow.banner-slider-arrow--previous {
	left: 0;
}

.banner-slider-arrow.banner-slider-arrow--next {
	left: auto;
	right: 0;
}

.banner-slider-counter{
	display: none;
}

.banner-slider-item {
	position: relative;
}

.banner-slider-item .media-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	
}

.banner-slider-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner-slider-counter {
	position: absolute;
	bottom: 40px;
	left: 50px;
	color: #ffffff;
	z-index: 3;
	font-size: 18px;
}

.banner-section .circular-menu{
	position: absolute;
	right: 50px;
	bottom: 40px;
	z-index: 99;
	opacity: .50;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.banner-section .circular-menu.active,
.banner-section .circular-menu:hover{
	opacity: 1;
}

.circular-menu .floating-btn{
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #ffffff;
	color: #222222;
	text-align: center;
	line-height: 42px;
	cursor: pointer;
	outline: 0;
}

.circular-menu.active .floating-btn {
	box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
	background-color: #ffffff;
}

.circular-menu .floating-btn:active {
	box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .2);
}

.circular-menu .floating-btn i {
	font-size: 16px;
	transition: -webkit-transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s;  
}

.circular-menu.active .floating-btn i:before{
	content: "\f00d";
}

.circular-menu:after {
	display: block;
	content: ' ';
	height: 50px;
	width: 50px;
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: -2;
	background-color: #FF6000;
	opacity: 0;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.circular-menu.active:after {
	-webkit-transform: scale3d(5.5, 5.5, 1);
	transform: scale3d(5.5, 5.5, 1);
	transition-timing-function: cubic-bezier(.68, 1.55, .265, 1);
}

.circular-menu .items-wrapper{
	padding: 0;
	margin: 0;
}

.circular-menu .menu-item{
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	display: block;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.circular-menu .menu-item span{
	color: #222222;
	font-size: 1em;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	text-align: center;
	line-height: 3;
	background-color: rgba(255,255,255,1);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.circular-menu .menu-item:hover span{
	background-color: #FF6000;
	color: #ffffff;
}

.circular-menu .menu-item:hover span{

}

.circular-menu.active .menu-item {
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.circular-menu.active .menu-item:nth-child(1) {
	-webkit-transform: translate3d(1em,-7em,0);
	transform: translate3d(1em,-7em,0);
}

.circular-menu.active .menu-item:nth-child(2) {
	-webkit-transform: translate3d(-3.5em,-6.3em,0);
	transform: translate3d(-3.5em,-6.3em,0);
}

.circular-menu.active .menu-item:nth-child(3) {
	-webkit-transform: translate3d(-6.5em,-3.2em,0);
	transform: translate3d(-6.5em,-3.2em,0);
}

.circular-menu.active .menu-item:nth-child(4) {
	-webkit-transform: translate3d(-7em,1em,0);
	transform: translate3d(-7em,1em,0);
}

/*** 

====================================================================
		Banner Section Two
====================================================================

***/

.banner-section-two{
	position: relative;
}

.banner-section-two .slide-item{
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.banner-section-two .slide-item .content-box{
	position: relative;
	height: 100vh;
	width: 100%;
	display: table;
	vertical-align: middle;
}

.banner-section-two .slide-item .content-box:after{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.40);
	content: "";
}

.banner-section-two .slide-item .content{
	position: relative;
	display: table-cell;
	vertical-align: middle;
	z-index: 9;
}

.banner-section-two .slide-item .title{
	position: relative;
	display: inline-block;
	font-size: 24px;
	line-height: 1.2em;
	color: #FF6000;
	margin-bottom: 20px;
	opacity: 0;
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section-two .active .title{
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-ms-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	transition-delay: 250ms;
}

.banner-section-two .slide-item h2{
	position: relative;
	display: block;
	font-size: 64px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 600;
	margin-bottom: 25px;
	opacity: 0;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section-two .active h2{
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition-delay: 500ms;
	-moz-transition-delay: 500ms;
	-ms-transition-delay: 500ms;
	-o-transition-delay: 500ms;
	transition-delay: 500ms;
}

.banner-section-two .slide-item .text{
	position: relative;
	display: block;
	font-size: 18px;
	line-height: 30px;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 40px;
	opacity: 0;
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section-two .active .text{
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition-delay: 750ms;
	-moz-transition-delay: 750ms;
	-ms-transition-delay: 750ms;
	-o-transition-delay: 750ms;
	transition-delay: 750ms;
}

.banner-section-two .slide-item .btn-box{
	opacity: 0;
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section-two .slide-item .btn-box .theme-btn{
	margin-right: 25px;
}

.banner-section-two .active .btn-box{
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition-delay: 1000ms;
	-moz-transition-delay: 1000ms;
	-ms-transition-delay: 1000ms;
	-o-transition-delay: 1000ms;
	transition-delay: 1000ms;
}

.banner-section-two .owl-nav {
	position: absolute;
	left: 50px;
	bottom: 50px;
	z-index: 9;
}

.banner-section-two .owl-next,
.banner-section-two .owl-prev{
	position: relative;
	float: left;
	margin-right: 10px;
	width: 30px;
	height: 30px;
	text-align: center;
	background: #fff;
	line-height: 30px;
	transition: all 300ms ease;
	opacity: .30;
}

.banner-section-two .owl-next:hover,
.banner-section-two .owl-prev:hover{
	opacity: 1;
}

.banner-section-two .square-menu{
	position: absolute;
	right: 50px;
	bottom: 40px;
	z-index: 99;
	transition: all 300ms ease;
	opacity: .50;
}

.banner-section-two .square-menu.active,
.banner-section-two .square-menu:hover{
	opacity: 1;
}

.square-menu .floating-btn{
	display: block;
	width: 40px;
	height: 40px;
	background-color: #ffffff;
	color: #222222;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	outline: 0;
}

.square-menu.active .floating-btn {
	box-shadow: inset 0 0 3px hsla(0, 0%, 0%, .3);
	background-color: #ffffff;
}

.square-menu .floating-btn:active {
	box-shadow: 0 4px 8px 0 hsla(0, 0%, 0%, .2);
}

.square-menu .floating-btn i {
	font-size: 16px;
	transition: -webkit-transform .2s;
	transition: transform .2s;
	transition: transform .2s, -webkit-transform .2s;  
}

.square-menu.active .floating-btn {
	border-radius: 20px;
}

.square-menu.active .floating-btn i:before{
	content: "\f00d";
}

.square-menu .items-wrapper{
	padding: 0;
	margin: 0;
}

.square-menu .menu-item{
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -1;
	display: block;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.square-menu .menu-item span{
	font-size: 16px;
	line-height: 40px;
	width: 40px;
	height: 40px;
	color: #222222;
	background-color: #ffffff;
	text-align: center;
	border-radius: 20px;
	transition: all 200ms ease;
}

.square-menu .menu-item:hover span{
	background-color: #FF6000;
	color: #ffffff;
}

.square-menu.active .menu-item {
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.square-menu.active .menu-item:nth-child(1) {
	-webkit-transform: translateX(-50px);
	transform: translateX(-50px);
}

.square-menu.active .menu-item:nth-child(2) {
	-webkit-transform: translateX(-100px);
	transform: translateX(-100px);
}

.square-menu.active .menu-item:nth-child(3) {
	-webkit-transform: translateX(-150px);
	transform: translateX(-150px);
}

.square-menu.active .menu-item:nth-child(4) {
	-webkit-transform: translateX(-200px);
	transform: translateX(-200px);
}

/*** 

====================================================================
		Banner Section Three
====================================================================

***/

.banner-section-three{
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; 
}

.banner-section-three .layer-image{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

.banner-section-three .shape-outer{
	position: absolute;
	height: 100%;
	width: 50%;
	left: 0;
	top: 0;
	opacity: .90;
}

.banner-section-three .left-shape{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: rgb(14,14,14);
	background: -moz-linear-gradient(left, rgba(14,14,14,1) 0%, rgba(36,36,36,1) 100%);
	background: -webkit-linear-gradient(left, rgba(14,14,14,1) 0%,rgba(36,36,36,1) 100%);
	background: linear-gradient(to right, rgba(14,14,14,1) 0%,rgba(36,36,36,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#242424',GradientType=1 );
}

.banner-section-three .left-shape:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: .20;
	background: -moz-linear-gradient(top, rgba(14,14,14,1) 0%, rgba(19,19,19,0) 1%, rgba(255,255,255,0.5) 50%, rgba(36,36,36,0) 100%);
	background: -webkit-linear-gradient(top, rgba(14,14,14,1) 0%,rgba(19,19,19,0) 1%,rgba(255,255,255,0.5) 50%,rgba(36,36,36,0) 100%);
	background: linear-gradient(to bottom, rgba(14,14,14,1) 0%,rgba(19,19,19,0) 1%,rgba(255,255,255,0.5) 50%,rgba(36,36,36,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#00242424',GradientType=0 );
	content: "";
}

.banner-section-three .center-stipts:before,
.banner-section-three .center-stipts:after,
.banner-section-three .center-stipts{
	position: absolute;
	left: 40%;
	top: 20%;
	height: 70px;
	width: 500px;
	opacity: .50;
	background: -moz-linear-gradient(left, rgba(255,188,0,1) 0%, rgba(125,185,232,0) 100%);
	background: -webkit-linear-gradient(left, rgba(255,188,0,1) 0%,rgba(125,185,232,0) 100%);
	background: linear-gradient(to right, rgba(255,188,0,1) 0%,rgba(125,185,232,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6000', endColorstr='#007db9e8',GradientType=1 );
	content: "";
}

.banner-section-three .center-stipts:after{
	margin-top: 100px;
	left: 100px;
	opacity: 1;
}

.banner-section-three .center-stipts:before{
	margin-top: 200px;
	left: 200px;
	opacity: 1;
	display: none;
}

.banner-section-three .content-outer{
	position: relative;
	height: 100vh;
	width: 100%;
	display: table;
	vertical-align: middle;
}

.banner-section-three .content-box{
	position: relative;
	display: table-cell;
	vertical-align: middle;
	z-index: 9;
}

.banner-section-three .inner{
	position: relative;
	width: 50%;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section-three h2{
	position: relative;
	display: block;
	font-size: 54px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 25px;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section-three .wrap{
	display: inline-block;
	color: #FF6000;
	line-height: 1em;
}

.banner-section-three .text{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 24px;
	color: #ffffff;
	font-weight: 400;
	max-width: 450px;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.banner-section-three .social-icon-two{
	position: absolute;
	left: 40px;
	bottom: 40px;
	z-index: 99;
}

#about h2 {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a1a; /* لون واضح وغامق */
  margin-bottom: 20px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

#about .lead {
  font-family: 'Cairo', sans-serif;
  font-weight: 700; /* Bold */
  color: rgba(0, 0, 0, 0.75);
  font-size: 17px;
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto;
}

.about .about-content .lead {
  font-family: 'Cairo', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
  color: color-mix(in srgb, var(--heading-color), transparent 10%);
}



.feature-block{
	position: relative;
	margin-bottom: 30px;
}

.feature-block .inner-box{
	position: relative;
	padding-left: 65px;
}

.feature-block .icon-box{
	position: absolute;
	left: 0;
	top: 15px;
}

.feature-block .icon-box .icon{
	display: block;
	font-size: 42px;
	line-height: 1em;
	color: #FF6000;
	font-weight: 400;
}

.feature-block h4{
	font-size: 20px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 10px;
}

.feature-block h4 a{
	color: #ffffff;
	display: inline-block;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.feature-block h4 a:hover{
	color: #FF6000;
}

.feature-block .text{
	font-size: 15px;
	line-height: 25px;
	font-weight: 400;
}




/*** 

====================================================================
			Welcome Section								
====================================================================

***/

.welcome-section{
	position: relative;
	text-align: center;
	padding: 150px 0 60px;
}

.welcome-section .sec-title{
	margin-bottom: 100px;
}

.welcome-section .sec-title h2 .logo{
	position: relative;
	display: inline-block;
	top: -5px;
}

.welcome-section .row{
	margin: 0 -40px;
}

.welcome-section .column{
	position: relative;
	padding: 0 40px;
	margin-bottom: 60px;
}

.welcome-section .column .inner-column{
	position: relative;
	background-color: #252525;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
	overflow: hidden;
}

.welcome-section .column .lower-content{
	position: relative;
	border-bottom: 5px solid #FF6000;
	border-radius:0 0 15px 15px;
	padding: 50px 30px;
}

.welcome-section .column .image{
	position: relative;
	margin-bottom: 0;
}

.welcome-section .column .image img{
	display: block;
	width: 100%;
}

.welcome-section h3{
	position: relative;
	display: block;
	font-size: 32px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 700;
		margin-bottom: 20px;
}

/*** 

====================================================================
		Fun Facts								
====================================================================

***/

.fun-facts{
	position: relative;
	padding: 120px 0 70px;
}

.fun-facts.alternate{
	padding-top: 0;
}

/* Fact Counter */

.fact-counter{
	position:relative;
	margin-bottom: 20px;
}

.fact-counter .column{
	position:relative;
	margin-bottom: 30px;
}

.fact-counter .column .inner{
	position:relative;
	background-color: #252525;
	box-shadow: 0 0 30px rgba(0,0,0,.40);
	padding: 40px 30px;
	text-align: center;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
}

.fact-counter .column .inner:before{
	position: absolute;
	left: 20px;
	top: 20px;
	right: 20px;
	bottom: 20px;
	box-shadow: 0 0 20px rgba(0,0,0,0.50);
	content:"";
}

.fact-counter .icon{
	position: relative;
	display: inline-block;
	font-size: 60px;
	line-height: 1em;
	color: #FF6000;
	margin-bottom: 20px;
}

.fact-counter .count-outer{
	position: relative;
	display: block;
	text-align: center;
	font-weight:500;
	color:#ffffff;
	font-size:34px;
	margin-bottom: 20px;
}

.fact-counter .count-outer .count-text{
	position:relative;
	font-weight:500;
	color:#ffffff;
	font-size:34px;
	display:inline-block;
}

.fact-counter .column .counter-title{
	position:relative;
	font-size:20px;
	font-weight:600;
	color:#ffffff;
	display:inline-block;
	text-transform:capitalize;
}

.fun-facts .progress-column{
	position: relative;
	margin-bottom: 50px;
}

.fun-facts .progress-column .inner-column{
	position: relative;
	padding-left: 20px;
}

.fun-facts .progress-column h4{
	position: relative;
	font-size: 28px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 600;
	margin-bottom: 20px;
}

.fun-facts .progress-column .text{
	margin-bottom: 20px;
}

.fun-facts .progress-bars{
	position:relative;
}

.fun-facts .bar-item{
	position:relative;
	margin-bottom:30px;
}

.fun-facts .bar-item:last-child{
	margin-bottom:0px;
}

.fun-facts .bar-item .skill-bar{
	position:relative;
	width:100%;
	height:5px;	
}

.fun-facts .bar-item .skill-bar .bar-inner{
	position:relative;
	width:100%;
	height:5px;
	background:#252525;
}

.fun-facts .bar-item .skill-bar .bar-inner .bar{
	position:absolute;
	left:0px;
	top:0px;
	height:5px;
	width:0px;
	border-bottom:5px solid #FF6000;
	-webkit-transition:all 2000ms ease;
	-ms-transition:all 2000ms ease;
	-o-transition:all 2000ms ease;
	-moz-transition:all 2000ms ease;
	transition:all 2000ms ease;
}

.fun-facts .bar-item .skill-bar .bar-inner .bar:after{
	content:'';
	position:absolute;
	right:0px;
	top:-2.5px;
	width:10px;
	height:10px;
	background:#ffffff;
	border-radius:50%;	
}

.fun-facts .bar-item .skill-header{
	position:relative;
	line-height:24px;
	text-transform:capitalize;
	font-weight:500;
	font-size:18px;
	color:#ffffff;
	margin-bottom:15px;
}

.fun-facts .bar-item .skill-header .skill-title{
	position:relative;
	float:left;
}

.fun-facts .bar-item .skill-percentage{
	position:absolute;
	right:0px;
	top:-35px;
	font-weight:500;
	line-height:24px;
	text-transform:capitalize;
	color: #ffffff;
	font-size:18px;
}

/*** 

====================================================================
		Features Section
====================================================================

***/

.features-section{
	position: relative;
	padding: 120px 0 50px;
}

.features-section .text-column{
	position: relative;
	margin-bottom: 70px;
}

.features-section .text-column .inner-column{
	position: relative;
	padding-top: 10px;
}

.features-section .text-column p{
	position: relative;
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 25px;
}

.features-section .text-column ul{
	margin-bottom: 40px;
}

.feature-block-two{
	position: relative;
	margin-bottom: 30px;
}

.feature-block-two .inner-box{
	position: relative;
	padding: 20px 30px;
	padding-left: 120px;
	background-color: #252525;
	border-radius: 15px;
	min-height: 130px;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
	border-bottom: 2px solid #FF6000;
}

.feature-block-two .inner-box .icon{
	position: absolute;
	left: 30px;
	top: 30px;
	font-size: 64px;
	line-height: 1em;
	color: #FF6000;
}

.feature-block-two h4{
	position: relative;
	display: block;
	font-size: 24px;
	line-height: 1em;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 15px;
}

.feature-block-two .text{
	font-size: 14px;
	line-height: 24px;
	color: #aaaaaa;
	max-width: 300px;
}

.right-column .feature-block-two .inner-box{
	padding-left: 30px;
	padding-right: 120px;
	text-align: right;
}

.right-column .feature-block-two .inner-box .icon{
	left: auto;
	right: 30px;
}

/*** 

====================================================================
			Service Section
====================================================================

***/



.service-block{
	position: relative;
	padding: 25px 25px;
}

.service-block .inner-box{
	position: relative;
	display: block;
	background-color: #252525;
	text-align: center;
	padding: 50px 20px 50px;
	box-shadow: 0 0 25px rgba(0,0,0,0.50);
	border-radius: 10px;
	overflow: hidden;
	border-bottom: 4px solid #FF6000;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.service-block .inner-box:before{
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 4px;
	width: 100%;
	background-color: #ffffff;
	content: "";
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: top right;
	-ms-transform-origin: top right;
	transform-origin: top right;
	-webkit-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-moz-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-o-transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
	transition: transform 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
	-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
	transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.service-block .inner-box:hover:before{
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
	transform-origin: bottom left;
}

.service-block .inner-box .icon{
	position: relative;
	display: block;
	font-size: 64px;
	color: #FF6000;
	line-height: 1em;
	margin-bottom: 30px;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}

.service-block .inner-box:hover .icon{
	-webkit-transform: scale(-1) rotate(-180deg);
	-moz-transform: scale(-1) rotate(-180deg);
	-ms-transform: scale(-1) rotate(-180deg);
	-o-transform: scale(-1) rotate(-180deg);
	transform: scale(-1) rotate(-180deg);
}

.service-block h3{
	position: relative;
	display: block;
	font-size:  20px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 500;
	padding-top: 30px;
	border-top: 1px solid rgba(255,255,255,.10);
	margin-bottom: 15px;
}

.service-block h3 a{
	color: #ffffff;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.service-block h3 a:hover{
	color: #FF6000;
}

.service-block .text{
	position: relative;
	font-size: 16px;
	line-height: 24px;
	color: #888888;
	font-weight: 400;
	margin-bottom: 25px;
}

.service-block .read-more{
	position: relative;
	display: inline-block;
	font-size: 14px;
	line-height: 20px;
	color: #222222;
	font-weight: 600;
	padding: 5px 20px;
	border-radius: 3px;
	background-color: #FF6000;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.service-block .read-more:hover{
	background-color: #ffffff;
	color: #222222;
}


/*** 

====================================================================
		Service Section Two
====================================================================

***/



.service-block-two{
	position: relative;
	margin-bottom: 50px;
}

.service-block-two .inner-box{
	position: relative;
	display: block;
	background-color: #252525;
	box-shadow: 0 0 25px rgba(0,0,0,0.50);
	border-radius: 10px;
	overflow: hidden;
	border-bottom: 4px solid #FF6000;
}

.service-block-two .image-box{
	position: relative;
}

.service-block-two .image-box .image{
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}

.service-block-two .image-box .image img{
	display: block;
	width: 100%;
	height: auto;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.service-block-two .inner-box:hover .image img{
	opacity: .7;
	transform: scale(1.05);
}

.service-block-two .lower-content{
	position: relative;
	padding: 30px 30px;
}

.service-block-two h3{
	position: relative;
	display: block;
	font-size:  22px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 600;
	border-top: 1px solid rgba(255,255,255,.10);
	margin-bottom: 15px;
}

.service-block-two h3 a{
	color: #ffffff;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.service-block-two h3 a:hover{
	color: #FF6000;
}

.service-block-two .text{
	position: relative;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 25px;
}

.service-block-two .read-more{
	position: relative;
	display: inline-block;
	font-size: 14px;
	line-height: 20px;
	color: #222222;
	font-weight: 600;
	padding: 5px 20px;
	border-radius: 3px;
	background-color: #FF6000;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.service-block-two .read-more:hover{
	background-color: #ffffff;
	color: #222222;
}

/*** 

====================================================================
		Service Details
====================================================================

***/

.service-detail-section{
	position:relative;
	padding:120px 0px 80px;	
	z-index: 9;
}

.service-detail-section .content-side{
	position: relative;
	margin-bottom: 50px;
}

.service-detail{
	position: relative;
}

.service-detail .image-box{
	position: relative;
	margin-bottom: 40px;
}

.service-detail .image-box .image{
	position: relative;
	margin-bottom: 0px;
}

.service-detail .image-box .image img{
	display: block;
	width: 100%;
	height: auto;
}

.service-detail .content-box{
	position:relative;
}

.service-detail .content-column{
	position:relative;
}

.service-detail .content-column .inner-column{
	position: relative;
}

.service-detail .content-box h2{
	position: relative;
	font-size: 30px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 600;
	margin-bottom: 30px;
	}

.service-detail .content-box h4{
	position: relative;
	font-size: 24px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 600;
		margin-bottom: 20px;
}

.service-detail .content-box p{
	position:relative;
	font-size: 16px;
	line-height: 27px;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 27px;
}

.service-detail .two-column{
	position: relative;
	margin-top: 40px;
}

.service-detail .two-column .text-column{
	position: relative;
	margin-bottom: 13px;
}

.service-detail .two-column .text-column p{
	margin-bottom: 28px;
}

.service-detail .two-column .image-column{
	position: relative;
	margin-bottom: 40px;
}

.service-detail .two-column .image{
	position: relative;
	margin-bottom: 0;
}

.service-detail .two-column .image img{
	display: block;
	width: 100%;
}

.service-detail .feature-box{
	position: relative;
	margin-top: 50px;
	margin-bottom: 20px;
}

.service-detail .feature-block-two h4{
    position: relative;
    display: block;
    font-size: 24px;
    line-height: 1em;
    color: #ffffff;
    margin-bottom: 15px;
}

/*=== Brochure Box ===*/

.brochure-box{
	position: relative;
	margin-bottom: 50px;
}

.brochure-box .inner{
	position: relative;
}

.brochure-box h4{
	display: block;
	font-size: 24px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 20px;
	}

.brochure-box .text{
	font-size: 15px;
	line-height: 25px;
	color: #999999;
	margin-bottom: 30px;
}

.brochure-box .theme-btn{
	font-size: 14px;
	line-height: 23px;
	border-radius: 0;
	display: block;
	width: 100%;
	padding: 15px 10px;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 20px;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.brochure-box .theme-btn i{
	font-size: 18px;
	line-height: 23px;
	margin-right: 10px;
}

.brochure-box .theme-btn:last-child{
	margin-bottom: 0;
}

/* Help Box*/
.help-box{
	position: relative;
}

.help-box .inner-box{
	position:relative;
}

.help-box h6{
	position: relative;
	display: block;
	font-size: 20px;
	line-height: 30px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 25px;
	}

.help-box p{
	position:relative;
	font-size:16px;
	line-height:26px;
	color:#ffffff;
	font-weight: 400;
	margin-bottom:25px;
	opacity: .70;
}

.help-box .info-box{
	position: relative;
	margin-bottom: 30px;
}

.help-box .info-box li{
	position: relative;
	display: block;
	font-size: 17px;
	line-height: 26px;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 8px;
	padding-left: 30px;
}

.help-box .info-box li a{
	color: #ffffff;
}

.help-box .info-box li a:hover{
	text-decoration: underline;
}

.help-box .info-box li .icon{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 16px;
	color: #FF6000;
	line-height: 26px;
}

.help-box .theme-btn{
	position: relative;
	padding: 10px 40px;
}

/*** 

====================================================================
		Video Section
====================================================================

***/

.video-section{
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 120px 0 140px;
}

.video-section:before{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	background-color: #252525;
	opacity: .50;
	content: "";
}

.video-section .content-box{
	position: relative;
	text-align: center;
}

.video-section .content-box .text{
	position: relative;
	display: block;
	font-size: 18px;
	line-height: 26px;
	color: #FF6000;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 15px;
}

.video-section .content-box h2{
	display: block;
	font-size: 48px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 700;
}

.video-section .play-now{
    position: relative;
    display: inline-block;
    margin-top: 50px;
}

.video-section .play-now .icon{
	height: 100px;
	width: 100px;
	line-height: 100px;
	background-color: #FF6000;
	padding-left: 0;
	font-size: 50px;
}

/*** 

====================================================================
		Project Section
====================================================================

***/

.project-section{
	position: relative;
	padding: 120px 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.project-section.pd-top-extra{
	padding-top: 200px;
}

.project-block{
	position: relative;
	opacity: .80;
	pointer-events: none;
}

.project-block.swiper-slide-active{
	pointer-events: unset;
	opacity: 1;
}

.project-block .inner-box{
	position: relative;
	overflow: hidden;
}

.project-block .inner-box .image{
	position: relative;
	margin-bottom: 0;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.project-block .inner-box:hover .image{

}

.project-block .inner-box .image img{
	display: block;
	width: 100%;
	height: auto;
}

.project-block .caption-box{
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 30px;
	padding: 40px 40px 30px;
	background-color: rgba(37,37,37,.90);
	opacity: 0;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-block.swiper-slide-active .inner-box:hover .caption-box{
	opacity: 1;
	transform: scale(1);
}

.project-block .caption-box h4{
	position: relative;
	display: block;
	font-size: 26px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-block.swiper-slide-active .inner-box:hover .caption-box h4{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	-webkit-transition-delay: 200ms;
	-moz-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	transition-delay: 200ms;
}

.project-block .caption-box h4 a{
	color: #ffffff;
	display: inline-block;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-block .caption-box h4 a:hover{
	color: #FF6000;
}

.project-block .caption-box .text{
	position: relative;
	display: block;
	font-size: 16px;
	line-height: 25px;
	margin-bottom: 25px;
	color: #dddddd;
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-block.swiper-slide-active .inner-box:hover .caption-box .text{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	-webkit-transition-delay: 400ms;
	-moz-transition-delay: 400ms;
	-ms-transition-delay: 400ms;
	-o-transition-delay: 400ms;
	transition-delay: 400ms;
}

.project-block .caption-box .read-more{
	position: relative;
	line-height: 20px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 400;
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-block.swiper-slide-active .inner-box:hover .caption-box .read-more{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	-webkit-transition-delay: 600ms;
	-moz-transition-delay: 600ms;
	-ms-transition-delay: 600ms;
	-o-transition-delay: 600ms;
	transition-delay: 600ms;
}

/*** 

====================================================================
		Project Section Two
====================================================================

***/

.project-section-two{
	position: relative;
	padding: 120px 0 90px;
}

/*=== Mixitup Gallery ===*/

.project-section-two .filters{
	margin-bottom:50px;
	text-align: center;
}

.project-section-two .filters .filter-tabs{
	position:relative;
	display: inline-block;
}

.project-section-two .filters li{
	position:relative;
	display: inline-block;
	line-height:20px;
	padding:10px 20px;
	cursor:pointer;
	color:#ffffff;
	font-weight:600;
	font-size:20px;
	margin:0 8px 15px;
	background-color: #252525;
	font-family: "Rajdhani", sans-serif;
	text-transform: uppercase;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-section-two .filters .filter.active{
	color: #FF6000;
	box-shadow: 0 0 20px rgba(0,0,0,0.50);
}

.project-section-two .project-block-two.mix{
	display: none;
}

.project-block-two{
	position: relative;
	margin-bottom: 30px;
}

.project-block-two .inner-box{
	position: relative;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.project-block-two .image-box{
	position: relative;
}

.project-block-two .image-box .image{
	position: relative;
	margin: 0;
	background-color: #252525;
}

.project-block-two .image-box img{
	display: block;
	width: 100%;
	height: auto;
	opacity: .70;
}

.project-block-two .image-box a{
	position: relative;
	display: block;
}

.project-block-two .caption-box{
	position: absolute;
	left: 20px;
	bottom: 20px;
	padding: 10px 20px;
	opacity: 0;
	visibility: hidden;
}

.project-block-two .image-box:hover .caption-box{
	opacity: 1;
	visibility: visible;
}

.project-block-two .caption-box:before,
.project-block-two .caption-box:after{
	position: absolute;
	left: 0;
	top: 0;
	height: 0%;
	width: 100%;
	content: "";
	background-color: #FF6000;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}

.project-block-two .caption-box:after{
	background-color: #252525 !important;
}

.project-block-two .image-box:hover .caption-box:before{
	height: 100%;	
}

.project-block-two .image-box:hover .caption-box:after{
	height: 100%;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
}

.project-block-two .caption-box h3{
	position: relative;
	display: block;
	font-size: 24px;
	line-height: 1em;
	color: #ffffff;
	font-weight: 600;
	z-index: 9;
	opacity: 0;
		margin-bottom: 5px;
}

.project-block-two .image-box:hover .caption-box h3{
	opacity: 1;
	-webkit-animation: fadeInDown 300ms;
	-moz-animation: fadeInDown 300ms;
	-ms-animation: fadeInDown 300ms;
	-o-animation: fadeInDown 300ms;
	animation: fadeInDown 300ms;
	-webkit-animation-delay: 600ms;
	-moz-animation-delay: 600ms;
	-ms-animation-delay: 600ms;
	-o-animation-delay: 600ms;
	animation-delay: 600ms;
	-webkit-transition-delay: 600ms;
	-moz-transition-delay: 600ms;
	-ms-transition-delay: 600ms;
	-o-transition-delay: 600ms;
	transition-delay: 600ms;
}

.project-block-two .caption-box h3 a{
	color: #ffffff;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-block-two .caption-box h3 a:hover{
	color: #ffffff;
}

.project-block-two .caption-box span{
	position: relative;
	display: block;
	font-size: 15px;
	line-height: 20px;
	color: #ffffff;
	font-weight: 300;
	z-index: 9;
	opacity: 0;
}

.project-block-two .image-box:hover .caption-box span{
	opacity: 1;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	-webkit-transition-delay: 900ms;
	-moz-transition-delay: 900ms;
	-ms-transition-delay: 900ms;
	-o-transition-delay: 900ms;
	transition-delay: 900ms;
}

/*** 

====================================================================
		Project Detail
====================================================================

***/

.project-detail{
	position: relative;
	padding: 120px 0;
	z-index: 8;
}

.project-detail .text-column{
	position: relative;
	margin-bottom: 50px;
}

.project-detail .upper-box{
	position: relative;
	margin-bottom: 40px;
} 

.project-detail .upper-box .image{
	position: relative;
	margin-bottom: 0;
}

.project-detail .upper-box .image img{
	display: block;
	width: 100%;
	height: auto;
}

.project-detail .single-item-carousel .owl-nav{
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	margin-top: -50px;
}

.project-detail .single-item-carousel .owl-next,
.project-detail .single-item-carousel .owl-prev{
	position: absolute;
	left: 0;
	height: 100px;
	width: 30px;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	font-size: 18px;
	line-height: 100px;
	color: #ffffff;
	font-weight: 400;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-detail .single-item-carousel .owl-next{
	left: auto;
	right: 0px;
}

.project-detail .single-item-carousel .owl-next:hover,
.project-detail .single-item-carousel .owl-prev:hover{
	background-color: rgba(255,255,255,.5);
	color: #000000;
}

/* Lower Content */

.project-detail .lower-content{
	position: relative;
	padding-top: 35px;
}

.project-detail .lower-content h2{
	font-size: 34px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 700;
		margin-bottom: 30px
}

.project-detail .lower-content p{
	font-size: 15px;
	line-height: 25px;
	color: #999999;
	margin-bottom:30px;
}

.project-detail .lower-content p strong{
	font-weight: 500;
	font-size: 17px;
}

.project-detail .list-style-two li{
	float: left;
	width: 50%;
}

.project-detail .social-icon-two{
	margin-top: 30px;
	margin-bottom: 30px;
}

.project-detail blockquote{
	position: relative;
	border: 0;
	padding: 20px 40px 20px;
	font-size: 18px;
	line-height: 26px;
	color: #ffffff;
	max-width: 95%;
	border-left: 3px solid #FF6000;
	background-color: rgba(255,255,255,.10);
	margin:40px auto 40px;
	font-family: "Rajdhani", sans-serif;
	box-shadow: 0 0 20px rgba(0,0,0,0.20);
	border-radius: 5px 0 0 5px;
}

.project-detail blockquote cite{
	display: block;
	font-style: normal;
	margin-top: 5px;
	color: #ffffff;
	font-size: 14px;
	text-align: right;
	margin-top: 10px;
}

.project-detail blockquote cite span{
	font-weight: 500;
	font-size: 18px;
	color: #FF6000;
	font-style: normal;
}

.project-detail .project-info{
	position: relative;
	background-color: #252525;
	border-bottom: 3px solid #FF6000;
	padding: 50px 30px 20px;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 0 20px rgba(0,0,0,0.20);
}

.project-detail .project-info li{
	position: relative;
	padding-left: 50px;
	padding-right: 20px;
	margin-bottom: 20px;
}

.project-detail .project-info li .icon{
	position: absolute;
	left: 15px;
	top: 10px;
	font-size: 20px;
	line-height: 30px;
	color: #FF6000;
}

.project-detail .project-info li strong{
	color: #ffffff;
	font-size: 16px;
}

.project-detail .project-info li p{
	font-size: 15px;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 0;
}

.project-detail .project-info li p a{
	color: #ffffff;
	display: inline-block;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.project-detail .project-info li p a:hover{
	color: #FF6000;
}

/* Load More Option */
.load-more-option{
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 50px;
}

.load-more-option li.prev a,
.load-more-option li.next a{
	position: relative;
	display: block;
	font-size: 18px;
	line-height: 30px;
	width: 50px;
	border-radius: 50%;
	padding: 10px 10px;
	text-align: center;
	color: #ffffff;
	background-color: #222222;
	font-variant: small-caps;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.load-more-option li.prev a:hover,
.load-more-option li.next a:hover{
	background-color: #FF6000;
	box-shadow: 0 0 30px rgba(0,0,0,0.10);
}

.load-more-option .load-more{
	position: relative;
	display: inline-block;
	font-size: 30px;
}

.load-more-option .load-more a{
	position: relative;
	display: inline-block;
	font-size: 30px;
	line-height: 42px;
	color: #FF6000;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.load-more-option .load-more a:hover{
	color: #ffffff;
}

/*** 

====================================================================
		FAQ's Section
====================================================================

***/

.faq-section{
	position:relative;
	padding:120px 0px 90px;
}

.faq-section.style-two .accordion-box{
	max-width:970px;
	margin:0 auto;
}

.faq-section .content-column{
	position:relative;
}

.faq-section .content-column .inner-column{
	position:relative;
	margin-bottom:30px;
}

/* Accordian Box */

.accordion-box{
	position:relative;
}

.accordion-box .block{
	position: relative;
    margin-bottom:30px;
}

.accordion-box .block:last-child{
	margin-bottom:0px;
}

.accordion-box .block .acc-btn{
	position:relative;
	font-size:18px;
	cursor:pointer;
	line-height:35px;
	color:#ffffff;
	font-weight:400;
	border-radius:4px;
	padding:12px 25px 12px 25px;
	transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	background-color: #252525;
}

.accordion-box .block .icon-outer{
	position:absolute;
	right:25px;
	top: 13px;
    font-size: 16px;
    line-height: 35px;
    color: #999999;
	text-align:center;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
}

.accordion-box .block .acc-btn .icon-outer .icon{
	position: relative;
}

.accordion-box .block .acc-btn.active{
	box-shadow: 0 0 30px rgba(0,0,0,0.70);
	color: #FF6000;
}

.accordion-box .block .acc-btn.active .icon-outer{
	-webkit-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	transform:rotate(0deg);
	color: #FF6000;
}

.accordion-box .block .acc-content{
	position:relative;
	display:none;
}

.accordion-box .block .acc-content.current{
	display:block;	
}

.accordion-box .block .content{
	position:relative;
	font-size:16px;
	padding:30px 35px 0px;
}

.accordion-box .block .content .text{
	position:relative;
	font-size:16px;	
	line-height: 26px;
	color:#999999;
}

.accordion-box .block .content p:last-child{
	margin-bottom:0px;	
}

/*** 

====================================================================
			FAQ Form Section
====================================================================

***/

.faq-form-section{
	position: relative;
	padding: 120px 0;
}

.faq-form-section .faq-form{
	position: relative;
}

.faq-form .form-group{
	position:relative;
	margin-bottom:20px;	
}

.faq-form .form-group input[type="text"],
.faq-form .form-group input[type="email"],
.faq-form .form-group input[type="url"],
.faq-form .form-group textarea,
.faq-form .form-group select{
	position: relative;
    display: block;
    width: 100%;
    font-size: 15px;
    color: #aaaaaa;
    line-height: 28px;
    padding: 10px 25px;
    background-color: #252525;
    font-weight: 400;
    height: 50px;
    border: 1px solid transparent;
    box-shadow: 0 0 20px rgba(0,0,0,0.50);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.faq-form .form-group input:focus,
.faq-form .form-group select:focus,
.faq-form .form-group textarea:focus{
	border-color:#FF6000;
}

.faq-form .form-group textarea{
	height: 200px;
	resize: none;
	padding-top: 15px;
}

.faq-form .form-group button{
	border: 0;
	font-size: 14px;
	font-weight: 400;
	margin-top: 10px;
}

.faq-form-section .image-column{
	position: relative;
}

.faq-form-section .image-column .image-box{
	position: relative;
}

.faq-form-section .image-column .image{
	position: relative;
	margin-bottom: 0;
}

.faq-form-section .image-column .image img{
	display: block;
}

/*** 

====================================================================
		Call Back Section
====================================================================

***/

.call-back-section{
	position: relative;
	padding: 120px 0;
}

.call-back-section .outer-box{
	position: relative;
	max-width: 90%;
	margin: 0 auto;
}

.call-back-section .form-column{
	position: relative;	
}

.call-back-section .form-column .inner-column{
	position: relative;
}

.request-form{
	position: relative;
	padding: 50px 30px;
	background-color: #222222;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
	overflow: hidden;
	border-radius: 20px;
	border-bottom: 5px solid #FF6000;
}

.request-form .form-group{
	position:relative;
	margin-bottom:15px;	
}

.request-form .form-group:last-child{
	margin-bottom: 0;
}

.request-form .form-group input[type="text"],
.request-form .form-group input[type="email"],
.request-form .form-group input[type="url"],
.request-form .form-group textarea,
.request-form .form-group select{
	position: relative;
    display: block;
    width: 100%;
    font-size: 16px;
    color: #cccccc;
    line-height: 20px;
    padding: 14px 20px;
    background-color: rgba(255,255,255,.10);
	box-shadow: 0 0 20px rgba(0,0,0,0.30);
    font-weight: 400;
    border: 1px solid rgba(255,255,255,.10);
    height: 50px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.request-form .form-group textarea{
	height: 200px;
	resize: none;
}

.request-form .form-group input:focus,
.request-form .form-group textarea:focus,
.request-form .form-group select:focus{
	border-color: #FF6000;
}

.request-form .form-group button{
	text-transform: capitalize;
	font-size: 14px;
	padding: 15px 40px;
	line-height: 20px;
	border-radius: 0;
}

.call-back-section .image-column{
	position: relative;
	text-align: center;
	z-index: 9;
}

.call-back-section .image-column .image-box{
	position: relative;
}

.call-back-section .image-column .image{
	position: relative;
	display: inline-block;
	margin-bottom: 0;
}

.call-back-section .image-column .image:before{
	position: absolute;
	left: 90px;
	top: 50px;
	width: 300px;
	height: 450px;
	border: 10px solid #FF6000;
	z-index: -1;
	content: "";
	box-shadow: 0 0 10px rgba(0,0,0,0.50);
}



.map-section{
	position: relative;
	display: block;
	padding-bottom: 120px;
}

.map-area{
	position:relative;
}

.map-data{
	text-align:center;
	font-size:14px;
	font-weight:400;
	line-height:1.8em;
}

.map-data a{
	display: block;
}

.map-data h6{
	font-size:16px;
	font-weight:700;
	text-align:center;
	margin-bottom:5px;
	color:#121212;
}

.map-section .map-canvas{
	height:540px;
	border: 10px solid #252525;
	background-color: #f9f9f9;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}





/*** 

====================================================================
		Pricing Section
====================================================================

***/

.pricing-section{
	position: relative;
	padding: 120px 0;
}

.pricing-section .row{
	margin: 0 -50px;
}

.pricing-table{
	position: relative;
	padding: 0 50px;
	margin-bottom: 50px;
}

.pricing-table .inner-box{
	position: relative;
	max-width: 325px;
	margin: 0 auto;
	box-shadow: 0 0 50px rgba(0,0,0,0.50);
	padding-top: 50px;
	border-top: 5px solid #FF6000;
	border-bottom: 5px solid #FF6000;
	overflow: hidden;
	border-radius: 40px 0 40px 0;
}

.pricing-table .title-box{
	position: relative;
	border-right: 5px solid #FF6000;
	padding: 10px 20px;
	text-align: right;
	margin-bottom: 30px;
}

.pricing-table .title-box h3{
	position: relative;
	display: block;
	font-size: 30px;
	line-height: 1.2em;
	color: #FF6000;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 5px;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.pricing-table .title-box span{
	display: block;
	font-size: 16px;
	color: #ffffff;
	line-height: 1em;
}

.pricing-table .text{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 24px;
	color: #ffffff;
	text-align: right;
	padding: 0 20px;
	margin-bottom: 40px;
}

.pricing-table .table-content{
	position: relative;
}

.pricing-table .table-content ul{
	position: relative;
	text-align: left;
	margin-bottom: 25px;
}

.pricing-table .table-content ul li{
	position: relative;
	font-size: 16px;
	line-height: 30px;
	color: #ffffff;
	font-weight: 400;
	padding: 7px 25px;
	background-color: rgba(0,0,0,0.20);
	border-left: 2px solid #FF6000;
	margin-bottom: 5px;
}

.pricing-table .price-box{
	position: relative;
	text-align: center;
}

.pricing-table .price-box .title{
	position: relative;
	display: block;
	font-size: 24px;
	line-height: 1em;
	color: #FF6000;
	font-weight: 600;
	text-transform: uppercase;
	font-family: "Rajdhani", sans-serif;
	margin-bottom: 10px;
}

.pricing-table .price{
	position: relative;
	display: block;
	font-size: 40px;
	line-height: 1em;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 20px;
}

.pricing-table .price span{
	position: relative;
	display: inline-block;
	font-size: 30px;
	top: 0px;
	margin-right: 5px;
	font-weight: 600;
}

.pricing-table .price sup{
	font-size: 24px;
	color: #ffffff;
	margin-left: 5px;
	font-weight: 400;
}

.pricing-table .table-footer{
	position: relative;
	text-align: center;
	margin-bottom: 30px;
}

.pricing-table .table-footer a{
	position: relative;
	display: inline-block;
}

.pricing-tabs{
	position: relative;
}

.pricing-tabs .tab-buttons{
	position: relative;
	display: block;
	text-align: center;
	margin-top: 30px;
}

.pricing-tabs .tab-btns{
	position: relative;
	display: inline-block;
	width: 280px;
	border-radius: 20px 0 20px 0;
	border-left: 2px solid #FF6000;
	border-right: 2px solid #FF6000;
	overflow: hidden;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.pricing-tabs .tab-btns li{
	position: relative;
	float: left;
	width: 50%;
	font-size: 14px;
	line-height: 20px;
	padding: 14px 25px;
	text-align: center;
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
	z-index: 8;
	font-family: "Rajdhani", sans-serif;
	text-transform: uppercase;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.pricing-tabs .tab-btns li.tab-btn:before{
	position: absolute;
	top: 0;
	left: 100%;
	height: 100%;
	width: 100%;
	background-color: #252525;
	content: "";
	z-index: -1;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms linear;
}

.pricing-tabs .tab-btns li.tab-btn:last-child:before{
	display: none;
}

.pricing-tabs .tab-btns li.tab-btn.active-btn{
	color: #ffffff;
}

.pricing-tabs .tab-btns li.tab-btn.active-btn:before{
	left: 0;
}

/*** 

====================================================================
		Testimonial Section
====================================================================

***/

.testimonial-section{
	position: relative;
	padding: 120px 0;
}

.testimonial-section .carousel-outer{
	margin: 0 -20px;
}

.testimonial-block{
	position: relative;
	padding: 40px 20px;
	padding-top: 40px;
}

.testimonial-block .inner-box{
	box-shadow: 0 0 20px rgba(0,0,0,0.20);
	position: relative;
	background-color: #252525;
}

.testimonial-block .inner-box:before{
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 10px;
	background-color: #FF6000;
	content: "";
}

.testimonial-block .content-box{
	position: relative;
	padding: 70px 30px 40px;
}

.testimonial-block .content-box .icon{
	position: absolute;
	right: 30px;
	top: -30px;
	font-size: 60px;
	line-height: 1em;
	color: #FF6000;
}

.testimonial-block .content-box .rating{
	position: relative;
	display: block;
	font-size: 18px;
	line-height: 1em;
	color: #FF6000;
	margin-bottom: 20px;
}

.testimonial-block .content-box .text{
	display: block;
	font-size: 20px;
	color: #bbbbbb;
	line-height: 1.5em;
}

.testimonial-block .info-box{
	position: relative;
	padding: 30px 50px;
	padding-left: 130px;
	text-align: left;
	background-color: rgba(0,0,0,0.30);
	border-top: 1px solid rgba(255,255,255,.1);
}

.testimonial-block .thumb{
	position: absolute;
	top: 15px;
	left: 30px;
	height: 80px;
	width: 80px;
	border-radius: 50%;
	overflow: hidden;
}

.testimonial-block .name{
	position: relative;
	display: block;
	font-size: 20px;
	line-height: 30px;
	font-weight: 500;
	color: #ffffff;
}

.testimonial-block .designation{
	display: block;
	font-size: 16px;
	line-height: 1.4em;
	color: #FF6000;
}

.testimonial-section .owl-nav{
	display: none;
}

/*** 

====================================================================
	Testimonial Section Two
====================================================================

***/

.testimonial-section-two{
	position:relative;
	padding: 120px 0;
}

.testimonial-section .owl-dots,
.testimonial-section .owl-nav{
	display:none;
}

.testimonial-block-two{
	position:relative;
}

.testimonial-block-two .inner-box{
	position:relative;
	text-align:center;
}

.testimonial-block-two .inner-box .image{
	position:relative;
	width:80px;
	height:80px;
	margin:0 auto;
	border-radius:50%;
	overflow:hidden;
}

.testimonial-block-two .inner-box .text{
	position:relative;
	color:#999999;
	font-size:22px;
	line-height:1.6em;
	max-width:800px;
	margin:0 auto;
	margin-top:30px;
}

.testimonial-block-two .inner-box h3{
	position:relative;
	color:#ffffff;
	font-size:22px;
	line-height:1.7em;
	margin-top:30px;
}

.testimonial-block-two .inner-box .designation{
	position:relative;
	color:#87909f;
	font-size:16px;
	line-height:1.4em;
	margin-top:5px;
}

/*** 

====================================================================
	Newsletter Section
====================================================================

***/

.newsletter-section{
	position:relative;
	padding: 100px 0;
	z-index: 1;
}

.subscribe-form{
	position: relative;
	background-color: #252525;
	box-shadow: 0 0 50px rgba(0,0,0,0.50);
	padding: 80px 70px;
	overflow: hidden;
}

.subscribe-form:before{
    position: absolute;
    right: 50%;
    top: 0;
    height: 100%;
    width: 100%;
    transform: rotate(-30deg);
    background-color: #ffffff;
    opacity: .02;
    content: "";
}

.subscribe-form .envelope-image{
	position: absolute;
	right: 5%;
	top: 0;
	width: 30%;
	height: 100%;
	opacity: .70;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url(../images/icons/envelope-icon.png);
}

.subscribe-form .form-inner{
	position: relative;
	max-width: 60%;
	width: 100%;
}

/*Subscribe Form*/

.subscribe-form .upper-box{
	position: relative;
	margin-bottom: 30px;
	padding-left: 30px;
	border-left: 5px solid #FF6000;
}

.subscribe-form .upper-box h4{
	position: relative;
	display: block;
	font-size: 42px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 700;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,.10);
	margin-bottom: 15px;
}

.subscribe-form .upper-box h4 span{
	color: #FF6000;
}

.subscribe-form .upper-box .text{
	display: block;
	font-size: 16px;
	line-height: 1.8em;
	color: #999999;
}

.subscribe-form .form-group{
	position:relative;
	display:block;
	margin:0px;
	width:100%;
	padding-right:70px;
	z-index: 2;
}

.subscribe-form .form-group input[type="text"],
.subscribe-form .form-group input[type="tel"],
.subscribe-form .form-group input[type="email"],
.subscribe-form .form-group textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:30px;
	height:60px;
	font-size:15px;
	color:#ffffff;
	background:#3b3b3b;
	padding:14px 30px;
	border: 1px solid transparent;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.subscribe-form .form-group input[type="submit"],
.subscribe-form .form-group button{
	position:absolute;
	right:0px;
	top:0px;
	height: 60px;
	min-width: 60px;
	text-align: center;
	line-height: 30px;
	font-size: 18px;
	line-height: 60px;
	background-color: #222222;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
	color: #ffffff;
}

.subscribe-form .form-group input[type="submit"]:hover,
.subscribe-form .form-group button:hover{
	background-color: #ffffff;
	color: #222222;
	border-radius: 50%;
}

.subscribe-form .form-group input:focus,
.subscribe-form .form-group select:focus,
.subscribe-form .form-group textarea:focus{
	border-color: #FF6000;
}

/*** 

====================================================================
	News Section
====================================================================

***/

.news-section{
	position:relative;
	padding:120px 0 90px;
}

.news-section.alternate{
	padding: 120px 0;
}

.news-block{
	position:relative;
	margin-bottom:50px;
}

.news-block .inner-box{
	position:relative;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.news-block .inner-box .image{
	position:relative;
	display:block;
	background:#222222;
	overflow:hidden;
}

.news-block .inner-box .image img{
	position:relative;
	width:100%;
	display:block;
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
}

.news-block .inner-box:hover .image a img{
	opacity:0.7;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

.news-block .lower-content{
	position:relative;
	padding:30px 25px 25px;
	background-color: #252525;
	border-bottom: 4px solid #FF6000;
	border-radius: 0 0 15px 15px;
	z-index:1;
}

.news-block .post-info{
	position: relative;
	margin-bottom: 10px;
}

.news-block .post-info li{
	position: relative;
	display: inline-block;
	margin-right: 3px;
	margin-bottom: 5px;
	font-size: 12px;
	line-height: 30px;
	padding: 0 10px;
	background-color: #111111;
	box-shadow: 0 0 5px rgba(0,0,0,0.30);
	color: #ffffff;
}

.news-block .post-info li:last-child{
	margin-right: 0;
}

.news-block .lower-content h3{
	position:relative;
	font-weight:500;
	font-size:24px;
	color: #ffffff;
	line-height:1.4em;
	margin-bottom:10px;
}

.news-block .lower-content h3 a{
	position:relative;
	color:#ffffff;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}

.news-block .lower-content h3 a:hover{
	color:#FF6000;
}

.news-block .lower-content .text{
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 20px;
}

.news-block .lower-content .theme-btn{
	padding: 10px 20px;
	line-height: 20px;
	font-size: 14px;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

/*** 

====================================================================
			Blog Single
====================================================================

***/


.blog-single,
.blog-sidebar{
	position: relative;
	padding-right: 50px;
}

.blog-single .news-block h3{
	margin-bottom: 20px;
}

.blog-single .news-block p{
	position: relative;
	margin-bottom: 20px;

}

.blog-single .two-column{
	position: relative;
	margin-top: 40px;
	margin-bottom: 10px;
}

.blog-single blockquote{
	position: relative;
	border-left: 3px solid #FF6000;
	padding: 20px 40px 20px;
	font-size: 18px;
	line-height: 26px;
	color: #ffffff;
	max-width: 95%;
	background-color: rgba(255,255,255,.10);
	margin:40px auto 40px;
	font-family: "Rajdhani", sans-serif;
	box-shadow: 0 0 20px rgba(0,0,0,0.20);
	border-radius: 5px 0 0 5px;
}

.blog-single blockquote cite{
	display: block;
	font-style: normal;
	margin-top: 5px;
	color: #ffffff;
	font-size: 14px;
}

.blog-single blockquote cite span{
	font-weight: 500;
	font-size: 18px;
	color: #FF6000;
	font-style: normal;
}

/*post share options*/

.blog-single .post-share-options{
	position:relative;
	margin-bottom: 40px;
	box-shadow: 0 0 20px rgba(0,0,0,0.40);
	padding: 20px 20px;
	background-color: #252525;
}

.blog-single .post-share-options p{
	position:relative;
	color:#ffffff;
	font-size:16px;
	line-height: 25px;
	font-weight:600;
	margin:0;
	display: inline-block;
	font-family: "Rajdhani", sans-serif;
}

.blog-single .post-share-options .tags{
	position: relative;
	display: inline-block;
}

.blog-single .post-share-options .tags li{
	position: relative;
	display: inline-block;
}

.blog-single .post-share-options .tags a{
	position:relative;
	display: block;
	font-size:14px;
	font-weight:400;
	line-height: 22px;
	padding: 5px 10px;
	color:#ffffff;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.30);	
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.blog-single .post-share-options .tags a:hover{
	color: #000000;
	background-color: #ffffff;
}

.blog-single .post-share-options .social-icon-two{
	position: relative;
	display: inline-block;
}

/*Author Box*/

.author-box{
	position:relative;
	padding: 38px 40px;
	box-shadow: 0 0 30px rgba(0,0,0,0.10);
	margin-bottom: 70px;
}

.author-box .inner-box{
	position:relative;
	padding-left: 160px;
	min-height: 150px;
	padding-top: 15px;
}

.author-box .thumb{
	position:absolute;
	left:0px;
	top:0px;
	height: 145px;
	width: 135px;
	margin-bottom: 20px;
}

.author-box .thumb img{
	display: block;
	width: 100%;
	height: auto;
}

.author-box .name{
	position: relative;
	font-size: 18px;
	line-height: 25px;
	color: #222222;
	font-weight: 600;
	margin-bottom: 10px;
}

.author-box .text{
	position: relative;
	float: right;
	width: 100%;
	font-size: 14px;
	line-height: 24px;
	color: #999999;
	font-weight: 400;
	margin-bottom: 10px;
}

.author-box .social-icon{
	position: relative;
	z-index: 9;
}

.author-box .social-icon li{
	position: relative;
	display: inline-block;
	margin-right: 12px;
}

.author-box .social-icon li a{
	position:relative;
	display: block;
	text-align: center;
	font-size:14px;
	font-weight:400;
	color:#222222;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.author-box .social-icon li a:hover{
	color: #FF6000;
}

/*** 

====================================================================
	Error Section
====================================================================

***/

.error-section{
	position:relative;
	text-align: center;
	padding:200px 0px 150px;
}

.error-section .sec-title{
	margin-bottom: 20px;
}

.error-section .sec-title .float-text{
	top: 0px;
}

.error-section .sec-title h1{
	position: relative;
	display: inline-block;
	font-size: 200px;
	line-height: 1em;
	color: #FF6000;
	font-weight: 700;
	letter-spacing: 0;
		transition: all 800ms ease;
}

.error-section .sec-title h1 span{
	color: #ffffff;
}

.error-section h3{
	font-size:60px;
	line-height: 1.2em;
	padding: 0;
	margin: 0;
	font-weight: 700;
	color: #ffffff;
		margin-bottom: 50px;
}

.error-section .text{
	font-size:24px;
	line-height: 1.2em;
	color:#222222;
	margin-bottom:35px;
}

.error-section .theme-btn{
	border-radius:5px;
	font-size:16px;
	font-weight:700;
	text-transform:uppercase;
	margin: 0 3px;
}

/*** 

====================================================================
		Styled Pagination
====================================================================

***/

.styled-pagination{
	position:relative;
	display: block;
	width: 100%;
	margin-top: 50px;
}

.styled-pagination li{
	position: relative;
	display: inline-block;
	margin: 0 10px;
}

.styled-pagination li a{
	position: relative;
	display: block;
	font-size: 16px;
	line-height: 40px;
	width: 40px;
	color: #ffffff;
	text-align: center;
	box-shadow: 0 0 20px rgba(0,0,0,0.40);
	background-color: #252525;
	border-radius: 15px;
	border-bottom: 2px solid #FF6000;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.styled-pagination li a:hover,
.styled-pagination li.active a{
	color: #FF6000;
}

/*** 

====================================================================
	Clients Section
====================================================================

***/

.clients-section{
	position:relative;
	padding:40px 0px;
	background:#252525;
	box-shadow: 0 0 50px rgba(0,0,0,0.50);
}

.clients-section .slide-item{
	text-align:center;	
}

.clients-section .slide-item a{
	position:relative;
	display:block;
}

.clients-section .slide-item img{
	position:relative;
	display: inline-block;
	max-width: 100%;
	width:auto;
	opacity:0.5;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.clients-section .slide-item a:hover img{
	opacity:1;
}

/***

==================================================================
		Main Footer
==================================================================

***/

.main-footer{
	position:relative;
}

.main-footer .widgets-section{
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 150px 0 70px;
}

.main-footer .footer-column{
	position:relative;
	margin-bottom:40px;
}

.main-footer .footer-widget{
	position:relative;
}

.main-footer .footer-column .widget-title{
	position: relative;
	font-size:24px;
	font-weight:500;
	color:#ffffff;
	line-height: 30px;
	padding-bottom: 10px;
	margin-bottom:30px;
}

.main-footer .footer-column .widget-title:before{
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 40px;
	background-color: #FF6000;
	content: '';
}


.social-icon-two{
	position: relative;
	display: block;
}

.social-icon-two li{
	position: relative;
	display: inline-block;
	margin-right: 10px;
}

.social-icon-two li:last-child{
	margin-right: 0;
}

.social-icon-two li a{
	position: relative;
	display: block;
	font-size: 12px;
	line-height: 30px;
	width: 30px;
	color: #ffffff;
	text-align: center;
	box-shadow: 0 0 20px rgba(0,0,0,0.40);
	background-color: #252525;
	border-radius: 15px;
	border-bottom: 2px solid #FF6000;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.social-icon-two li a:hover{
	color: #FF6000;
	border-color: #ffffff;
}

/*Recent Posts*/

.recent-posts{
	position: relative;
	padding-left: 40px;
}

.recent-posts .post{
	position: relative;
	min-height: 90px;
	margin-bottom: 30px;
}

.recent-posts .post:last-child{
	margin-bottom: 0;
}

.recent-posts .post .thumb{
	position: absolute;
	left: 0;
	top: 0;
	height: 90px;
	width: 90px;
	overflow: hidden;
}

.recent-posts .post .thumb a{
	display: block;
}

.recent-posts .post .thumb img{
	display: block;
	width: 100%;
	height: auto;
}

.recent-posts .post h4{
	position: relative;
	font-size: 18px;
	color: #ffffff;
	line-height: 30px;
	font-weight: 500;
	margin-bottom: 5px;
}

.recent-posts .post h4 a{
	color:#ffffff;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.recent-posts .post h4 a:hover{
	color: #FF6000;
}

.recent-posts .post .date{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 30px;
	color: #bbbbbb;
}

.recent-posts .post .date span{
	color: #FF6000;
	margin-right: 4px;
	opacity: .70;
}

/*=== User LInks ===*/

.useful-links{
	position: relative;
	padding-left: 50px;
}

.user-links li{
	position: relative;
	display: block;
	margin-bottom: 5px;
}

.user-links li a{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 30px;
	color: #ffffff;
	font-weight: 400;
	padding: 0 15px;
	border-left: 1px solid #FF6000; 
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.user-links li a:hover{
	color: #FF6000;
}

.main-footer .contact-list{
	position: relative;
}

.main-footer .contact-list li{
    position: relative;
    padding: 10px 30px;
    padding-left: 55px;
    margin-bottom: 10px;
    background-color: #252525;
    box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.main-footer .contact-list li:last-child{
	margin-bottom: 0;
}

.main-footer .contact-list li .icon{
    position: absolute;
    left: 15px;
    top: 10px;
    font-size: 23px;
    line-height: 25px;
    color: #ffffff;
}

.main-footer .contact-list li .text{
	display: block;
	font-size: 14px;
	line-height: 24px;
	color: #ffffff;
	font-weight: 400;
}

.main-footer .contact-list li .text a{
	color: #ffffff;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.main-footer .contact-list li .text a:hover{
	color: #FF6000;
}

/*=== Footer Bottom ===*/

.main-footer .footer-bottom{
	position: relative;
	width: 100%;
	background-color: #252525;
}

.main-footer .footer-bottom .inner-container{
	position: relative;
}

.main-footer .footer-bottom .copyright-text{
	position: relative;
	float: left;
	padding:20px 0;
}

.main-footer .footer-bottom .copyright-text p{
	position: relative;
	line-height: 20px;
	font-size: 16px;
	color: #ffffff;
	font-weight: 400;
}

.main-footer .footer-bottom .copyright-text a{
	color: #ffffff;
	font-weight: 600;
	font-family: "Rajdhani", sans-serif;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.main-footer .footer-bottom .copyright-text a:hover{
	color: #ffffff;
}

.main-footer .footer-bottom .footer-nav{
	position: relative;
	float: right;
}

.main-footer .footer-bottom .footer-nav ul{
	position: relative;
	padding:15px 0;
}

.main-footer .footer-bottom .footer-nav ul li{
	position: relative;
	float: left;
	margin-left: 10px;
	font-family: "Oswald", sans-serif;
}

.main-footer .footer-bottom .footer-nav ul li a{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 20px;
	color: #ffffff;
	font-weight: 400;
	padding: 5px 10px;
	text-transform: uppercase;
	background-color: #333333;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.main-footer .footer-bottom .footer-nav ul li a:hover{
	color: #FF6000;
	box-shadow: 0 0 10px rgba(0,0,0,0.20);
}

/***

==================================================================
		Sidebar Page Container
==================================================================

***/

.sidebar-page-container{
	position: relative;
	overflow: hidden;
	padding: 120px 0 70px; 
}

.sidebar-page-container .content-side{
	position: relative;
	margin-bottom: 50px;
}


.sidebar-widget{
    position: relative;
    margin-bottom:50px;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    background-color: #252525;
    border-bottom: 2px solid #FF6000;
    padding: 40px 30px 40px;
}



.sidebar-page-container .sidebar-title{
	position: relative;
	margin-bottom: 25px;
}

.sidebar-page-container .sidebar-title h2{
	position: relative;
	display: inline-block;
	font-size: 26px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 600;
		text-transform: capitalize;
	letter-spacing: 0.02em;
}

/*Search Box Widget*/

.sidebar .search-box{
	position: relative;
	padding: 0;
}

.sidebar .search-box .form-group{
	position:relative;
	margin:0px;	
}

.sidebar .search-box .form-group input[type="text"],
.sidebar .search-box .form-group input[type="search"]{
	position:relative;
	display:block;
	font-size:18px;
	color:#ffffff;
	line-height:20px;
	padding:24px 30px;
	height:70px;
	width:100%;
	background-color: #252525;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
}

.sidebar .search-box .form-group input:focus{
	border-color:#FF6000;	
}

.sidebar .search-box .form-group input[type="submit"],
.sidebar .search-box .form-group button{
	position:absolute;
	right:10px;
	top:10px;
	width:50px;
	height:50px;
	line-height: 50px;
	text-align:center;
	display:block;
	font-size:18px;
	background-color: transparent;
	color:#ffffff;
	font-weight:normal;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.sidebar .search-box .form-group input[type="submit"]:hover,
.sidebar .search-box .form-group button:hover{
	color: #777777;
}

/*=== Categories ===*/

.sidebar .blog-categories{
	position: relative;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
	background-color: #252525;
}

.cat-list{
	position:relative;
}

.cat-list li{
	position:relative;
	margin-bottom: 5px;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.cat-list li a{
	position: relative;
    font-size: 16px;
    color: #ffffff;
    line-height: 30px;
    font-weight: 400;
    padding: 10px 20px;
    display: block;
    background-color: rgba(0,0,0,0.20);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.cat-list li a span{
	float: right;
	font-size: 13px;
	line-height: 30px;
	color: #ffffff;
	opacity: .90;
}

.cat-list li:hover a,
.cat-list li.active a{
    background-color: rgba(255,255,255,.10);
    box-shadow: 0 0 10px rgba(0,0,0,0.30);
}

/*=== Latest News ===*/

.sidebar .latest-news{
	position: relative;
	padding: 30px 30px 35px;
	box-shadow: 0 0 30px rgba(0,0,0,0.05);
}

.latest-news .post{
	position: relative;
	padding-left: 105px;
	margin-bottom: 30px;
	min-height: 85px;
	padding-top: 5px;
}

.latest-news .post:last-child{
	margin-bottom: 0;
}

.latest-news .post-thumb{
	position: absolute;
	left: 0;
	top: 0;	
	height: 85px;
	width: 85px;
	margin-bottom: 20px;
}

.latest-news .post-thumb a:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: .80;
	content: "";
	background-color: #FF6000;
	z-index: 1;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.latest-news .post:hover .post-thumb a:before{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.latest-news .post-thumb a:after{
	position: absolute;
	height: 20px;
	width: 20px;
	left: 50%;
	top: 50%;
	margin-left: -10px;
	margin-top: -10px;
    text-align: center;
    line-height: 20px;
    font-size: 18px;
    z-index: 9;
    color: #ffffff;
    font-weight: 900;
    content: "\f002";
	font-family: "Font Awesome 5 Free";
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.latest-news .post:hover .post-thumb a:after{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.latest-news .post-thumb img{
	position: relative;
	display: block;
	width: 100%;
}

.latest-news .post h3{
	position: relative;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 7px;
}

.latest-news .post h3 a{
	color: #ffffff;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.latest-news .post:hover h3 a{
	color: #FF6000;
}

.latest-news .post .post-info{
	position: relative;
	font-size: 12px;
	line-height: 24px;
	color: #FF6000;
	font-weight: 400;
	font-style: italic;
}

/* Instagram Widget */

.instagram-widget{
	position: relative;
	padding: 30px 30px 35px;
	box-shadow: 0 0 30px rgba(0,0,0,0.05);
}

.instagram-widget .link-box{
	position: absolute;
	right: 30px;
	top: 32px;
}

.instagram-widget .link-box a{
	display: inline-block;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background-color: #252525;
	color: #ffffff;
	font-size: 18px;
	text-align: center;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.instagram-widget .link-box a:hover{
	box-shadow: 0 0 10px rgba(0,0,0,0.10);
	background-color: #ffffff;
	color: #252525;
}

.instagram-widget .outer{
	position:relative;
	margin: 0px -4px 0;
}

.instagram-widget .outer .image{
	position:relative;
	float:left;
	width:25%;
	padding:0px 4px;
	margin-bottom:8px;
}

.instagram-widget .image img{
	display:block;
	width:100%;	
}

.instagram-widget .image a{
	position: relative;
	display: block;
}

.instagram-widget .image a:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #252525;
	padding: 5px;
	opacity: .70;
	content: "";
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.instagram-widget .image a:hover:before{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.instagram-widget .image a:after{
	position: absolute;
	height: 20px;
	width: 20px;
	left: 50%;
	top: 50%;
	margin-left: -10px;
	margin-top: -10px;
    text-align: center;
    line-height: 20px;
    font-size: 18px;
    color: #ffffff;
    font-weight: 900;
    content: "\f002";
	font-family: "Font Awesome 5 Free";
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.instagram-widget .image a:hover:after{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

/*=== Tags ===*/

.sidebar .tags{
	padding: 30px 30px 30px;
	box-shadow: 0 0 30px rgba(0,0,0,0.05);
}

.tag-list{
	position: relative;
	display: block;
}

.tag-list li{
	position: relative;
	float: left;
	margin-bottom: 10px;
	margin-right: 5px;
} 

.tag-list li a{
	position: relative;
    display: block;
    font-size: 12px;
    color: #ffffff;
    line-height: 25px;
    padding: 5px 18px;
    font-weight: 400;
    text-align: center;
    background-color: #252525;
    box-shadow: 0 0 10px rgba(0,0,0,0.30);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.tag-list li a:hover{
    box-shadow: 0 0 0px rgba(0,0,0,0.30);
    background-color: #ffffff;
    color: #000000;
}



/*Blog Category*/

.blog-cat{
	position:relative;
	border:1px dashed #cccccc;
}

.blog-cat li{
	position:relative;
}

.blog-cat li a{
	position:relative;
	font-size:18px;
	font-weight:600;
	line-height: 34px;
	color:#222222;
	display:block;
	border-bottom:1px dashed #cccccc;
	border-left: 5px solid transparent;
	padding: 25px 40px;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	font-family: 'Rubik', sans-serif;
}

.blog-cat li:last-child a{
	border-bottom: 0;
}

.blog-cat li a:before{
	position:absolute;
	content:'\f105';
	right:33px;
	top:27.5px;
	color:#FF6000;
	font-size: 18px;
	line-height: 30px;
	font-family: 'FontAwesome';
}

.blog-cat li.active a,
.blog-cat li a:hover{
	color:#ffffff;
	background-color:#FF6000;
	border-left: 5px solid #222222;
}

.blog-cat li.active a:before,
.blog-cat li a:hover:before{
	color: #ffffff;
}

/*** 

====================================================================
		Comment Area
====================================================================

 ***/


.group-title{
	position: relative;
	margin-bottom: 40px;
}

.group-title h3{
	position: relative;
	display: block;
	font-size: 32px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 600;
	}

.comments-area{
	position:relative;
	margin-bottom: 70px;
}

.comments-area .comment-box{
	position:relative;
	margin-bottom:30px;
}

.comments-area .comment-box.reply-comment{
	margin-left: 70px;
}

.comments-area .comment-box:last-child{
	margin-bottom: 0;
}

.comments-area .comment{
	position:relative;
	min-height: 110px;
	padding: 30px 30px;
	box-shadow: 0 0 20px rgba(0,0,0,0.50);
	background-color: #252525;
	padding-left: 130px;
}

.comments-area .comment-box .author-thumb{
	position:absolute;
	left:30px;
	top:30px;
	height: 80px;
	width: 80px;
	margin-bottom: 10px;
}

.comments-area .comment-box .author-thumb img{
	width:100%;
	display:block;
}

.comments-area .comment-info{
	position: relative;
	display: block;
	margin-bottom: 5px;
}

.comments-area .comment-box .name{
	position: relative;
	display: inline-block;
	font-size:18px;
	line-height:1em;
	font-weight:600;
	color:#ffffff;
	margin-right: 10px;
}

.comments-area .comment-box .date{
	position: relative;
	display: inline-block;
	font-size: 14px;
	line-height: 24px;
	color: #FF6000;
	font-weight: 400;
}

.comments-area .comment-box .rating{
	font-size: 10px;
	line-height: 1em;
	color: orange;
	margin-bottom: 10px;
}

.comments-area .comment-box .text{
	font-size: 15px;
	line-height: 25px;
	color:#999999;
	font-weight: 400;
}

.comments-area .comment-box .reply-btn{
	position: absolute;
	right: 30px;
	top: 28px;
	font-size: 14px;
	line-height: 15px;
	color: #ffffff;
	font-weight: 400;
	background-color: #444444;
	padding: 5px 10px;
	text-transform: uppercase;
	font-family: "Rajdhani", sans-serif;
	box-shadow: 0 0 10px rgba(0,0,0,0.40);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.comments-area .comment-box .reply-btn:hover{
	color: #FF6000;
	background-color: transparent;
}

/*** 

====================================================================
		Comment Form
====================================================================

 ***/

.comment-form{
 	position: relative;
}

.comment-form .form-group{
	position:relative;
	margin-bottom: 30px;
}

.comment-form .form-group:last-child{
	margin-bottom: 0;
}

.comment-form .form-group input[type="text"],
.comment-form .form-group input[type="email"],
.comment-form .form-group textarea,
.comment-form .form-group select{
	position: relative;
    display: block;
    height: 50px;
    width: 100%;
    font-size: 16px;
    color: #999999;
    line-height: 20px;
    font-weight: 400;
    padding: 14px 22px;
    background-color: #252525;
    border: 1px solid transparent;
	box-shadow: 0 0 20px rgba(0,0,0,0.45);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.comment-form .form-group input:focus,
.comment-form .form-group select:focus,
.comment-form .form-group textarea:focus{
	border-color:#FF6000;
}

.comment-form .form-group textarea{
	height: 150px;
	resize: none;
	padding-top: 20px;
}

.comment-form .form-group input[type="submit"],
.comment-form .form-group button{
	padding: 15px 35px;
	font-size: 16px;
	font-weight: 600;
}

/***

==================================================================
			Our Shop
==================================================================

***/

.our-shop{
	position: relative;
}

.shop-item{
	position: relative;
	margin-bottom: 80px;
}

.shop-item .inner-box{
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.shop-item .image-box{
	position: relative;
	overflow: hidden;
}

.shop-item .image-box .image{
	position: relative;
	margin-bottom: 0;
}

.shop-item .image-box .image img{
	display: block;
	width: 100%;
	height: auto;
}

.shop-item .overlay-box{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(1.50);
	-moz-transform: scale(1.50);
	-ms-transform: scale(1.50);
	-o-transform: scale(1.50);
	transform: scale(1.50);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.shop-item .inner-box:hover .overlay-box{
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.shop-item .overlay-box .tag{
	position: absolute;
	left: 20px;
	top: 20px;
	padding: 0px 15px;
	border-radius: 3px; 
	background-color: #252525;
	font-size: 12px;
	line-height: 25px;
	color: #ffffff; 
	border-radius: 5px;
	box-shadow: 0 0 20px rgba(0,0,0,0.50);
}

.shop-item .overlay-box .btn-box{
	position: absolute;
	text-align: center;
	bottom: 20px;
	width: 100%;
}

.shop-item .overlay-box .btn-box a{
	position: relative;
	display: inline-block;
	font-size: 14px;
	color: #222222;
	line-height: 40px;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	text-align: center;
	background-color: #ffffff;
	margin: 0 2px;
	box-shadow: 0 0 5px rgba(0,0,0,0.30);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.shop-item .overlay-box .btn-box a:hover{
	background-color: #FF6000;
	color: #ffffff;
}

.shop-item .lower-content{
	position: relative;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
}

.shop-item .lower-content .name{
	position: relative;
	display: block;
	font-size: 20px;
	line-height: 30px;
	color: #ffffff;
	font-weight: 600;
	font-family: "Rajdhani", sans-serif;
	margin-bottom: 5px;
}

.shop-item .lower-content .name a{
	display: inline-block;
	color: #ffffff;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.shop-item .lower-content .name a:hover{
	color: #FF6000;
}

.shop-item .lower-content .price{
	position: relative;
	display: block;
	font-size: 16px;
	line-height: 20px;
	color: #FF6000;
	font-weight: 700;
}

.shop-item .lower-content .price del{
	color: #dddddd;
}

.our-shop .styled-pagination{
	position: relative;
	margin-top: 0;
}

.shop-sidebar{
	position: relative;
	padding-right: 30px;
}

/*Sidebar Realated Posts */
.sidebar .related-posts{
	position: relative;
	padding: 30px 30px 40px;
}

.sidebar .related-posts .post{
	position:relative;
	padding:0px 0px;
	padding-left:90px;
	margin-bottom:20px;
}

.sidebar .related-posts .post:last-child{
	margin-bottom:0px;
	border:0px;
	min-height:inherit;
}

.sidebar .related-posts .post .post-thumb{
	 position:absolute;
	 left:0px;
	 top:0px;
	 width:70px;
	 box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.sidebar .related-posts .post .post-thumb img{
	display:block;
	width:100%;	
}

.sidebar .related-posts .post h4{
	position: relative;
	padding-top: 4px;
	font-size:16px;
	font-weight:700;
	color:#ffffff;
	line-height:1.2em;
	text-transform:capitalize;
	font-family: 'Rajdhani', sans-serif;
	margin-bottom: 4px;
}

.sidebar .related-posts .post h4 a{
	color:#ffffff;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.sidebar .related-posts .post a,
.sidebar .related-posts .post a:hover{
	color:#FF6000;	
}

.sidebar .related-posts .post .price{
	font-size:14px;
	letter-spacing:1px;
	font-weight:400;
	color:#999999;
	line-height: 20px;
}

.sidebar .related-posts .post .rating{
	line-height:1em;
}

.sidebar .related-posts .post .rating .fa{
	position:relative;
	display:inline-block;
	font-size:10px;
	line-height:20px;
	color:orange;
}

/*Sidebar Range slider */
.price-filters{
	position: relative;
	padding: 30px 30px;
	box-shadow: 0 0 30px rgba(0,0,0,0.05);
}

.price-filters .sidebar-title{
	margin-bottom: 30px;
}

.range-slider-one{
	position:relative;
	min-height:48px;
    padding-top: 10px;
	margin-top:-20px;
}

.range-slider-one .title{
	position:relative;
	float:left;
	color:#ffffff;
	font-size:16px;
	font-weight:400;
	margin-top:8px;
}

.range-slider-one .title:before{
	position:absolute;
	content:'$';
	right:-14px;
	top:0px;
	color:#ffffff;
	font-size:16px;
	font-weight:300;
}

.range-slider-one .input{
	float:right;
    left: 8px;
	max-width:75px;
	padding-left:8px;
	margin-top:8px;
    position: relative;
}

.range-slider-one .input input{
	background:none;
	color:#ffffff;
	font-size:16px;
	font-weight:300;
	width:auto;
	text-align:left;	
}

.range-slider-one .ui-widget.ui-widget-content{
	height:3px;
	border:none;
	margin-bottom:25px;
	background:#ffffff;	
}

.range-slider-one .ui-slider .ui-slider-range{
	top:0px;
	height:3px;
	background:#666666;	
}

.range-slider-one .ui-state-default,
.range-slider-one .ui-widget-content .ui-state-default{
	top:-3px;
	width:10px;
	height:10px;
	background:#FF6000;
	cursor:pointer;
	border-radius: 50%;
	border-color:#FF6000;
}

.range-slider-one .theme-btn{
	padding:8px 25px;
	border-radius:0px;
}

/*** 

====================================================================
		Product Details
====================================================================

***/

.product-details{
	position: relative;
}

.product-details .basic-details{
	position:relative;
	margin-bottom:50px;
}

.product-details .image-column,
.product-details .info-column{
	margin-bottom:20px;
}

.product-details .image-column .image-box{
	margin-bottom: 0;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.product-details .image-column .image-box img{
	position:relative;
	display:block;
	width:100%;
	background-color:#f7f7f7;
}

.product-details .basic-details .details-header{
	position:relative;
	margin-bottom:16px;
}

.product-details .basic-details .details-header h4{
	font-size:28px;
	font-weight:700;
	line-height:1.2em;
	color:#ffffff;
	margin:5px 0px 5px;
	}

.product-details .basic-details .details-header h4 a{
	color:#333333;	
}

.product-details .basic-details .details-header .rating{
	font-size:12px;
	color:#FF6000;
	margin-bottom:15px;
	display:inline-block;
}

.product-details .basic-details .details-header .reviews{
	position:relative;
	display:inline-block;
	color:#999999;
	font-weight:400;
	margin-left:15px;
}

.product-details .basic-details .details-header .rating .fa{
	display:inline-block;
}

.product-details .basic-details .details-header .rating .txt{
	font-size:14px;
	padding-left:10px;
	color:#999999;	
}

.product-details .basic-details .details-header .item-price{
	font-size:20px;
	font-weight:600;
	color:#ffffff;
	line-height:24px;
}

.product-details .basic-details .details-header .item-price del{
	color: #999999;
	margin-left: 10px;
	font-weight:400;
}

.product-details .basic-details .prod-info{
	margin-bottom:15px;
	line-height:1.6em;
	font-size:13px;	
}

.product-details .basic-details .prod-info strong{
	font-weight:700;
	color:#111111;	
}

.product-details .basic-details .text{
	margin-bottom:25px;
	color:#999999;
	font-size:16px;
	font-weight:400;
	line-height:1.8em;	
}

.product-details .basic-details .item-quantity .field-label{
	float:left;
	font-weight:700;
	font-size:14px;
	line-height:32px;
	display:inline-block;
	padding-right:20px;	
}

.product-details .basic-details .quantity-spinner,
.cart-section input.quantity-spinner{
	line-height:24px;
	padding:10px 15px !important;
	height:46px !important;
	box-shadow:none !important;	
	background-color: #252525;
	border-color: #252525 !important;
	color: #ffffff !important;
}

.cart-section .bootstrap-touchspin .input-group-btn-vertical{
	position: absolute;
	right: 20px;
	top: 0;
	z-index: 99;
}

.product-details .basic-details .bootstrap-touchspin .input-group-btn-vertical > .btn,
.cart-section .bootstrap-touchspin .input-group-btn-vertical > .btn{
	padding:11px 10px;
	background:#555555 !important;	
	color: #ffffff;
}

.product-details .bootstrap-touchspin .input-group-btn-vertical i,
.cart-section .bootstrap-touchspin .input-group-btn-vertical i{
	top:0px;	
	font-weight: 900;
}

.product-details .basic-details .item-quantity{
	position:relative;
	float:left;
	width:85px;
	margin-bottom:25px;
	margin-right:25px;
}

.product-details .basic-details .item-quantity .field-label{
	float:left;
	font-weight:700;
	font-size:14px;
	line-height:32px;
	display:inline-block;
	padding-right:20px;	
}

.product-details .basic-details .quantity-spinner,
.cart-table input.quantity-spinner{
	font-size:18px;
	line-height:24px;
	padding:10px 15px !important;
	height:50px !important;
	box-shadow:none !important;	
}

.product-details .basic-details .bootstrap-touchspin .input-group-btn-vertical > .btn,
.cart-table .bootstrap-touchspin .input-group-btn-vertical > .btn{
	padding:12px 10px;
	background:#f4f5f6;
	border-radius:0px;	
}

.product-details .bootstrap-touchspin .input-group-btn-vertical i,
.cart-table .bootstrap-touchspin .input-group-btn-vertical i{
	top:8px;	
}

.product-details .basic-details .add-to-cart{
	margin-left: 10px;
	border-radius: 0;
}

/*** 

====================================================================
		Product Tabs
====================================================================

***/

.shop-single .product-details .prod-tabs{
	position:relative;
}

.shop-single .product-details .prod-tabs .tab-btns{
	position:relative;
	z-index:1;
	margin-bottom:50px;
}

.shop-single .product-details .prod-tabs .tab-btns .tab-btn{
	position:relative;
	top:1px;
	display:block;
	float:left;
	margin-right:10px;
	font-size:14px;
	background:rgba(255,255,255,.90);
	color:#222222;
	font-weight:600;
	line-height:20px;
	cursor:pointer;
	border-radius:0px;
	padding:10px 30px;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
	border: 1px solid #222222;
}

.shop-single .product-details .prod-tabs .tab-btns .tab-btn:hover,
.shop-single .product-details .prod-tabs .tab-btns .tab-btn.active-btn{
	box-shadow: 0 0 10px rgba(0,0,0,0.10);
	background-color: #222222;
	color: #ffffff;
}

.shop-single .product-details .prod-tabs .tabs-content{
	position:relative;
}

.shop-single .product-details .prod-tabs .tabs-content .tab{
	position:relative;
	display:none;
	border-top:0px;
}

.shop-single .product-details .prod-tabs .tabs-content .tab.active-tab{
	display:block;	
}

.shop-single .product-details .prod-tabs .tabs-content .tab .content{
	position:relative;
	padding: 30px 30px;
	background-color: #252525;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.shop-single .product-details .prod-tabs .tabs-content .tab .content p{
	position:relative;
	font-size:16px;
	line-height:1.7em;
	margin-bottom:25px;
	color:#999999;
}

.shop-single .product-details .prod-tabs .tabs-content .tab .content p:last-child{
	margin-bottom:0px;
}

.prod-tabs .tabs-content .tab .title{
	position:relative;
	color:#ffffff;
	font-size:28px;
	font-weight:600;
	margin-bottom:30px;
	font-family: 'Rajdhani', sans-serif;
}

/*Comment Form*/

.shop-comment-form{
	position:relative;
	margin-top:50px;
}

.shop-comment-form h2{
	position:relative;
	color:#ffffff;
	font-size:28px;
	font-weight:500;
		margin-bottom:10px;
}

.shop-comment-form .mail-text{
	position:relative;
	color:#ffffff;
	font-size:16px;
	margin-bottom:15px;
}

.shop-comment-form .group-title{
	margin-bottom:20px;
}

.shop-comment-form .rating-box{
	position:relative;
	margin-bottom:20px;
}

.shop-comment-form .rating-box .text{
	position:relative;
	float: left;
	margin-right: 30px;
	font-size:16px;
	color:#ffffff;
	margin-bottom:15px;
}

.shop-comment-form .rating-box .rating{
	position:relative;
	margin-right:10px;
	display:inline-block;
}

.shop-comment-form .rating-box .rating .fa{
	position:relative;
	margin-right:5px;
	display:inline-block;
}

.shop-comment-form .rating-box .rating a{
	position:relative;
	color:#cccccc;
	font-size:12px;
	display:inline-block;
}

.shop-comment-form .rating-box .rating a:hover{
	color:orange;
}

.shop-comment-form .form-group{
	position:relative;
	margin-bottom:20px;
}

.shop-comment-form .form-group label{
	position:relative;
	color:#333333;
	font-size:16px;
	font-weight:400;
}

.shop-comment-form .form-group:last-child{
	margin-bottom:0px;
}

.shop-comment-form .form-group input[type="text"],
.shop-comment-form .form-group input[type="password"],
.shop-comment-form .form-group input[type="tel"],
.shop-comment-form .form-group input[type="email"],
.shop-comment-form .form-group select{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	padding:10px 20px;
	height:50px;
	color:#848484;
	font-weight:300;
	background:#252525;
	border:1px solid transparent;
	box-shadow: 0 0 20px rgba(0,0,0,0.30);
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.shop-comment-form .form-group input[type="text"]:focus,
.shop-comment-form .form-group input[type="password"]:focus,
.shop-comment-form .form-group input[type="tel"]:focus,
.shop-comment-form .form-group input[type="email"]:focus,
.shop-comment-form .form-group select:focus,
.shop-comment-form .form-group textarea:focus{
	border-color:#FF6000;
}

.shop-comment-form .form-group textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:26px;
	padding:15px 20px;
	color:#848484;
	height:120px;
	font-weight:300;
	resize:none;
	background:#252525;
	border:1px solid transparent;
	box-shadow: 0 0 20px rgba(0,0,0,0.50);
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.shop-comment-form button{
	position:relative;
	font-weight:600;
	font-size:14px;
	line-height: 30px;
	padding:10px 40px;
	margin-top:10px;
	text-transform:uppercase;
}

.shop-comment-form input:focus,
.shop-comment-form select:focus,
.shop-comment-form textarea:focus{
	border-color:#f06529;	
}

/*** 

====================================================================
		Cart Section
====================================================================

***/

.cart-section{
	position:relative;
	padding:100px 0px 60px;
}

.cart-outer{
	position:relative;	
}

.checkout-page .cart-outer{
	margin-bottom:40px;	
}

.cart-outer .table-outer{
	position:relative;
	width:100%;
	overflow-x:	auto;
	box-shadow: 0 0 20px rgba(0,0,0,0.05);
	margin-bottom: 50px;
}

.cart-outer .cart-table{
	width:100%;
	min-width:900px;	
}

.cart-table .cart-header{
	position:relative;
	width:100%;
	text-transform:uppercase;
	font-size:13px;
	background:#252525;
	color:#ffffff;
	border:1px solid #444444;
}

.cart-table thead tr th{
	line-height:24px;
	padding:15px 25px;
	font-weight:700;
	font-size:16px;
	letter-spacing:1px;
	text-align:center;
	text-transform:uppercase;
	border-right:1px solid #444444;
}

.cart-table thead tr th .fa{
	font-size:18px;	
}

.cart-table tbody tr td{
	line-height:24px;
	padding:30px 25px 30px;
}

.cart-table tbody tr .qty{
	width:200px;
}

.cart-table tbody tr .qty .item-quantity{
	max-width: 100px;
	margin: 0 auto;
}

.cart-table tbody tr .qty .quantity-spinner{
	background:#252525;	
}

.cart-table tbody tr .prod-column .column-box{
	position:relative;
	min-height:110px;
}

.cart-table tbody tr .prod-column .column-box .prod-thumb{
	position:relative;
	width:140px;
	margin: 0 auto;
	text-align: center;
}

.cart-table tbody tr .prod-column .column-box .prod-thumb img{
	 display:inline-block;
	 max-width:100%;
}

.cart-table tbody tr .prod-column .column-box h4{
	font-size:14px;
	color:#aaaaaa;
	font-weight:400;
	line-height:90px;
}

.cart-table tbody tr .prod-column .author{
	font-size:13px;
	color:#aaaaaa;
	margin-bottom:0px;
}

.cart-table tbody tr .sub-total{
	font-weight: 500;
	color:#aaaaaa;
	font-size:16px;
}

.cart-table tbody tr .sub-total.price{
	font-weight: 500;
}

.cart-table tbody tr .remove-btn{
	position:relative;
	font-size:14px;
	color:#aaaaaa;
	line-height:30px;
	font-weight:500;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	transition:all 500ms ease;
}

.cart-table tbody tr .remove-btn .fa{
	position:relative;
	font-size:18px;
	line-height:30px;
}

.cart-table tbody tr .remove-btn:hover{
	color:#FF6000;
}

.cart-table tbody tr{
	border-bottom:1px solid #444444;	
}

.cart-table tbody tr td{
	vertical-align:middle;
	color:#797979;
	font-size:17px;
	text-align:center;
	font-weight: 500;
	border-left:1px solid #444444;
}

.cart-table tbody tr td.total{
	font-size:18px;
	color:#aaaaaa;
}

.cart-table tbody tr td:last-child{
	border-right:1px solid #444444;
	text-align:center;
}

.cart-table tbody tr td .prod-title{
	position:relative;
	font-size:18px;
	color:#aaaaaa;
	font-weight: 700;
	font-family: "Rajdhani", sans-serif;
}

.cart-table tbody tr td .quantity-spinner{
	padding:5px 0px 5px 20px;
	line-height:24px;
	height:34px;
	display:block;
	width:100%;
	position:relative;
}

.cart-table tbody .available-info{
	position:relative;
	padding-left:50px;	
}

.cart-table tbody .available-info .icon{
	position:absolute;
	left:0px;
	top:5px;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:18px;
	color:#ffffff;
	background:#223555;
	border-radius:50%;
}

.cart-section .cart-options{
	position:relative;
	padding:30px 30px 10px;
	border: 1px solid #444444;
	margin-bottom:50px;
}

.cart-section .apply-coupon{
	position:relative;
}

.cart-section .cart-options .cart-btn{
	padding:14px 36px;
    line-height: 20px;
	font-size:14px;
	color:#ffffff;
	font-weight:700;
	text-transform:capitalize;
	background-color:#222222;
	border: 1px solid transparent;
	font-family: 'Montserrat', sans-serif;
	margin-bottom: 10px;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.cart-section .cart-options .cart-btn:hover{
	background-color:#ffffff;
	color: #222222;
	border: 1px solid #222222;
}

.cart-section .apply-coupon .form-group{
	position:relative;
	float:left;
	margin-right:20px;	
}

.cart-section .apply-coupon .form-group input[type="text"]{
	display:block;
	line-height:28px;
	padding:10px 25px;
	border:1px solid #252525;
	width:225px;
	height:50px;
	color: #ffffff;
	background:#252525;
	box-shadow: 0 0 20px rgba(0,0,0,0.50);
}

.cart-section .coupon-btn{
    padding:14px 25px;
    line-height: 24px;
	font-size:14px;
	color:#ffffff;
	font-weight:700;
	line-height: 20px;
	text-transform:capitalize;
	background-color:#222222;
	border: 1px solid transparent;
	font-family: 'Montserrat', sans-serif;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.cart-section .coupon-btn:hover{
	background-color:#ffffff;
	color: #222222;
	border: 1px solid #222222;
}

.cart-section .cart-options .btn-style-one{
	top:-7px;
	padding-left:32px;
	padding-right:32px;
}

.cart-section .totals-table{
	position:relative;
	margin-bottom:20px;
	border:1px solid #444444;
	box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

.cart-section .totals-table li{
	line-height:24px;
	padding:18px 30px;
	border-bottom:1px solid #444444;	
}

.cart-section .totals-table li:first-child{
	background-color:#252525;
	padding:18px 45px;
}

.cart-section .totals-table li h3{
	position:relative;
	font-weight:600;
	color:#ffffff;
	font-size:18px;
}

.cart-section .totals-table li:last-child{
	border-bottom:none;
	padding:40px 40px 50px;
}

.cart-section .totals-table .col{
	position:relative;
	display:block;
	float:left;
	line-height:30px;
	width:50%;
	color:#aaaaaa;
	font-size:16px;
	font-weight:600;
	text-transform:capitalize;
}

.cart-section .totals-table li .col:last-child{
	text-align:right;	
	border-left: 1px solid #444444;
}

.cart-section .totals-table .total .price{
	color:#aaaaaa;
	font-weight:600;
}

.cart-section .totals-table .proceed-btn{
    padding:14px 25px;
    line-height: 24px;
	font-size:14px;
	color:#ffffff;
	font-weight:700;
	line-height: 20px;
	text-transform:capitalize;
	background-color:#222222;
	border: 1px solid transparent;
	font-family: 'Montserrat', sans-serif;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.cart-section .totals-table .proceed-btn:hover{
	background-color:#ffffff;
	color: #222222;
	border: 1px solid #222222;
}

.shipping-block{
	position:relative;
}

.shipping-block .inner-box{
	position:relative;
	padding:40px 30px 20px;
	box-shadow: 0 0 20px rgba(0,0,0,0.05);
	border:1px solid #444444;
	margin-bottom:50px;
}

.shipping-block .inner-box h3{
	position:relative;
	color:#ffffff;
	font-size:28px;
	font-weight:700;
	margin-bottom:4px;
	text-transform:capitalize;
}

.shipping-block .inner-box h4{
	position:relative;
	color:#ffffff;
	font-size:14px;
	font-weight:400;
	margin-bottom:22px;
	text-transform:capitalize;
}

.shipping-form{
	position:relative;
}

.shipping-form .row{
	position:relative;
	margin:0px -10px;
}

.shipping-form .form-group{
	position:relative;
	margin-bottom:20px;
	padding:0px 10px;
}

.shipping-form .form-group input[type="text"],
.shipping-form .form-group input[type="password"],
.shipping-form .form-group input[type="tel"],
.shipping-form .form-group input[type="email"]{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	padding:10px 20px;
	height:50px;
	font-size:16px;
	color: #aaaaaa;
	border:1px solid #252525;
	background-color: #252525;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.shipping-form .form-group input[type="text"]:focus,
.shipping-form .form-group input[type="password"]:focus,
.shipping-form .form-group input[type="tel"]:focus,
.shipping-form .form-group input[type="email"]:focus,
.shipping-form .form-group select:focus,
.shipping-form .form-group textarea:focus{
	border-color:#FF6000;
	color: #ffffff;
}

.shipping-form button{
    padding:14px 25px;
    line-height: 24px;
	font-size:14px;
	color:#ffffff;
	font-weight:700;
	line-height: 20px;
	text-transform:capitalize;
	background-color:#222222;
	border: 1px solid transparent;
	font-family: 'Montserrat', sans-serif;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.shipping-form button:hover{
	background-color:#ffffff;
	color: #222222;
	border: 1px solid #222222;
}

.shipping-form button:hover{
	background-color:#ffffff;
	border: 1px solid #222222;
	color: #222222;
}

/*====================================================================
		CheckOut Section
====================================================================*/

.checkout-page{
	position:relative;
	padding:110px 0px 70px;
}

.checkout-page .default-links{
	position:relative;
	margin-bottom:40px;
}

.checkout-page .default-links li{
	line-height:20px;
	padding:15px 25px;
	font-size:14px;
	font-weight: 500;
	color:#ffffff;
	background-color :#252525;
	box-shadow: 0 0 20px rgba(0,0,0,.50);
	margin-bottom: 30px;
}

.checkout-page .default-links li .far{
	position:relative;
	display: inline-block;
	font-size:14px;
	line-height: 20px;
	color:#FF6000;
	margin-right:20px;
}

.checkout-page .default-links li a{
	color:#FF6000;
	font-size: 16px;
	display: inline-block;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.checkout-page .default-links li a:hover{
	color: #FF6000;
	text-decoration: underline;
}	

.checkout-page .sec-title{
	margin-bottom: 20px;
} 

.checkout-page .sec-title h3{
	font-size: 28px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 600;
	padding-bottom: 20px;
	border-bottom: 1px solid #444444;
}

.checkout-form{
	position:relative;
	margin-bottom: 50px;
}

.checkout-form .column{
	position: relative;
	margin-bottom: 40px;
}

.checkout-form .column .inner-column{
	position: relative;
	padding: 30px 30px;
	border: 1px solid #444444
}

.checkout-form .form-group{
	position:relative;
	margin-bottom: 15px;
}

.checkout-form .form-group .field-label{
	display:block;
	line-height:24px;
	text-transform:capitalize;
	color:#aaaaaa;	
	font-size:15px;
	font-weight:500;
	margin-bottom:10px;
}

.checkout-form .form-group .field-label span{
	position: relative;
	font-size: 16px;
	color: #aaaaaa;
	display: block;
	font-weight: 600;
}

.checkout-form .form-group .field-label sup{
	top:-1px;
	font-size:15px;
	color: #009fe9;
}

.checkout-form .form-group .text{
	position:relative;
	color:#999999;
	font-size:14px;
	line-height: 24px;
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="password"],
.checkout-form input[type="tel"],
.checkout-form input[type="number"],
.checkout-form input[type="url"],
.checkout-form select,
.checkout-form textarea{
	position:relative;
	display:block;
	width:100%;
	background:#252525;
	font-size: 16px;
	line-height:20px;
	color: #aaaaaa;
	padding:14px 22px;
	height:50px;
	border:1px solid #252525;
	transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
}

.checkout-form select{
	cursor:pointer;
	-webkit-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
	-moz-appearance:none;
	color: #aaaaaa;
	background:#252525 url(../images/icons/icon-select.png) right center no-repeat;
}

.checkout-form textarea{
	resize:none;
	height:160px !important;	
	padding-left: 30px;
}

.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus{
	border-color: #FF6000;
	color: #aaaaaa;
}

.checkout-page .check-box{
	line-height:24px;
	font-size:14px;
	font-weight:normal;
	padding-top:5px;	
}

.checkout-page .check-box label{
	position:relative;
	top:-1px;
	font-weight:normal;
	padding:0px;
	font-size:16px;
	cursor:pointer;
	color:#333333;
}

.checkout-page .lower-content{
	margin-top:30px;
}

.checkout-page .lower-content .order-column{
	margin-bottom:40px;
}

.checkout-page .lower-content .column h2{
	position:relative;
	color:#222222;
	font-size:24px;
	margin-bottom:30px;
	padding-bottom:12px;
}

.checkout-page .lower-content .column h2:after{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	width:40px;
	height:2px;
	background-color:#fa9928;
}

/*Coupon Box*/

.coupon-box{
	position:relative;
	padding:25px 25px;
	margin-bottom:25px;
	background-color:#f5f5f5;
}

.coupon-form{
	position:relative;
}

.coupon-form .form-group{
	position:relative;
	margin-bottom:0px;
}

.coupon-form .form-group input[type="text"]{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	padding:10px 20px;
	height:44px;
	font-size:14px;
	border:1px solid #cccccc;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.coupon-form .form-group input[type="text"]:focus{
	border-color: #FF6000;
}

.coupon-form button{
	margin-top:0px;
	font-size:16px;
	font-weight:700;
	border-radius:0px;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	-ms-border-radius:0px;
	-o-border-radius:0px;
	padding:8px 26px;
	text-transform:capitalize;
}

.order-box{
	position:relative;
	box-shadow: 0 0 20px rgba(0,0,0,0.05);
	margin-bottom: 50px;
}

.order-box .sec-title{
	margin-bottom: 25px;
}

.order-box .sec-title h3{
	border-bottom: 0;
	padding-bottom: 0;
}

.order-box .title-box{
	position:relative;
	padding:15px 15px;
	font-weight: 500;
	color: #ffffff;
	background-color :#252525;
}

.order-box .title-box .col{
	position:relative;
	width:50%;
	float:left;
	color:#ffffff;
	font-size: 16px;
	line-height: 25px;
}

.order-box ul{
	position:relative;
	border:1px solid #444444;
}

.order-box ul li{
	position:relative;
	padding: 25px 30px;
	font-size: 16px;
	font-weight: 500;
	color: #999999;
	line-height: 30px;
	border-bottom:1px solid #444444;
}

.order-box ul li strong{
	color:#aaaaaa;
	font-weight: 500;
	font-size:16px;
	font-family: "Rajdhani", sans-serif;
}

.order-box ul li span{
	padding: 0 15px;
	width:50%;
	float:right;
	color:#ffffff;
	font-size:16px;
}

.order-box ul li span.free{
	color:#999999;
}

.order-box ul li:last-child{
	border-bottom: 0;
}

.payment-box{
	position:relative;
	padding: 30px 50px;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
	background-color: #252525;
	margin-bottom: 50px;
}

.payment-box .upper-box{
	position:relative;
	border-bottom:1px solid #444444;
}

.payment-options{
	position:relative;
	margin-top:20px;
	margin-bottom:20px;	
}

.payment-box .payment-options li{
	position:relative;
	margin-bottom:15px;	
}

.payment-box .payment-options li .radio-option{
	position:relative;		
}

.payment-box .payment-options li .radio-option label{
	position:relative;
	display:block;
	padding-left:30px;
	font-weight: 500;
	text-transform:capitalize;
	color:#ffffff;
	cursor:pointer;
	font-size:16px;
}

.payment-box .payment-options li .radio-option label strong{
	font-weight: 400;
}

.payment-box .payment-options li .radio-option input[type="radio"]{
	position:absolute;
	left:0px;
	top:8px;	
}

.payment-box .payment-options li .radio-option label .small-text{
	position:relative;
	display:none;
	letter-spacing:0px;
	text-transform:none;
	font-weight:normal;
	font-size:14px;
	color:#ffffff;
	line-height:1.8em;
	padding:25px 30px;
	margin-top:20px;
	background-color :rgba(0,0,0,0.30);
}

.payment-box .payment-options li .radio-option input:checked + label .small-text{
	display:block;
}

.payment-box .payment-options li .radio-option label .small-text:before{
	position:absolute;
	content:'';
	left:30px;
	top:-8px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 8px solid rgba(0,0,0,0.30);
}

.payment-box .payment-options li .radio-option label img{
	position:relative;
	display:block;
	max-width:100%;
	padding-left:30px;	
	margin-top:20px;
}

.payment-box .payment-options li .radio-option .what-paypall{
	position:relative;
	display:block;
	color:#999999;
	font-size:16px;
	font-weight:700;
	margin-left:120px;
	margin-top:10px;
}

.payment-box .lower-box{
	position:relative;
	padding: 30px 0 0;
	text-align: right;
}

.payment-box .lower-box .theme-btn{
	padding: 15px 32px;
	margin-right: 0;
	font-weight: 700;
	font-size: 18px;
}

/*** 

====================================================================
		Login Section
====================================================================

***/

.login-section{
	position:relative;
	padding:120px 0px 60px;
}

.login-section .column{
	position: relative;
	margin-bottom: 70px;
}

.login-section h2{
	position:relative;
	color:#ffffff;
	font-size:28px;
	font-weight:600;
	line-height:1.2em;
	margin-bottom:25px;
	background-color: #252525;
}

.login-form{
	position:relative;
	margin-bottom:40px;
	padding:30px 40px 25px;
	background-color: #252525;
	box-shadow: 0 0 20px rgba(0,0,0,0.50);
	max-width: 400px;
	margin: 0 auto;
	border-bottom: 5px solid #FF6000;
	border-radius: 0 0 10px 10px;
}

.login-form .form-group{
	position:relative;
	margin-bottom:20px;
}

.login-form .form-group label{
	position:relative;
	top:-1px;
	color:#999999;
	font-weight:400;
	font-size:16px;
}

.login-form .form-group input[type="text"],
.login-form .form-group input[type="password"],
.login-form .form-group input[type="tel"],
.login-form .form-group input[type="email"]{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	padding:10px 20px;
	height:50px;
	color: #aaaaaa;
	font-size:14px;
	border:1px solid #222222;
	box-shadow: 0 0 15px rgba(0,0,0,0.05);
	background-color: rgba(0,0,0,0.40);
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.login-form .form-group input[type="text"]:focus,
.login-form .form-group input[type="password"]:focus,
.login-form .form-group input[type="tel"]:focus,
.login-form .form-group input[type="email"]:focus,
.login-form .form-group select:focus,
.login-form .form-group textarea:focus{
	border-color:#FF6000;
	color: #ffffff;
}

.login-form button{
	top:0px;
	margin-top:0px;
	font-size:16px;
	font-weight:700;
	padding:10px 36px;
	line-height: 25px;
	color:#ffffff;
	text-transform:uppercase;
	width: 100%;
	box-shadow: 0 0 30px rgba(0,0,0,0.50);
}

.login-form .psw{
	position:relative;
	color:#999999;
	font-size:16px;
	transition: all 300ms ease;
}

.login-form .psw:hover{
	text-decoration: underline;
	color: #ffffff;
}

/*** 

====================================================================
			Coming Soon
====================================================================

***/

.coming-soon{
	position:fixed;
	width:100%;
	height:100%;
	display:block;
	overflow-y:auto;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	text-align: center;
	background-color: #252525;
}

.coming-soon .content:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-image: url(../images/icons/bg-texture-01.jpg);
	content: "";
	opacity: .2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: grayscale(1);
    transform: scaleX(-1);
}

.coming-soon .content{
	position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: table;
    vertical-align: middle;
}

.coming-soon .content .content-inner{
	position: relative;
	padding: 90px 15px;
    display: table-cell;
    vertical-align: middle;
}

.coming-soon .content .content-inner .logo{
	position:relative;
	margin-bottom: 240px;
}

.coming-soon .content .content-inner .sec-title{
	display: none;
	margin-bottom:50px;
}

.coming-soon .content .content-inner h2{
	position:relative;
	font-size:48px;
	font-weight:700;
	line-height:1.2em;
	padding-bottom: 0;
	color: #ffffff;
		font-variant: small-caps;
}

.coming-soon .content .content-inner h2:after{
	display: none;
}

.time-counter{
	position:relative;
}

.time-counter .time-countdown{
	position:relative;
	margin-bottom: 180px;
}

.time-counter .time-countdown .counter-column{
	position:relative;
	display: inline-block;
	width:180px;
	height:180px;
	font-size:20px;
	line-height: 1em;
	color:#ffffff;
	text-transform:uppercase;
	font-weight:700;
	text-align: center;
	z-index: 7;
	box-shadow: 0 0 30px rgba(0,0,0,0.10);
	background-color: rgba(0,0,0,.20);
	font-family: "Rajdhani", sans-serif;
	margin:0 15px 20px;
}

.time-counter .time-countdown .counter-column .count{
	position:relative;
	display:block;
	font-size:72px;
	line-height:30px;
	padding:60px 0px 30px;
	color:#ffffff;
	font-weight:700;
}

.coming-soon .emailed-form{
	position: relative;
	margin-bottom: 40px;
}

.coming-soon .emailed-form .text{
	position: relative;
	display: block;
	font-size: 30px;
	line-height: 1.3em;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 40px;
	font-family: "Rajdhani", sans-serif;
}

.coming-soon .emailed-form .form-group{
	position:relative;
	display:block;
	max-width:440px;
	width:100%;
	margin: 0 auto;
}

.coming-soon .emailed-form .form-group input[type="text"],
.coming-soon .emailed-form .form-group input[type="tel"],
.coming-soon .emailed-form .form-group input[type="email"],
.coming-soon .emailed-form .form-group textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	height:60px;
	font-size:16px;
	color:#aaaaaa;
	overflow:hidden;
	padding:14px 50px 14px 30px;
	background: #252525;
	box-shadow: 0 0 30px rgba(0,0,0,0.30);
	border: 1px solid transparent;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;	
}

.coming-soon .emailed-form .form-group input:focus,
.coming-soon .emailed-form .form-group select:focus,
.coming-soon .emailed-form .form-group textarea:focus{
	border: 1px solid #FF6000;
}

.coming-soon .emailed-form .form-group input[type="submit"],
.coming-soon .emailed-form button{
	position:absolute;
	right:0px;
	top:0px;
	width: 60px;
	height:60px;
	line-height:40px;
	font-size:18px;
	color: #ffffff;
	background-color: transparent;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;	
}

.coming-soon .emailed-form .form-group input[type="submit"]:hover,
.coming-soon .emailed-form button:hover{
	color: #FF6000;
}

.coming-soon .social-icon-three li{
	margin: 0 1px;
}

.coming-soon .copyright-text{
	position: relative;
	font-size: 18px;
	line-height: 26px;
	color: #ffffff;
	font-weight: 400;
}

.coming-soon .copyright-text a{
	color: #ff9600;
}

.coming-soon .copyright-text a:hover{
	text-decoration: underline;
}

.clock-wrapper{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 250px;
    height: 250px;
    margin: auto;
    margin-top: -145px;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(0,0,0,0.50);
    transform: scale(2);
}

.clock-wrapper:before{
	position: absolute;
	left: 0;
	top: 5px;
	height: 100%;
	width: 100%;
	content: "";
	border-bottom: 2px solid #FF6000;
	content: "";
	border-radius: 50%;
}

.clock-base{
    width: 250px;
    height: 250px;
    border-radius: 50%;

}

.click-indicator{
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    width: 230px;
    height: 230px;
}

.click-indicator div{
    position: absolute;
    width: 2px;
    height: 4px;
    margin: 113px 114px;
}

.click-indicator div > span{
	height: 5px;
	width: 5px;
	background-color: #888888;
	display: inline-block;
	border-radius: 50%;
	margin-left: -1px;
	margin-top: -1px;
    opacity: .30;
}

.click-indicator div:nth-child(1) {
    transform: rotate(30deg) translateY(-113px);
}

.click-indicator div:nth-child(2) {
    transform: rotate(60deg) translateY(-113px);
}

.click-indicator div:nth-child(3) {
    transform: rotate(90deg) translateY(-113px);
    background-color: #FF6000;
}

.click-indicator div:nth-child(4) {
    transform: rotate(120deg) translateY(-113px);
}

.click-indicator div:nth-child(5) {
    transform: rotate(150deg) translateY(-113px);
}

.click-indicator div:nth-child(6) {
    transform: rotate(180deg) translateY(-113px);
    background-color: #FF6000;
}

.click-indicator div:nth-child(7) {
    transform: rotate(210deg) translateY(-113px);
}

.click-indicator div:nth-child(8) {
    transform: rotate(240deg) translateY(-113px);
}

.click-indicator div:nth-child(9) {
    transform: rotate(270deg) translateY(-113px);
    background-color: #FF6000;
}

.click-indicator div:nth-child(10) {
    transform: rotate(300deg) translateY(-113px);
}

.click-indicator div:nth-child(11) {
    transform: rotate(330deg) translateY(-113px);
}

.click-indicator div:nth-child(12) {
    transform: rotate(360deg) translateY(-113px);
    background-color: #FF6000;
}

.clock-hour{
    position: absolute;
    z-index: 2;
    top: 80px;
    left: 128px;
    width: 4px;
    height: 65px;
    background-color: #555;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 2px 50px;
    transition: .5s;
    -webkit-animation: rotate-hour 43200s linear infinite;
    -moz-animation: rotate-hour 43200s linear infinite;
}

.clock-minute{
    position: absolute;
    z-index: 3;
    top: 60px;
    left: 128px;
    width: 4px;
    height: 85px;
    background-color: #555;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 2px 70px;
    transition: .5s;
    -webkit-animation: rotate-minute 3600s linear infinite;
    -moz-animation: rotate-minute 3600s linear infinite;
}

.clock-second{
    position: absolute;
    z-index: 4;
    top: 20px;
    left: 129px;
    width: 2px;
    height: 130px;
    background-color: #FF6000;
    opacity: .5;
    box-shadow: 0 0 2px rgba(0,0,0,.2);
    transform-origin: 1px 110px;
    transition: .5s;
    -webkit-animation: rotate-second 60s linear infinite;
    -moz-animation: rotate-second 60s linear infinite;
}

.clock-second:after{
    content: "";
    display: block;
    position: absolute;
    left: -3px;
    bottom: 16px;
    width: 8px;
    height: 8px;
    background-color: #FF6000;
    border: solid 2px #FF6000;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
}

.clock-center{
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 150px;
    top: 55px;
    left: 55px;
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    border-radius: 50%;
}

.clock-center:after{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 65px;
    background-color: #ddd;
    border-radius: 50%;
}

.menu-item {
  font-size: 28px; 
  margin: 0 12px;
  transition: transform 0.3s ease, color 0.3s ease;
  display: inline-block;
}

/* تأثير عند المرور */
.menu-item:hover {
  transform: scale(1.3) rotate(10deg); 
  opacity: 0.9;
}

/* ألوان مميزة لكل أيقونة */
.facebook { color: #1877f2; }
.phone { color: #34a853; }
.whatsapp { color: #25D366; }
.gmail { color: #EA4335; }

.single-item-carousel .slide-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.single-item-carousel .slide-item figure.image {
  width: 100%;
  max-width: 800px;   
  height: 450px;      
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.single-item-carousel .slide-item figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  border-radius: 12px;
}


.image-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-column .single-item-carousel {
  width: 100%;
  max-width: 800px;   
}

.image-column .slide-item figure.image {
  width: 100%;
  height: 450px;     
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.image-column .slide-item figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;   
}

.contact-info-section .content {
  text-align: center; 
}

.contact-info-section h2 {
  font-size: 28px;
  margin-bottom: 15px;
}


.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px; 
  margin: 15px 0;
}

.social-icons a {
  font-size: 24px;
  color: #333;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #007bff; 
}

/* للموبايل */
@media (max-width: 768px) {
  .contact-info-section h2 {
    font-size: 20px;
  }
  .social-icons a {
    font-size: 20px;
  }
}
.social-icons a {
  font-size: 24px;
  color: #333; 
  transition: color 0.3s ease;
}

.social-icons a.facebook:hover {
  color: #1877f2; 
}

.social-icons a.whatsapp:hover {
  color: #25d366; 
}

.social-icons a.gmail:hover {
  color: #ea4335; 
}

.social-icons a.phone:hover {
  color: #34a853; 
}

.logo img {
  max-width: 150px;
  height: auto;       
}

@media (max-width: 768px) {
  .logo img {
    max-width: 120px; 
  }
}




.cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat-list li {
  margin-bottom: 12px;
}

.cat-list li a {
  display: block;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.cat-list li a:hover {
  background: #ff6b00; /* برتقالي */
  color: #fff;
  transform: translateX(-5px);
}

.cat-list li.active a {
  background: #ff6b00;
  color: #fff;
  border-color: #ff6b00;
}


.sb-ind { background:#0f1720; color:#fff; padding:18px; border-radius:12px; }
.sb-ind-title { background:#ff8a00; display:inline-block; color:#fff; padding:6px 12px; border-radius:6px; font-weight:800; margin-bottom:14px; }
.sb-ind-list { list-style:none; padding:0; margin:0; }
.sb-ind-list li { margin-bottom:12px; }
.sb-ind-list a {
  display:block; padding:12px; color:#dfe7ee; text-decoration:none; border-left:4px solid transparent; transition:all .25s;
  font-weight:700;
}
.sb-ind-list a:hover { background:rgba(255,255,255,0.03); border-left-color:#ff8a00; color:#fff; transform:translateX(-4px); }
.sb-ind-list li.hot a { border-left-color:#ff8a00; background:rgba(255,138,0,0.06); color:#fff; }
.sb-ind .badge { background:#ff6b00; color:#fff; padding:3px 8px; border-radius:6px; font-size:12px; margin-left:8px; font-weight:800; }


#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.preloader-icon i {
  font-size: 60px;
  color: orange; /* هنا خليتها برتقالي */
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}



.home-link {
    display: inline-block;
    padding: 6px 14px;
   background: #ff6600;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.home-link:hover {
    
    transform: translateY(-10px);
}

.play-now {
    position: relative;
    overflow: hidden;
}

.play-now .pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255,102,0,0.5);
    top: 0;
    left: 0;
    animation: pulse 1.5s infinite;
    z-index: -1;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.8); opacity: 0; }
}




.project-video-section {
    background-image: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 100px 20px;
    text-align: center;
border-top-left-radius: 100px;   /* الكيرف الكبير على الشمال */
border-top-right-radius: 100px;  /* الكيرف الكبير على اليمين */
border-bottom-left-radius: 150px;  
border-bottom-right-radius: 150px;   


    color: #fff;
}
.project-video-section .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 0;
}
.project-video-section .auto-container {
    position: relative;
    z-index: 100;
    max-width: 1000px;
    margin: 0 auto;
}
.project-video-section .title-box h2 {
    font-size: 120px;
    font-weight: 900;
    margin-bottom: 30px;
	 margin-top: -20px;
}

.project-video-section .home-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 18px;
    background: #ff6600;
    color: #fff;
    font-size: 15px;
    border-radius: 6px;
    text-decoration: none;

}
.project-video-section .home-link:hover {
    background: #e65c00;
}
.project-video-section .content-box {
    margin-top: 40px;
	margin-top: 100px;
	
}

@keyframes ripple {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}
.project-video-section .content-box .text {
    color: #ff6600;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.project-video-section .content-box h3 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
}



.project-video-section {
    padding: 400px 0;
    min-height: 100px; 
    display: flex;
    align-items: center; 
}

.project-video-section .play-now {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #ff6600;
    background: #fff;
    color: #ff6600;
    font-size: 40px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.project-video-section .play-now:hover {
    background: #ff6600;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(255,102,0,0.6);
}


.play-now {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6600, #ff3300);
    color: #fff;
    font-size: 36px;
    text-decoration: none;
    position: relative;
    box-shadow: 0 0 20px rgba(255,102,0,0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.play-now:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255,102,0,0.9);
}
.play-now i {
    position: relative;
    z-index: 2;
}
.play-now .ripple {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 102, 0, 0.3);
    animation: ripple 1.6s infinite;
    z-index: 1;
}
@keyframes ripple {
    0% { transform: scale(0.7); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

.main-header {
    background: transparent !important; 
    box-shadow: none !important;       
    position: absolute;               
    left: 0;
    width: 100%;
    z-index: 999;
}


.intro-text {
    direction: rtl;
    text-align: right; 
    font-family: 'Cairo', sans-serif; 
    margin-bottom: 80px;
}

.intro-text h2 {
    color: orange;
    font-weight: 1200;
    font-size: 40px;
    margin-bottom: 20px;
}

.intro-text p {
    font-size: 21px;
    line-height: 1.8;
    margin-bottom: 15px;
}


.rtl-text {
    direction: rtl;      
    text-align: right;    
    font-family: 'Cairo', sans-serif; 
}

.rtl-text .project-title {
    color: orange;
    font-weight: 700;
    font-size: 35px;
    margin-bottom: 20px;
	font-family: 'Cairo', sans-serif; 
}

.rtl-text p {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 15px;
	font-family: 'Cairo', sans-serif; 
}


.image-column-one {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-column-one .project-image {
    border: 3px solid #ff6600;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-column-one .project-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.image-column-one .project-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}




.sidebar-widget ul.cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget ul.cat-list li {
    margin-bottom: 10px;
}

.sidebar-widget ul.cat-list li a {
    text-decoration: none;
    font-weight: 600;
    color: #333;
}

.sidebar-widget ul.cat-list li.active a {
    color: orange;
}
.sidebar-side .sidebar,
.sidebar-side .sidebar-widget,
.sidebar-side .cat-list,
.sidebar-side .cat-list li {
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
}

.sidebar-side .cat-list li a {
    color: #333; 
    font-weight: 600;
    text-decoration: none;
}

.sidebar-side .cat-list li.active a {
    color: orange;
    font-weight: 700;
}

.sidebar-side {
    position: sticky;
    top: 20px;
    background: transparent; 
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* إعادة ترتيب الأعمدة وكتابة الفواصل */
.main-footer .footer-column {
    padding: 0 20px; /* مسافة داخلية لكل عمود */
    position: relative;
}

/* الفاصل بين الأعمدة */
.main-footer .footer-column:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px; /* سماكة الفاصل */
    height: 100%;
    background: #e6b508; /* لون الفاصل */
}

/* تنسيق النصوص داخل الأعمدة */
.main-footer .footer-widget h2.widget-title {
    color: #e6b508;
    margin-bottom: 15px;
}

.main-footer .footer-widget p,
.main-footer .footer-widget a {
    color: #f1f0eb;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
}

/* فواصل رأسية للأعمدة على الشاشات الكبيرة فقط */
@media (max-width: 991px) {
    .main-footer .footer-column:not(:last-child)::after {
        display: none; /* إزالة الفاصل على الموبايل */
    }
}

.main-footer .widgets-section {
    background: #1a1a1a; /* خلفية داكنة للخدمات الأساسية */
    padding: 50px 30px; /* مساحة داخلية كافية */
    border-radius: 12px; /* حواف دائرية بسيطة */
    margin-bottom: 30px; /* مسافة بين هذا الجزء والجزء السفلي */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* ظل خفيف للصندوق */
}

/* ===== فواصل الأعمدة العمودية ===== */
.main-footer .footer-column {
    padding: 0 20px;
    position: relative;
}

.main-footer .footer-column:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #e6b508; /* خط عمودي أصفر */
}

/* ===== الفاصل الأفقي بين الـ widgets و footer-bottom ===== */
.main-footer .footer-bottom {
    border-top: 2px solid #e6b508;
    padding-top: 20px;
    margin-top: 30px;
}

/* ===== تنسيق النصوص والعناوين ===== */
.main-footer .footer-widget h2.widget-title {
    color: #e6b508;
    margin-bottom: 15px;
}

.main-footer .footer-widget p,
.main-footer .footer-widget a {
    color: #f1f0eb;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.6;
}

/* ===== إزالة الفواصل العمودية على الشاشات الصغيرة ===== */
@media (max-width: 991px) {
    .main-footer .footer-column:not(:last-child)::after {
        display: none;
    }
}

.main-footer {
    padding: 40px 0;
    color: #fff;
    font-family: Arial, sans-serif;

    /* الخلفية كرسم مكرر */
    background-image: url('images/icons/play.png'); /* ضع هنا رابط الصورة اللي تحبها */
    background-repeat: repeat; /* يكرر الصورة في الطول والعرض */
    background-position: top left; /* بداية التكرار من الأعلى يسار */
    background-size: auto; /* يحافظ على حجم الصورة الأصلي */
}

.main-footer a {
    color: #e6b508;
    text-decoration: none;
}

.main-footer a:hover {
    color: #ffd700;
}

.footer-widget h2 {
    font-size: 20px;
    margin-bottom: 20px;
}

.footer-widget .text p {
    margin-bottom: 15px;
}

.footer-bottom {
    background-color: rgba(0,0,0,0.5);
    color: #ccc;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}

.footer-bottom a {
    color: #e6b508;
}

.one-column {
  align-items: flex-start !important; 
}

.text-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}




.project-card {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

.card-image {
  position: relative;
  height: 350px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.card-image .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.card-content {
  position: relative;
  color: #fff;
  padding: 20px;
  z-index: 2;
}

.card-content h3 {
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: bold;
}

.card-content p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.btn-read {
  display: inline-block;
  padding: 8px 18px;
  background: #0d6efd;
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-read:hover {
  background: #084298;
}
body {
  background-color: #fff;
}

#content {
  background-color: #fff;
}
/* ===== Footer Styling ===== */
/* ===== Footer Styling ===== */

.footer_area {
  position: relative;
  z-index: 5;
  overflow: hidden;
  padding: 80px 0 60px 0;   /* فوق 120 وتحت 80 علشان يطوّل الفوتر */
  min-height: 400px;         /* أقل ارتفاع للفوتر */
  border-top-left-radius: 100px;   /* الكيرف الكبير على الشمال */
  border-top-right-radius: 100px;  /* الكيرف الكبير على اليمين */
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer_area {
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }
}
@media (max-width: 767px) {
  .footer_area {
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
  }
}

.footer_area::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background-color: rgba(26, 49, 84, 0.95);
  width: 150%;
  height: 1000%;
  z-index: -1;
}

/* Footer About */
.footer_about img {
  max-width: 100%;
}
.footer_about p {
  margin-top: 25px;
  color: #fff;
  line-height: 1.8;
}

/* Footer Titles */
.footer_title {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 15px;
}

/* Footer Links */
.footer_link_wrapper .footer_link {
  width: 33.33%;
}
@media (max-width: 767px) {
  .footer_link_wrapper .footer_link {
    width: 100%;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer_link_wrapper .footer_link {
    width: 50%;
  }
}

.footer_link_wrapper .footer_link .link {
  padding-top: 20px;
}
.footer_link_wrapper .footer_link .link li {
  margin-top: 10px;
}
.footer_link_wrapper .footer_link .link li a {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  transition: all 0.3s ease-out;
}
.footer_link_wrapper .footer_link .link li a:hover {
  color: #FFB316;
}

/* Copyright */
.footer_copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 30px 0;
  margin-top: 40px;
}
.footer_copyright p {
  color: #fff;
  margin: 0;
  font-size: 15px;
}





.about_area {
  position: relative;
  z-index: 5; }

.about_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
  opacity: 0.2;
  padding-right: 280px; }
  .about_bg .about_bg_image {
    width: 100%;
    height: 100%; }

.about_image img {
  width: 100%;
  border-radius: 40px;
  border-bottom-right-radius: 0; }

.about_content {
  padding-left: 45px; }
  .about_content .sub_title {
    font-size: 38px;
    font-weight: 400;
    position: relative; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .about_content .sub_title {
        font-size: 32px; } }
    @media (max-width: 767px) {
      .about_content .sub_title {
        font-size: 24px; } }
    .about_content .sub_title::before {
      position: absolute;
      content: '';
      width: 9px;
      height: 100%;
      left: -45px;
      top: 0;
      background-color: #1A3154; }
    .about_content .sub_title span {
      font-size: 70px;
      font-weight: 800;
      color: #FFB316; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .about_content .sub_title span {
          font-size: 60px; } }
      @media (max-width: 767px) {
        .about_content .sub_title span {
          font-size: 44px; } }
  .about_content .main_title {
    font-size: 40px;
    margin-top: 25px; }
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .about_content .main_title {
        font-size: 32px; } }
    @media (max-width: 767px) {
      .about_content .main_title {
        font-size: 24px; } }
  .about_content p {
    margin-top: 25px; }
  .about_content .main-btn {
    margin-top: 45px; }

	p {
  color: #000;
}

.content-wrapper {
  background-image: url("images/background/about_bg.jpg");
  background-size: cover;     /* تخلي الصورة تغطي الخلفية */
  background-position: center; /* تخليها في النص */
  background-repeat: no-repeat;
  padding: 40px; /* مسافة حوالين النص */
  color: #000;   /* لون الخط لو عاوز تخليه اسود */
}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
:root {
  --accent-color: #007bff;
  --default-color: #333;
  --contrast-color: #fff;
  --background-color: #000;
}

.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
    border-bottom-left-radius: 100px;   /* الكيرف على الشمال */
  border-bottom-right-radius: 100px;  /* الكيرف على اليمين */
}


.swiper {
  width: 100%;
  height: 100vh;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}

.slide-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 20px;
}

.slide-content h2 {
  font-size: 48px;
  margin-bottom: 20px;
}

.slide-content p {
  font-size: 18px;
}

@media (max-width: 768px) {
  .slide-content h2 {
    font-size: 28px;
  }
}




.sidenav-bar{
	position: fixed;
	right: 0;
	top: 0;
	height: 100%;
	width: 20%;
	background-color: #252525;
	margin: 0;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	z-index: 999999;
	transition: all 300ms ease;
	transform: scaleX(0);
	transform-origin: right;
} 

.sidenav-bar .nav-logo{
	padding:30px 20px;
	text-align:left;	
}

.sidenav-bar .nav-logo img{
	max-width:200px;
}

.sidenav-bar-visible{
	transition: all 500ms ease;
}

.sidenav-bar-visible .sidenav-bar{
	opacity: 1;
	transform: scaleX(1);
	visibility: visible;
	box-shadow: 0 0 30px rgba(0,0,0,0.40);
}

.sidenav-bar .menu-box{
	width: 100%;
	height: 100%;
	background: #ffffff;
	opacity: 0;
	visibility: hidden;
	transform: scale(0);
	transform-origin: top right;
	transition: all 200ms ease;
}

.sidenav-bar-visible .sidenav-bar .menu-box{
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

.sidenav-bar .close-btn{
	position: absolute;
	right: 10px;
	top: 15px;
	width: 40px;
	text-align: center;
	font-size: 24px;
	color: #ffffff;
	background: transparent;
	cursor: pointer;
	transform: translateY(-50px);
	transition: all 500ms ease;
}

.sidenav-bar-visible .sidenav-bar .close-btn{
	transform: translateY(0);
}

.sidenav-bar .side-nav{
	margin-top: 24%;
}

.sidenav-bar .navigation{
	margin: 0 20px;
	font-family: "Oswald", sans-serif;
}

.sidenav-bar .navigation > li{
	position: relative;
	left: 100%;
	margin-bottom: 5px;
	transition: all 300ms ease;
}

.sidenav-bar-visible .sidenav-bar .navigation > li{
	left: 0;
	transition-delay: 200ms;
}

.sidenav-bar .navigation li > a{
	display: block;
	padding: 15px 20px;
	font-size: 16px;
	color: #ffffff;
	background-color: rgba(0,0,0,0.20);
	text-transform: uppercase;
	transition: all 300ms ease;
}

.sidenav-bar .navigation li:hover > a,
.sidenav-bar .navigation li.current > a{
	color:#FF6000;	
}

.sidenav-bar .navigation li.dropdown > ul{
	display: none;
	background-color: rgba(0,0,0,0.30);
}

.sidenav-bar .contact-info-box{
	padding: 0 30px;
	margin-top: 40px;
}

.sidenav-bar .contact-info-box .info-box{
	padding-left: 50px;
	margin-bottom: 20px;
	position: relative;
}

.sidenav-bar .contact-info-box .info-box .icon-box{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 24px;
	color: #ffffff;
	line-height: 40px;
}

.sidenav-bar .contact-info-box .info-box p a{
	color: #ffffff;
	transition: all 300ms ease;
}

.sidenav-bar .contact-info-box .info-box p a:hover{
	color: #FF6000;
}


.preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff; /* أو أي لون */
    z-index: 99999;
}

/*** 

====================================================================
		headerasast
====================================================================

***/


.headerasast {
  --background-color: rgba(255, 255, 255, 0);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.headerasast .headerasast-container {
  background: var(--surface-color);
  border-radius: 50px;
  padding: 5px 25px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.headerasast .logo {
  line-height: 1;
}

.headerasast .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.headerasast .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
}

.headerasast .btn-getstarted,
.headerasast .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 20px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.headerasast .btn-getstarted:hover,
.headerasast .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .headerasast {
    padding-top: 10px;
  }

  .headerasast .headerasast-container {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 5px 10px 15px;
  }

  .headerasast .logo {
    order: 1;
  }

  .headerasast .btn-getstarted {
    order: 2;
    margin: 0 10px 0 0;
    padding: 6px 15px;
  }

  .headerasast .navmenu {
    order: 3;
  }
}

/* Global headerasast on Scroll
------------------------------*/
.scrolled .headerasast {
  --background-color: #ffffff;
}

/* Index Page headerasast on Scroll
------------------------------*/
.index-page.scrolled .headerasast {
  --background-color: #ffffff;
}
.pricing .plan-headerasast {
  padding: 30px 30px 20px;
  text-align: center;
}

.pricing .plan-headerasast .plan-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.pricing .plan-headerasast .plan-icon i {
  font-size: 28px;
  color: var(--accent-color);
}

.pricing .plan-headerasast h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.pricing .plan-headerasast p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}
  .pricing .plan-headerasast {
    padding: 25px 20px 15px;
  }

  .contact .contact-info-panel .info-headerasast {
  margin-bottom: 50px;
}

.contact .contact-info-panel .info-headerasast h2 {
  font-size: 42px;
  font-weight: 600;
  color: var(--contrast-color);
  margin-bottom: 20px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .contact .contact-info-panel .info-headerasast h2 {
    font-size: 32px;
  }
}

.contact .contact-info-panel .info-headerasast p {
  font-size: 18px;
  color: color-mix(in srgb, var(--contrast-color), transparent 15%);
  line-height: 1.6;
  margin-bottom: 0;
}
.contact .contact-form-wrapper .form-headerasast {
  margin-bottom: 50px;
}

.contact .contact-form-wrapper .form-headerasast h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .contact .contact-form-wrapper .form-headerasast h3 {
    font-size: 26px;
  }
}

.contact .contact-form-wrapper .form-headerasast .headerasast-line {
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

.service-details .overview-card .overview-headerasast h4 {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 2rem;
  color: var(--heading-color);
}

.service-details .consultation-form .form-headerasast {
  margin-bottom: 2rem;
}

.service-details .consultation-form .form-headerasast h4 {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.service-details .consultation-form .form-headerasast p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}
/* ==========================
   Global Reset & Fonts
========================== */
body {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  background: #f1f1f1;
}

/* ==========================
   Header
========================== */
.headerasast {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  transition: all 0.4s;
  padding: 15px 0;
  background: transparent;
}

.headerasast .headerasast-container {
  width: 1200px;       /* العرض في النص */
  max-width: 95%;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 10px 30px;
  border-radius: 50px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s;
}

/* Logo */
.headerasast .logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

.headerasast .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.headerasast .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 500;
  color: #333;
}

/* Navigation Menu */
.headerasast .navmenu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.headerasast .navmenu ul li {
  margin: 0 15px;
  position: relative;
}

.headerasast .navmenu ul li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: 0.3s;
}

.headerasast .navmenu ul li a:hover {
  color: #FF6000;
}

/* Dropdown */
.headerasast .navmenu ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 10px 0;
  min-width: 150px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: none;
  border-radius: 8px;
}

.headerasast .navmenu ul li:hover > ul {
  display: block;
}

.headerasast .navmenu ul li ul li {
  margin: 0;
}

.headerasast .navmenu ul li ul li a {
  padding: 8px 20px;
  display: block;
  color: #333;
}

.headerasast .navmenu ul li ul li a:hover {
  color: #FF6000;
}

/* Get Started Button */
.headerasast .btn-getstarted {
  color: #fff;
  background: #FF6000;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

.headerasast .btn-getstarted:hover {
  background: #e65500;
}

/* Scrolled State */
.headerasast.scrolled .headerasast-container {
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 1200px) {
  .headerasast .headerasast-container {
    padding: 10px 15px;
  }
}

@media (max-width: 768px) {
  .headerasast .navmenu ul {
    flex-direction: column;
    display: none;
    background: #fff;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  .headerasast .navmenu ul li {
    margin: 10px 0;
  }

  .headerasast .navmenu ul li ul {
    position: static;
    box-shadow: none;
  }

  .headerasast .mobile-nav-toggle {
    display: block;
    font-size: 24px;
    cursor: pointer;
  }

  .headerasast .navmenu.active ul {
    display: flex;
  }
}

.headerasast-container {
  display: flex;
  justify-content: space-between; /* المسافة بين العناصر */
  align-items: center;
  max-width: 1200px;
  margin: 0 auto; /* يضع المحتوى في الوسط */
  padding: 10px 20px;
}

.logo {
  order: 1; /* اللوجو على الشمال */
}

.navmenu {
  order: 2;
}

.navmenu ul {
  list-style: none;
  display: flex;
  gap: 25px;
}

.navmenu li {
  position: relative;
}

.navmenu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

/* Dropdown */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  background: #fff;
  padding: 10px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border-radius: 5px;
}

.dropdown:hover .dropdown-menu {
  display: flex;
}

.dropdown-menu li {
  padding: 8px 20px;
}

.dropdown-menu li a {
  color: #333;
  font-weight: normal;
}


.social-icons{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:12px;
  align-items:center;
}
.social-icons li a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  text-decoration:none;
  border:1px solid #ddd;
  color:inherit;
  transition: transform .15s, box-shadow .15s;
}
.social-icons li a:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}


/* Mobile */
@media (max-width: 768px) {
  .headerasast .navmenu ul {
    flex-direction: column;
    display: none;
    background: #fff;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }

  .headerasast .navmenu.active ul {
    display: flex;
  }

  .headerasast .mobile-nav-toggle {
    display: block;
    font-size: 24px;
    cursor: pointer;
    color: #333;
  }

  .headerasast .headerasast-container {
    justify-content: space-between; /* زرار و اللوجو على طرفين */
  }

  .headerasast .logo {
    order: 1;
  }

  .headerasast .navmenu {
    order: 2;
  }
}


/* Mobile */
@media (max-width: 768px) {

  .headerasast .headerasast-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }

  /* ترتيب اللوجو والهامبرجر */
  .headerasast .mobile-nav-toggle {
    display: flex;
    order: 1;
    font-size: 30px;
    cursor: pointer;
    color: #333;
  }

  .headerasast .logo {
    order: 2;
  }

  /* القائمة تتحول لــ Sidebar */
  .headerasast .navmenu ul {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    width: 250px;
    flex-direction: column;
    background: #fff;
    padding: 60px 20px;
    gap: 20px;
    transition: left 0.3s ease;
    box-shadow: 4px 0 15px rgba(0,0,0,0.2);
    z-index: 1000;
    display: flex !important;
  }

  /* فتح القائمة */
  .headerasast .navmenu.active ul {
    left: 0 !important;
  }

  .headerasast .navmenu ul li a {
    color: #000;
    font-size: 18px;
  }
}


/* اختياري: ألوان الماركات */
.social-icons li a.facebook{ background:#1877F2; color:#fff; border:none; }
.social-icons li a.whatsapp{ background:#25D366; color:#fff; border:none; }
.social-icons li a.phone{ background:#0d6efd; color:#fff; border:none; }
.social-icons li a.email{ background:#dd4b39; color:#fff; border:none; }


@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600&display=swap');

.footer_area {
  font-family: 'Cairo', sans-serif;
  color: #fff;
  background-size: cover;
  background-position: center;
  position: relative;
}

.footer-logo-about img {
  width: 180px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

.footer_about p {
  font-size: 15px;
  line-height: 1.8;
  color: #ddd;
  text-align: justify;
}

.footer_link_wrapper {
  justify-content: space-between;
}

.footer_link h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #fff;
}

.footer_link ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer_link ul li {
  margin-bottom: 8px;
}

.footer_link ul li a {
  color: #ccc;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer_link ul li a:hover {
  color: #fff;
  padding-left: 5px;
}

.footer_copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 25px;
  margin-top: 40px;
  color: #aaa;
  font-size: 14px;
}

.footer_copyright a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.footer_copyright a:hover {
  color: #ffcc00;
}


/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/
#projects {
  margin-top: 100px;
  margin-bottom: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #f8fafc;
}

.projects .projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 40px;
}

@media (max-width: 992px) {
  .projects .projects-grid {
    grid-template-columns: 1fr;
  }
}

.projects .project-item {
  display: flex;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.projects .project-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.projects .project-content {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.projects .project-visual {
  flex: 0 0 250px;
  position: relative;
  overflow: hidden;
}

.projects .project-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.projects .project-item:hover .project-visual img {
  transform: scale(1.08);
}
.project-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.projects .project-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.projects .project-badge i {
  color: #2563eb;
  font-size: 18px;
}

/* Header */
.projects .project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.projects .project-category {
  background: #e0e7ff;
  color: #1e3a8a;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.projects .project-status {
  padding: 5px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}

.projects .project-status.completed {
  background: #16a34a;
}

.projects .project-status.in-progress {
  background: #2563eb;
}

.projects .project-status.planning {
  background: #f59e0b;
}

/* Title + Details */
.projects .project-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.projects .project-info p {
  color: #334155;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.projects .project-specs {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.projects .spec-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #475569;
}

.projects .spec-item i {
  color: #2563eb;
}

.projects .project-location {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
  font-size: 13px;
  color: #64748b;
}

.projects .project-location i {
  color: #2563eb;
}

/* Button */
.projects .project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  color: #2563eb;
  padding: 10px 18px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.3s ease;
}

.projects .project-link:hover {
  background: #2563eb;
  color: #fff;
}

.projects .project-link i {
  transition: transform 0.3s ease;
}

.projects .project-link:hover i {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .projects .project-item {
    flex-direction: column;
  }
  .projects .project-visual {
    height: 220px;
  }
}



/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/

.team .team-card {
  background: var(--surface-color);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 25px color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.4s ease-in-out;
  height: 100%;
}



.team .team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 85%);
}

.team .team-card.featured .team-header {
  display: flex;
  padding: 30px;
  gap: 25px;
  align-items: flex-start;
}

.team .team-card.featured .team-header .team-image {
  position: relative;
  flex-shrink: 0;
}

.team .team-card.featured .team-header .team-image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 15px;
}

.team .team-card.featured .team-header .team-image .experience-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.team .team-card.featured .team-header .team-info {
  flex: 1;
}

.team .team-card.featured .team-header .team-info h4 {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.team .team-card.featured .team-header .team-info .position {
  color: var(--accent-color);
  font-size: 16px;
  font-weight: 600;
  display: block;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team .team-card.featured .team-header .team-info .contact-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team .team-card.featured .team-header .team-info .contact-info a {
  color: var(--default-color);
  font-size: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.team .team-card.featured .team-header .team-info .contact-info a i {
  color: var(--accent-color);
  font-size: 16px;
}

.team .team-card.featured .team-header .team-info .contact-info a:hover {
  color: var(--accent-color);
}

.team .team-card.featured .team-details {
  padding: 0 30px 30px 30px;
}

.team .team-card.featured .team-details p {
  color: var(--default-color);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.team .team-card.featured .team-details .credentials {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.team .team-card.featured .team-details .credentials .cred-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  padding: 8px 15px;
  border-radius: 25px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.team .team-card.featured .team-details .credentials .cred-item i {
  color: var(--accent-color);
  font-size: 14px;
}

.team .team-card.featured .team-details .credentials .cred-item span {
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 500;
}

.team .team-card.featured .team-details .social-links {
  display: flex;
  gap: 12px;
}

.team .team-card.featured .team-details .social-links a {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.team .team-card.featured .team-details .social-links a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.team .team-card.compact .member-photo {
  position: relative;
  overflow: hidden;
}

.team .team-card.compact .member-photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: all 0.4s ease-in-out;
}

.team .team-card.compact .member-photo .hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 10%) 0%, color-mix(in srgb, var(--heading-color), transparent 20%) 100%);
  opacity: 0;
  transition: all 0.4s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team .team-card.compact .member-photo .hover-overlay .overlay-content {
  text-align: center;
  color: var(--contrast-color);
  transform: translateY(20px);
  transition: all 0.4s ease-in-out;
}

.team .team-card.compact .member-photo .hover-overlay .overlay-content h5 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: var(--contrast-color);
}

.team .team-card.compact .member-photo .hover-overlay .overlay-content span {
  font-size: 14px;
  margin-bottom: 15px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team .team-card.compact .member-photo .hover-overlay .overlay-content .quick-contact {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.team .team-card.compact .member-photo .hover-overlay .overlay-content .quick-contact a {
  background: var(--contrast-color);
  color: var(--accent-color);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.team .team-card.compact .member-photo .hover-overlay .overlay-content .quick-contact a:hover {
  transform: scale(1.1);
  background: color-mix(in srgb, var(--contrast-color), transparent 10%);
}

.team .team-card.compact .member-photo:hover .hover-overlay {
  opacity: 1;
}

.team .team-card.compact .member-photo:hover .hover-overlay .overlay-content {
  transform: translateY(0);
}

.team .team-card.compact .member-photo:hover img {
  transform: scale(1.05);
}

.team .team-card.compact .member-summary {
  padding: 20px;
  text-align: center;
}

.team .team-card.compact .member-summary h5 {
  color: var(--heading-color);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 5px 0;
}

.team .team-card.compact .member-summary h5 {
  color: #000 !important;
  font-weight: 700;
  opacity: 1 !important;
}

.team .team-card.compact .member-summary span {
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  display: block;
}

.team .team-card.compact .member-summary .skills {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.team .team-card.compact .member-summary .skills .skill-tag {
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
}

@media (max-width: 992px) {
  .team .team-card.featured .team-header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .team .team-card.featured .team-header .team-image {
    align-self: center;
  }
}

@media (max-width: 768px) {
  .team .team-card.featured .team-header {
    padding: 25px 20px;
  }

  .team .team-card.featured .team-header .team-image img {
    width: 100px;
    height: 100px;
  }

  .team .team-card.featured .team-header .team-info h4 {
    font-size: 20px;
  }

  .team .team-card.featured .team-header .team-info .contact-info a {
    font-size: 13px;
  }

  .team .team-card.featured .team-details {
    padding: 0 20px 25px 20px;
  }

  .team .team-card.featured .team-details .credentials {
    justify-content: center;
  }

  .team .team-card.featured .team-details .credentials .cred-item {
    font-size: 12px;
    padding: 6px 12px;
  }

  .team .team-card.featured .team-details .social-links {
    justify-content: center;
  }

  .team .team-card.featured .team-details .social-links a {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .team .team-card.compact .member-photo img {
    height: 200px;
  }

  .team .team-card.compact .member-photo .hover-overlay .overlay-content h5 {
    font-size: 18px;
  }

  .team .team-card.compact .member-photo .hover-overlay .overlay-content .quick-contact a {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .team .team-card.compact .member-summary {
    padding: 15px;
  }

  .team .team-card.compact .member-summary h5 {
    font-size: 16px;
  }

  .team .team-card.compact .member-summary .skills .skill-tag {
    font-size: 10px;
    padding: 3px 8px;
  }
}

@media (max-width: 768px) {
  .team .team-card.compact {
    margin-bottom: 40px !important;
  }
}

.team .team-card.compact {
  display: block;
  position: relative;
  overflow: visible !important;
}

.team .team-card.compact .member-photo {
  display: block;
  position: relative;
}
@media (max-width: 768px) {
  .team .col-md-6,
  .team .col-lg-4 {
    margin-bottom: 30px !important;
  }
}


/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team.section {
  padding: 100px 0;
  background: #fff;
  position: relative;
  z-index: 1;
}

.team .section-title {
  text-align: center;
  margin-bottom: 50px;
}

.team .section-title h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--heading-color, #1e1e1e);
}

.team .section-title p {
  color: #555;
  font-size: 15px;
  margin-top: 10px;
}

.team-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
}

.team-card .member-photo {
  position: relative;
  overflow: hidden;
}

.team-card .member-photo img {
  width: 100%;
  transition: transform 0.4s ease;
}

.team-card:hover .member-photo img {
  transform: scale(1.05);
}

.team-card .hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
}

.team-card:hover .hover-overlay {
  opacity: 1;
}

.team-card .overlay-content {
  text-align: center;
  color: #fff;
}

.team-card .overlay-content h5 {
  font-size: 20px;
  margin-bottom: 5px;
  font-weight: 600;
}

.team-card .overlay-content span {
  display: block;
  font-size: 13px;
  margin-bottom: 15px;
}

.team-card .quick-contact a {
  color: #fff;
  font-size: 16px;
  margin: 0 8px;
  transition: color 0.3s ease;
}

.team-card .quick-contact a:hover {
  color: var(--accent-color, #007bff);
}

.team-card .member-summary {
  padding: 20px;
  text-align: center;
}

.team-card .member-summary h5 {
  font-size: 18px;
  font-weight: 700;
  color: var(--heading-color, #1e1e1e);
  margin-bottom: 5px;
}

.team-card .member-summary span {
  font-size: 13px;
  color: #666;
}

.team-card .skills {
  margin-top: 10px;
}

.team-card .skill-tag {
  display: inline-block;
  background: rgba(0, 123, 255, 0.1);
  color: #007bff;
  border-radius: 12px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  margin: 3px;
}

/* فصل السكشن */
.team.section {
  margin-top: 100px;
  margin-bottom: 100px;
}
/* مسافة بين كل صف والتاني داخل سكشن الفريق */
.team .row {
  margin-bottom: 60px; /* تقدر تزود أو تقلل الرقم حسب الشكل */
}

/* اختياري: لو عاوز آخر صف يكون بدون مسافة تحت */
.team .row:last-child {
  margin-bottom: 0;
}

.team .team-card.featured .team-header .team-info h4 {
  color: #000 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
#team {
  font-family: 'Cairo', sans-serif !important;
}



/*--------------------------------------------------------------
# Contact Section (RTL Cairo Version - Polished)
--------------------------------------------------------------*/
#contact {
  margin-top: 100px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
}

.contact .container {
  max-width: 1280px;
}

.contact .contact-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .contact .contact-wrapper {
    grid-template-columns: 38% 62%;
    gap: 30px;
  }
}

/*--------------------------------------
  قسم المعلومات (العمود الأزرق)
--------------------------------------*/
.contact .contact-info-panel {
  background: linear-gradient(135deg, #1e6091, #2a6f97);
  color: #ffffff;
  border-radius: 20px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.contact .contact-info-header {
  margin-bottom: 30px;
}

.contact .contact-info-header h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffffff;
}

.contact .contact-info-header p {
  font-size: 17px;
  opacity: 0.9;
  line-height: 1.8;
}

/* كروت المعلومات */
.contact .contact-info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-bottom: auto;
}

.contact-info-cards {
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-info-cards .info-card {
  display: flex;
  flex-direction: row-reverse; /* يخلي الأيقونة على اليمين */
  align-items: center;
  justify-content: flex-start; /* يخلي النص جنب الأيقونة مباشرة */
  background: rgba(255, 255, 255, 0.1);
  padding: 15px 20px;
  border-radius: 10px;
  color: #fff;
}

.contact-info-cards .icon-container {
  background: rgba(255, 255, 255, 0.15);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px; /* مسافة بسيطة بين الأيقونة والنص */
}

.contact-info-cards .card-content {
  flex: 1;
}

.contact-info-cards .card-content h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.contact-info-cards .card-content p {
  margin: 5px 0 0;
  font-size: 15px;
}


@media (min-width: 576px) and (max-width: 991px) {
  .contact .contact-info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact .info-card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

/* 

.contact .info-card {
  direction: rtl;     
  text-align: right;   
  flex-direction: row-reverse; 
}
  */


.contact .info-card:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
}

/* الأيقونة على الشمال - النص على اليمين */
.contact .icon-container {
  width: 45px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact .card-content {
  text-align: right;
}

.contact .card-content h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #ffffff;
}

.contact .card-content p {
  font-size: 15px;
  margin-bottom: 0;
  opacity: 0.85;
  line-height: 1.6;
  direction: rtl;
}

/*--------------------------------------
  روابط التواصل الاجتماعي
--------------------------------------*/
.contact .social-links-panel {
  margin-top: 35px;
  text-align: right;
}

.contact .social-links-panel h5 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffffff;
}

.contact .social-links-panel .social-icons {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

.contact .social-links-panel .social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 18px;
  transition: all 0.3s ease;
}

.contact .social-links-panel .social-icons a:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-4px);
}

/*--------------------------------------
  قسم الخريطة والفورم
--------------------------------------*/
.contact .contact-form-panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact .map-container {
  width: 100%;
  height: 280px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/*--------------------------------------
  الفورم
--------------------------------------*/
.contact .form-container {
  background-color: var(--surface-color);
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
  direction: rtl;
}

.contact .form-container p {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
  font-weight: 600;
  margin-bottom: 25px;
}

/* ترتيب الحقول */
.contact .form-container .form-floating {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
}

.contact .form-container .form-floating label {
  position: static !important;
  transform: none !important;
  font-weight: 700;
  color: #0d3b66;
  width: 140px;
  text-align: right;
}

.contact .form-container .form-floating input,
.contact .form-container .form-floating textarea {
  flex: 1;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 12px 15px;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  direction: rtl;
}

.contact .form-container textarea {
  height: 150px;
}

/* زر الإرسال */
.contact .form-container .btn-submit {
  background: linear-gradient(145deg, #0d3b66, #1a4372);
  color: #ffffff;
  border: none;
  padding: 14px 25px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.contact .form-container .btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(13, 59, 102, 0.3);
}

.contact .form-container .btn-submit i {
  margin-right: 8px;
}

/*--------------------------------------
  نصوص عامة
--------------------------------------*/
.contact-text-rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', sans-serif;
  color: #ffffff;
}

.contact-text-rtl h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
}

.contact-text-rtl p {
  font-size: 18px;
  line-height: 1.8;
  font-weight: 600;
}

/*--------------------------------------
  استجابة الموبايل
--------------------------------------*/
@media (max-width: 768px) {
  .contact .contact-info-panel {
    padding: 30px 25px;
  }

  .contact .form-container {
    padding: 30px 25px;
  }
}

@media (max-width: 576px) {
  .contact .social-links-panel .social-icons {
    flex-wrap: wrap;
  }
}




/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  position: relative;
}

/* فصل سكشن الـ About عن باقي الصفحة */
.about.section {
  margin-top: 100px;     /* مسافة من فوق */
  margin-bottom: 100px;  /* مسافة من تحت */
  padding: 80px 0;       /* مسافة داخلية عمودية */
  background-color: #f9fafc; /* خلفية بيضاء أو تقدر تغيرها */
  border-radius: 20px;   /* زوايا ناعمة لو حبيت */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* ظل خفيف للفصل البصري */
  
}


.about .about-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
}

.about .about-content h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 80px;
  height: 4px;
  background-color: var(--accent-color);
}



.about .about-content p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.about .achievement-boxes .achievement-box {
  background-color: var(--surface-color);
  border-left: 4px solid var(--accent-color);
  padding: 1.2rem;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.about .achievement-boxes .achievement-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.about .achievement-boxes .achievement-box h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--accent-color);
}

.about .achievement-boxes .achievement-box p {
  margin-bottom: 0;
  font-size: 0.9rem;
  font-weight: 500;
}

.about .certifications h5 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.about .certifications img {
  transition: transform 0.3s ease;
  filter: grayscale(100%);
  opacity: 0.7;
}

.about .certifications img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

.about .cta-container .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.about .cta-container .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 10%);
  border-color: color-mix(in srgb, var(--accent-color), #000 10%);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}
.about .about-image {
  position: relative;
  display: inline-block;
  width: 100%;
  transition: all 0.3s ease;
}

.about .about-image .main-image {
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about .about-image:hover .main-image {
  transform: scale(1.03);
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.25);
}

.about .about-image .image-overlay {
  position: absolute;
  bottom: -50px;
  right: -35px;
  width: 45%;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.about .about-image:hover .image-overlay {
  transform: translateY(-5px);
}

.about .about-image .image-overlay img {
  border-radius: 16px;
  transition: transform 0.4s ease;
}

.about .about-image:hover .image-overlay img {
  transform: scale(1.05);
}

.about .about-image .experience-badge {
  position: absolute;
  top: 25px;
  left: -25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 1.5rem;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
  transition: transform 0.3s ease;
}

.about .about-image:hover .experience-badge {
  transform: rotate(-5deg) scale(1.05);
}

.about .about-image .experience-badge span {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
}

.about .about-image .experience-badge p {
  font-size: 0.9rem;
  margin: 0.3rem 0 0 0;
  opacity: 0.9;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
  .about .about-image {
    margin-top: 3rem;
  }

  .about .about-image .image-overlay {
    bottom: -30px;
    right: -10px;
    width: 55%;
  }

  .about .about-image .experience-badge {
    width: 100px;
    height: 100px;
    padding: 1rem;
    left: -10px;
    top: 15px;
  }

  .about .about-image .experience-badge span {
    font-size: 1.6rem;
  }

  .about .about-image .experience-badge p {
    font-size: 0.7rem;
  }
}


@media (max-width: 767.98px) {
  .about .achievement-boxes .achievement-box {
    padding: 1rem;
  }

  .about .achievement-boxes .achievement-box h3 {
    font-size: 1.8rem;
  }

  .about .achievement-boxes .achievement-box p {
    font-size: 2rem;
  }

  .about .about-image .image-overlay {
    bottom: -30px;
    right: 0;
    width: 40%;
  }
}


/* ----------------------------------
   إضافة خط Cairo وتعديل الثقل
---------------------------------- */

#about .lead,
.about .about-content .lead,
.about .about-content h2,
.about .achievement-boxes .achievement-box h3,
.about .achievement-boxes .achievement-box p,
.about .certifications h5,
.about .about-image .experience-badge span,
.about .about-image .experience-badge p {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important; /* Bold */
}

/* لو عايز العنوان أثقل شوية */
.about .about-content h2 {
  font-weight: 800 !important;
}

/* الفقرة الأساسية */
#about .lead,
.about .about-content .lead {
  font-size: 1.15rem;
  line-height: 1.9;
  color: rgba(0,0,0,0.75);
}

/*--------------------------------------------------------------
# قسم الخدمات (بالاتجاه من اليمين إلى اليسار)
--------------------------------------------------------------*/
.services {
  position: relative;
  direction: rtl;
  font-family: "Cairo", sans-serif;
}

#services {
  margin-top: 100px;
  margin-bottom: 100px;
  padding: 60px 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
}

/* الكروت */
.services .service-card {
  background-color: #f8f9fb;
  color: #0a2b50;
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  height: 100%;
  text-align: right;
}

.services .service-card:hover {
  background-color: #f1f3f7;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* الأيقونة */
.services .service-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #e8eef8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  margin-right: auto;
  margin-left: auto;
  transition: all 0.3s ease;
}

.services .service-icon i {
  font-size: 2rem;
  color: #004aad;
}

/* النصوص */
.services .service-card h3 {
  color: #0a2b50;
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.services .service-card p {
  color: #163d6b;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* المميزات */
.services .service-card .service-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.services .service-card .service-features span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #163d6b;
  font-weight: 600;
  font-size: 1rem;
}

.services .service-card .service-features span i {
  color: #004aad;
}

/* الرابط */
.services .service-card .service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #004aad;
  transition: all 0.3s ease;
}

.services .service-card .service-link:hover {
  gap: 0.75rem;
  color: #002d6a;
}

/* الجزء الختامي (CTA) */
.services .cta-container {
  background-color: #f8f9fb;
  border-radius: 10px;
  padding: 3rem;
  text-align: center;
}

.services .cta-container h3 {
  color: #0a2b50;
  font-weight: 800;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.services .cta-container p {
  color: #163d6b;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.services .btn-cta {
  background-color: #004aad;
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.services .btn-cta:hover {
  background-color: #003580;
  transform: translateY(-3px);
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 992px) {
  .services .service-card {
    padding: 2rem;
  }

  .services .cta-container {
    padding: 2rem;
  }

  .services .cta-container h3 {
    font-size: 1.5rem;
  }
}

/* اتجاه عربي للخدمات */
.service-list-block.rtl-block {
  direction: rtl;
  text-align: right;
}

.service-list-block.rtl-block h3,
.service-list-block.rtl-block h4 {
  text-align: right;
  font-weight: 800;
  color: #0a2b50;
}

/* ترتيب العناصر من اليمين لليسار */
.service-list-block.rtl-block .service-list-item {
  display: flex;
  flex-direction: row-reverse; /* أيقونة يمين، نص شمال */
  align-items: flex-start;
  gap: 15px;
  background-color: #f8f9fb;
  border-radius: 8px;
  padding: 1.2rem;
  transition: all 0.3s ease;
}

.service-list-block.rtl-block .service-list-item:hover {
  background-color: #f1f3f7;
  transform: translateY(-3px);
}

/* الأيقونة */
.service-list-block.rtl-block .service-list-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color, #004aad), transparent 85%);
}

.service-list-block.rtl-block .service-list-icon i {
  font-size: 1.5rem;
  color: var(--accent-color, #004aad);
}

/* النص */
.service-list-block.rtl-block .service-list-content {
  text-align: right;
  color: #163d6b;
}

.service-list-block.rtl-block .service-list-content p {
  color: #1c4072;
  font-weight: 600;
  margin-bottom: 0;
}
.service-image-block {
  position: relative;
  overflow: visible; /* مهم عشان تسمح للصورة تطلع برا الديف */
}

.floating-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: floatUpDown 6s ease-in-out infinite;
  transition: transform 0.1s ease;
}

/* الحركة نفسها */
@keyframes floatUpDown {
  100% {
    transform: translateY(900);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(900);
  }
}




.cta-title {
  color: #004aad; /* أزرق غامق */
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 15px;
}

.cta-container p {
  color: #333;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 25px;
}

.btn-cta {
  background-color: #004aad;
  color: #fff;
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-cta:hover {
  background-color: #00337a;
}


/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-sidebar {
  position: sticky;
  top: 120px;
}

.service-details {
  font-family: 'Cairo', sans-serif;
}

.service-details .service-sidebar .service-overview-card,
.service-details .service-sidebar .quick-info-card,
.service-details .service-sidebar .contact-action-card {
  background-color: var(--surface-color);
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
}

.service-details .service-sidebar .service-overview-card {
  text-align: center;
}

.service-details .service-sidebar .service-overview-card .service-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.service-details .service-sidebar .service-overview-card .service-icon i {
  font-size: 2rem;
  color: var(--contrast-color);
}

.service-details .service-sidebar .service-overview-card h3 {
  color: var(--heading-color);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.service-details .service-sidebar .service-overview-card p {
  color: var(--default-color);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.service-details .service-sidebar .service-overview-card .service-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.service-details .service-sidebar .service-overview-card .service-stats .stat-item {
  text-align: center;
}

.service-details .service-sidebar .service-overview-card .service-stats .stat-item .stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
}

.service-details .service-sidebar .service-overview-card .service-stats .stat-item .stat-label {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-top: 0.5rem;
}

.service-details .service-sidebar .quick-info-card h4 {
  color: var(--heading-color);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.service-details .service-sidebar .quick-info-card .info-grid .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.service-details .service-sidebar .quick-info-card .info-grid .info-row:last-child {
  border-bottom: none;
}

.service-details .service-sidebar .quick-info-card .info-grid .info-row .label {
  color: var(--default-color);
  font-weight: 500;
  font-size: 0.95rem;
}

.service-details .service-sidebar .quick-info-card .info-grid .info-row .value {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.95rem;
}

.service-details .service-sidebar .contact-action-card h4 {
  color: var(--heading-color);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.service-details .service-sidebar .contact-action-card .contact-text {
  color: var(--default-color);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service-details .service-sidebar .contact-action-card .contact-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.service-details .service-sidebar .contact-action-card .contact-methods .contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .contact-action-card .contact-methods .contact-btn i {
  font-size: 1.5rem;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.service-details .service-sidebar .contact-action-card .contact-methods .contact-btn span {
  color: var(--default-color);
  font-weight: 500;
  font-size: 0.9rem;
}

.service-details .service-sidebar .contact-action-card .contact-methods .contact-btn:hover {
  background-color: var(--accent-color);
  transform: translateY(-2px);
}

.service-details .service-sidebar .contact-action-card .contact-methods .contact-btn:hover i,
.service-details .service-sidebar .contact-action-card .contact-methods .contact-btn:hover span {
  color: var(--contrast-color);
}

.service-details .service-sidebar .contact-action-card .btn {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .contact-action-card .btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  border-color: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-2px);
}

.service-details .service-main-content .hero-section {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 3rem;
}

.service-details .service-main-content .hero-section img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.service-details .service-main-content .hero-section .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
  display: flex;
  align-items: flex-end;
  padding: 2rem;
}

.service-details .service-main-content .hero-section .hero-overlay .hero-badge {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.service-details .service-main-content .hero-section .hero-overlay .hero-badge i {
  font-size: 1.1rem;
}

.service-details .service-main-content .content-section {
  margin-bottom: 3rem;
}

.service-details .service-main-content .content-section h1 {
  color: var(--heading-color);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.2;
}

.service-details .service-main-content .content-section .content-intro p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--default-color);
  margin-bottom: 1.5rem;
}

.service-details .service-main-content .content-section .content-intro p:last-child {
  margin-bottom: 0;
}

.service-details .service-main-content .capabilities-grid {
  margin-bottom: 4rem;
}

.service-details .service-main-content .capabilities-grid h2 {
  color: var(--heading-color);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2.5rem;
  text-align: center;
}

.service-details .service-main-content .capabilities-grid .capability-card {
  background-color: var(--surface-color);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  height: 100%;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
  transition: all 0.3s ease;
}

.service-details .service-main-content .capabilities-grid .capability-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.service-details .service-main-content .capabilities-grid .capability-card .capability-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.service-details .service-main-content .capabilities-grid .capability-card .capability-icon i {
  font-size: 1.8rem;
  color: var(--contrast-color);
}

.service-details .service-main-content .capabilities-grid .capability-card h4 {
  color: var(--heading-color);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.service-details .service-main-content .capabilities-grid .capability-card p {
  color: var(--default-color);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.service-details .service-main-content .methodology-section h2 {
  color: var(--heading-color);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 3rem;
  text-align: center;
}

.service-details .service-main-content .methodology-section .methodology-timeline {
  position: relative;
}

.service-details .service-main-content .methodology-section .methodology-timeline::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 50%));
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item {
  position: relative;
  padding-left: 120px;
  margin-bottom: 3rem;
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item:last-child {
  margin-bottom: 0;
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-marker .phase-number {
  color: var(--contrast-color);
  font-size: 1.5rem;
  font-weight: 700;
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-content {
  background-color: var(--surface-color);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-content h4 {
  color: var(--heading-color);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-content p {
  color: var(--default-color);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-content .phase-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-content .phase-features li {
  color: var(--default-color);
  font-size: 0.95rem;
  padding: 0.4rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-content .phase-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-color);
  font-weight: 600;
}

.service-details .portfolio-showcase .showcase-header {
  margin-bottom: 2rem;
}

.service-details .portfolio-showcase .showcase-header h2 {
  color: var(--heading-color);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.service-details .portfolio-showcase .showcase-header p {
  color: var(--default-color);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.service-details .portfolio-showcase .project-showcase-item {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
}

.service-details .portfolio-showcase .project-showcase-item .project-image {
  position: relative;
  height: 100%;
  min-height: 250px;
}

.service-details .portfolio-showcase .project-showcase-item .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-details .portfolio-showcase .project-showcase-item .project-image .project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-details .portfolio-showcase .project-showcase-item .project-image .project-overlay .project-info {
  text-align: center;
  color: var(--contrast-color);
  padding: 1.5rem;
}

.service-details .portfolio-showcase .project-showcase-item .project-image .project-overlay .project-info h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.service-details .portfolio-showcase .project-showcase-item .project-image .project-overlay .project-info p {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.service-details .portfolio-showcase .project-showcase-item .project-image .project-overlay .project-info .view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-details .portfolio-showcase .project-showcase-item .project-image .project-overlay .project-info .view-btn i {
  font-size: 1.2rem;
}

.service-details .portfolio-showcase .project-showcase-item .project-image .project-overlay .project-info .view-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), white 20%);
  transform: scale(1.1);
}

.service-details .portfolio-showcase .project-showcase-item:hover .project-image img {
  transform: scale(1.05);
}

.service-details .portfolio-showcase .project-showcase-item:hover .project-image .project-overlay {
  opacity: 1;
}

@media (max-width: 992px) {
  .service-details .service-sidebar {
    position: static;
    margin-top: 3rem;
  }

  .service-details .service-main-content .content-section h1 {
    font-size: 2rem;
  }

  .service-details .service-main-content .methodology-section .methodology-timeline::before {
    left: 30px;
  }

  .service-details .service-main-content .methodology-section .methodology-timeline .timeline-item {
    padding-left: 100px;
  }

  .service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-marker {
    width: 60px;
    height: 60px;
  }

  .service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-marker .phase-number {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  .service-details .service-sidebar .contact-action-card .contact-methods {
    grid-template-columns: 1fr;
  }

  .service-details .service-main-content .hero-section img {
    height: 250px;
  }

  .service-details .service-main-content .hero-section .hero-overlay {
    padding: 1.5rem;
  }

  .service-details .service-main-content .capabilities-grid .row {
    --bs-gutter-y: 2rem;
  }

  .service-details .service-main-content .methodology-section .methodology-timeline::before {
    display: none;
  }

  .service-details .service-main-content .methodology-section .methodology-timeline .timeline-item {
    padding-left: 0;
    text-align: center;
  }

  .service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-marker {
    position: relative;
    margin: 0 auto 1.5rem;
  }
}

  .about .about-imaservice-detailsge .experience-badge p {
    font-size: 0.7rem;
  }

  /* تحسين مظهر سكشن الخدمة */
#service-details {
  margin-top: 80px;      /* ينزله عن اللي فوقه */
  margin-bottom: 80px;   /* ينزله عن اللي بعده */
  background-color: #f9fafc; /* لون خلفية فاتح يبين الكلام */
  padding-top: 60px;
  padding-bottom: 60px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* وضوح النصوص */
#service-details h1,
#service-details h2,
#service-details h3,
#service-details h4 {
  color: #1a1a1a; /* لون غامق وواضح */
}

#service-details p {
  color: #444; /* رمادي غامق لسهولة القراءة */
  font-size: 1.05rem;
  line-height: 1.8;
}

/* تحسين التباعد الداخلي للعناصر */
#service-details .content-section,
#service-details .capabilities-grid,
#service-details .methodology-section,
#service-details .portfolio-showcase {
  margin-top: 50px;
}

/* Timeline vertical line */
.service-details .service-main-content .methodology-section .methodology-timeline::before {
  left: auto;
  right: 40px; /* الخط على يمين الشاشة */
}

/* Timeline item padding */
.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item {
  padding-left: 0;
  padding-right: 120px; /* المسافة للنص من اليمين */
  text-align: right; /* الكلام على اليمين */
}

/* Timeline marker (الأرقام) */
.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-marker {
  left: auto;
  right: 0; /* الدائرة على اليمين */
}

/* عناصر القائمة ✓ */
.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-content .phase-features li {
  padding-left: 0;
  padding-right: 1.5rem;
}

.service-details .service-main-content .methodology-section .methodology-timeline .timeline-item .timeline-content .phase-features li::before {
  left: auto;
  right: 0; /* علامة ✓ على اليمين */
}


/*--------------------------------------------------------------
# Project Details Section
--------------------------------------------------------------*/
.project-details .project-header {
  margin-bottom: 60px;
}

.project-details .project-header .project-banner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px color-mix(in srgb, var(--default-color), transparent 85%);
}

.project-details .project-header .project-banner img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

.project-details .project-header .project-banner .banner-badge {
  position: absolute;
  top: 25px;
  left: 25px;
}

.project-details .project-header .project-banner .banner-badge .status-indicator {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #1e40af 30%));
  color: var(--contrast-color);
  padding: 10px 24px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.project-details .project-header .project-summary {
  padding-left: 50px;
}

.project-details .project-header .project-summary .project-tags {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.project-details .project-header .project-summary .project-tags .tag {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 6px 16px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-details .project-header .project-summary .main-title {
  font-size: 2.8rem;
  font-weight: 200;
  line-height: 1.2;
  margin-bottom: 30px;
  color: var(--heading-color);
}

.project-details .project-header .project-summary .summary-text {
  font-size: 17px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 45px;
}

.project-details .project-header .project-summary .key-metrics .metric-row {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
}

.project-details .project-header .project-summary .key-metrics .metric-row:last-child {
  margin-bottom: 0;
}

.project-details .project-header .project-summary .key-metrics .metric {
  flex: 1;
  padding: 20px;
  background: var(--surface-color);
  border-radius: 8px;
  border-left: 4px solid var(--accent-color);
}

.project-details .project-header .project-summary .key-metrics .metric .metric-title {
  display: block;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.project-details .project-header .project-summary .key-metrics .metric .metric-data {
  display: block;
  color: var(--heading-color);
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 992px) {
  .project-details .project-header .project-summary {
    padding-left: 0;
    margin-top: 40px;
  }

  .project-details .project-header .project-banner img {
    height: 350px;
  }

  .project-details .project-header .main-title {
    font-size: 2.2rem;
  }

  .project-details .project-header .key-metrics .metric-row {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .project-details .project-header .project-tags {
    flex-wrap: wrap;
  }
}

.project-details .visual-showcase {
  margin-bottom: 80px;
}

.project-details .visual-showcase .showcase-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 250px);
  gap: 20px;
}

.project-details .visual-showcase .showcase-grid .showcase-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.project-details .visual-showcase .showcase-grid .showcase-item:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--default-color), transparent 80%);
}

.project-details .visual-showcase .showcase-grid .showcase-item.large {
  grid-row: span 2;
}

.project-details .visual-showcase .showcase-grid .showcase-item.tall {
  grid-row: span 2;
}

.project-details .visual-showcase .showcase-grid .showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
}

.project-details .visual-showcase .showcase-grid .showcase-item .item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
  padding: 30px 20px 20px;
}

.project-details .visual-showcase .showcase-grid .showcase-item .item-overlay .overlay-label {
  color: var(--contrast-color);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .project-details .visual-showcase .showcase-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 200px);
  }

  .project-details .visual-showcase .showcase-grid .showcase-item.large,
  .project-details .visual-showcase .showcase-grid .showcase-item.tall {
    grid-row: span 1;
  }
}

.project-details .detailed-breakdown {
  margin-bottom: 80px;
}

.project-details .detailed-breakdown .breakdown-content h3 {
  font-size: 1.9rem;
  font-weight: 300;
  margin-bottom: 25px;
  color: var(--heading-color);
}

.project-details .detailed-breakdown .breakdown-content p {
  font-size: 16px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 25px;
}

.project-details .detailed-breakdown .breakdown-content .achievement-list {
  margin-top: 40px;
}

.project-details .detailed-breakdown .breakdown-content .achievement-list .achievement-point {
  display: flex;
  align-items: flex-start;
  margin-bottom: 35px;
}

.project-details .detailed-breakdown .breakdown-content .achievement-list .achievement-point:last-child {
  margin-bottom: 0;
}

.project-details .detailed-breakdown .breakdown-content .achievement-list .achievement-point .achievement-marker {
  width: 45px;
  height: 45px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.project-details .detailed-breakdown .breakdown-content .achievement-list .achievement-point .achievement-marker i {
  color: var(--accent-color);
  font-size: 18px;
}

.project-details .detailed-breakdown .breakdown-content .achievement-list .achievement-point .achievement-details h5 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--heading-color);
}

.project-details .detailed-breakdown .breakdown-content .achievement-list .achievement-point .achievement-details p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 15px;
}
.rtl-timeline {
  position: relative;
  direction: rtl; /* يفضل نخلي اتجاه النص RTL */
  padding-right: 60px; /* مساحة كافية للخط والنقاط على اليمين */
}

/* الخط العمودي على اليمين */
.rtl-timeline::before {
  content: "";
  position: absolute;
  right: 20px; /* الخط على اليمين */
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-color);
  opacity: 0.4;
}

/* كل عنصر */
.tl-item {
  position: relative;
  margin-bottom: 30px;
}

/* النقطة على الخط */
.tl-dot {
  position: absolute;
  right: 14px; /* منتصف الخط */
  top: 0;
  width: 14px;
  height: 14px;
  background: var(--accent-color);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

/* النص على يسار النقطة */
.tl-text {
  display: inline-block;
  margin-right: 80px; /* المسافة بين النص والنقطة */
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--heading-color);
}

.tl-dot {
  position: absolute;
  right: 14px; 
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--accent-color);
  color: #fff;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
  font-size: 16px; /* حجم الأيقونة */
}



.project-details .detailed-breakdown .specifications-panel {
  background: var(--surface-color);
  padding: 40px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.project-details .detailed-breakdown .specifications-panel h4 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 30px;
  color: var(--heading-color);
}

.project-details .detailed-breakdown .specifications-panel .spec-table {
  margin-bottom: 40px;
}

.project-details .detailed-breakdown .specifications-panel .spec-table .spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.project-details .detailed-breakdown .specifications-panel .spec-table .spec-row:last-child {
  border-bottom: none;
}

.project-details .detailed-breakdown .specifications-panel .spec-table .spec-row .spec-name {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
  font-size: 14px;
}

.project-details .detailed-breakdown .specifications-panel .spec-table .spec-row .spec-detail {
  color: var(--heading-color);
  font-weight: 600;
  font-size: 14px;
}

.project-details .detailed-breakdown .specifications-panel .progress-indicator .progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.project-details .detailed-breakdown .specifications-panel .progress-indicator .progress-header .progress-label {
  color: var(--heading-color);
  font-weight: 600;
  font-size: 15px;
}

.project-details .detailed-breakdown .specifications-panel .progress-indicator .progress-header .progress-percentage {
  color: var(--accent-color);
  font-weight: 700;
  font-size: 16px;
}

.project-details .detailed-breakdown .specifications-panel .progress-indicator .progress-bar-container {
  height: 8px;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 4px;
  overflow: hidden;
}

.project-details .detailed-breakdown .specifications-panel .progress-indicator .progress-bar-container .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #10b981 40%));
  border-radius: 4px;
  transition: width 0.8s ease;
}

@media (max-width: 992px) {
  .project-details .detailed-breakdown .specifications-panel {
    margin-top: 50px;
  }
}

@media (max-width: 768px) {
  .project-details .detailed-breakdown .specifications-panel {
    padding: 30px 25px;
  }
}

.project-details .technical-gallery .gallery-header {
  text-align: center;
  margin-bottom: 50px;
}

.project-details .technical-gallery .gallery-header h3 {
  font-size: 1.9rem;
  font-weight: 300;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.project-details .technical-gallery .gallery-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.project-details .technical-gallery .tech-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.project-details .technical-gallery .tech-item:hover {
  transform: translateY(-8px);
}

.project-details .technical-gallery .tech-item:hover .tech-caption {
  background: var(--accent-color);
}

.project-details .technical-gallery .tech-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.project-details .technical-gallery .tech-item .tech-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--default-color), transparent 15%);
  color: var(--contrast-color);
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .project-details .technical-gallery .tech-item {
    margin-bottom: 20px;
  }

  .project-details .technical-gallery .tech-item img {
    height: 180px;
  }
}

/* تحسين عام لمظهر سكشن المشاريع */
#project-details {
  background-color: #fafbff; /* أفتح من الأبيض */
  padding-top: 80px;
  padding-bottom: 80px;
  margin-top: 80px;
  margin-bottom: 80px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* تحسين النصوص */
#project-details h1,
#project-details h2,
#project-details h3,
#project-details h4,
#project-details h5 {
  color: #0d2c70; /* أزرق غامق واضح */
  font-weight: 600;
}

#project-details p,
#project-details span,
#project-details .metric-data,
#project-details .spec-detail {
  color: #1c355e; /* أزرق داكن أكثر */
  font-weight: 500;
  line-height: 1.8;
}

/* تباعد أقوى بين الأقسام */
#project-details .project-header,
#project-details .visual-showcase,
#project-details .detailed-breakdown,
#project-details .technical-gallery {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* تحسين خلفية اللوحات الجانبية */
#project-details .specifications-panel {
  background-color: #f2f5fb;
  box-shadow: 0 8px 30px rgba(13, 44, 112, 0.08);
}

/* تحسين شكل العناوين الصغيرة */
#project-details .specifications-panel h4,
#project-details .breakdown-content h3,
#project-details .gallery-header h3 {
  color: #0a2a66;
  font-weight: 700;
}

/* تحسين تأثير الصور */
#project-details img {
  border-radius: 10px;
}

/* تعديل بسيط للبادجات */
#project-details .status-indicator {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #fff;
}
/* عكس الاتجاه في البلوك */
.project-item {
  display: flex;
  flex-direction: row-reverse; /* يخلي الصورة شمال والنص يمين */
  align-items: stretch;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* الجزء الخاص بالمحتوى */
.project-content {
  direction: rtl; /* يخلي النص من اليمين للشمال */
  text-align: right;
  flex: 1;
  padding: 25px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* الصورة */
.project-visual {
  flex: 1;
  position: relative;
}

/* تعديل العناوين والنصوص */
.project-title {
  color: #0d2c70; /* أزرق غامق */
  font-weight: 700;
}

.project-details p {
  color: #1a2b5c;
  font-weight: 500;
  line-height: 1.8;
}

/* روابط المشروع */
.project-link {
  color: #0d47a1;
  font-weight: 600;
  margin-top: 10px;
}

/* تجاوب مع الشاشات الصغيرة */
@media (max-width: 992px) {
  .project-item {
    flex-direction: column; 
  }
  .project-content {
    text-align: right;
    direction: rtl;
  }
}
/* استيراد خط كايرو */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

.project-item,
.project-item * {
  font-family: "Cairo", sans-serif !important;
  font-weight: 700 !important;/* يجعل كل النصوص بولد */
  letter-spacing: 0.3px;
  color: #0d2c70; 
}
.project-badges.top-right {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 8px;
}

.project-badges i {
  font-size: 1.2rem;       
  color: #004aad;            
  background: #fff;
  border-radius: 50%;
  padding: 6px;             
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, color 0.3s ease;
}

.project-badges i:hover {
  transform: scale(1.1);
  color: #1a66cc;
}
/* ================================
   RTL Styling for Project Details
================================= */

#project-details {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', sans-serif;
}

/* النصوص */
#project-details h1,
#project-details h3,
#project-details h4,
#project-details p,
#project-details span {
  font-family: 'Cairo', sans-serif;
  font-weight: 600; 
  color: #0a2b61; 
}

#project-details .project-header .row {
  flex-direction: row-reverse;
}

#project-details .showcase-grid,
#project-details .technical-gallery .row {
  direction: ltr; 
}

#project-details .project-summary {
  text-align: right;
}

#project-details .achievement-details h5 {
  font-weight: 700;
  color: #0a2b61;
}

#project-details .main-title {
  font-size: 32px;
  color: #0a2b61;
  font-weight: 800;
  margin-bottom: 15px;
}

#project-details img {
  border-radius: 10px;
  object-fit: cover;
}

#project-details .project-banner,
#project-details .visual-showcase {
  text-align: center;
}
.privacy {
  direction: rtl;
  text-align: right;
  font-family: "Cairo", sans-serif;
  font-weight: 500;
  margin-top: 80px;
  margin-bottom: 80px;
}

.privacy .privacy-content .content-section ul li {
  padding-right: 25px;
  padding-left: 0;
}

.privacy .privacy-content .content-section ul li::before {
  right: 8px;
  left: auto;
  content: "•";
  color: var(--accent-color);
  position: absolute;
}

.privacy h1, .privacy h2, .privacy h3 {
  font-weight: 700;
}
.privacy-header {
  display: flex;
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  min-height: 300px;
}

.header-content {
  max-width: 800px;
}

.header-content h1 {
  font-family: "Cairo", sans-serif;
  font-weight: 700;
  margin-bottom: 15px;
}

.header-content .last-updated {
  font-size: 16px;
  color: #888;
  margin-bottom: 10px;
}

.header-content .intro-text {
  font-size: 18px;
  line-height: 1.8;
}
.privacy-header h1 {
  color: #0056b3;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  margin-bottom: 1rem;
}
.privacy {
  direction: rtl;
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
}

.privacy .content-section {
  margin-bottom: 60px;
}

.privacy h1,
.privacy h2 {
  color: #0a4d9e; 
  font-weight: 700;
}

.privacy h3 {
  color: #0d6efd;
  font-weight: 600;
}

.privacy .privacy-header {
  text-align: center;
  margin-bottom: 60px;
}

.privacy .container > div {
  margin-bottom: 40px;
}
.contact-info-cards {
  direction: rtl;
  text-align: right;
}

.contact-info-cards .info-card {
  display: flex;
  flex-direction: row; 
  align-items: center;
  gap: 10px;
}

.contact-info-cards .icon-container {
  min-width: 40px;
  text-align: center;
}

.headerasast {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 15px 0;
  background: transparent;
}

.headerasast-container {
  max-width: 1200px;
  width: 95%;
  display: flex;
  justify-content: space-between; /* اللوجو يمين، الزرار شمال */
  align-items: center;
  padding: 10px 20px;
}

.logo {
  order: 2; /* اللوجو على اليمين */
}

.navmenu {
  order: 3;
}

.navmenu ul {
  list-style: none;
  display: flex;
  gap: 25px;
}

.navmenu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

/* زرار الموبايل مخفي على اللاب */
.mobile-nav-toggle {
  display: none;
  order: 1; /* يظهر على الشمال */
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

@media (max-width: 768px) {
  /* القائمة */
  .navmenu ul {
    display: none; /* مخفية افتراضياً */
    flex-direction: column;
    background: #fff;
    width: 90%; /* تقريباً كامل عرض الشاشة */
    margin: 10px auto; /* توسيط القائمة */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 20px 0; /* مساحة داخلية كبيرة */
  }

  .navmenu.active ul {
    display: flex; /* تظهر عند الضغط */
  }

  /* روابط القائمة */
  .navmenu ul li {
    margin: 12px 0; /* مسافة بين الروابط */
    text-align: center;
  }

  .navmenu ul li a {
    font-size: 20px; /* حجم كبير للقراءة */
    padding: 12px 0;
    display: block;
    color: #333;
  }

  /* زرار ☰ */
  .mobile-nav-toggle {
    display: block;
    font-size: 28px;
    cursor: pointer;
    color: #333;
  }

  .headerasast-container {
    justify-content: space-between;
    align-items: center;
  }
}







/* Fix: منع الصور من الخروج من الـ Column */
.about .about-image {
  position: relative;
  width: 100%;
  overflow: hidden; /* يمنع أي خروج */
}

/* Fix: تعديل مكان الصورة الصغيرة داخل حدود الصورة الأصلية */
.about .about-image .image-overlay {
  bottom: 10px;
  right: 10px;
  width: 40%;
}

/* Fix: تصغير الشارة الزرقاء */
.about .about-image .experience-badge {
  width: 110px;
  height: 110px;
  left: 10px;
  top: 10px;
}

/* Fix: Restrict text width — عشان يبقى مريح للعين */
.about .about-content {
  max-width: 95%;
}

/* Fix: تخفيف طول السطور */
.about .about-content p.lead {
  max-width: 600px;
}


/* Section Padding Balance */
.about.section {
  padding: 60px 0;
}
#about .lead {
  font-family: 'Cairo', sans-serif;
  font-weight: 700; /* Bold */
  color: rgba(0, 0, 0, 0.75);
  font-size: 18px;
  line-height: 1.9;
  max-width: 820px;
  margin: 0 auto;
}

.about .about-content .lead {
  font-family: 'Cairo', sans-serif;
  font-weight: 700; /* Bold */
  font-size: 1.18rem;
  margin-bottom: 1.8rem;
  color: rgba(0, 0, 0, 0.75);
}