@font-face {
  font-family: 'hBold';
  src: url('/web/20220107042215im_/https://777bs.ae/assets/fonts/hBold.ttf');
}
@font-face {
  font-family: 'hlight';
  src: url('/web/20220107042215im_/https://777bs.ae/assets/fonts/hlight.ttf');
}

@font-face {
  font-family: 'hMed';
  src: url('/web/20220107042215im_/https://777bs.ae/assets/fonts/hMed.ttf');
}
@font-face {
  font-family: 'hn';
  src: url('/web/20220107042215im_/https://777bs.ae/assets/fonts/hn.ttf');
}












:root { --blueDark  : #1976d2; }
:root { --blueMid   : #00adef; }
:root { --blueLight : #d2f0fb; }


:root { --turqDark  : #36494d; }
:root { --turqLight : #5cbecb; }

:root { --purpleDark  : #4f5ed5; }
:root { --purpleMid   : #5e93fd; }
:root { --purpleLight : #7aa6fd; }

:root { --Black : #000000; }

:root { --greyDark  : #353638; }
:root { --greyLight : #3a3b3d; }

:root { --yellow : #fbdfa7; }




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

body {
	width:100%;
	min-width:100px;
	max-width:666px;
	margin:0 auto;
	font-size:100%;
	font-family: 'Cairo', sans-serif;
	background: #FFF;
	overflow-x: hidden !important;
	overflow-y: auto;
}





* {
	transition: all 0.8s ease;
	margin:0;
	padding:0;
}


*,
*::before,
*::after {
  box-sizing: inherit; 
}

#loader {
	width: 0%;
	height: 3px;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--blueDark);
	z-index: 1001;
	transition: all 0.6s  ease !important;
	opacity: 0;
}

.loader-showed {
	opacity: 1 !important;
	transition: all 0.6s ease !important;
}

#loader span {
	vertical-align: middle;
	display: block;
	text-align: center;
	margin-top:20%;
	color: var(--white);
	display: none !important;
}
#loader span img {
	width: 3%;
	display: none !important;
}

ul {
	list-style: none;
}
.zero {
	float: none;
	clear: both;
	width: 0px !important;
}

a {
	text-decoration: none;
	color: inherit;
}
.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}


.pc_only {
	display: block;
}

.mob_only {
	display: none !important;
}

.tablet_only {
	display: none;
}











header {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

.logoContainer {
	width: 95%;
	margin: 0 auto;
	text-align: center;
	padding: 5% 0;
}

.logo {
	width: 45%;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

.logo img {
	width: 90%;
}

#mobBtn {
	width: 45%;
	display: inline-block;
	vertical-align: middle;
	text-align: right;
}
#mobBtn i {
	display: block;
	font-size: 1.5em;
}










.socials {
	width: 45%;
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	display: none !important;
}

.socials a {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	margin: 0 2%;
}

.socials a i {
	padding: 2%;
	display: block;
}




.mainNav {
	width: 100%;
	background: rgba(0,0,0,0.8);
	margin: 0 auto;
	text-align: right;
	padding: 0 10%;
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	z-index: 999;
}

.mainNavShowed {
	left: 0 !important;
}

.mainNav a {
	min-width: 100%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	color: #FFFFFF;
	text-transform: uppercase;
	padding: 5% 0;
	font-weight: bold;
}

.activeNav {
	background: var(--blueDark);
}

.mainNav a:hover {
	color: var(--yellow);
}

.mainNav a span {
	width: 100%;
	display: block;
}

.mobCloser {
	font-size: 2em;
	color: var(--blueLight) !important;
}

.slider {
	width: 100%;
	margin: 0 auto;
	height: 26em;
	position: relative;
}


.slider .slide {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}
.slider .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sliderText {
	position: absolute;
	top: 30%;
	left: 5%;
	overflow: hidden;
	z-index: 1;
}


.sliderText h1 {
	width: 90%;
	text-transform: uppercase;
	font-size: 2.5em;
	color: var(--blueDark);
	border-bottom: 3px solid var(--blueDark);
	margin-bottom: 3%;
	font-weight: normal;
	letter-spacing: 2px;
}

.sliderText h6 {
	font-weight: normal;
	font-size: 1.0em;
	opacity: 0.6;
	text-transform: capitalize;
	width: 90%;
}



.mainSection {
	width: 100%;
	margin: 0 auto;
}

.bg-blue {
	background: var(--blueDark);
	color: #FFFFFF;
}

.welcomeText {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 5% 0;
}
.welcomeText h1 {
	font-size: 1.5em;
	width: 90%;
	margin: 5% auto;
	text-transform: uppercase;
}

.welcomeText p {
	width: 75%;
	margin: 0 auto;
	font-size: 1.1em;
	opacity: 0.8;
	text-align: justify;
}

.pageText {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	padding: 8% 4%;
}
.pageText h1 {
	font-size: 1.5em;
	margin: 1% auto;
	text-transform: uppercase;
	text-align: center;
	
}


.boxContainer {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.box {
	width: 90%;
	margin: 2%;
	display: inline-block;
	vertical-align: top;
	border: 1px solid #e6e6e6;
	padding: 4% 0;
	box-shadow: 1px 2px 5px #e6e6e6;
}
.box .icon {
	overflow: hidden;
	padding: 3em 0;
	margin: 0 auto;
	border-radius: 150px;
	width: 35%;
	display: block;
	text-align: center;
}
.box .icon i {
	vertical-align: middle;
	font-size: 1.5em;
}

.box h3 {
	font-size: 1.3em;
	margin: 3% auto;
}
.box p {
	font-size: 1.0em;
	margin: 5% auto;
	opacity: 0.7;
	width: 90%;
	text-align: justify;
}




.indexArticle {
	width: 100%;
	margin: 4% auto;
	text-align: center;
}
.fullWidth .articleTexter {
	width: 85% !important;
}
.indexArticle .articleImage {
	width: 100%;
	margin: 4% auto;
	display: block;
}
.indexArticle .articleImage img {
	width: 100%;
	margin: 0 auto;
}
.indexArticle .articleTexter {
	width: 90%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin: 0 1%;
}
.indexArticle .articleTexter h1 {
	width: 100%;
	padding: 4% 0;
	font-size: 1.8em;
	margin-top: 0;
	padding-top: 0;
	border-bottom: 2px solid rgba(0,0,0,0.3);
	text-transform: capitalize;
}
.indexArticle .articleTexter p {
	width: 100%;
	padding: 2% 0;
	display: block;
	font-size: 1.0em;
	opacity: 0.6;
	text-align: justify;
}

.articleSeparater {
	width: 100%;
	margin: 0 auto;
	padding: 5%;
	background: var(--blueDark);
}

p {
	font-size: 1em !important;
}


.serviceSubViewer {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.serviceSubViewer .service {
	display: inline-block;
	width: 90%;
	margin: 1%;
	vertical-align: top;
	text-align: center;
}

.serviceSubViewer .service i {
	display: inline-block;
	width: 20%;
	margin: 1%;
	vertical-align: middle;
	text-align: center;
	background: var(--blueDark);
	color: #FFF;
	padding: 3%;
	border-radius: 3px;
	font-size: 1.5em;
}
.serviceSubViewer .service h3 {
	width: 75%;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	padding: 3% 1%;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 2px;
}





















footer {
	width: 100%;
	margin: 0 auto;
	padding: 4% 0;
	background: var(--greyDark);
	text-align: center;
}

.footerCol {
	width: 95%;
	display: block;
	margin: 0 auto;
	vertical-align: top;
}

footer .socials {
	color: #FFF;
	text-align: center;
	margin: 2% auto;
	font-size: 1.5em;
}
footer .socials a {
	opacity: 0.8;
	cursor: pointer;
	margin: 0 5%;
}
footer .socials a:hover {
	opacity: 1;
}








footer .footerLogo {
	width: 90%;
	margin: 8% auto;
	text-align: center;
	padding: 3% 0;
}
footer .footerLogo img {
	width: 50%;
	margin: 0 auto;
}

footer address {
	width: 100%;
	margin: 0 auto;
	color: #FFF;
	text-align: center;
}
footer address p {
	display: inline-block;
	margin: 0.5%;
}



footer .rights {
	width: 100%;
	margin: 1% auto;
	color: #FFFFFF;
	font-size: 0.8em;
	opacity: 0.6;
	margin-top: 3%;
}

.contactForm {
	width: 100%;
	margin: 0 auto;
}


.contactForm .formGroup {
	width: 100%;
	margin: 5% auto;
	padding: 1%;
}
.contactForm .formGroup input,
.contactForm .formGroup textarea  {
	width: 90%;
	margin: 0 auto;
	padding: 4% 2%;
	border-radius: 3px;
	border: none;
}

.contactForm .formGroup button  {
	width: 90%;
	margin: 0 auto;
	padding: 4% 2%;
	border-radius: 3px;
	border: none;
	background: var(--blueDark);
	color: #FFFFFF;
	font-size: 1.2em;
	cursor: pointer;
}
.contactForm .formGroup button:hover {
	opacity: 1;
}



.footerMenu {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	color: #FFF;
}
footer .mainSpan {
	width: 90%;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	border-bottom: 2px solid rgba(255,255,255,0.3);
	color: #FFF;
	margin-bottom: 10%;
	margin-top: 10%;
	padding: 2% 0;
}
.footerNav {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.footerNav a {
	display: block;
	width: 100%;
	text-transform: capitalize;
	margin: 3% auto;
	font-size: 1.2em;
	opacity: 0.6;
	cursor: pointer;
}
.footerNav a:hover {
	opacity: 1;
}























/*
     FILE ARCHIVED ON 04:22:15 Jan 07, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 15:39:43 Jan 24, 2024.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  exclusion.robots: 0.083
  exclusion.robots.policy: 0.073
  cdx.remote: 0.089
  esindex: 0.01
  LoadShardBlock: 87.017 (6)
  PetaboxLoader3.datanode: 81.75 (7)
  load_resource: 85.186
  PetaboxLoader3.resolve: 26.716
*/