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

body {
	width:100%;
	min-width:100px;
	max-width:699px;
	margin:0 auto;
	font-size:100%;
	font-family: 'Montserrat', serif;
	overflow-x: hidden !important;
	overflow-y: auto;
	background: var(--primary);
}

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

.pc_only {
	display: none !important;
}

.mob_only {
	display: block !important;
}

.tablet_only {
	display: none;
}

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


.row {
	width: 98%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.col-1 {
	width: 98%;
}
.col-2 {
	width: 98%;
}
.col-3 {
	width: 98%;
}
.col-4 {
	width: 98%;
}











.mainHeader {
	width: 100%;
	padding: 1.5em 10%;
	border-bottom: 2px solid var(--white);
	background: var(--primary);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mobMnu {
  font-size: 2em;
	color: var(--white);
	cursor: pointer;
	width: 20%;
	text-align: center;
}
.logoLine {
	width: 20%;
	text-align: center;
	margin: 0;
}
.logoLine a.logoContainer {
	width: 100%;
	display: block;
}
.logoLine a.logoContainer img.mainLogo {
	width: 100%;
}

.headerRow {
	width: 0;
	height: 0;
	display: none !important;
}


.mobNav {
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	margin-top:1em;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary);
	z-index: 999;
}
.mobNavHidden {
	left: -100% !important;
	opacity: 0;
}
.mobNav .mobNavCloser {
	width: 100%;
	text-align: center;
	color: #FFF;
	font-size: 2.5em;
	margin-bottom: 1%;
}
.mobNav .mainNav {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.mobNav .mainNav a.navLink {
	min-width: 30%;
	margin: 5% 0;
	position: relative;
	text-align: center;
}
.mobNav .mainNav a.navLink span {
	color: var(--white);
	font-weight: 600;
	font-size: 1.1em;
}
.mobNav .mainNav a.navLink .dec {
	width: 0%;
	height: 2px;
	background: var(--secondary);
	margin-top: 0.5em;
}
.mobNav .mainNav a.navLink:hover span {
	color: var(--secondary) !important;
}
.mobNav .mainNav a.navLink:hover .dec {
	width: 100% !important;
}
.mobNav .mainNav a.selectedNav .dec {
	width: 100% !important;
}
.mobNav .mainNav a.selectedNav span {
	color: var(--secondary) !important;
}



.mobNav .contactNo {
	width: 70%;
	margin: 0;
	text-align: center;
	border-top: 1px solid #FFF;
	padding-top: 1.5em;
}
.mobNav .contactNo i {
	color: var(--secondary);
}
.mobNav .contactNo span {
	color: var(--white);
	font-weight: 600;
}




.slider {
	width: 100%;
	margin: 0 auto;
	height: 45em;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	display: flex;
	justify-content: center;
	align-items: center;
}








.searchContainer {
	width: 100%;
	background: var(--primary);
	border-radius: 0px;
	padding: 3em 1em;
}

.searchContainer h1.sliderTitle {
	width: 100%;
	margin: 1% auto;
	text-align: center;
	color: var(--white);
	font-size: 2.0em;
	margin-bottom: 3%;
}

.searchContainer .searchForm {
	width: 100%;
	margin: 1% auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

.searchContainer .searchForm .col-4 {
	width: 24%;
}
.searchContainer .searchForm .col-3rd {
	width: 74.7%;
}

.searchContainer .searchForm .formSelector {
	width: 100%;
	margin: 0% auto;
	padding: 1em 0.5em;
	font-size: 1.1em;
}


.searchFormBtn {
	width: 100%;
	padding: 1.1em 0;
	border-radius: 3px;
	border: none;
	font-family: inherit;
	font-size: 1.1em;
	font-weight: bold;
	background: var(--secondary);
	color: var(--white);
	cursor: pointer;
}
.searchFormBtn:hover {
	opacity: 0.7;
}


.superSelect {
	width: 100%;
	margin: 0 auto;
	position: relative;
	margin-bottom: 1em;
	z-index: 2;
}

.superSelect .userInput {
	width: 100%;
	margin: 0 auto;
	padding: 1em 0.5em;
	font-family: inherit;
	font-size: 1.1em;
}

.superSelect .optionMenu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: white;
	min-height: 6em;
	max-height: 12em;
	overflow-y: scroll;
	transform-origin: top center;
	transform: scale(1,1);
	opacity: 1;
	border: 1px solid;
	border-top: none;
}
.superSelect .optionMenuHidden {
	transform: scale(1,0) !important;
	opacity: 0 !important;
}
.superSelect .optionMenu .selectItem {
	width: 100%;
	margin: 0 auto;
	padding: 0.5em;
}
.superSelect .optionMenu .selectItem:hover {
	background: var(--primary);
	color: var(--white);
}
.superSelect .optionMenu .selectItem span {
	display: block;
}

.superSelectAddedItems {
	width: 100%;
	margin: 0.5em auto;
	display: flex;
	justify-content: start;
	align-items: stretch;
	flex-wrap: wrap;
}
.superSelectAddedItems .item {
	background: var(--secondary);
	padding: 0.6em;
	border-radius: 5px;
	margin-inline-end: 0.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	cursor: pointer;
}
.superSelectAddedItems .item:hover {
  opacity: 0.7;
}
.superSelectAddedItems .item span {
	margin-inline-end: 0.5em;
	color: var(--white);
}
.superSelectAddedItems .item i {
	display: block;
}



/*
----------------------------------------------------------
*/
.counters {
	width: 100%;
	margin: 0 auto;
	padding: 3% 16%;
	background: URL('../../uploads/parallax.jpg') no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	position: relative;
}
.counters .countersFilter {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.65);
}
.counters .countersData {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	z-index: 5;
	position: relative;
}

.counters .countersData .counterBox {
	width: 45%;
	margin: 3% 0;
	padding: 2%;
	background: rgba(255,255,255,0.4);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.counters .countersData .counterBox .thsIcon {
	width: 5em;
	height: 5em;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--secondary);
	border-radius: 150px;
	margin-bottom: 1em;
}
.counters .countersData .counterBox .thsIcon i {
	font-size: 1.5em;
	color: var(--white);
}



.counters .countersData .counterBox .thsCount {
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	color: var(--white);
	font-weight: bold;
}


.counters .countersData .counterBox .thsLabel {
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	color: var(--white);
}





.siteContainer {
	width: 100%;
	margin: 0 auto;
	padding: 10% 6%;
	padding-bottom: 0;
	margin-bottom: 2em;
}
.siteContainer h1 {
	width: fit-content;
	margin: 0;
	color: var(--white);
	font-size: 1.8em;
	text-transform: capitalize;
	display: block;
	letter-spacing: 1px;
}
.siteContainer h1 .h1Dec {
	width: 40%;
	height: 5px;
	background: var(--secondary);
	border-radius: 5px;
	margin-top: 0.2em;
}

.secondaryBg {
	background: var(--secondary);
	color: var(--white);
	padding-bottom: 3% !important;
}
.indexParagraph {
	font-size: 1.1em;
	line-height: 1.8;
	text-align: justify;
}
.indexParagraph a {
	font-weight: bold;
}

.propertiesContainer {
	width: 100%;
	margin: 0 auto;
	padding: 3% 5%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	margin-bottom: 2em;
}

.propertyCard {
	width: 98%;
	margin: 2%;
	background: var(--white);
	border-radius: 10px;
	position: relative;
}

.propertyCard .propertyPurpose {
	position: absolute;
	top: 5%;
	left: 5%;
	background: var(--white);
	padding: 0.5em 1em;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.propertyCard .propertyType {
	width: 30%;
	position: absolute;
	top: 13%;
	left: 5%;
	background: var(--white);
	padding: 0.5em 1em;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}




.propertyCard .propertyImageBox {
	width: 99.4%;
	height: 14em;
	margin:  0.3%;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	margin-bottom: 7%;
	overflow: hidden;
}
.propertyCard .propertyImage {
	display: block;
	margin:  0.3%;
	width: 99.4%;
	height: 14em;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.developerCard .propertyImageBox {
	height: 20em;
}
.developerCard .propertyImage {
	height: 20em;
}
.propertyCard:hover .propertyImage {
	transform: scale(1.15);
}


.propertyCard .propertyPrice {
	width: 80%;
	margin: 4% auto;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
	color: var(--secondary);
	margin-bottom: 5%;
}
.propertyCard .propertyPrice img.dirham {
	width: 7%;
	display: block;
	margin-inline-end: 4%;
}
.propertyCard .propertyPrice span {
	display: block;
	font-size: 1.8em;
	font-weight: 600;
	letter-spacing: 2px;
}

.propertyCard .propertyArea {
	width: 80%;
	margin: 1% auto;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
	opacity: 0.4;
}
.propertyCard .propertyArea i {
	display: block;
	margin-inline-end: 2%;
	font-size: 0.9em;
}
.propertyCard .propertyArea span {
	display: block;
	font-weight: 600;
	font-size: 0.9em;
}

.propertyCard .propertyName {
	width: 80%;
	margin: 1% auto;
	font-size: 1.3em;
	font-weight: bold;
	letter-spacing: 1px;
	opacity: 0.9;
	text-transform: capitalize;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-bottom: 5%;
	text-align: start;
}
.projectCard .propertyName {
	text-overflow: initial !important;
	overflow: initial !important;
	white-space: initial !important;
	
}



.propertyDataRow {
	width: 80%;
	margin: 1% auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: nowrap;
	padding-bottom: 5em;
}
.propertyDataRow .pDataView {
	width: 45%;
	display: flex;
	justify-content: start;
	align-items: stretch;
	flex-wrap: nowrap;
}
.propertyDataRow .pDataView .dataIcon {
	font-size: 1.8em;
	display: flex;
	justify-content: start;
	align-items: center;
	margin-inline-end: 8%;
	opacity: 0.7;
}
.propertyDataRow .pDataView .dataIcon i {
	display: block;
	vertical-align: middle;
}

.propertyDataRow .pDataView .dataResult {
	width: 55%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: nowrap;
	flex-direction: column;
}
.propertyDataRow .pDataView .dataResult .dataValue {
	display: block;
	text-align: start;
	font-size: 1.4em;
}
.propertyDataRow .pDataView .dataResult .dataUnit {
	display: block;
	text-align: start;
	font-weight: bold;
	opacity: 0.7;
	text-transform: capitalize;
	color: var(--secondary);
}

.propertyCard .bottomDec {
	width: 60%;
	margin: 0 auto;
	border-radius: 5px;
	background: #000;
	opacity: 0.2;
	height: 3px;
	margin-bottom: 5%;
}

.propertyCard .propertyLink {
	width: 80%;
	margin: 0 auto;
	display: block;
	text-align: center;
	background: var(--secondary);
	padding: 1em;
	border-radius: 5px;
	font-weight: bold;
	text-transform: capitalize;
	font-size: 1.1em;
	color: var(--white);
}
.propertyCard .propertyLink:hover {
	opacity: 0.7;
}


.showMoreProperties {
	display: block;
	width: 40%;
	margin: 0 auto;
	border-radius: 5px;
	background: var(--secondary);
	text-align: center;
	padding: 0.5em;
	font-size: 1.4em;
	margin-top: 3%;
	color: var(--white);
}
.showMoreProperties:hover {
	cursor: pointer;
	opacity: 0.7;
}




.pageHeader {
	width: 100%;
	margin: 0 auto;
	padding: 3% 0%;
	margin-top: 10%;
}
.pageHeader .pageTitle {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20em;
	border-radius: 10px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.pageHeader .pageTitle h1 {
	color: var(--white);
	font-size: 2.5em;
	text-transform: capitalize;
	letter-spacing: 2px;
	padding: 0.5em;
	border-bottom: 2px solid var(--white);
	background: rgba(0,0,0,0.5);
	border-radius: 10px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	width: 80%;
	text-align: center;
}


.pagePagintation {
	width: 90%;
	margin: 0 auto;
	padding: 1% 16%;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: wrap;
}
.pagePagintation a.pageLink {
	display: block;
	margin: 1%;
	background: var(--white);
	padding: 1em;
	border-radius: 5px;
	font-weight: bold;
	color: var(--primary);
	width: 22%;
}
.pagePagintation a.pageLink:hover {
	opacity: 0.7;
}

.pageSelected {
	background: var(--secondary) !important;
	color: var(--white) !important;
}







.aboutPar {
	width: 100%;
	margin: 0 auto;
	padding: 3% 5%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}
.aboutPar h1 {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	color: var(--white);
	margin-bottom: 0.75em;
	letter-spacing: 1px;
	line-height: 1.8;
}

.aboutPar p {
	width: 100%;
	margin: 0 auto;
	text-align: justify;
	color: var(--white);
	margin-bottom: 0.75em;
	line-height: 1.8;
	text-align: justify;
}



.aboutBoxes {
	width: 100%;
	margin: 0 auto;
	padding: 3% 5%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}
.aboutBoxes .aboutBox {
	width: 100%;
	padding: 10%;
	background: var(--secondary);
	border-radius: 10px;
	padding-bottom: 2em;
	margin-bottom: 2em;
}
.aboutBoxes .aboutBox h1 {
	width: 25%;
	color: var(--white);
	margin-bottom: 0.75em;
	letter-spacing: 1px;
}
.aboutBoxes .aboutBox p {
	display: block;
	width: 100%;
	line-height: 1.8;
	text-align: justify;
}







.faqContainer {
	width: 100%;
	margin: 0 auto;
	padding: 3% 5%;
}
.faqContainer .faq {
	width: 98%;
	margin: 0 auto;
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--white);
}
.faqContainer .faq h1 {
	width: 100%;
	margin: 0 auto;
	color: var(--secondary);
	margin-bottom: 0.75em;
	letter-spacing: 1px;
}
.faqContainer .faq p {
	display: block;
	width: 95%;
	margin: 0 auto;
	line-height: 1.8;
	text-align: justify;
	color: var(--white);
	margin-bottom: 1em;
}





.contactBoxes {
	width: 100%;
	margin: 0 auto;
	padding: 1% 5%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}
.contactBoxes .contactBox {
	width: 100%;
	margin: 5% 0;
	border: 1px solid var(--white);
	border-radius: 10px;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	flex-direction: column;
	padding: 1em;
}
.contactBoxes .contactBox .dec {
	width: 12%;
	position: absolute;
	top: -20%;
	left: 5%;
	height: 4em;
	background: var(--secondary);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	color: var(--white);
}


.contactBoxes .contactBox .label {
	width: 100%;
	text-align: start;
	color: var(--white);
	font-size: 1.2em;
	padding-left: 20%;
	margin-bottom: 1%;
	opacity: 0.7;
	text-transform: capitalize;
}
.contactBoxes .contactBox .value {
	width: 100%;
	text-align: start;
	color: var(--white);
	font-size: 1.0em;
	padding-left: 20%;
	font-weight: bold;
}

.mapView {
	width: 68%;
	margin: 5% auto;
	padding: 1%;
	height: 15em;
	color: white;
	border: 1px solid var(--white);
	border-radius: 10px;
	display: none;
}



.contactForm {
	width: 90%;
	margin: 5% auto;
	padding: 1%;
	background: var(--white);
	border-radius: 10px;
}
.contactForm h1 {
	width: 98%;
	margin: 0 auto;
	color: var(--primary);
	margin-bottom: 0.75em;
	letter-spacing: 1px;
}

.formInputs {
	width: 95%;
	margin: 2% auto;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}
.formInputs .cs100 {
	width: 100%;
}
.formInputs .cs50 {
	width: 100%;
}


.formInputs .formGroup {
	margin-bottom: 5%;
}
.formInputs .formGroup label {
	display:block;
	width: 100%;
	margin: 0 auto;
	text-transform: capitalize;
	font-weight: bold;
	margin-bottom: 0.75em;
}

.formInputs .formGroup input,
.formInputs .formGroup textarea {
	width: 100%;
	margin: 0 auto;
	display:block;
	font-family: inherit;
	border: 1px solid var(--primary);
	border-radius: 5px;
	padding: 0.5em;
	font-size: 1.3em;
	background: #f8f8f8;
	border-radius: 5px;
	color: var(--primary);
}

.formGroup .submitBtn {
	display: block;
	width: 20%;
	margin: 0 auto;
	padding: 1em;
	border: none;
	background: var(--secondary);
	color: var(--white);
	font-family: inherit;
	font-weight: bold;
	font-size: 1.1em;
	border-radius: 10px;
}
.formGroup .submitBtn:hover {
	opacity: 0.7;
	cursor: pointer;
}


.captcha {
	width: 50% !important;
	margin: 0 auto;
	display: flex;
	margin-bottom: 2em;
}
.captcha img {
	width: 40%;
	display:block;
}
.captcha input {
	width: 40%;
	display:block;
	font-family: inherit;
	border: 1px solid var(--primary);
	border-radius: 5px;
	padding: 0.5em;
	font-size: 1.3em;
	background: #f8f8f8;
	border-radius: 5px;
	color: var(--primary);
}





































footer {
	width: 100%;
	margin: 0 auto;
	padding: 3% 5%;
	padding-top: 5em;
}
footer .rights {
	width: 100%;
	margin: 0 auto;
	border-top: 1px solid var(--white);
	padding-top: 1em;
	font-size: 0.8em;
	color: var(--secondary);
}


.footerCols {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: nowrap;
}
.footerCols .footerLeft {
	width: 80%;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-direction: column;
	padding: 1em 0;
}


.footerCols .footerLeft .footerLogo {
	width: 100%;
	display: block;
	margin-bottom: 1em;
}
.footerCols .footerLeft .footerLogo img {
	width: 80%;
	display: block;
}
.footerSocials {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
	margin-bottom: 1em;
	padding-left: 1em;
}
.footerSocials a {
	display: block;
	margin-inline-end: 10%;
}
.footerSocials a i {
	display: block;
	color: var(--secondary);
	font-size: 2em;
}

.footerCols .footerRight {
	width: 80%;
}