html,
body {
	margin: 0;
	overflow-x: hidden;
	background-color: #0D0D0D;
	height: 100%;
	margin-top: 0px;
	font-family: 'Gudea', sans-serif;
	font-size:18px;
}
img {display: block; width:100%; object-fit: cover;}

section {width:100%; position:relative; float:left; height:auto; /*calc(100% - 64px - 32px);*/
	background-image: url("./assets/bg.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;}
.hidden {display: none !important;}

.pre-header
{
	width: 100%;
	position: relative;
	float: left;
	height: auto;
	text-align: center;
	background-color: #000;
	font-size:12px;
	color:#ffffff;
	font-family: "Gudea", sans-serif;
}
  .langSelect {
    text-align: center;
	position: relative;
	width: 100px;
	float: right;
	top:50%; 
	transform:translateY(-50%);
}
.lang_button {
    display: inline-block;
    vertical-align: middle;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    font-size: 0.9rem;
    margin-left: 5px;
    outline: none;
    border-radius: 3px;
    line-height: 1.2;
}
.lang_button.text {
    padding: 5px 8px;
    /* box-shadow: 0px 0px 1px 2px rgba(255, 255, 255, 0.15); */
}

  header{
	position: relative;
	float: left;
	top:0;
	width:100%;
	height:61px;
	background-color:#061B1B;
	color: white;
	text-align: center;
  }
  .logo {
    width: 230px;
    height: 64px;
	/* display: inline-block; */
	/* margin: 0 auto; */
	position: relative;
	margin-left: 20px;
	float: left;
}
  .logo img {
	width: 15%;
    max-width: 50px;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.logo h1 
{
	color: #ffffff;
    display: inline-block;
    font-size: 28px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    position: relative;
}
.fasa
{
	position: relative;
	width:100%;
	height:64px;
	background-color:#8bc832;
	color:#FFFFFF;
	font-weight:700;
	left: -98vw;
	transition:left 500ms ease-in-out;
	-webkit-transition:left 500ms ease-in-out;
	-moz-transition:left 500ms ease-in-out;
	-o-transition:left 500ms ease-in-out;
	animation: animateFasaText 1200ms ease infinite;
}
.fasa p{
	font-size: 50px;
	text-align: center;
	margin: 0.6vw 0 20px 0;
}
.fasa.loaded {left:0;}

@keyframes animateFasaText {
	0% {color: #FFFFFF;}
	100% {color: #000000;}
}
@-moz-keyframes animateFasaText {
	0% {color: #FFFFFF;}
	100% {color: #000000;}
}
@-o-keyframes animateFasaText {
	0% {color: #FFFFFF;}
	100% {color: #000000;}
}
@-webkit-keyframes animateFasaText {
	0% {color: #FFFFFF;}
	100% {color: #000000;}
}

.container
{
	width:80%;
	position: relative;
	margin:0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	margin-top:50px;
}
.left_img, .form_container, .right_img {flex:0 33%;}
.left_img, .right_img {max-width:500px; margin:0 auto;}

.steps
{
	width:244px;
	height:22px;
	position: relative;
    margin: 0 auto;
}
.step_container
{
	width:244px;
	height:22px;
	background: #F3F3F1 0% 0% no-repeat padding-box;
	border-radius: 5px;
	position: absolute;
	left:50%;
	transform:translateX(-50%);
}
.step
{
	background: #0c3d3d 0% 0% no-repeat padding-box;
	border-radius: 3px;
	width: 117px;
	height: 18px;
	position: relative;
	float: left;
	opacity: 0.5;
	top: 50%;
	left: 26%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.step.step1{
	left: 60px;
	width: 116px;
	position: absolute;
}
.step.step2{
	left: 183px;
	width: 116px;
	position: absolute;
}
.step_no1,.step_no2 
{
	z-index: 3;
	font-weight:300;
	font-size:12px;
	line-height:18px;
	color: #ffffff;
	background:none;
	padding:0;
	margin-bottom:0 !important;
	width:49%;
	max-width: 116px;
    margin-left: 3px;
	position: absolute;
	cursor:pointer;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}

.step1 
{
	/* left:25%; */
	position: relative;
    width: 63%;
    left: 0;
}
.step2 {left: 27%; background:#ffffff;}
.step_no2 {color:#0c3d3d; margin-left: 126px;}
.step_no2.white {color:#ffffff;}
.step_btn
{
	background: #0c3d3d 0% 0% no-repeat padding-box;
	border-radius: 3px;
	width: 116px;
	height: 18px;
	opacity: 1;
	position: absolute;
	top: 2px;
    left: 2px;
	z-index: 2;
	/* transition:all 800ms ease-in-out; */
}

.step_btn.second {top: 2px; left: 125px;}
.step1::after
{
	content:"|";
	color:#0c3d3d;
	width:1px;
	position: absolute;
    right: -1px;
    top: -3px;
    font-size: 18px;
}

.main_form {width:100%; position: relative; float: left; margin:30px 0 0 0;}
.form_fields, .disclaimer {width:100%; position: relative; float: left;}
h5 
{
	font-size: 16px;
    font-weight: 300;
    color: #F3F3F1;
    text-align: center;
    margin: 0 auto;
    position: relative;
	/* margin-bottom: 10px; */
}

input[type="text"], input[type="tel"]{
	all: unset;
    outline: none;
    margin: 3% auto;
    outline: none;
    border-radius: 5px;
	width: 80%;
    height: 27px;
	max-width: 328px;
	height: 45px;
    font-size: 15px;
    font-weight: 300;
    background-color: rgba(255,255,255,1);
	position: relative;
	margin-top:20px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	padding:0;
}
input[type="text"]::placeholder, input[type="tel"]::placeholder
{
	text-align: center;
	font-size: 15px;
	color: #071b1b;
	font-weight:300;
}
input[type="text"]:focus, input[type="tel"]:focus {box-shadow: 0 0 30px 0 #ffffff;}

p.step2_txt 
{
	color:#ffffff;
	width: 80%;
	max-width: 328px;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	font-weight: 300;
	position: relative;
	margin-top:20px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.step1_btn {position: relative; width:100%;}
.step1_btn::after {display:none;}

.btn {
	all: unset;
	outline: none;
	text-align: center;
	border: 2px solid #8bc832;
	border-radius: 5px;
	outline: none;
	background: #8bc832 0% 0% no-repeat padding-box;
	box-shadow: 0px 5px 10px #1D252D4C;
	color: #F3F3F1;
	width: 80%;
	max-width:324px;
	height:41px;
	font-size: 18px;
	line-height: 41px;
	font-weight:700;
	left: 50%;
    transform: translateX(-50%);
	position: relative;
	-webkit-text-fill-color:#F3F3F1; /*safari color*/
}

.btn:hover {
	-webkit-box-shadow: 0px 15px 30px #1D252D99;
	background: #061b1b 0% 0% no-repeat padding-box;
	border-color:#061b1b;
	box-shadow: 0px 15px 30px #1D252D99;
	cursor: pointer;
	color: #061b1b;
	-webkit-text-fill-color:#ffffff; /*safari color*/
}
.btn:focus {
	-webkit-box-shadow: 0px 3px 6px #1D252D99;
	background: #061b1b 0% 0% no-repeat padding-box;
	border-color:#061b1b;
	box-shadow: 0px 3px 6px #1D252D99;
	cursor: pointer;
	color: #ffffff;
	-webkit-text-fill-color:#ffffff; /*safari color*/
}

.already_txt
{
	width:100%;
	position: relative;
	float: left;
	font-size: 14px;
	text-align: center;
	color:#ffffff;
	margin:20px 0;
}
.already_txt a, .already_txt a:hover, .already_txt a:visited, .already_txt a:focus {text-decoration: underline; color:#ffffff;}

.exit
{

	font-family: 'Gudea', sans-serif;
}
.exit p {text-align: center;}
.exit a, .exit a:hover, .exit a:focus, .exit a:visited
{
	color: #ffffff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	margin-top:3%;
	opacity:0.5;
}
.exit a:hover, .exit a:focus {opacity:1;}
.validation-text
{
	width:100%;
	position: relative;
	float: left;
	text-align: center;
	color:#ff0000;
	margin:0 0 20px 0;
}

.disclaimer {margin-bottom:20px;}
.disclaimer p 
{
	color:#ffffff;
	font-size:12px; 
	font-weight: 400;
	width:90%;
	position: relative;
	margin:0 auto;
	text-align: center;
	text-shadow: -3px 0px 6px #000000;
}

.terms-bottom {width:100%; position: relative; overflow:hidden;display: block; margin: auto;}
.terms-bottom ul
{
	padding:0;
	list-style: none;
	width:100%;
	margin:0 auto;
}
.terms-bottom p.terms-below
{
	width:100% !important;
	margin:0 auto;
	font-size:12px !important; text-align: left; line-height:14px !important;
	color:#ffffff;
}
.terms-bottom ul li {font-size:12px !important; text-align: left; width:100% !important; line-height:14px !important; color:#ffffff;}
.terms-bottom ul li::before
{
	content:"-";
	margin-right:5px;
	font-size:14px;
}
.terms-bottom p.tc {text-align: center; margin:5% auto 8% auto;line-height: 13px !important;}

.terms-bottom a, .terms-bottom a:hover, .terms-bottom a:focus, .terms-bottom a:visited
{
	color: #ffffff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	margin-top:3%;
}

.operator-box {
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 80%;
    margin: 0% auto;
    margin-bottom:5%;
    background-color: #fff;
    box-shadow: 2px 3px 40px 0px rgba(10, 63, 108, 0.4);
	border-radius: 10px;
	padding: 4% 0;
}
.operator-box input:after {display: none;}
.operator-box h4 {
    padding: 1%;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    color: #071b1b;
}
.inner-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 1%;
}
.operator-box .image-container img {
    zoom: 1.1;
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
	width: 65%;
	margin: 0 auto;
}
#radio-1, #radio-2 {
	font-size: 18px;
    cursor: pointer;
    user-select: none;
    padding-left: 9px;
    padding-right: 15px;
    position: relative;
    border: 1px solid #061b1b;
    border-radius: 100px;
	left: 50%;
    transform: translateX(-50%);
}
.double {
	zoom: 1.7;
	transform: scale(1.7);
	-ms-transform: scale(1.7);
	-webkit-transform: scale(1.7);
	-o-transform: scale(1.7);
	-moz-transform: scale(1.7);
	transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
}
.double:after {display: none;}
.double.hidden {display: block !important;}
.operator-box .image-container {margin-bottom:10px;}
#operator-valid {
    display: none;
    color: red;
    width: 100%;
    margin: 0.2em auto;
    text-align: center;
    text-align: center;
}
footer {
	position: relative;
	float: left;
    bottom: 0;
    width: 100%;
    height: 32px;
    background-color: #061B1B;
    color: white;
    text-align: center;
    z-index: 9000;
}
.footer_container
{
	width: 330px;
    margin: 0 auto;
    position: relative;
    height: 32px;
}

  footer ul 
  {
	  list-style: none;
	  padding: 0;
	  padding: 0;
    /* margin: 0; */
	position: relative;
	float: none;
	margin:0 auto;
	width:170px;
  }
  
  footer ul li {display: inline; font-weight: 500;color:#F3F3F1;font-size: 12px;margin:0 10px; line-height: 32px;}
  footer ul li a, footer ul li a:hover, footer ul li a:focus, footer ul li a:active {color:#F3F3F1; font-size: 12px; text-decoration: none;}
	
.mobile-only {display: none;}


/*ARABIC LANGUAGE*/
 .arabic .fasa p, .arabic  h5, .arabic input[type="text"], .arabic input[type="tel"], .arabic .btn, .arabic .validation-text, .arabic .already_txt
.arabic .disclaimer p, .arabic footer ul li, .arabic footer ul li a, .arabic .exit a, .arabic .terms-bottom a, .arabic .terms-bottom a:hover, 
.arabic .terms-bottom a:focus, .arabic .terms-bottom a:visited, .arabic .pre-header  {direction: rtl;} 
/*
=====================
====MEDIA SCREENS====
=====================
*/
@media screen and (min-width:1100px) and (max-height:800px)
{
	.left_img, .right_img {max-width: 450px;}
	.main_form {margin: 50px 0 0 0;}
	.disclaimer p {width: 100%;}
}
@media screen and (min-width:1100px) and (max-height:600px)
{
	header,.logo, .dropdown {height: 45px;}
	.dropbtn img {width: 54px;}
	.dropbtn {top: 60%;}
	.logo img {max-width: 65px;}
	.fasa {height:37px;}
	.fasa p {font-size:26px;}
}

@media screen and (max-width:1099px) and (max-height:800px)
{
	section {height:auto;}
	.main_form {margin-bottom:10px;}
	.disclaimer p {width: 100%;margin-bottom:10px;}
	footer {position: relative; float: left;}
}
@media screen and (max-width:960px)
{
	section {background-position: initial;}
	.right_img {display: none;}
	.container {flex-direction: column;}
	.desktop-only {display: none;}
	.mobile-only {display: block;}
	.container {margin-top: 20px;width:90%;}
	.left_img, .form_container, .right_img {flex: 1 100%;}
	.left_img {margin-bottom:30px;max-width: 300px;min-height: 200px;}
	.main_form {margin: 30px 0;}
	.disclaimer p {width:50%;}
	.operator-box {width:310px; padding: 2% 0;}
	
	input[type="text"], input[type="tel"], .btn {width:328px; max-width: 328px;}
	.terms-bottom {width: 50%;}
	.logo {width: 150px;}
	.logo h1 {font-size: 18px;line-height:22px;top: 40%;}
	.logo img {max-width: 40px; top: 40%;}
	header {height:50px;}
	footer ul {float:none; margin:0 auto;}
	.pre-header p {width:97%; margin:0 auto;}
}
@media screen and (max-width:960px) and (max-height:650px)
{
	section {height:auto;}
	footer {position: relative; float: left;}
	.disclaimer p { margin-bottom: 30px;}
}
@media screen and (max-width:960px) and (min-height:651px)
{
	section {height:auto;}
	footer {position: relative; float: left;}
	.disclaimer p { margin-bottom: 30px;}
}
@media screen and (max-width:680px)
{
	.container {margin-top: 5px;}
	.disclaimer p {width:100%;}
	header,.logo, .dropdown {height: 45px;}
	.left_img {max-width:250px;min-height:145px;}
	.dropbtn img {width: 54px;}
	.dropbtn {top: 60%;}
	.logo img {max-width: 30px; top: 50%;/*margin-left: 83% !important;*/}
	.logo h1 {font-size:16px;top: 50%;}
	.fasa {height:30px;}
	.fasa p {font-size:22px;}
	.main_form {margin: 10px 0 10px 0;}
	footer {position: relative; float: left;}
	section {height:auto;}
	p.step2_txt {height:40px; line-height:18px;}
	.validation-text {margin: 20px 0 5px 0;}
	input[type="text"], input[type="tel"], .btn {width:280px; max-width:280px;}
	
	.terms-bottom {width: 80%;}

	.operator-box h4 {font-size:14px;}
	.operator-box .image-container img {
		zoom: 0.8;
		transform: scale(0.8);
		-ms-transform: scale(0.8);
		-webkit-transform: scale(0.8);
		-o-transform: scale(0.8);
		-moz-transform: scale(0.8);
	}
	.double {
		zoom: 1.2;
		transform: scale(1.2);
		-ms-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-o-transform: scale(1.2);
		-moz-transform: scale(1.2);
	}
	/* #radio-1, #radio-2 {    left: 37%;} */
	.operator-box .image-container {margin-bottom: 0px;}
	input[type="text"], input[type="tel"] {margin-top:10px;}
	
}
@media screen and (max-width:680px) and (min-height:700px)
{
	section {height:auto;/* calc(100% - 45px - 32px);*/}
	footer {position: relative; float: left;}
	.validation-text {margin: 20px 0 5px 0;}
}
@media screen and (max-width:360px)
{
	.left_img {
		max-width: 210px;
		min-height: 110px;
		margin-bottom: 10px;
	}
	.container {width:90%;}
	h5 {font-size:13px;}
	.validation-text {margin: 0px 0 5px 0;}
	.operator-box {width: 270px; padding: 2% 0;}
	.logo {margin-left: 0px;}
	.terms-bottom {width: 90%;}
	.operator-box h4 {font-size:14px;}
	.operator-box .image-container img {
		zoom: 0.8;
		transform: scale(0.8);
		-ms-transform: scale(0.8);
		-webkit-transform: scale(0.8);
		-o-transform: scale(0.8);
		-moz-transform: scale(0.8);
	}
	.double {
		zoom: 1.2;
		transform: scale(1.2);
		-ms-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-o-transform: scale(1.2);
		-moz-transform: scale(1.2);
	}
	#radio-1, #radio-2 {    left: 37%;}
	.operator-box .image-container {margin-bottom: 0px;}
	input[type="text"], input[type="tel"] {margin-top:10px;}
}

@media screen and (max-width:300px)
{
	.left_img {
		max-width: 210px;
		min-height: 110px;
		margin-bottom: 10px;
	}
	.container {width:90%;}
	h5 {font-size:15px;}
	.validation-text {margin: 20px 0 5px 0;}
	.operator-box {width: 230px; padding: 2% 0;}
	.logo {margin-left: 0px;}
	input[type="text"], input[type="tel"], .btn {
		width: 220px;
		max-width: 220px;
	}
}

@media screen and (max-width:400px) and (max-height:600px)
{
	.left_img {width:210px; min-height: 110px;margin-bottom: 10px;}
	footer {position: relative; float: left;}
}
@media screen and (max-width:400px) and (max-height:555px)
{
	section {height:auto;}
	.disclaimer p { margin-bottom: 10px;}
}
@media screen and (max-height:450px)
{
	section {height: auto;}
}