@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

/* Main Colors */
:root { --mainRed        : #d4403c; }
:root { --mainRedLight   : #fcd4d4; }
:root { --mainGreen      : #9ed196; }
:root { --mainGreenLight : #d4f9d8; }
:root { --mainGrey       : #e6e7e9; }
:root { --mainGreyDark   : #cccccc; }
:root { --mainGreyLight  : #f2f2f2; }
:root { --mainBlue       : #2cafff; }

/* BS colors */
:root { --bs-default      : #333333; }
:root { --bs-primary      : #2375b7; }
:root { --bs-success      : #4cae4c; }
:root { --bs-info         : #5bc0de; }
:root { --bs-warning      : #f0ad4e; }
:root { --bs-danger       : #d9534f; }
/* Sub Colors */
:root { --Black    : #000000; }
:root { --White    : #FFFFFF; }
:root { --grey     : #eaeaea; }
/* border Color */
:root { --borderColor : rgba(0,0,0,0.2); }

html {
    overflow-x: hidden;
	 box-sizing: border-box;
}

body {
	width:100%;
	min-width:700px;
	max-width:1025px;
	margin:0 auto;
	font-size:100%;
  font-family: 'Tajawal', sans-serif;
	overflow-x: hidden !important;
	overflow-y: auto;
}

* {
	transition: all 0.3s ease;
	margin:0;
	padding:0;
}
*,
*::before,
*::after {
  box-sizing: inherit; 
}

.pc_only {
	display: none !important;
}

.mob_only {
	display: none !important;
}

.tablet_only {
	display: block;
}

.text-start {
	text-align: start;
}
.text-end {
	text-align: end;
}
a {
	text-decoration: none;
	color: inherit;
}










header {
	width: 100%;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
}
.headerBlackRow {
	background: #000;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: #FFF;
}
.headerBlackRow .logo {
	width: 70%;
	margin: 0 auto;
	display: block;
	display: flex;
	justify-content: start;
	align-items: center;
}
.headerBlackRow .logo a {
	width: 10%;
	display: block;
	display: flex;
	justify-content: center;
	align-items: center;
}
.headerBlackRow .logo a img {
	width: 100%;
}
.headerBlackRow .logo span {
	width: 80%;
	margin-left: 1%;
	display: block;
}

.headerBlackRow .menuBtn {
	display: none;
}
.headerBlackRow .langSelect {
	background: var(--mainRed);
	padding: 0.8em 0;
	width: 5%;
	margin-right: 3%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.headerBlackRow .langSelect span {
	display: block;
	font-size: 1.6em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.headerBlackRow .signInOut {
	padding: 0.5em 0;
	width: 7%;
	margin-right: 3%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.headerBlackRow .signInOut span {
	display: block;
	width: 90%;
	font-size: 1.3em;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #FFF;
	padding: 0.3em;
}



.headerRedRow {
	width: 100%;
	margin: 0 auto;
	padding: 0.5em;
	background: var(--mainRed);
	color: #FFF;
}
.headerRedRow nav {
	width: 90%;
	margin: 0 auto;
	display: flex;
	display: flex;
	justify-content: start;
	align-items: center;
}
.headerRedRow nav a {
	display: block;
	text-transform: capitalize;
	font-size: 1.3em;
	margin: 0 2%;
}


.mainSlider {
	width: 100%;
	margin: 0 auto;
	margin-top: 2%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	background: #000;
	color: #FFF;
}

.mainSlider .slideCol {
	width: 50%;
}
.mainSlider .slideColWithBg {
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}
.mainSlider .slideColWithoutBg {
	padding-bottom: 5%;
}
.mainSlider .headingText {
	width: 60%;
	margin: 0 auto;
	margin-top: 20%;
	border-left: 5px solid #FFF;
	padding-left: 3%;
}
.mainSlider .headingText h1 {
	width: 100%;
	font-size: 5em;
	text-transform: capitalize;
}
.mainSlider .headingText p {
	font-size: 2em;
	text-transform: capitalize;
}

.mainSlider .trackForm {
	width: 60%;
	margin: 3% auto;
}
.mainSlider .trackForm h2 {
	width: 95%;
	margin: 0 auto;
	font-weight: normal;
	font-size: 1.8em;
}
.mainSlider .trackForm .trackInput {
	background: #FFF;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 0.5em;
}
.mainSlider .trackForm .trackInput input {
	width: 80%;
	border: none;
}
.mainSlider .trackForm .trackInput button {
	width: 20%;
	background: #000;
	color: #FFF;
	padding: 2%;
	display: flex;
	justify-content: center;
	align-items: stretch;
}
.mainSlider .trackForm .trackInput button img {
	width: 30%;
	vertical-align: middle;
}
.mainSlider .trackForm .trackInput button span {
	display: block;
	text-transform: capitalize;
	margin-left: 5%;
	font-size: 1.3em;
}

.mainSlider .slideBtn {
	width: 40%;
	margin: 3% auto;
	margin-left: 20%;
	padding: 2%;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.mainSlider .slideBtn span {
	font-size: 1.8em;
	text-transform: capitalize;
}
.mainSlider .slideBtn img {
	width: 20%;
}
.mainSlider .redOne {
	background: var(--mainRed);
}
.mainSlider .greenOne {
	background: var(--mainGreen);
}

.pageGreyContainer {
	width: 100%;
	margin: 0 auto;
	background: var(--mainGrey);
	padding: 1em 0;
}
.pageWhiteContainer {
	width: 100%;
	margin: 0 auto;
	background: #FFF;
	padding: 1em 0;
}
.pageHeading {
	width: 80%;
	margin: 1% auto;
	text-transform: capitalize;
	text-align: center;
	font-size: 2em;
	color: var(--mainRed);
	padding: 0.3em 0;
	border-bottom: 5px solid var(--mainGrey);
}
.pagePar {
	width: 70%;
	margin: 1% auto;
	text-align: center;
	font-size: 1.5em;
}


.servicesContainer {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

.serviceBox {
	width: 31%;
	background: var(--mainGrey);
	border-radius: 10px;
	margin: 2% 0;
	padding: 1%;
}
.serviceBox .serviceBoxBg {
	height: 15em;
	margin: 3% auto;
	width: 100%;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}
.serviceBox h2 {
	width: 100%;
	margin: 3% auto;
	text-align: center;
	text-transform: capitalize;
	color: var(--mainRed);
}
.serviceBox p {
	width: 100%;
	margin: 3% auto;
	font-size: 1.3em;
}
.serviceBox a {
	width: 100%;
	margin: 3% auto;
	display: block;
	font-weight: bold;
	font-size: 1.3em;
}



  
  
footer {
	background-image: url('../../uploads/footer.jpg');
	width: 100%;
	margin: 0 auto;
	padding: 0;
	padding-top: 20em;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.footerRow {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #FFF;
	background: rgba(0,0,0,0.5);
	padding: 1em 5%;
}
.footerLogoCol {
	width: 20%;
}
.footerLogoCol .logo {
	width: 100%;
	margin: 5% auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footerLogoCol .logo a {
	width: 35%;
}
.footerLogoCol .logo a img {
	width: 100%;
}
.footerLogoCol .logo span {
	width: 60%;
	color: var(--mainRed);
	border-left: 2px solid;
	padding-left: 3%;
	font-size: 0.7em;
}

.footerLogoCol .franchise {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footerLogoCol .franchise span {
	width: 65%;
	color: #FFF;
	border-right: 2px solid var(--mainRed);
	padding-right: 3%;
}
.footerLogoCol .franchise img {
	width: 30%;
}

.footerNavCol {
	width: 50%;
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.footerNavCol .navCol {
	width: 23%;
}
.footerNavCol .navCol h3 {
	width: 100%;
	margin: 3% auto;
	text-transform: capitalize;
}
.footerNavCol .navCol a {
	display: block;
	width: 100%;
	margin: 3% auto;
	text-transform: capitalize;
}

.footerSocialCol {
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footerSocialCol a {
	display: block;
	width: 2em;
	height: 2em;
	margin: 1% 5%;
}
.footerSocialCol a img {
	width: 2em;
	height: 2em;
}


.footerRights {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	background: rgba(0,0,0,0.5);
	padding-bottom: 3%;
}
.footerRights p {
	width: 60%;
	margin: 0% auto;
	display: block;
	border-top: 2px solid #FFF;
	text-align: center;
	font-size: 0.7em;
	padding: 0.5% 0;
}





.comboBox {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.comboBox .comboBoxList {
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 100%;
	left: 0;
	background: #f2f2f2;
	border: 1px solid #000;
	border-top: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	overflow-y: scroll;
	height: 10em;
	z-index: 50;
}
.comboBoxHidden {
	height: 0em !important;
	opacity: 0;
}

.comboBox i {
	position: absolute;
	left: 5%;
	top: 30%;
	z-index: 50;
	cursor: pointer;
	opacity: 0.5;
}
.comboBox i.fa-caret-square-down {
	display: none;
}
.mainComboBoxHidden i.fa-times-circle {
	display: none;
}
.mainComboBoxHidden i.fa-caret-square-down {
	display: block !important;
}




.comboBox .comboBoxList div {
	width: 100%;
	margin: 0 auto;
	padding: 0.2em;
}
.comboBox .comboBoxList div:hover {
	background: #d1efff;
	color: #000;
	cursor: pointer;
}