/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header / Style two / Style three / Style Four
5. Side Nav Bar 
6. Hidden Sidebar
7. Banner Section / Two / Three
8. Page Title
9. Section Title
10. About Section
11. Services Section
12. Service Detail
13. Specialize Section / Two
14. Process Section
15. Fun Fact Section
16. Fun Fact And Features
17. Projects Section / Two 
18. Product Details
19. Offer Section
20. Team Section
21. Testimonial Section / Two
22. Products Section
23. Video Section
24. FAQ Section
25. FAQ Form Section
26. App Section
27. News Section / Two / Three
28. Blog Section
29. Blog Detail / Style Two
30. Clients Section
31. Contact Section
32. Main Footer
33. Sidebar Page Container
34. Comment Area
35. Comment Form
36. Contact Page Section
37. Coming Soon
38. Login Section
39. Error Section
40. Right to Left Style
41. Box Layout
**********************************************/

/*** 

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

***/

@import url('https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=BenchNine:300,400,700');

@import url('flaticon.css');
@import url('font-awesome.css');
@import url('animate.css');
@import url('jquery.mCustomScrollbar.min.css');
@import url('owl.css');
@import url('jquery.bootstrap-touchspin.css');
@import url('jquery-ui.css');
@import url('jquery.fancybox.min.css');
@font-face{
	font-family: ae;
	src: url('../fonts/ae_AlMateen.ttf');
}
@font-face{
	font-family: cr;
	src: url('../fonts/12\ ae_Cortoba.ttf');
}
@font-face{
	font-family: dh;
	src: url('../fonts/Dahab\ Arabic\ ITF\ Light.otf');
}
@font-face{
	font-family: ha;
	src: url('../fonts/Hacen\ Extender\ X4\ Super\ Fit.ttf');
}
@font-face{
	font-family: co;
	src: url('../fonts/alfont_com_AlFont_com_Co-Headline-Regular.otf');
}
@font-face{
	font-family: cl;
	src: url('../fonts/calibril.ttf');
}
@font-face{
	font-family: clr;
	src: url('../fonts/calibri.ttf');
}
@font-face{
	font-family: clb;
	src: url('../fonts/calibrib.ttf');
}



/*** 

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

 ***/

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

/*** 

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

***/

body {
	
	font-size:14px;
	color:#777777;
	line-height: 28px;
	font-weight:400;
	background:#ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-family: 'dh';
	scroll-behavior: smooth;
}

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

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: 'dh';
}

textarea{
	overflow:hidden;	
	resize: none;
}

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

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

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

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

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

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

.theme-btn{
	display:inline-block;
	text-align: center;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-ms-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}

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

/*Btn Style One*/

.btn-style-one{
	position:relative;
	font-size:16px;
	line-height:30px;
	color:#ffffff;
	padding: 10px 40px;
	text-transform: capitalize;
	font-weight: 400;
	border-radius: 50px;
	background: #053450; 

}

.btn-style-one:hover{
	color: #ffffff;
	-webkit-box-shadow: #D7935C;
	-moz-box-shadow: #D7935C;
	-ms-box-shadow: #D7935C;
	-o-box-shadow: #D7935C;
	box-shadow: #D7935C;
}

.btn-style-one:before{
	position: absolute;
	top: -1px;
	right: -1px;
	left: -1px;
	bottom: -1px;
	content: "";
	border-radius: 0px;
	border:2px solid #D7935C ; 
	transition: all 300ms ease;
	opacity: 0;
}

.btn-style-one:hover:before{
	opacity: 1;
}



/*Btn Style Two*/

.btn-style-two{
	position:relative;
	font-size:16px;
	line-height:20px;
	color:#222222;
	padding: 13px 45px;
	text-transform: capitalize;
	font-weight: 400;
	border-radius: 50px;
	background-color: #ffffff;
	border:2px solid #e19766;
	-webkit-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-moz-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-ms-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-o-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
}

.btn-style-two:hover{
	color: #ffffff;
	border:2px solid #e19766;
	-webkit-box-shadow: #e19766 0 0px 0px 40px inset;
	-moz-box-shadow: #e19766 0 0px 0px 40px inset;
	-ms-box-shadow: #e19766 0 0px 0px 40px inset;
	-o-box-shadow: #e19766 0 0px 0px 40px inset;
	box-shadow: #e19766 0 0px 0px 40px inset;
}

/*Btn Style Three*/

.btn-style-three{
	position:relative;
	font-size:16px;
	line-height:20px;
	color:#ffffff;
	padding: 13px 45px;
	text-transform: capitalize;
	font-weight: 400;
	border-radius: 50px;
	background-color: #222222;
	-webkit-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-moz-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-ms-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-o-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
}

.btn-style-three:hover{
	color: #ffffff;
	-webkit-box-shadow: #e19766 0 0px 0px 40px inset;
	-moz-box-shadow: #e19766 0 0px 0px 40px inset;
	-ms-box-shadow: #e19766 0 0px 0px 40px inset;
	-o-box-shadow: #e19766 0 0px 0px 40px inset;
	box-shadow: #e19766 0 0px 0px 40px inset;
}

/*Btn Style Four*/

.btn-style-four{
	position:relative;
	font-size:16px;
	line-height:20px;
	color:#ffffff;
	padding: 13px 45px;
	text-transform: capitalize;
	font-weight: 400;
	border-radius: 50px;
	background-color: #222222;
	-webkit-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-moz-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-ms-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	-o-box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
	box-shadow: rgba(255, 255, 255, 0) 0 0px 0px 0px inset;
}

.btn-style-four:hover{
	color: #e19766;
	-webkit-box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 40px inset;
	-moz-box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 40px inset;
	-ms-box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 40px inset;
	-o-box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 40px inset;
	box-shadow: rgba(255, 255, 255, 1) 0 0px 0px 40px inset;
}

/*Btn Style Five*/

.btn-style-five{
	position:relative;
	font-size:16px;
	line-height:30px;
	color:#ffffff;
	padding: 10px 45px;
	text-transform: capitalize;
	font-weight: 400;
	border-radius: 50px;
	background-color: #e19766;
}

.btn-style-five:hover{
	color: #ffffff;
	background-color: #222222;
}

/*Btn Style Six*/

.btn-style-six{
	position:relative;
	font-size:16px;
	line-height:30px;
	color:#222222;
	padding: 10px 45px;
	text-transform: capitalize;
	font-weight: 400;
	border-radius: 50px;
	background-color: #ffffff;
}

.btn-style-six:hover{
	color: #ffffff;
	background-color: #e19766;
}

/*Btn Style Seven*/

.btn-style-seven{
	position:relative;
	font-size:16px;
	line-height:30px;
	color:#222222;
	padding: 10px 45px;
	text-transform: capitalize;
	font-weight: 400;
	border-radius: 50px;
	background-color: #ffffff;
}

.btn-style-seven:hover{
	color: #ffffff;
	background-color: #222222;
}

/*Btn Style c*/

.btn-style-eight{
	position:relative;
	font-size:16px;
	line-height:26px;
	color:#e19766;
	padding: 10px 45px;
	text-transform: capitalize;
	font-weight: 400;
	border-radius: 50px;
	border:2px solid #e19766;
	background-color: #ffffff;
}

.btn-style-eight:hover{
	color: #ffffff;
	background-color: #e19766;
}

/*=== List Style One ===*/

.list-style-one{
	position: relative;
}

.list-style-one li{
	position: relative;
	float: left;
	width: 50%;
	font-size: 14px;
	line-height: 28px;
	color: #666666;
	font-weight: 400;
	padding-left: 35px;
}

.list-style-one li:before{
	position: absolute;
	left: 0;
	top: 0;
	font-size: 14px;
	line-height: 28px;
	color: #ffb902;
	content: "\f00c";
	font-family: "FontAwesome";
}

/*=== 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: #222222;
	font-weight: 500;
	padding-left: 35px;
	margin-bottom: 15px;
	font-family: 'dh';
}

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

.theme_color{
	color:#25262c;
}

.pull-right{
	float: right;
}

.pull-left{
	float: left;
}

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

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

/*** 

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

***/

.scroll-to-top{
	position:fixed;
	bottom:80px;
	right:20px;
	width:50px;
	height:50px;
	color:#ffffff;
	font-size:40px;
	line-height:50px;
	text-align:center;
	z-index:100;
	cursor:pointer;
	background:#053450;
	display:none;
	border-radius: 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;		
}

.scroll-to-top:hover{
	background:#e19766;
	color: #053450;
}



/*** 

====================================================================
	whatsapp style
====================================================================

***/
.whatsapp-button {
	display: inline-block;
	text-decoration: none;
	background-color: #25d366;
	color: #ffffff;
	padding: 10px 20px;
	border-radius: 50px;
	transition: background-color 0.3s;
	position: fixed;
	bottom:30px;
	right:20px;
	font-size:20px;
	line-height:10px;
	z-index: 100;
	
  }
  
  .whatsapp-button:hover {
	background-color: #128c7e;
  }

/*** 

====================================================================
SMOOTH SCROLLING
====================================================================

***/
/* Smooth scrolling */
html{
  scroll-behavior: smooth;
}

/* Offset anchor positions so sticky header doesn't cover titles */
:root{
  --alou-scroll-offset: 110px; /* adjust if needed */
}

/* Apply offset to all sections that can be anchored */
#services, #about, #goals, #contact{
  scroll-margin-top: var(--alou-scroll-offset);
}



























  












































/*===================================
		logo design Header Style Three
===================================*/

.header-style-three{
	position: relative;
	background-color: #ffffff;
}

.header-style-three .logo-box:before{
	position: absolute;
	top: 0;
	margin-right: -230px;
	right: 100%;
	height: 100%;
	width: 1000%;
	background-color: rgb(14, 33, 74);
	content: "";
	transform:skew(40deg);
}


.header-style-three .inner-container{
	position: relative;
}

.header-style-three .nav-outer{
	float: right;
}

.header-style-three .outer-box{
	position: relative;
	float: right;
	padding: 35px 0;
}

.header-style-three .main-menu .navigation > li > a{
	color: rgb(14, 33, 74); 
}



.header-style-three .main-menu .navigation > li > a:before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	height:0px;
	width: 2px;
	background-color: #e19766;
	content: ""; 
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.header-style-three .main-menu .navigation > li.current > a:before,
.header-style-three .main-menu .navigation > li:hover > a:before{
	height: 30px;
}


.header-style-three .outer-box{
	margin-left: 80px;
}

.header-style-three .nav-toggler{
	position: relative;
	height: 30px;
	width: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 15px;
	color: #222222;
	font-weight: 400;
	background-color: #e19766;
	border-radius: 5px;
	cursor: pointer;
	transition: all 300ms ease;
}

.header-style-three .nav-toggler:hover{
	background-color: #e19766;
	color: #ffffff;
}


































/*** 

====================================================================
	Side Nav Bar
====================================================================

***/

.sidenav-bar{
	position:fixed;
	left:-350px;
	top:0px;
	width: 350px;
	height:100%;
	overflow-y:auto;
	background:#111111;
	z-index: 99999;
	transition: all 500ms ease;	
}

.active-side-nav .sidenav-bar{
	left: 0;
}

.sidenav-bar .inner-box{
	position: relative;
	padding: 50px 30px;
}

.sidenav-bar:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-image: url(../images/icons/icon-dots-dark.jpg);
	background-repeat: repeat;
	background-position: center;
	content: "";
}

.sidenav-bar .upper-box{
	position: relative;
	margin-bottom: 50px;
}

.sidenav-bar .upper-box .logo a{
	position: relative;
}

.sidenav-bar .cross-icon{
	position: absolute;
	right: 0;
	top: 15px;
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	color: #222222;
	font-weight: 400;
	background-color: #ffffff;
	cursor: pointer;
	transition: all 300ms ease;
}

.sidenav-bar .cross-icon:hover{
	background-color: #e19766;
	color: #ffffff;
}

.sidenav-bar .side-nav{
	position: relative;
	margin-bottom: 50px;
}

.sidenav-bar .side-nav .navigatio{
	position: relative;
}

.sidenav-bar .side-nav .navigation > li,
.sidenav-bar .side-nav .navigation > li > ul > li{
	position:relative;
	display:block;
}

.sidenav-bar .side-nav .navigation > li > a{
	position:relative;
	display:block;
	line-height:30px;
	padding:10px 0px;
	color:#ffffff;
	font-weight:400;
	font-size:16px;
	text-transform:capitalize;
	transition: all 300ms ease;
}

.sidenav-bar .side-nav .navigation > li > ul > li > a,
.sidenav-bar .side-nav .navigation > li > ul > li > ul > li > a{
	position:relative;
	display:block;
	line-height:20px;
	padding:10px 20px;
	color:#ffffff;
	font-weight:400;
	font-size:16px;
	text-transform:capitalize;
	transition: all 300ms ease;
}

.sidenav-bar .side-nav .navigation > li > ul > li,
.sidenav-bar .side-nav .navigation > li > ul > li > ul > li{
	margin-bottom:0px;	
}

.sidenav-bar .side-nav .navigation > li > ul > li:last-child,
.sidenav-bar .side-nav .navigation > li > ul > li > ul > li:last-child{
	margin:0px;
}

.sidenav-bar .side-nav .navigation > li:hover > a,
.sidenav-bar .side-nav .navigation > li > ul > li:hover > a,
.sidenav-bar .side-nav .navigation > li.current > a,
.sidenav-bar .side-nav .navigation > li > ul > li.current > a{
	color:#e19766;	
}

.sidenav-bar .side-nav .navigation > li.dropdown > a{
	padding-right:30px;	
}

.sidenav-bar .side-nav .navigation > li.dropdown > a:before{
	font-family: 'FontAwesome';
	content: "\f105";
	position:absolute;
	right:0px;
	top: 10px;
	line-height: 30px;
	display:block;
	font-size:16px;
	z-index:5;
	font-weight:300;
}

.sidenav-bar .side-nav .navigation > li.dropdown.active > a:before{
	content: "\f107";
}

.sidenav-bar .side-nav .navigation > li.dropdown > ul,
.sidenav-bar .side-nav .navigation > li.dropdown > ul > li.dropdown > ul{
	position:relative;
	display:block;
	left:0%;
	top:0px;
	width:100%;
	z-index:100;
	padding:10px 0px;
}

.sidenav-bar .side-nav .navigation li.dropdown .dropdown-btn{
	position:absolute;
	right:0px;
	top:10px;
	width:34px;
	height:30px;
	border:1px solid #e0e0e0;
	text-align:center;
	font-size:16px;
	line-height:28px;
	color:#ffffff;
	cursor:pointer;
	z-index:5;
	display:none;
}

.sidenav-bar .subscribe-form{
	position: relative;
}

.sidenav-bar .subscribe-form h5{
	position: relative;
	display: block;
	font-size: 20px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 25px;
}

.sidenav-bar .subscribe-form form{
	position: relative;
}

.sidenav-bar .subscribe-form input[type="text"],
.sidenav-bar .subscribe-form input[type="email"]{
	position: relative;
	display: block;
	width: 100%;
	font-size: 14px;
	line-height: 30px;
	color: #999999;
	font-weight: 400;
	padding: 10px 30px;
	background-color: #000000;
	border-radius: 30px;
	transition: all 300ms ease;
}

.sidenav-bar .subscribe-form button,
.sidenav-bar .subscribe-form input[type="submit"]{
	position: relative;
	display: block;
	width: 100%;
	margin-top: 10px;
	height: 50px;
	font-size: 16px;
	line-height: 30px;
	color: #000000;
	font-weight: 600;
	padding: 10px 30px;
	text-transform: uppercase;
}

.sidenav-bar .subscribe-form button:hover,
.sidenav-bar .subscribe-form input[type="submit"]:hover{
	color: #ffffff;
}

.form-back-drop{
	position:fixed;
	right:0px;
	top:0px;
	width:100%;
	height:100%;
	opacity:0;
	background:rgba(0,0,0,0.70);
	visibility:hidden;
	z-index:99999;
	transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-webkit-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;	
}

.active-side-nav .form-back-drop{
	opacity:1;
	visibility:visible;
}

.mCSB_inside>.mCSB_container{
	margin-right: 0;
}
























/***

====================================================================
	Hidden Sidebar style
====================================================================

***/

.hidden-bar{
	position: fixed;
    left: -500px;
    top: 0px;
    max-width: 100%;
	height:100%;
	overflow-y:auto;
    z-index: 99999;
    opacity: 0;
	background-color: #222222;
    visibility: hidden;
    -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;
}

.active-side-nav .hidden-bar{
	left:0px;
	opacity:1;
	visibility:visible;
}

.hidden-bar .inner-box{
	position:relative;
	background-color: #222222;
	padding:55px 30px 50px;
}

.hidden-bar .inner-box .cross-icon{
	position:absolute;
	right:30px;
	top:30px;
	cursor:pointer;
	color:#ffffff;
	font-size:20px;
}

.hidden-bar .inner-box h2{
	position:relative;
	font-size:28px;
	font-weight:500;
	line-height:1.2em;
	color:#ffffff;
	margin-bottom:20px;
}

/*Appointment Form*/

.hidden-bar .appointment-form{
	position:relative;
}

.hidden-bar .appointment-form .form-group{
	position:relative;
	margin-bottom:15px;
}

.hidden-bar .appointment-form input[type="text"],
.hidden-bar .appointment-form input[type="email"],
.hidden-bar .appointment-form textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:23px;
	padding:10px 25px;
	height:45px;
	color:#ffffff;
	font-size:16px;
	border:1px solid rgba(255,255,255,0.10);
	background:none;
	transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
}

.hidden-bar .appointment-form input::placeholder,
.hidden-bar .appointment-form textarea::placeholder{
	color:#bdbdbd;
}

.hidden-bar .appointment-form input:focus,
.hidden-bar .appointment-form textarea:focus{
	border-color: #ffffff;
}

.hidden-bar .appointment-form textarea{
	height:135px;
	resize:none;
}

.hidden-bar .appointment-form .form-group button{
	margin-top:10px;
	display: block;
	width: 100%;
	border-radius: 0;
	font-weight: 700;
	background-color: #ffffff;
	color: #222222;
}

.hidden-bar .appointment-form .form-group button:hover{
	color: #ffffff;
}

.contact-info-box{
	position:relative;
	padding-top:20px;
}

.contact-info-box .info-list{
	position:relative;
	padding-bottom:18px;
	margin-bottom:25px;
}

.contact-info-box .info-list li{
	position:relative;
	color:#ffffff;
	font-size:18px;
	font-weight:500;
	margin-bottom:5px;
}

.contact-info-box .info-list:before{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	width:50px;
	height:1px;
	background-color:#ffffff;
}

.contact-info-box .social-list{
	position:relative;
}

.contact-info-box .social-list li{
	position:relative;
	width:50%;
	float: left;
	margin-bottom:6px;
	display:inline-block;
}

.contact-info-box .social-list li a{
	position:relative;
	font-size:15px;
	font-weight:500;
	color:rgba(255,255,255,0.50);
	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;
}

.contact-info-box .social-list li a:hover{
	color:rgba(255,255,255,0.80);
}

.mCSB_inside>.mCSB_container{
	margin-right: 0;
}












































/*** 

====================================================================
				Sticky Header
====================================================================

***/

.sticky-header{
    position: fixed;
    visibility: hidden;
    opacity: 0;
    left: 0px;
    top: 0px;
    width: 100%;
    padding: 0px 0px;
    z-index: -1;
    background: #ffffff;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.10);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.10);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,0.10);
    -o-box-shadow: 0 0 15px rgba(0,0,0,0.10);
    box-shadow: 0 0 15px rgba(0,0,0,0.10);
    -webkit-transition: top 300ms ease;
    -moz-transition: top 300ms ease;
    -ms-transition: top 300ms ease;
    -o-transition: top 300ms ease;
    transition: top 300ms ease;
}

.fixed-header .sticky-header{
	opacity:1;
	z-index: 9999;
	visibility:visible;
}

.fixed-header .sticky-header .logo{
	padding: 10px 0;
}

.sticky-header .main-menu .navigation > li{
	margin-left: 30px !important;
	padding: 0;
	margin-right: 0;
	background-color: transparent;
}

.sticky-header .main-menu .navigation > li > a:before,
.sticky-header .main-menu .navigation > li:after{
	display: none !important;
}

.sticky-header .main-menu .navigation > li > a{
	padding:20px 0px !important;
	line-height:30px;
	font-size:16px;
	font-weight:400;
	color:rgb(14, 33, 74);
	text-transform:capitalize;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li.current-menu-item > a{
	opacity:1;
	color: #e19766;
	background-color: #ffffff;
}

.sticky-header .main-menu .navigation > li:before,
.sticky-header .main-menu .navigation > li.dropdown > a:after{
	display: none;
}

.sticky-header .main-menu .navigation > li.dropdown:hover > ul{
	margin-top: 0;
}

.header-style-four.fixed-header .header-lower{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	background-color: rgba(0,0,0,0.80);
}

.header-style-four.fixed-header .logo-box .logo{
	padding: 10px 0;
}

.header-style-four.fixed-header .main-menu .navigation > li > a{
	padding: 30px 0;
}

.header-style-four.fixed-header .search-box-btn{
	top: 5px;
}

.header-style-four.fixed-header .search-box-outer .dropdown-menu{
	top: 0 !important;
}





























































/*** 

====================================================================
		Side text Banner Section Three
====================================================================

***/

.banner-section-three{
	position: relative;
	z-index: 99;
}

.banner-section-three .banner-carousel-two{
	z-index: 99;
}


.banner-section-three .slide-item{
	background-repeat: no-repeat;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding:240px 0;
}

.banner-carousel-two .content-box{
	position: relative;
}

.banner-carousel-two .content-box .inner-box{
	position: relative;
	float: right;
	max-width: 500px;
	background-color: rgba(16, 29, 56, 0.5);
	padding: 70px 70px 60px;
	padding-right: 30px;
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-o-transform: translateX(100px);
	transform: translateX(100px);
}

.banner-carousel-two .content-box .inner-box:before{
	position: absolute;
	top: 0;
	left: 100%;
	height: 100%;
	width: 1000%;
	background-color: rgba(16, 29, 56, 0.5);
	content: "";
}

.banner-carousel-two .active .content-box .inner-box{
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	-webkit--moz-transition-delay: 300ms;
	-moz--moz-transition-delay: 300ms;
	-ms--moz-transition-delay: 300ms;
	-o--moz-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
}


.banner-carousel-two .content-box .title{
	position: relative;
	display: block;
	font-size: 24px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 22px;
	opacity: 0;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 100ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px);
}

.banner-carousel-two .active .content-box .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: 1500ms;
	-moz-transition-delay: 1500ms;
	-ms-transition-delay: 1500ms;
	-o-transition-delay: 1500ms;
	transition-delay: 1500ms;
}

.banner-carousel-two .content-box h2{
	position: relative;
	display: block;
	font-size: 48px;
	line-height: 1.2em;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 20px;
	opacity: 0;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 100ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px);
}

.banner-carousel-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: 700ms;
	-moz-transition-delay: 700ms;
	-ms-transition-delay: 700ms;
	-o-transition-delay: 700ms;
	transition-delay: 700ms;
}

.banner-carousel-two .content-box .text{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 26px;
	color: #ffffff;
	font-weight: 400;
	margin-bottom: 20px;
	opacity: 0;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 100ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px);
}

.banner-carousel-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: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
}

.banner-carousel-two .link-box{
	position: relative;
	opacity: 0;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 100ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
	-webkit-transform: translateY(50px);
	-moz-transform: translateY(50px);
	-ms-transform: translateY(50px);
	-o-transform: translateY(50px);
	transform: translateY(50px);
}

.banner-carousel-two .active .link-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: 1500ms;
	-moz-transition-delay: 1500ms;
	-ms-transition-delay: 1500ms;
	-o-transition-delay: 1500ms;
	transition-delay: 1500ms;
}

.banner-carousel-two .link-box a{
	display: inline-block;
	font-size: 16px;
	line-height: 30px;
	color: #e19766;
	font-weight: 400;
	padding: 0;
	transition: all 300ms ease;
}

.banner-carousel-two .link-box a:hover{
	color: #ffffff;
}


.banner-section-three .contact-info{
	position: absolute;
    left: 45px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: left;
    bottom: 75px;
}

.banner-section-three .contact-info li{
	position: relative;
	float: left;
	margin-right: 35px;
	font-size: 14px;
	line-height: 30px;
	color: #222222;
	font-weight: 400;
}

.banner-section-three .contact-info li span{
	position: relative;
	float: left;
	font-size: 14px;
	line-height: 30px;
	color: #aaaaaa;
	font-weight: 400;
}

.banner-section-three .contact-info li a{
	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;
}

.banner-section-three .contact-info li a:hover{
	color: #e19766;
}

.banner-carousel-two .owl-nav{
	position: absolute;
	max-width: 1170px;
	padding: 0 20px;
	width: 180%;
	text-align: right;
	margin: 0 auto;
	left: 0;
	right: 0;
	bottom: -30px;
	height: 0;
}

.banner-carousel-two .owl-next,
.banner-carousel-two .owl-prev{
	position: relative;
	display: inline-block;
	padding-left: 25px;
	font-size: 14px;
	color: #bbbbbb;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 30px;
	padding-top: 6px;
	background-color: transparent;
	z-index: 9;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.banner-carousel-two .owl-next:hover,
.banner-carousel-two .owl-prev:hover{
	color: #e19766;
}

.banner-carousel-two .owl-next:before,
.banner-carousel-two .owl-prev:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 40px;
	width: 60px;
	border: 2px solid #bbbbbb;
	border-right: 0;
	content: "";
	z-index: -1;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.banner-carousel-two .owl-next:hover:before,
.banner-carousel-two .owl-prev:hover:before{
	border-color: #e19766;
}

.banner-carousel-two .owl-next:before{
	left: auto;
	right: -25px;
	border: 2px solid #bbbbbb;
	border-left: 0;
}

.banner-carousel-two .owl-next span{
	margin-left: 5px;
}

.banner-carousel-two .owl-prev span{
	margin-right: 5px;
}

.banner-section-three .bottom-box{
	position: relative;
	background-color: rgb(14, 33, 74);
}

.banner-section-three .bottom-box .outer-box{
	position: relative;
	padding: 35px 0;
}

.banner-section-three .bottom-box .outer-box:before{
	position: absolute;
	top: 0;
	margin-left: -300px;
	left: 100%;
	height: 100%;
	width: 1000%;
	background-color: #ffffff;
	content: "";
	transform:skew(40deg);
}

.banner-section-three .social-links{
	position: relative;
    z-index: 1;
}

.banner-section-three .social-links li{
	position: relative;
	float: left;
	margin-right: 55px;
	font-size: 13px;
	line-height: 30px;
	color: #ffffff;
	font-weight: 500;
	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;
}

.banner-section-three .social-links li span{
	position: relative;
	float: left;
	font-size: 14px;
	line-height: 30px;
	color: #999999;
	font-weight: 500;
	margin-right: 15px;
	-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-three .social-links li 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;
}

.banner-section-three .social-links li a:hover span,
.banner-section-three .social-links li a:hover{
	color: #e19766;
}

























































/*** 

====================================================================
	Section Title
====================================================================

***/

.sec-title{
	position: relative;
	margin-bottom: 75px;
}

.sec-title .float-text{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	font-size: 72px;
	line-height: 1em;
	color: #2f2f2f;
	font-weight: 700;
	text-transform: uppercase;
	opacity: .10;
	font-family: "dh";
}

.sec-title h2{
	position: relative;
	display: block;
	font-size: 30px;
	line-height: 40px;
	color: #2f2f2f;
	font-weight: 500;
}

.sec-title.light .float-text{
	color: #f2f2f2;
	opacity: 0.10;
}

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

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

































/*** 

====================================================================
			about services Specialize Section Two
====================================================================

***/

.specialize-section-two{
	position: relative;
	padding: 100px 0;
}

.specialize-section-two .title-column{
	position: relative;
}

.specialize-section-two .title-column .sec-title{
	margin-bottom: 50px;
}

.specialize-section-two .title-column .text-box{
	position: relative;
}

.specialize-section-two .title-column .text-box h4{
	position: relative;
	display: block;
	font-size: 24px;
	line-height: 1.2em;
	color: #e19766;
	font-weight: 500;
	margin-bottom: 30px;
}

.specialize-section-two .title-column .text-box p{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 30px;
	color: #777777;
	font-weight: 400;
	margin-bottom: 30px;
}

.specialize-section-two .title-column .link-box{
	position: relative;
}

.specialize-section-two .title-column .link-box a{
	position: relative;
	display: inline-block;
	font-size: 18px;
	line-height: 30px;
	color: #222222;
	font-weight: 500;
	font-family: "dh";
}

.specialize-section-two .carousel-column{
	position: relative;
}

.specialize-section-two .carousel-column .inner-column{
	position: relative;
	padding-left: 40px;
}

.specialize-section-two .carousel-column .carousel-outer{
	position: relative;
	padding-left: 160px;
}

.specialize-section-two .thumbs-carousel{
	position: absolute;
    left: 75px;
    top: -64px;
	transform: rotate(90deg);
    transform-origin: left;
    max-width: 590px;
    margin: 0 auto;
}

.specialize-section-two .thumbs-carousel .thumb-box{
	position: relative;
	cursor: pointer;
}

.specialize-section-two .thumbs-carousel .thumb-box figure{
	position: relative;
	margin-bottom: 0;
}

.specialize-section-two .thumbs-carousel .thumb-box .overlay{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

.specialize-section-two .thumbs-carousel .thumb-box .overlay:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #ff9f14;
	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;
}

.specialize-section-two .thumbs-carousel .thumb-box:hover .overlay:before{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);	
}

.specialize-section-two .thumbs-carousel .thumb-box .overlay .icon{
	position: absolute;
	height: 40px;
	width: 40px;
	left: 50%;
	top: 50%;
	margin-left: -20px;
	margin-top: -20px;
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    color: #222222;
	-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;
}

.specialize-section-two .thumbs-carousel .thumb-box:hover .overlay .icon{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	transition-delay: 300ms;
}

.specialize-section-two .carousel-outer .thumbs-carousel img{
	transform: rotate(-90deg);
	width: 130px;
	height: auto;
}

.carousel-outer .thumbs-carousel .owl-nav{
    position: absolute;
    left: 96%;
    bottom: -442%;
    transform: rotate(-90deg);
    transform-origin: left;
    min-width: 300px;
}

.carousel-outer .thumbs-carousel .owl-next,
.carousel-outer .thumbs-carousel .owl-prev{
	position: relative;
	display: inline-block;
	padding-left: 25px;
	font-size: 14px;
	color: #bbbbbb;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 30px;
	padding-top: 6px;
	background-color: #ffffff;
	z-index: 9;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.carousel-outer .thumbs-carousel .owl-next:hover,
.carousel-outer .thumbs-carousel .owl-prev:hover{
	color: #e19766;
}

.carousel-outer .thumbs-carousel .owl-next:before,
.carousel-outer .thumbs-carousel .owl-prev:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 40px;
	width: 60px;
	border: 2px solid #bbbbbb;
	border-right: 0;
	content: "";
	z-index: -1;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.carousel-outer .thumbs-carousel .owl-next:hover:before,
.carousel-outer .thumbs-carousel .owl-prev:hover:before{
	border-color: #e19766;
}

.carousel-outer .thumbs-carousel .owl-next:before{
	left: auto;
	right: -25px;
	border: 2px solid #bbbbbb;
	border-left: 0;
}

.carousel-outer .thumbs-carousel .owl-next span{
	margin-left: 5px;
}

.carousel-outer .thumbs-carousel .owl-prev span{
	margin-right: 5px;
}

.specialize-section-two.alternate .title-column{
	order: 12;
}

.specialize-section-two.alternate .carousel-outer .thumbs-carousel .owl-nav{
    position: absolute;
    left: 96%;
    bottom: auto;
    top: -442%;
    transform: rotate(-90deg);
}

.specialize-section-two.alternate .carousel-column .inner-column{
	padding-left: 0;
	padding-right: 40px;
}































/***

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

***/

.video-section{
	position: relative;
}

.video-section .outer-box{
	position: relative;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 100px 0;
}

.video-section .outer-box:before{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #053450;
	opacity: 0.80;
	content: "";
}

.video-section .content-column{
	position: relative;
	order: 12;
}

.video-section .content-column .inner-column{
	position: relative;
	padding: 35px 35px 0px 40px;
}

.video-section .content-column .sec-title{
	margin-bottom: 22px;
}

.video-section .content-column .title{
	position: relative;
	display: block;
	font-size: 18px;
	line-height: 25px;
	color: #e19766;
	font-weight: 400;
	margin-bottom: 30px;
}

.video-section .content-column .text{
	position: relative;
	display: block;
	font-family: dh; 
	text-align: justify; 
	font-size: 18px; 
	direction: rtl; 
	font-weight: 50; 
	justify-content: right;
	color: white;
}

.video-section .video-column .inner-column{
	position: relative;
	padding-left: 50px;
	padding-top: 90px;
}

.video-section .video-column .video-box{
	position: relative;
}

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

.video-section .video-column .video-box .image img{
	display: block;
	width: 100%;
	height: auto;
}

.video-section .video-column .video-box .link{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	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;
}

.video-section .video-column .video-box .link:hover{
	background-color: rgba(0,0,0,0.50);
}

.video-section .video-column .video-box .link .icon{
	position: absolute;
	left: 50%;
	top: 50%;
	height: 60px;
	width: 60px;
	background-color: #333333;
	padding-left: 4px;
	font-size: 18px;
	color: #e19766;
	border-radius: 50%;
	text-align: center;
	line-height: 60px;
	margin-top: -30px;
	margin-left: -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;
}

.video-section .video-column .video-box .link:hover .icon{
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}





































/***

==================================================================
		Contact Section
==================================================================

***/

.contact-section{
	position: relative;
	padding:100px 0;
	background-color: #f9f9f9;
}

.contact-section .sec-title{
	margin-bottom: 40px;
}

.contact-section .inner-container{
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 15px;
}

.contact-section .info-column{
	position: relative;
}

.contact-section .info-column .inner-column{
	position: relative;
}

.contact-section .info-column h4{
	position: relative;
	font-size: 20px;
	line-height: 1.2em;
	color: #2f2f2f;
	font-weight: 500;
	margin-bottom: 25px;
}

.contact-section .info-column .contact-info{
	position: relative;
}

.contact-section .info-column .contact-info li{
	position: relative;
	display: block;
	font-size: 14px;
	line-height: 28px;
	color: #777777;
	font-weight: 400;
	margin-bottom: 28px;
}

.contact-section .info-column .contact-info li a{
	display: inline-block;
	color: #777777;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.contact-section .info-column .contact-info li a:hover{
	color: #e19766;
}

.contact-section .form-column{
	position: relative;
}

.contact-section .form-column .inner-column{
	margin-top: -20px;
}

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

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

.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="email"],
.contact-form .form-group input[type="url"],
.contact-form .form-group textarea,
.contact-form .form-group select{
	position: relative;
    display: block;
    width: 100%;
    font-size: 13px;
    color: #777777;
    line-height: 19px;
    padding: 10px 0px;
    background-color: transparent;
    font-weight: 400;
    height: 40px;
    border-bottom: 1px solid #e1e1e1;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

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

.contact-form .form-group textarea{
	height: 90px;
	resize: none;
}

.contact-form .form-group button{
	padding: 15px 50px;
	line-height: 20px;
	text-transform: uppercase;
}

.contact-form .form-group label.error{
	color: #ff0000;
}





.contact-section .consultant-form{
	position: relative;
}

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

.consultant-form .form-group input[type="text"],
.consultant-form .form-group input[type="email"],
.consultant-form .form-group input[type="url"],
.consultant-form .form-group textarea,
.consultant-form .form-group select{
	position: relative;
    display: block;
    width: 100%;
    font-size: 13px;
    color: #777777;
    line-height: 19px;
    padding: 10px 0px;
    background-color: transparent;
    font-weight: 400;
    height: 40px;
    border-bottom: 1px solid #e1e1e1;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

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

.consultant-form .form-group textarea{
	height: 90px;
	resize: none;
}

.consultant-form .form-group button{
	padding: 15px 50px;
	line-height: 20px;
	text-transform: uppercase;
}

.consultant-form .form-group label.error{
	color: #ff0000;
}




























































































/* ===============================
   LOCAL ARABIC FONTS
================================ */

@font-face {
  font-family: dh;
  src: url('../fonts/Dahab Arabic ITF Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: ha;
  src: url('../fonts/Hacen Extender X4 Super Fit.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


/* ===============================
   SERVICES SECTION
================================ */

.services-section {
  padding: 80px 0;
  background: #f9f9fb;
  direction: rtl;
  font-family: ha, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* SECTION TITLE */

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-family: dh, system-ui, sans-serif;
  font-size: 36px;
  font-weight: 300;
  color: #153427;
}


/* ===============================
   GRID LAYOUT
================================ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}


/* ===============================
   SERVICE CARD
================================ */

.service-box {
  background-color: #ffffff;
  padding: 35px 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);

  transition:
    background-color 0.6s ease,
    box-shadow 0.6s ease;
}

/* HOVER */

.service-box:hover {
  background-color: #153427;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}


/* ===============================
   ICON
================================ */

.service-box i {
  font-size: 36px;
  color: #766fb2;
  margin-bottom: 20px;
  transition: color 0.6s ease;
}

.service-box:hover i {
  color: #ffffff;
}


/* ===============================
   TITLE
================================ */

.service-box h3 {
  font-family: dh, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 15px;
  color: #153427;
  transition: color 0.6s ease;
}

.service-box:hover h3 {
  color: #ffffff;
}


/* ===============================
   TEXT
================================ */

.service-box p {
  font-family: dh, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  transition: color 0.6s ease;
}

.service-box:hover p {
  color: #f1f1f1;
}


/* ===============================
   RESPONSIVE
================================ */

/* TABLET */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE */
@media (max-width: 576px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .section-title h2 {
    font-size: 28px;
  }
}









/* ===============================
   GOALS SECTION
================================ */

.goals-section {
  padding: 90px 0;
  background: #ffffff;
  direction: rtl;
  font-family: dh, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* SECTION TITLE */

.goals-section .section-title {
  text-align: center;
  margin-bottom: 55px;
}

.goals-section .section-title h2 {
  font-family: dh, system-ui, sans-serif;
  font-size: 36px;
  font-weight: 300;
  color: #153427;
  text-decoration: underline;
}


/* ===============================
   GOALS GRID
================================ */

.goals-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 25px;
}


/* ===============================
   GOAL CARD
================================ */

.goal-box {
  background-color: #f9f9fb;
  border-radius: 14px;
  padding: 40px 25px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);

  transition:
    background-color 0.7s ease,
    box-shadow 0.7s ease;
}

/* HOVER */

.goal-box:hover {
  background-color: #153427;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}


/* ===============================
   ICON
================================ */

.goal-box i {
  font-size: 34px;
  color: #766fb2;
  margin-bottom: 18px;
  transition: color 0.7s ease;
}

.goal-box:hover i {
  color: #ffffff;
}


/* ===============================
   TEXT
================================ */

.goal-box h3 {
  font-family: dh, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: #153427;
  transition: color 0.7s ease;
}

.goal-box:hover h3 {
  color: #ffffff;
}


/* ===============================
   RESPONSIVE
================================ */

/* TABLET */
@media (max-width: 992px) {
  .goals-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* MOBILE */
@media (max-width: 576px) {
  .goals-grid {
    grid-template-columns: 1fr;
  }

  .goals-section .section-title h2 {
    font-size: 28px;
  }
}
.goal-box {
  background-color: #f9f9fb;
  border-radius: 14px;
  padding: 40px 25px;
  text-align: center;

  border: 1.5px solid rgba(21, 52, 39, 0.25); /* GREEN BORDER */

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);

  transition:
    background-color 0.7s ease,
    box-shadow 0.7s ease,
    border-color 0.7s ease;
}















/* =====================================================
   NAVBAR BACKGROUND – FORCE GREEN
   ===================================================== */
.header,
.header.header--default,
.header.header--home-4,
.header[data-sticky="true"] {
  background-color: #153427 !important;
}

/* Remove any bottom borders / lines (often yellow in themes) */
.header,
.header *,
.header.line {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* =====================================================
   MENU LINKS – RESET ANY EXISTING UNDERLINES (YELLOW)
   ===================================================== */
.header .menu li a {
  position: relative;
  color: #ffffff !important;
  text-decoration: none !important;
  background-image: none !important;
}

/* Kill theme underline pseudo-elements */
.header .menu li a::before {
  content: none !important;
}

/* =====================================================
   PURPLE UNDERLINE (ON HOVER ONLY)
   ===================================================== */
.header .menu li a::after {
  content: "";
  position: absolute;
  right: 50%;              /* RTL-friendly */
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #766fb2; /* PURPLE */
  opacity: 0;
  transition:
    width 0.35s ease,
    right 0.35s ease,
    opacity 0.35s ease;
}

/* Hover underline */
.header .menu li a:hover::after {
  width: 100%;
  right: 0;
  opacity: 1;
}

/* =====================================================
   ICONS & SOCIAL – FORCE WHITE
   ===================================================== */
.header i,
.header svg,
.header svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Hover fade (no color change) */
.header a:hover {
  opacity: 0.8;
}

/* =====================================================
   MOBILE SAFETY
   ===================================================== */
@media (max-width: 991px) {
  .header {
    background-color: #153427 !important;
  }

  .header .menu li a::after {
    bottom: -4px;
  }
}
/* =====================================================
   SOCIAL ICONS – PURPLE ON HOVER
   ===================================================== */

/* Default state */
.ps-list--social li a i,
.header__actions a i,
.header__actions svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  transition: color 0.35s ease, fill 0.35s ease, opacity 0.35s ease;
}

/* Hover state */
.ps-list--social li a:hover i,
.header__actions a:hover i,
.header__actions a:hover svg {
  color: #766fb2 !important;
  fill: #766fb2 !important;
  opacity: 1;
}




















/* video section*/
/* =========================================
   ABOUT SECTION – FINAL PRODUCTION VERSION
   ========================================= */

/* Section base */
#about.about-section-fixed .about-bg {
  background-size: cover;
  background-position: center;
  padding: 55px 0;
  position: relative;
  overflow: hidden;
}

/* Premium dark overlay */
#about.about-section-fixed .about-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 70% 50%,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.65) 100%
  );
}

#about.about-section-fixed .auto-container {
  position: relative;
  z-index: 2;
}

/* Centering wrapper */
#about .about-center-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Glass card */
#about .about-glass-card.about-glass-card--center {
  width: min(880px, 92vw);
  border-radius: 22px;
  background: rgba(8, 10, 12, 0.62);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 35px 90px rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 34px 56px;
}

/* Remove any theme fading */
#about .about-glass-card,
#about .about-glass-card * {
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Title – RIGHT ALIGNED */
#about .about-title {
  font-family: dh;
  font-size: 44px;
  font-weight: 100;
  margin: 0 0 14px 0;
  color: #ffffff !important;
  text-align: center;
}

/* Body text – RIGHT ALIGNED */
#about .about-text,
#about .about-text p {
  font-family: dh;
  font-size: 16px;
  font-weight: 100;
  line-height: 2.05;
  color: rgba(255,255,255,0.92) !important;
  text-align: right;
  margin: 0;
}

/* Paragraph spacing */
#about .about-text p {
  margin-bottom: 14px;
}

/* Elegant dividers */
#about .about-divider {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin: 12px 0 16px;
}

/* Mobile */
@media (max-width: 991px) {
  #about.about-section-fixed .about-bg {
    padding: 40px 0;
  }

  #about .about-glass-card.about-glass-card--center {
    padding: 26px 22px;
  }

  #about .about-title {
    font-size: 34px;
    margin-bottom: 12px;
  }

  #about .about-text,
  #about .about-text p {
    font-size: 15px;
  }
}






/* =========================================
   CONTACT SECTION – FINAL (DH ONLY / FULL RTL)
========================================= */

.contact-section--pro {
  padding: 60px 0;
  background: #ffffff;
  direction: rtl;
  unicode-bidi: embed;
  font-family: dh, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: right;
}

/* TITLES */

.contact-title {
  font-size: 40px;
  font-weight: 300;
  text-align: center; /* titles stay centered */
  color: #153427;
  margin-bottom: 10px;
}

.contact-subtitle {
  text-align: center; /* subtitle centered */
  color: #666;
  font-weight: 300;
  margin-bottom: 35px;
  line-height: 1.9;
}


/* ============================
   CARDS
============================ */

.contact-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(21, 52, 39, 0.14);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
  padding: 26px 22px;
  height: 100%;
  position: relative;
  text-align: right;
}

.contact-card-title {
  text-align: center;
  font-weight: 300;
  color: #153427;
  margin-bottom: 18px;
}


/* ============================
   PATTERN BACKGROUND (FORM)
============================ */

.contact-card--form {
  background-image: url("img/pattern-2.jpg");
  background-repeat: repeat;
  background-position: center;
  overflow: hidden;
}

.contact-card--form::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 0;
}

.contact-card--form > * {
  position: relative;
  z-index: 1;
}




/* =========================================
   CONTACT SECTION – FINAL (DH ONLY / TRUE RTL)
========================================= */

.contact-section--pro {
  padding: 60px 0;
  background: #ffffff;
  font-family: dh, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}

/* TITLES */
.contact-title {
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  color: #153427;
  margin-bottom: 10px;
  font-family: dh, system-ui, sans-serif;
}

.contact-subtitle {
  text-align: center;
  color: #666;
  font-weight: 300;
  margin-bottom: 35px;
  line-height: 1.9;
  font-family: dh, system-ui, sans-serif;
}

/* Cards */
.contact-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(21, 52, 39, 0.14);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
  padding: 26px 22px;
  height: 100%;
  position: relative;

  direction: rtl;               /* force RTL inside card */
  unicode-bidi: plaintext;
  text-align: right;
  font-family: dh, system-ui, sans-serif;
}

.contact-card-title {
  text-align: center;
  font-weight: 300;
  color: #153427;
  margin-bottom: 18px;
  font-family: dh, system-ui, sans-serif;
}

/* ============================
   PATTERN BACKGROUND (FORM)
============================ */

.contact-card--form {
  background-image: url("img/pattern-2.jpg");
  background-repeat: repeat;
  background-position: center;
  overflow: hidden;
}

.contact-card--form::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 0;
}

.contact-card--form > * {
  position: relative;
  z-index: 1;
}

/* ============================
   INFO LIST (ICON RIGHT + TEXT RIGHT)
   IMPORTANT: RTL must be on the flex container
============================ */

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;

  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;
}

.contact-info-item {
  display: flex;

  direction: rtl;               /* THIS is the critical fix */
  unicode-bidi: plaintext;

  justify-content: flex-start;  /* start == RIGHT in RTL */
  align-items: flex-start;

  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(21, 52, 39, 0.10);
  text-align: right;
}

.contact-info-item:last-child {
  border-bottom: none;
}

.contact-info-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(118, 111, 178, 0.10);
  color: #766fb2;
  flex-shrink: 0;

  /* ensure icon stays first (right side in RTL start) */
  order: 0;
}

.contact-info-text {
  color: #153427;
  font-weight: 300;
  line-height: 1.9;
  text-align: right;
  font-family: dh, system-ui, sans-serif;

  order: 1;
}

.contact-link {
  color: #153427;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  direction: rtl;
  unicode-bidi: plaintext;
}

.contact-link:hover {
  border-bottom-color: #766fb2;
}

/* Note */
.contact-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(21, 52, 39, 0.06);
  color: #153427;

  display: flex;
  direction: rtl;
  unicode-bidi: plaintext;

  justify-content: center;
  align-items: center;
  gap: 10px;

  font-family: dh, system-ui, sans-serif;
  font-weight: 300;
  text-align: right;
}

/* ============================
   FORM FIELDS
============================ */

.field-label {
  display: block;
  margin-bottom: 8px;
  color: #153427;
  font-size: 14px;
  font-weight: 300;
  text-align: right;
  font-family: dh, system-ui, sans-serif;
}

.field-input,
.field-textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(21, 52, 39, 0.18);
  padding: 12px 14px;

  font-family: dh, system-ui, sans-serif;
  font-weight: 300;

  color: #153427;
  background: #ffffff;
  outline: none;

  direction: rtl;
  unicode-bidi: plaintext;
  text-align: right;

  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field-textarea {
  min-height: 130px;
  resize: vertical;
}

.field-input::placeholder,
.field-textarea::placeholder {
  text-align: right;
  direction: rtl;
  color: #999;
}

.field-input:focus,
.field-textarea:focus {
  border-color: rgba(118, 111, 178, 0.7);
  box-shadow: 0 0 0 4px rgba(118, 111, 178, 0.12);
}

/* Submit */
.contact-btn {
  width: 100%;
  border: 1px solid #153427;
  background: #153427;
  color: #ffffff;
  border-radius: 12px;
  padding: 12px;

  font-family: dh, system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;

  transition: transform 0.25s ease, background-color 0.25s ease;
}

.contact-btn:hover {
  background: #0f261d;
  transform: translateY(-2px);
}

/* Privacy note */
.contact-privacy {
  margin-top: 14px;
  font-size: 12px;
  color: #777;
  text-align: center;

  direction: rtl;
  unicode-bidi: plaintext;

  font-family: dh, system-ui, sans-serif;
  font-weight: 300;
}

/* Responsive */
@media (max-width: 991px) {
  .contact-section--pro {
    padding: 45px 0;
  }

  .contact-title {
    font-size: 32px;
  }
}



/* slider buttons */

/* =========================================
   HERO BUTTONS – SEMI TRANSPARENT → SOLID
   ========================================= */

.ps-home-banner .ps-btn {
  font-family: dh;
  font-weight: 100;
  padding: 14px 38px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: 0.4px;
  margin: 8px;
  min-width: 170px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* ===============================
   GREEN BUTTON (حجز موعد)
   =============================== */
.ps-home-banner .ps-btn:first-of-type {
  background-color: rgba(21, 52, 39, 0.55); /* semi-transparent */
  border: 1.5px solid #153427;            /* full opacity */
}

.ps-home-banner .ps-btn:first-of-type:hover {
  background-color: #153427;               /* solid */
  border-color: #153427;
}

/* ===============================
   PURPLE BUTTON (طلب استشارة)
   =============================== */
.ps-home-banner .ps-btn:last-of-type {
  background-color: rgba(21, 52, 39, 0.55); /* semi-transparent */
  border: 1.5px solid #153427;                /* full opacity */
}

.ps-home-banner .ps-btn:last-of-type:hover {
  background-color: #153427;                  /* solid */
  border-color: #153427;
}

/* Improve text clarity on images */
.ps-home-banner .ps-banner__content {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}




.section-spacer {
  height: 70px;
  background: rgb(21, 52, 39);
}







/* =====================================================
   ALOU – APPOINTMENT & INFO SECTION (FULL FINAL CSS)
   ===================================================== */
/* =========================
   APPOINTMENT SECTION
========================= */
/* =========================================================
   AL-ALI LAW FIRM — APPOINTMENT SECTION (FULL CSS)
   Covers: Header + Form + Divider + Info List + WhatsApp
   Safe: Namespaced (alou-*) to avoid conflicts
========================================================= */

/* =========================================================
   AL-ALI LAW FIRM — APPOINTMENT SECTION (FULL CSS)
   Header + Form + Divider + 4 CTA Cards Info List + WhatsApp
   Notes:
   - Uses only alou-* classes (safe).
   - Bootstrap grid is still required for .row/.col-* layout.
========================================================= */
/* ===================== ALOU APPOINTMENT + INFO (WHITE BACKGROUND) ===================== */
/* Paste this whole file into style1.css */
/*
.alou-appointment .container {
	padding: 30px 0;
	position: relative;
}
	*/
/* ===================== FULL CSS (PASTE INTO style1.css) ===================== */
/* ✅ Put your exact green color here */
:root{
  --alou-green: #163b2e; /* replace if different */
  --alou-green-tint: rgba(22, 59, 46, 0.10);
  --alou-border: #e6edf6;
  --alou-text: #111827;
  --alou-muted: #6b7280;
  --alou-input-bg: #f7f9fc;
}

/* ✅ Fix “weird English numbers” globally */
html, body{
  font-family: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ============ Section Base ============ */
.alou-appointment{
  padding: 80px 0;
  position: relative;
  background: #ffffff;
}

.alou-appointment .container{
  position: relative;
  z-index: 2;
}

/* subtle background glow */
.alou-appointment::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 450px at 20% 10%, rgba(180, 140, 255, 0.10), transparent 55%),
    radial-gradient(900px 450px at 80% 35%, rgba(22, 59, 46, 0.08), transparent 55%);
  pointer-events:none;
  z-index:1;
}

/* ============ Header ============ */
.alou-appointment__header{
  text-align:center;
  margin-bottom: 28px;
}

.alou-appointment__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  font-size:14px;
  color: var(--alou-green);
  background: rgba(22, 59, 46, 0.06);
  border: 1px solid rgba(22, 59, 46, 0.14);
  box-shadow: 0 10px 25px rgba(16, 24, 40, 0.08);
}

.alou-appointment__title{
  margin:10px 0 6px;
  color: var(--alou-green);
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: .2px;
}

.alou-appointment__sub{
  margin: 0 auto;
  max-width: 820px;
  color: var(--alou-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* ============ Cards ============ */
/* IMPORTANT: no green hover here (you said ONLY the 4 info cards) */
.alou-card{
  border-radius: 18px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--alou-border);
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
}

.alou-card--form,
.alou-card--info{
  overflow:hidden;
}

/* Card headings */
.alou-card__title{
  margin:0 0 6px;
  color: var(--alou-text);
  font-size: 22px;
  line-height: 1.3;
  text-align:right;
}

.alou-card__text{
  margin:0 0 18px;
  color: var(--alou-muted);
  font-size: 14px;
  line-height: 1.6;
  text-align:right;
}

/* ============ Form ============ */
.alou-form{ direction: rtl; }
.alou-form .row > div{ margin-bottom:16px; }

.alou-label{
  display:block;
  margin-bottom:8px;
  color: var(--alou-text);
  font-size:14px;
  line-height: 1.35;
  text-align:right;
}

.alou-input,
.alou-textarea{
  width:100%;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid #dbe4ef;
  background: var(--alou-input-bg);
  color: var(--alou-text);
  outline:none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;

  direction: rtl;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

.alou-input::placeholder,
.alou-textarea::placeholder{
  color: #9aa6b2;
  direction: rtl;
  text-align: right;
}

.alou-input:focus,
.alou-textarea:focus{
  border-color: rgba(22, 59, 46, 0.55);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(22, 59, 46, 0.12);
}

.alou-textarea{
  min-height: 140px;
  resize: vertical;
}

/* ✅ datetime-local: keep LTR for stable digits BUT align to right */
.alou-input--datetime{
  direction:ltr;
  text-align:right;
  unicode-bidi: plaintext;
}

/* Force internal date/time text to appear right aligned (webkit browsers) */
.alou-input--datetime::-webkit-datetime-edit{
  text-align:right;
}
.alou-input--datetime::-webkit-datetime-edit-fields-wrapper{
  display:flex;
  justify-content:flex-end;
}
.alou-input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  opacity: 0.85;
  cursor: pointer;
}

/* Submit Button (green) */
.alou-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(22, 59, 46, 0.20);
  background: var(--alou-green);
  color:#fff;
  font-weight: 900;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.alou-btn:hover{
  transform: translateY(-1px);
  background: #0f2f24;
  border-color: rgba(22, 59, 46, 0.45);
  box-shadow: 0 14px 35px rgba(16, 24, 40, 0.18);
}

.alou-btn:active{ transform: translateY(0); }

.alou-form__note{
  margin: 12px 0 0;
  color: var(--alou-muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}



/* ============ Info Grid ============ */
.alou-info-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

/* ✅ ONLY these 4 cards hover green */
.alou-info-grid .alou-mini{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background:#ffffff;
  border: 1px solid var(--alou-border);
  text-decoration:none;
  color: inherit;
  min-width:0;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.alou-info-grid .alou-mini:hover{
  transform: translateY(-1px);
  background: var(--alou-green-tint);
  border-color: rgba(22, 59, 46, 0.30);
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12);
}

/* icon */
.alou-mini__icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: rgba(22, 59, 46, 0.08);
  border: 1px solid rgba(22, 59, 46, 0.18);
  color: var(--alou-green);
  flex: 0 0 auto;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.alou-info-grid .alou-mini:hover .alou-mini__icon{
  background: rgba(22, 59, 46, 0.14);
  border-color: rgba(22, 59, 46, 0.30);
}

.alou-mini__icon svg{ width:22px; height:22px; }

.alou-mini__content{
  min-width:0;
  text-align:right;
}

.alou-mini__label{
  display:block;
  color: var(--alou-muted);
  font-size:13px;
  margin-bottom:4px;
  text-align:right;
}

.alou-mini__value{
  margin:0;
  color: var(--alou-text);
  font-size:14px;
  line-height:1.6;
  word-break: break-word;
  text-align:right;
}

/* CTA */
.alou-mini__cta{
  display:inline-block;
  margin-top:8px;
  font-size: 12.5px;
  font-weight: 900;
  color: rgba(22, 59, 46, 0.85);
  transition: color .2s ease;
}

.alou-info-grid .alou-mini:hover .alou-mini__cta{
  color: var(--alou-green);
}

/* ✅ Fix RTL number/email ordering */
.alou-ltr{
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* WhatsApp Button (green) */
.alou-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  width:100%;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--alou-green);
  border: 1px solid rgba(22, 59, 46, 0.20);
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.alou-whatsapp:hover{
  transform: translateY(-1px);
  background: #0f2f24;
  border-color: rgba(22, 59, 46, 0.45);
  box-shadow: 0 14px 35px rgba(16, 24, 40, 0.18);
}

/* =========================================
   WHATSAPP BUTTON – FORCE REMOVE ORANGE
========================================= */

a.alou-whatsapp,
a.alou-whatsapp:visited,
a.alou-whatsapp:hover,
a.alou-whatsapp:active,
a.alou-whatsapp:focus {
  color: #ffffff !important;           /* Keep text white */
  background-color: #153427 !important;/* Your green */
  border-color: #153427 !important;
  text-decoration: none !important;
  outline: none !important;
}


/* Responsive */
@media (max-width: 1199px){
  .alou-info-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767px){
  .alou-appointment{ padding: 60px 0; }
  .alou-appointment__title{ font-size: 28px; }
  .alou-info-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 575px){
  .alou-card{ padding: 18px; }
  .alou-appointment__title{ font-size: 24px; }
  .alou-appointment__sub{ font-size: 15px; }
}

/* Focus */
.alou-mini:focus-visible,
.alou-whatsapp:focus-visible,
.alou-btn:focus-visible{
  outline: 3px solid rgba(22, 59, 46, 0.25);
  outline-offset: 3px;
}





/* ================================
   NAVBAR ORDER: Social | Menu | Logo (RTL)
   - Social LEFT, Menu CENTER, Logo RIGHT
   - CTA bubble ONLY when active (.is-active)
=================================== */

.alou-navbar{
  background: #153427;
  border-bottom: 1px solid rgba(255,255,255,.10);
  position: relative;
  z-index: 999999;
}

.alou-navbar__inner{
  max-width: 1800px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  direction: rtl;
}

/* Social (LEFT) */
.alou-navbar__social{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;

  /* In RTL, margin-left:auto pushes this block to the LEFT side */
  margin-left: auto;
}

/* Divider blocks */
.alou-navbar__divider{
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,.18);
  flex: 0 0 1px;
}

/* Menu (CENTER) */
.alou-navbar__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex: 1 1 auto;
  white-space: nowrap;
}

/* Logo (RIGHT) */
.alou-navbar__logo{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-inline: 60px;
}

.alou-navbar__logo img{
  height: 46px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* Icon pills */
.alou-icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: .22s ease;
}

.alou-icon:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
}

.alou-icon i{ font-size: 18px; }
.alou-icon svg{ width: 18px; height: 18px; color: #fff; }

/* Links */
.alou-navbar__nav a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .2px;
  padding: 10px 6px;
  position: relative;
  transition: .22s ease;
}

.alou-navbar__nav a:hover{ color: #fff; }

/* Underline hover (normal links + active links) */
.alou-navbar__nav a::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: rgba(255,255,255,.75);
  transform: translateX(-50%);
  transition: .22s ease;
  border-radius: 2px;
}

.alou-navbar__nav a:hover::after,
.alou-navbar__nav a.is-active::after{
  width: 70%;
}

/* ================================
   CTA LINKS (حجز موعد / طلب استشارة)
   Bubble ONLY when active
=================================== */

/* CTA should look like a normal link by default */
.alou-navbar__cta{
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px;
  box-shadow: none !important;

  /* match normal link spacing */
  padding: 10px 6px !important;
}

/* subtle hover, not a bubble */
.alou-navbar__cta:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: transparent !important;
}

/* bubble ONLY when active */
.alou-navbar__cta.is-active{
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  padding: 10px 14px !important;
}

/* Responsive: collapse nicely */
@media (max-width: 992px){
  .alou-navbar{ display: none; } /* keep your existing mobile header */
}





/* ================================
   MOBILE HEADER (RTL)
   Logo RIGHT, Burger LEFT
=================================== */

.alou-mobile-header{
  display: none; /* will show only on mobile below */
}

.alou-mobile-header__bar{
  height: 88px;
  padding: 0 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #153427;
  border-bottom: 1px solid rgba(255,255,255,.10);

  /* nice premium feel */
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* Burger on LEFT */
.alou-mobile-header__burger{
  width: 46px;
  height: 46px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);

  color: #fff;
  text-decoration: none;

  transition: .22s ease;
}

.alou-mobile-header__burger:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
}

.alou-mobile-header__burger i{
  font-size: 20px;
  color: #fff;
}

/* Logo on RIGHT */
.alou-mobile-header__logo img{
  height: 48px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* ================================
   MOBILE SIDEBAR PANEL STYLE
=================================== */

.alou-mobile-panel{
  background: rgba(21,52,39,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -18px 0 48px rgba(0,0,0,.35);

  /* optional rounding */
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;

  /* ensure it sits above page */
  z-index: 99999999;
}

/* header */
.alou-mobile-panel .ps-panel__header{
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.alou-mobile-panel__title{
  margin: 0;
  color: rgba(255,255,255,.95);
  font-weight: 600;
}

/* menu */
.alou-mobile-panel .ps-panel__content{
  padding: 14px 18px 20px;
  text-align: center;
}

.alou-mobile-menu{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.alou-mobile-menu a{
  height: 50px;
  border-radius: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);

  color: rgba(255,255,255,.95);
  text-decoration: none;
  font-weight: 600;

  transition: .22s ease;
}

.alou-mobile-menu a:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
}

/* ================================
   RESPONSIVE SWITCHING
   Desktop navbar on desktop, mobile header on mobile
=================================== */

/* Default: desktop navbar visible, mobile hidden */
.alou-navbar{ display: block; }
.alou-mobile-header{ display: none; }

/* Mobile: hide desktop navbar, show mobile header */
@media (max-width: 992px){
  .alou-navbar{ display: none; }
  .alou-mobile-header{ display: block; }
}

/*------------------------------------------------------------------ MOBILE NAVBAR ------------------------------------------------------------------*/
/* =========================================
   MOBILE SIDEBAR - FIX OVERLAP + ELEGANT UI
========================================= */
/* =========================================
   ALOU MOBILE MENU (INSTANT / THEME-PROOF)
========================================= */

:root{
  --alou-mobile-header-h: 88px;
  --alou-green: #153427;
}

/* hide on desktop */
.alou-mobile-header,
.alou-mobile-panel,
.alou-mobile-backdrop{
  display: none;
}

@media (max-width: 991px){

  .alou-mobile-header{
    display:block;
    position: sticky;
    top: 0;
    z-index: 999999999;
    background: var(--alou-green);
  }

  .alou-mobile-header__bar{
    height: var(--alou-mobile-header-h);
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 14px 16px;
    direction: rtl;
  }

  .alou-mobile-header__burger{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color:#fff;

    cursor:pointer;
    transition:.22s ease;
  }
  .alou-mobile-header__burger:hover{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-1px);
  }

  .alou-mobile-header__logo img{
    height: 44px;
    width:auto;
    display:block;
  }

  /* Backdrop */
  .alou-mobile-backdrop{
    display:block;
    position: fixed;
    inset: 0;
    top: var(--alou-mobile-header-h);
    background: rgba(0,0,0,.45);
    z-index: 9999998;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .2s ease;
  }

  /* Panel */
  .alou-mobile-panel{
    display:block;
    position: fixed;
    top: var(--alou-mobile-header-h);
    right: 0;
    bottom: 0;
    width: min(420px, 78vw);

    background: rgba(21,52,39,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: -24px 0 60px rgba(0,0,0,.40);
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;

    overflow:hidden;
    z-index: 9999999;

    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: transform .22s ease, opacity .18s ease, visibility .18s ease;
  }

  /* OPEN STATE (controlled by JS) */
  body.alou-menu-open .alou-mobile-panel{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.alou-menu-open .alou-mobile-backdrop{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .alou-mobile-panel__header{
    background: rgba(21,52,39,.92);
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 16px 18px 12px;

    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }

  .alou-mobile-panel__title{
    margin:0;
    color: rgba(255,255,255,.96);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .2px;
  }

  .alou-mobile-panel__close{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color:#fff;
    cursor:pointer;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    transition:.22s ease;
  }
  .alou-mobile-panel__close:hover{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-1px);
  }

  .alou-mobile-panel__content{
    padding: 10px 18px 22px;
    height: calc(100% - 64px);
    overflow:auto;
    -webkit-overflow-scrolling: touch;

    display:flex;
    flex-direction: column;
  }

  .alou-mobile-menu{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap: 18px;
  }

  .alou-mobile-menu li{ position: relative; }

  .alou-mobile-menu li::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:-9px;
    height:1px;
    background: rgba(255,255,255,.10);
  }

  .alou-mobile-menu a{
    height: 72px;
    border-radius: 20px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    padding: 0 22px;
    width: 100%;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);

    color: rgba(255,255,255,.96);
    text-decoration:none;

    font-weight: 800;
    font-size: 28px;

    transition:.22s ease;
  }
  .alou-mobile-menu a:hover{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-1px);
  }

  /* Social spacing */
/* =========================================================
   ALOU MOBILE SOCIAL – HARD OVERRIDE PATCH
   Paste at the VERY BOTTOM of your last CSS file
========================================================= */

@media (max-width: 991px){

  /* Force panel content to be a vertical flex column */
  body .alou-mobile-panel .alou-mobile-panel__content{
    display: flex !important;
    flex-direction: column !important;
  }

  /* Force professional separation above socials */
  body .alou-mobile-panel .alou-mobile-social{
    margin-top: auto !important;          /* keep it near bottom */
    margin-top: 64px !important;          /* ✅ visual gap from menu */
    padding-top: 36px !important;         /* ✅ breathing room */
    padding-bottom: 8px !important;

    border-top: 1px solid rgba(255,255,255,.14) !important;

    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
  }

  /* Extra safety: if theme collapses spacing, enforce a spacer */
  body .alou-mobile-panel .alou-mobile-menu{
    margin-bottom: 18px !important;
  }
}
/*-----again*/
/* =========================================================
   ALOU MOBILE SOCIAL ICONS – FORCE WHITE (NO ORANGE)
   Hard override for hover / focus / active states
========================================================= */

@media (max-width: 991px){

  body .alou-mobile-panel .alou-mobile-social__icon,
  body .alou-mobile-panel .alou-mobile-social__icon i,
  body .alou-mobile-panel .alou-mobile-social__icon svg{
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  body .alou-mobile-panel .alou-mobile-social__icon:hover,
  body .alou-mobile-panel .alou-mobile-social__icon:focus,
  body .alou-mobile-panel .alou-mobile-social__icon:active{
    color: #ffffff !important;
    background: rgba(255,255,255,.14) !important; /* subtle glass hover */
    border-color: rgba(255,255,255,.28) !important;
  }

  body .alou-mobile-panel .alou-mobile-social__icon:hover i,
  body .alou-mobile-panel .alou-mobile-social__icon:hover svg{
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  /* Kill any theme pseudo hover effects */
  body .alou-mobile-panel .alou-mobile-social__icon::before,
  body .alou-mobile-panel .alou-mobile-social__icon::after{
    content: none !important;
    display: none !important;
  }
}


  .alou-mobile-social__icon{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);

    color: rgba(255,255,255,.95);
    text-decoration:none;

    transition:.22s ease;
  }
  .alou-mobile-social__icon:hover{
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-1px);
  }

  body.alou-menu-open{
    overflow: hidden;
  }
}































/*footer*/

/* =========================================
   FOOTER: COLORS ONLY (NO LAYOUT OVERRIDES)
   ========================================= */

/* ======================================
   FOOTER FINAL CLEAN STYLE (NO GLASS)
   ====================================== */

/* Footer background */
.ps-footer__bottom {
  background: #ffffff !important;
}

/* Social list layout */
.ps-footer__bottom .ps-list--social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
}

/* REMOVE any circular / glass / background effects */
.ps-footer__bottom .ps-list--social a {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Icons color = GREEN (FontAwesome + SVG) */
.ps-footer__bottom .ps-list--social i,
.ps-footer__bottom .ps-list--social svg {
  color: #153427 !important;
  fill: currentColor !important;
  font-size: 20px;
  width: 20px;
  height: 20px;
}

/* Kill ALL hover effects */
.ps-footer__bottom .ps-list--social a:hover,
.ps-footer__bottom .ps-list--social a:hover i,
.ps-footer__bottom .ps-list--social a:hover svg {
  color: #153427 !important;
  fill: #153427 !important;
  background: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Text color below icons */
.ps-footer__bottom p,
.ps-footer__bottom a {
  color: #153427 !important;
}












/* ==============================
   SIMPLE COMPACT FOOTER (GREEN)
   ============================== */

.ps-footer__center {
  background: #153427 !important;
  padding: 40px 16px !important;
  text-align: center;
  direction: rtl;
}

.ps-footer__center-inner {
  max-width: 820px;
  margin: 0 auto;
}

/* force everything white */
.ps-footer__center,
.ps-footer__center * {
  color: #ffffff !important;
}

/* logo smaller and not huge */
.ps-footer__center .ps-logo img {
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 0px;
  display: block;
}

/* compact text sizing */
.ps-footer-title {
  font-family: dh;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.ps-footer-subtitle {
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  margin: 0 0 14px;
  opacity: 0.9;
}

.ps-footer-hours {
  font-family: dh;
  font-size: 14px;
  margin: 0 0 16px;
  opacity: 0.9;
}

/* contacts row */
.ps-footer-contacts {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.ps-footer-link {
  font-family: dh;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.95;
}

/* FIX RTL NUMBER REVERSAL */
.ps-ltr {
  direction: ltr;
  unicode-bidi: plaintext;
}

/* NO HOVER EFFECTS */
.ps-footer__center a:hover,
.ps-footer__center a:hover * {
  opacity: 0.95 !important;
  color: #ffffff !important;
  transform: none !important;
}

/* ensure icons stay white */
.ps-footer__center i {
  color: #ffffff !important;
}




/* ===============================
   ALOU 404 PAGE (Dedicated)
   Colors ONLY:
   - Green:  #153427
   - Purple: #766fb2
   - White:  #ffffff
   =============================== */

:root{
  --green: #153427;
  --purple: #766fb2;
  --white: #ffffff;
}

/* Page structure: footer pinned bottom */
.alou-page{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color: var(--white);
  font-family: dh, "Cormorant Garamond", serif;
  color: var(--green);
}

.alou-main{
  flex: 1 0 auto;
}

/* ===============================
   Background image
   Put image here: /img/error.jpg
   =============================== */
.alou-404{
  position: relative;
  min-height: calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 60px 14px;
  background-color: var(--white);
  background-image: url("/img/error.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Soft overlay for readability (white transparency only) */
.alou-404::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.85);
  pointer-events:none;
}

.alou-404-card{
  position:relative;
  width:min(980px, 100%);
  padding: 34px 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--green);
  box-shadow: 0 20px 60px rgba(21,52,39,.12);
  text-align:right;
}

/* Top row */
.alou-404-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.alou-404-code{
  margin:0;
  font-size: 88px;
  line-height:1;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--green);
}

.alou-404-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--green);
  background: rgba(21,52,39,.12);
  color: var(--green);
  font-weight: 500;
}

.alou-404-title{
  margin: 14px 0 6px;
  font-size: 28px;
  font-weight: 600;
  color: var(--green);
}

.alou-404-text{
  margin: 0 0 18px;
  line-height: 1.9;
  max-width: 62ch;
  color: var(--purple);
}

/* ===============================
   Buttons INSIDE box
   Border green + fill green transparent
   Hover: text white + bg solid green
   =============================== */
.alou-404-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top: 14px;
}

.alou-404-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid var(--green);
  background: rgba(21,52,39,.14);
  color: var(--green);
  transition: transform .18s ease, background .18s ease, color .18s ease;
  font-weight: 600;
}

.alou-404-btn i{
  color: var(--green);
  transition: color .18s ease;
}

.alou-404-btn:hover{
  transform: translateY(-2px);
  background: var(--green);
  color: var(--white);
}

.alou-404-btn:hover i{
  color: var(--white);
}

/* Primary button stays solid green */
.alou-404-btn--primary{
  background: var(--green);
  color: var(--white);
}

.alou-404-btn--primary i{
  color: var(--white);
}

/* ===============================
   Navbar social icons fix
   =============================== */
.alou-navbar__social,
.alou-footer__social{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:10px;
}

/* unify icon button look */
.alou-icon,
.alou-footer__icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border: 1px solid var(--green);
  background: rgba(21,52,39,.10);
  color: var(--green);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

/* ensure SVG icons center correctly */
.alou-svg{
  width:18px;
  height:18px;
  display:block;
}

.alou-icon:hover,
.alou-footer__icon:hover{
  transform: translateY(-2px);
  background: var(--green);
  color: var(--white);
}

/* ===============================
   Footer pinned bottom
   =============================== */
.alou-footer{
  flex-shrink: 0;
  background: var(--white);
  border-top: 1px solid var(--green);
}

.alou-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  color: var(--green);
}

.alou-footer__brand img{
  height: 38px;
  width:auto;
  display:block;
}

.alou-footer__links{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

.alou-footer__links a{
  text-decoration:none;
  color: var(--green);
  font-weight: 700;
}

.alou-footer__links a:hover{
  color: var(--purple);
}

.alou-footer__copy{
  width:100%;
  font-weight: 600;
  color: var(--purple);
}


/* Floating WhatsApp (unchanged behavior) */
.whatsapp-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index: 99999999;
}

.whatsapp-float a{
  width:54px;
  height:54px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--green);
  border: 1px solid var(--green);
  color: var(--white);
  text-decoration:none;
  transition: transform .18s ease;
}

.whatsapp-float a:hover{
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 992px){
  .alou-navbar{ display:none; }
  .alou-mobile-header{ display:block; }
}




/* =========================================================
   SERVICES – PREMIUM REVEAL ANIMATION
========================================================= */

/* =========================================================
   SERVICES WATERMARK (Alou logo background)
   Uses: /img/alou.svg
========================================================= */

section.services-section#services{
  position: relative !important;
  overflow: hidden !important;
  background: #f9f9fb !important;
  direction: rtl;
  font-family: ha, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Keep content above watermark */
section.services-section#services > .container{
  position: relative !important;
  z-index: 3 !important;
}


/* =========================================
   SERVICES – GROUP CARD WITH 4 MINI CARDS
========================================= */

.service-box--group{
  text-align: right;
}

/* Header layout */
.service-box--group .service-head{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.service-box--group .service-head i{
  font-size: 28px;
  line-height: 1;
  flex: 0 0 auto;
}

/* Intro text */
.service-box--group .service-intro{
  margin: 6px 0 0;
  line-height: 1.9;
  opacity: .92;
}

/* Mini cards grid */
.service-mini-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

/* Mini card styling (premium + subtle) */
/* =========================================
   MINI SERVICE CARDS – PREMIUM PURPLE HOVER
========================================= */

.service-mini-card{
  border: 1px solid rgba(21,52,39,.18);
  background: rgba(255,255,255,.75);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #153427;
  line-height: 1.6;
  transition: 
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    color .25s ease;
}




/* Mobile: stack */
@media (max-width: 640px){
  .service-mini-grid{
    grid-template-columns: 1fr;
  }
  .service-box--group .service-head{
    gap: 12px;
  }
}


/* Watermark 
section.services-section#services::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  background-image: url("/img/alou.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 90% 55% !important;
  background-size: min(420px, 55vw) !important;

  opacity: 0.10 !important;
  pointer-events: none !important;
}

@media (max-width: 992px){
  section.services-section#services::before{
    background-position: 95% 60% !important;
    background-size: min(300px, 70vw) !important;
  }
}

@media (max-width: 576px){
  section.services-section#services::before{
    background-position: center 15% !important;
    background-size: 220px !important;
    opacity: 0.07 !important;
  }
}
*/


/* Section title */
#services [data-animate="services-title"]{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

#services [data-animate="services-title"].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Service cards */
#services .service-box[data-animate="service"]{
  opacity: 0;
  transform: translateY(22px);
  filter: blur(2px);
  transition:
    opacity .75s ease,
    transform .75s ease,
    filter .9s ease;
  will-change: opacity, transform;
}

#services .service-box[data-animate="service"].is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  #services [data-animate]{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ==============================
   SAFETY: Social icons
============================== */
.ps-list--social i,
.ps-list--social svg,
.ps-list--social svg path,
.alou-navbar__social i,
.alou-navbar__social svg,
.alou-navbar__social svg path{
  visibility: visible !important;
  opacity: 1 !important;
  fill: currentColor !important;
}



/* =========================================================
   ROYAL QUOTE – PREMIUM / CENTERED / GLASS / WHITE
========================================================= */

.about-royal-quote{
  position: relative;
  margin: 50px auto 0;
  padding: 45px 50px;
  max-width: 880px;
  width: 100%;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  /* GOLD REMOVED → neutral glass */
  background: linear-gradient(
    135deg,
    rgba(21,52,39,0.06),
    rgba(255,255,255,0.06)
  );

  backdrop-filter: blur(10px);

  /* White border instead of gold */
  border: 1px solid rgba(255,255,255,0.35);

  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}


/* =========================================================
   PORTRAIT (CLEAN – NO ROYAL SYMBOLS)
========================================================= */
.royal-portrait{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin-bottom: 18px;

  overflow: hidden;

  /* changed from gold to white */
  border: 2px solid rgba(255,255,255,0.65);
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}

.royal-portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: grayscale(100%) contrast(1.05);
}

/* ❌ Crown REMOVED completely */
.quote-crown{
  display: none !important;
}

/* Quote Text */
.quote-text{
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 2;
  color: #153427;
  margin: 0;
}

/* Decorative Quote Marks (white, subtle) */
.quote-mark{
  position: absolute;
  font-size: 90px;
  font-family: serif;
  font-weight: 700;

  /* changed from gold to soft white */
  color: rgba(255,255,255,0.18);

  pointer-events: none;
}

.quote-mark--top{
  top: 10px;
  right: 25px;
}

.quote-mark--bottom{
  bottom: -20px;
  left: 25px;
}

/* Divider (white instead of gold) */
.quote-divider{
  width: 120px;
  height: 2px;
  margin: 22px auto 14px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.85),
    transparent
  );
}

/* Author */
.quote-author{
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.4px;

  /* slightly softened neutral */
  color: rgba(0,0,0,0.65);
}


/* =========================================================
   FORCE REMOVE GOLD FROM ABOUT QUOTE CONTEXT
   (parent overlays + pseudo-elements)
========================================================= */

/* Kill any gold overlay from parent glass cards */
.about-royal-quote,
.about-royal-quote *{
  filter: none !important;
}

/* Remove gold pseudo-elements injected by theme */
.about-royal-quote::before,
.about-royal-quote::after,
.about-glass-card::before,
.about-glass-card::after,
.about-glass-card--center::before,
.about-glass-card--center::after{
  content: none !important;
  display: none !important;
}

/* Neutralize parent glass background that tints gold */
.about-glass-card,
.about-glass-card--center{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

/* Absolute hard override for any gold color values */
.about-royal-quote,
.about-royal-quote *{
  border-color: rgba(255,255,255,0.35) !important;
  color-scheme: light !important;
}


/* =========================================================
   FADE-UP ANIMATION
========================================================= */
[data-animate="fade-up"]{
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.9s ease;
}

[data-animate].visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   DARK MODE
========================================================= */
body.dark-mode .about-royal-quote{
  background: linear-gradient(
    135deg,
    rgba(21,52,39,0.35),
    rgba(201,162,77,0.12)
  );
  border-color: rgba(201,162,77,0.35);
}

body.dark-mode .quote-text{
  color: #f5f5f5;
}

body.dark-mode .quote-author{
  color: rgba(255,255,255,0.7);
}

body.dark-mode .royal-portrait img{
  filter: grayscale(100%) brightness(1.1);
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 768px){
  .about-royal-quote{
    padding: 35px 22px;
  }

  .quote-text{
    font-size: 22px;
  }

  .quote-mark{
    font-size: 70px;
  }

  .royal-portrait{
    width: 82px;
    height: 82px;
  }
}


/* =========================================================
   SAUDI GEOMETRIC WATERMARK (ULTRA SUBTLE / OFFICIAL)
========================================================= */

.about-royal-quote::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* Geometric rhythm (Najdi-inspired abstraction) */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(201,162,77,0.05),
      rgba(201,162,77,0.05) 1px,
      transparent 1px,
      transparent 22px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(201,162,77,0.035),
      rgba(201,162,77,0.035) 1px,
      transparent 300px,
      transparent 28px
    );

  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content stays ABOVE watermark */
.about-royal-quote > *{
  position: relative;
  z-index: 1;
}


body.dark-mode .about-royal-quote::before{
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(201,162,77,0.08),
      rgba(201,162,77,0.08) 1px,
      transparent 1px,
      transparent 26px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(201,162,77,0.06),
      rgba(201,162,77,0.06) 1px,
      transparent 1px,
      transparent 34px
    );
  opacity: 0.45;
}






/* =========================================
   CLEAN SECTION DIVIDER – WIDE / FADED
========================================= */

.alou-clean-divider{
  position: relative;
  width: 100%;
  height: 90px;                 /* generous breathing space */
  background: #ffffff;
}

.alou-clean-divider::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 760px;                 /* WIDER line */
  height: 23px;

  /* Fade from both sides toward center */
  background: linear-gradient(
    to right,
    transparent,
    rgba(21, 52, 39, 0.35),
    transparent
  );

  border-radius: 2px;
}

/* ============================
   MOBILE TUNING
============================ */
@media (max-width: 768px){
  .alou-clean-divider{
    height: 70px;
  }

  .alou-clean-divider::after{
    width: 220px;
    height: 1.4px;

    background: linear-gradient(
      to right,
      transparent,
      rgba(21, 52, 39, 0.30),
      transparent
    );
  }
}












/* =========================================
   KILL THE BEIGE BLOCK INSIDE FOOTER
   (covers wrappers + pseudo-elements)
========================================= */

.ps-footer,
.ps-footer__center,
.ps-footer__center-inner,
.ps-site-info{
  background: #153427 !important;   /* or transparent if you want the map to touch it */
  margin-top: 100 !important;
  padding-top: 100 !important;
}

/* If the beige is coming from a pseudo-element (very common in themes) */
.ps-footer::before,
.ps-footer::after,
.ps-footer__center::before,
.ps-footer__center::after,
.ps-footer__center-inner::before,
.ps-footer__center-inner::after{
  content: none !important;
  display: none !important;
}

/* Remove any accidental top spacing that creates the band */
.ps-footer{
  padding-top: 0 !important;
}

/* Keep bottom strip white as you already want */
.ps-footer__bottom{
  background: #ffffff !important;
}




/* =========================================
   HARD OVERRIDE – REMOVE ALL BANNER OVERLAYS
   Alou Law Firm
========================================= */

/* Remove ALL pseudo overlays */
.ps-banner::before,
.ps-banner::after,
.ps-banner--1::before,
.ps-banner--1::after,
.bg--cover::before,
.bg--cover::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Remove any gradient layers */
.ps-banner,
.ps-banner--1,
.bg--cover {
  background-color: transparent !important;
  background-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Prevent inherited darkening from children */
.ps-banner * {
  opacity: 1 !important;
  filter: none !important;
}

/* Ensure background image is pure */
.ps-banner {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}