﻿/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */

.almarai-light {
	font-family: "Almarai", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.almarai-regular {
	font-family: "Almarai", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.almarai-bold {
	font-family: "Almarai", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.almarai-extrabold {
	font-family: "Almarai", sans-serif;
	font-weight: 800;
	font-style: normal;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border-style: none;
	border-color: inherit;
	border-width: 0;
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	color: #666666;
	text-align: center;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
	text-align: center;
	direction: rtl;
}
/* start editing from here */
a {
	text-decoration: underline;
	direction: rtl;
}

.txt-rt {
	text-align: right;
	direction: rtl;
}
/* text align right */
.txt-lt {
	text-align: left;
}
/* text align left */
.txt-center {
	text-align: center;
}
/* text align center */
.float-rt {
	float: right;
}
/* float right */
.float-lt {
	float: left;
}
/* float left */
.clear {
	clear: both;
}
/* clear float */
.pos-relative {
	position: relative;
}
/* Position Relative */
.pos-absolute {
	position: absolute;
}
/* Position Absolute */
.vertical-base {
	vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top {
	vertical-align: top;
}
/* vertical align top */
.underline {
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
	margin: 0 0 20px 0;
}
/* Add 5px bottom padding and a underline */
nav.vertical ul li {
	display: block;
}
/* vertical menu */
nav.horizontal ul li {
	display: inline-block;
}
/* horizontal menu */
img {
	max-width: 100%;
}
/*end reset*/

html, body {
	height: 100%;
}

body {
	padding-top: env(safe-area-inset-top);
	Padding-left: env (safe-area-inset-left);
	Padding-right: env (safe-area-inset-right);
	Padding-bottom: env (safe area inset bottom);
	background-color: #E9E9E9;
	font-family: 'Almarai', Geneva,Helvetica, sans-serif;
	font-size: 100%;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

button, input, select, textarea {
	font-family: 'Almarai', Geneva,Helvetica, sans-serif;
	font-size: 100%;
	line-height: inherit
}

input[type='button'],input[type='submit'],button {
    color: #fff;
    background-color: #999999;
}

.wrap {
	padding: 10px;
}

.btm_border {
	border-bottom: 4px solid #DDDDDD;
}

.h_bg {
	background-color: #E9E9E9;
	border-bottom: 6px solid #EE7700;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

.logo {
	text-align: center;
}
/*menu*/
.sub-head {
	background: #999999;
	margin-bottom: -10px;
	border-top-left-radius: 50px;
	border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
}

	.sub-head li {
		display: inline-block;
		float: left;
		width: 50%;
		text-align: center;
	}

	.sub-head ul li a span {
		position: absolute;
		top: 12px;
		left: 12px;
		width: 16px;
		height: 16px;
		display: inline-block;
	}

	.sub-head ul li a.active {
		color: #fff;
		background-color: #e1184a;
	}

	.sub-head li:first-child a {
		border-right: 1px solid rgb(102, 102, 102);
	}

	.sub-head ul li a {
		font-size: 1em;
		font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
		position: relative;
		display: block;
		color: #ffffff;
		padding: 10px;
	}

.menu {
	background: #E5E5E5; /* old browsers */
	background: -moz-linear-gradient(top, #E5E5E5 0%, #C4C4C4 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E5E5E5), color-stop(100%,#C4C4C4)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E5E5E5', endColorstr='#C4C4C4',GradientType=0 ); /* ie */
	border-top: 1px solid rgb(199, 199, 199);
	margin-top: 10px;
}

	.menu li {
		display: block;		
	}

		.menu li a {
			font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
			display: block;
			padding: 10px;
			color: #666;
			border-bottom: 1px solid rgb(199, 199, 199);
		}

		.menu li:last-child a {
			border-bottom: none;
		}

.search {
	display: block;
	padding: 10px;
	text-align: center;
	background: #E5E5E5; /* old browsers */
	background: -moz-linear-gradient(top, #E5E5E5 0%, #C4C4C4 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E5E5E5), color-stop(100%,#C4C4C4)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E5E5E5', endColorstr='#C4C4C4',GradientType=0 ); /* ie */
}

	.search input[type=text] {
		width: 90%;
		padding: 10px;
		border: 1px solid rgb(173, 179, 162);
		color: #555;
		font-size: 13px;
		background: #ddd;
		outline: none;
	}

.back-btn {
	cursor: pointer;
	background: rgb(71, 71, 71);
	display: inline-block;
	margin-left: 10px;
	margin-bottom: 10px;
}

	.back-btn ul li {
		display: inline-block;
		padding: 4px 6px;
	}

		.back-btn ul li:before {
			content: url('../images/back.png');
		}

		.back-btn ul li a {
			padding: 4px 10px;
			font-size: 13px;
			color: #fff;
			margin-left: -8px;
			line-height: 1.7em;
			vertical-align: bottom;
		}
/*slider*/
.slider_bg {
	background: #f6f6f6; /* Old browsers */
	background: -moz-linear-gradient(top, #f6f6f6 1%, #f0f0f0 19%, #efefef 39%, #ededed 59%, #dddddd 81%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f6f6f6), color-stop(19%,#f0f0f0), color-stop(39%,#efefef), color-stop(59%,#ededed), color-stop(81%,#dddddd), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f6f6f6 1%,#f0f0f0 19%,#efefef 39%,#ededed 59%,#dddddd 81%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f6f6f6 1%,#f0f0f0 19%,#efefef 39%,#ededed 59%,#dddddd 81%,#cccccc 100%); /* Opera 11.10+ */
	background: linear-gradient(to bottom, #f6f6f6 1%,#f0f0f0 19%,#efefef 39%,#ededed 59%,#dddddd 81%,#cccccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
/*  GRID OF THREE   ============================================================================= */
.grids_1_of_3 {
	padding: 10px;
	text-align: center;
}

.grid_1_of_3 {
	display: block;
	float: left;
	margin-left: 4%;
}

	.grid_1_of_3:first-child {
		margin-left: 0;
	}

.images_1_of_3 {
	width: 30.333%;
}

	.images_1_of_3 img {
		border-radius: 50px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		padding: 5px;
		background: #D5D5D5;
	}

	.images_1_of_3 h3 {
		color: #555555;
		font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
		font-size: 1.5em;
		font-weight: normal;
		line-height: 1.5em;
		letter-spacing: -1px;
		text-shadow: 0 1px 0 whiteSmoke;
	}

	.images_1_of_3 p {
		color: #575757;
		line-height: 1.5em;
		font-size: 0.8925em;
	}
/*main*/
.BigCheckBox input {
	width: 20px;
	height: 20px;
	margin-top: 8px;
}

.main_bg {
	background: #dddddd;
}

.content h2 {
	letter-spacing: -1px;
	text-transform: uppercase;
	font-size: 1.5em;
	color: #575757;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	text-shadow: 0 1px 0 white;
}

.content h3 {
	text-transform: uppercase;
	font-size: 1em;
	color: #e1184a;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	text-shadow: 0 1px 0 white;
	line-height: 1.5em;
	margin: 0.8em 0;
}

.content p {
	color: #575757;
	line-height: 1.5em;
	font-size: 0.8925em;
}

	.content p a img {
		float: left;
		margin-right: 10px;
		border-radius: 50px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		padding: 6px;
		background: #D5D5D5;
	}
/*---box---*/
.main_btm {
	background: #dddddd;
}

.gallery h3 {
	text-transform: capitalize;
	color: #555555;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	margin-bottom: 0.4em;
	font-size: 1.5em;
	font-weight: normal;
	line-height: 1.5em;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 whiteSmoke;
}

.gallery ul li {
	display: inline-block;
	float: left;
	width: 24.33333%;
}

.terminals h3 {
	text-transform: capitalize;
	color: #555555;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	margin-bottom: 0.4em;
	font-size: 1.5em;
	font-weight: normal;
	line-height: 1.5em;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 whiteSmoke;
}

.terminals p {
	color: #575757;
	line-height: 1.5em;
	font-size: 0.8925em;
	margin: 0.5em 0;
}

	.terminals p:before {
		content: url(../images/quotes_alt.png);
		padding-right: 10px;
	}

.terminals span {
	float: right;
	color: #e1184a;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	font-size: 0.875em;
}

	.terminals span a {
		font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
		color: #3C3C3C;
		font-size: 1em;
		line-height: 1.5em;
		text-transform: uppercase;
		transition: 0.5s ease;
		-moz-transition: 0.5s ease;
		-o-transition: 0.5s ease;
		-webkit-transition: 0.5s ease;
	}

		.terminals span a:hover {
			color: #e1184a;
		}
/*footer*/
.footer-bg {
	background: #e8e8e8;
}

.footer {
	position: fixed;
	background: #E9E9E9;
	width: 100%;
	bottom: 0;
	padding-top: 12px;
	padding-bottom: 12px;
	border: solid;
	border-width: 1px;
	border-color: #dddddd;
}
.box1 h4 {
	letter-spacing: -1px;
	text-transform: uppercase;
	font-size: 1.5em;
	color: #575757;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	text-shadow: 0 1px 0 white;
}

.btm {
	margin-bottom: 10px;
}

.top {
	margin-top: 10px;
}

.box1 nav ul li img {
	margin-top: 10px;
}

.box1 nav ul li {
	line-height: 1.5em;
}

	.box1 nav ul li a {
		color: #575757;
		line-height: 1.5em;
		font-size: 0.8925em;
	}

		.box1 nav ul li a:hover {
			text-decoration: none;
			color: #e1184a;
		}

.box1 p {
	color: #575757;
	line-height: 1.5em;
	font-size: 0.8925em;
}

.box1_address p span {
	cursor: pointer;
	color: #e1184a;
}

	.box1_address p span:hover {
		color: #575757;
	}
/*footer1*/
.ftr-bg {
	padding: 10px;
	background: #dddddd;
}

.copy {
	text-align: center;
}

	.copy p {
		color: #575757;
		line-height: 1.5em;
		font-size: 0.8925em;
	}

		.copy p a {
			color: #e1184a;
		}

			.copy p a:hover {
				color: #575757;
				-webkit-transition: 0.9s;
				-moz-transition: 0.9s;
				-o-transition: 0.9s;
				transition: 0.9s;
			}
/*---about-us----*/
.about-us {
	display: block;
}

.about-header h3 {
	color: #555555;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 #ffffff;
	text-transform: uppercase;
}

.about-info a {
	text-transform: uppercase;
	font-size: 1em;
	color: #e1184a;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	text-shadow: 0 1px 0 white;
	transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	display: block;
	line-height: 1.5em;
	margin: 5px 0;
}

	.about-info a:hover {
		color: #555555;
	}

.about-info p {
	color: #575757;
	line-height: 1.5em;
	font-size: 0.8925em;
}
/*-----specials-heading----*/
.specials-heading h5 {
	float: left;
	width: 33%;
	height: 1px;
	background: #D1D1D1;
	margin: 24px 0px 0px 0px;
}
/*----special-grid------*/
.special-grid {
	margin-top: 10px;
}

.specials {
	margin-top: 10px;
}

.special-grid a {
	text-transform: uppercase;
	font-size: 1em;
	color: #e1184a;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	text-shadow: 0 1px 0 white;
	transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	-webkit-transition: 0.5s ease;
	padding: 0.5em 0;
	display: block;
}

	.special-grid a:hover {
		color: #555555;
	}

.special-grid p {
	color: #575757;
	line-height: 1.5em;
	font-size: 0.8925em;
}

.specials-grids {
	padding: 10px 0;
}
/*-----specials-heading----*/
.specials-heading h3 {
	color: #555555;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 #ffffff;
	text-transform: uppercase;
}
/*---start-services----*/
.services {
	display: block;
}

.services-header h3 {
	color: #555555;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 #ffffff;
	text-transform: uppercase;
}

.services-grid {
	width: 47.33333%;
	float: left;
	margin-left: 10px;
}

	.services-grid:first-child {
		margin-left: 0;
	}

	.services-grid a {
		text-transform: uppercase;
		font-size: 1em;
		color: #e1184a;
		font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
		text-shadow: 0 1px 0 white;
		transition: 0.5s ease;
		-moz-transition: 0.5s ease;
		-o-transition: 0.5s ease;
		-webkit-transition: 0.5s ease;
		display: block;
		margin: 10px 0;
	}

		.services-grid a:hover {
			color: #555555;
		}

	.services-grid p {
		color: #575757;
		line-height: 1.5em;
		font-size: 0.8925em;
	}
/*start Contact*/
.contact {
	display: block;
}

.map {
	margin-top: 10px;
}

.company_address {
	margin-top: 10px;
}

.span_1_of_2 h2 {
	color: #555555;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 #ffffff;
	text-transform: uppercase;
}

.span_2_of_4 h2 {
	color: #555555;
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	letter-spacing: -1px;
	text-shadow: 0 1px 0 #ffffff;
	text-transform: uppercase;
}

.contact-form {
	position: relative;
	margin-top: 10px;
}

	.contact-form div {
		padding: 5px 0;
	}

	.contact-form span {
		color: #575757;
		display: block;
		font-size: 0.8725em;
		padding-bottom: 5px;
	}

.company_address p {
	padding: 2px 0;
	font-size: 0.8725em;
	color: #575757;
	line-height: 1.5em;
}

	.company_address p span {
		color: #e1184a;
		cursor: pointer;
	}

		.company_address p span:hover {
			color: #575757;
			-webkit-transition: 0.5s;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			transition: 0.5s;
		}

.contact-form input[type="text"], .contact-form textarea {
	font-family: 'Almarai', Arial, Geneva,Helvetica, sans-serif;
	font-size: 0.8725em;
	color: #575757;
	padding: 6px;
	display: block;
	width: 94%;
	background: #FFFFFF;
	border: 1px solid rgba(184, 184, 184, 0.86);
	outline: none;
	-webkit-appearance: none;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.contact-form textarea {
	resize: none;
	height: 120px;
}

	.contact-form input[type="text"]:focus, .contact-form textarea:focus {
		-webkit-transition: 0.9s;
		-o-transition: 0.9s;
		-moz-transition: 0.9s;
		transition: 0.9s;
		box-shadow: 0px 0px 1px rgba(154, 153, 162, 0.69);
		-webkit-box-shadow: 0px 0px 1px rgba(154, 153, 162, 0.69);
	}

.contact-form input[type="submit"] {
	font-family: 'Almarai', 'Arial, Quattrocento Sans', sans-serif;
	background: #6F6F6F;
	color: #ffffff;
	border: 1px solid #646464;
	cursor: pointer;
	padding: 10px 18px;
	display: inline-block;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 400;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

	.contact-form input[type="submit"]:hover {
		outline: none;
		background: #e1184a;
		color: #ffffff;
	}
/*start 404*/
.page {
	padding: 10px 0;
	text-align: center;
}

	.page h3 {
		color: #575757;
		text-shadow: 0 1px 0 #FFFFFF;
		font-size: 8em;
	}

.auto-style11 {
	direction: rtl;
	color: #666666;
	font-size: x-large;
	height: 33px;
	font-weight: normal;
	text-align: center;
	margin-top: 0;
}

.auto-style23 {
	width: 167px;
	height: 84px;
}

.auto-style26 {
	text-align: center;
}

.auto-style27 {
	clear: both;
	text-align: center;
	direction: rtl;
}

.auto-style28 {
	background-color: #F6F6F6;
	font-size: medium;
}

.auto-style29 {
	text-decoration: none;
}

.auto-style30 {
	font-weight: normal;
}

.auto-style31 {
	width: 68px;
	height: 69px;
}

.auto-style32 {
	width: 64px;
	height: 67px;
}

.auto-style33 {
	width: 65px;
	height: 67px;
}

.auto-style34 {
	font-size: medium;
}
.auto-style35 {
	height: 9px;
}

.auto-style36 {
	height: 25px;
}

.auto-style37 {
	text-decoration: none;
	margin-top: 20px;
}

.auto-style38 {
	color: #FFFFFF;
}

.auto-style39 {
	color: #FF3300;
}

.auto-style40 {
	color: #FFFFFF;
}

.auto-style41 {
	color: #666666;
}

.auto-style42 {
	height: 104px;
}
