/* $lighter green= "#46dbe1";*/

/* $green= "#19d3da";*/

/* $dark green= "#16bdc4";*/

/* $dark gray= "#373a40";*/

/* $gray= "#686d76";*/

/* $lighter gray= "#868a91";*/

/* $white= "#eeeeee";*/

*{

	padding: 0;

	margin: 0;

	list-style: none;

	text-decoration: none;

	box-sizing: border-box;

	direction: rtl;

	font-family: "Tajawal", sans-serif;

	font-size: 20px;

	letter-spacing: -0.2;

}

::placeholder , select option p{

	opacity: 0.3;

	padding: 7px;

}

body{

	color: #000000;

	line-height: 1.5;

	background-color: #f1f3fb;



}

h1 {

	color: #000000;

	font-size: 30px;

	letter-spacing: -0.57;

	text-align: center;

}

h2 {

	font-size: 20px;

	letter-spacing: -0.57;

	text-align: center;

	color: #4e4d4d;

}

h3{

	color: red;

	font-size: 30px;

	letter-spacing: -0.57;

	background-color: #d0e3fa;

	text-align: center;

}

h5{

	font-size: 30px;

	letter-spacing: -0.57;

}

h6{

	color: red;

	text-align: center;

	font-size: 30px;

}

h4{

	color: white;

	font-size: 25;

	letter-spacing: -0.57;

	background-color: black;

	text-align: center;

}

.main{

	position: relative;

	width: 100%;

	margin: 0 auto;

	height: fit-content;

}

/* $lighter green= "#46dbe1";*/

/* $green= "#19d3da";*/

/* $dark green= "#16bdc4";*/

/* $dark gray= "#373a40";*/

/* $gray= "#686d76";*/

/* $lighter gray= "#868a91";*/

/* $white= "#eeeeee";*/









/* Style the header with a grey background and some padding */

.header {

	overflow: hidden;

	background-color: #000000;

	padding: 20px 10px;

	max-height: 90px;

}



.inner-header{

	width: 100%;

	max-width: 1000px;

	margin: 0 auto;

}



/* Style the header links */



.header a {

  float: left;

  color: #eeeeee;

  text-align: center;

  padding: 12px;

  text-decoration: none;

  font-size: 20px;

  line-height: 25px;

  border-radius: 4px;

}



/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */



.header a.logo {

	margin: 0 auto;

	width: 100%;

}



.header a.logo p {

	height: 100%;

	width: 100%;

	color: #eeeeee;

	font-size: 40px;

	font-weight: 500;

}



.header a.logo p span{

	height: 100%;

	color: #eeeeee;

	font-size: 40px;

	font-weight: 900;

}



/* Float the link section to the right */



.navigation {

  float: left;

  display: none;

}









select option{

	text-align: center;

	color: #686d76;

}







button:active {

	background: #672ebd;

}





/* description style */

	





.main-container{

	display: block;

	width: 100%;

}



.main-innner-container{

	width: 100%;

	display: table;

}



.main-innner-imag{

	width: 100%;

}









/* // description style */

/* form style */



img {

	max-width: 100%;

	width: 100%;

	height: auto;

	display: block;

}

input {


	border-radius: 0;

}

.card {

	margin: 2rem auto;

	display: flex;

	flex-direction: column;

	width: 92%;

	max-width: 425px;

	background-color: #fff;

	border-radius: 10px;

	box-shadow: 0 10px 20px 0 rgba(153, 153, 153, .25);

	padding: 0.75rem;

}

.card-image {

	border-radius: 8px;

	overflow: hidden;

	padding-bottom: 40%;

	background: #3B0B7D;

	background: -moz-linear-gradient(45deg, #3B0B7D 0%, #93248E 100%);

	background: -webkit-linear-gradient(45deg, #3B0B7D 0%, #93248E 100%);

	background: linear-gradient(45deg, #3B0B7D 0%, #93248E 100%);

	background-repeat: no-repeat;

	background-size: 100%;

	background-position: right 35% bottom 45%;

	position: relative;

}

.card-heading {

	position: absolute;

	left: 10%;

	bottom: 15%;

	right: 10%;

	font-size: 1.5rem;

	font-weight: 700;

	color: #ffffff;

	line-height: 1.222;

}

.card-heading small {

	display: block;

	font-size: 0.75em;

	font-weight: 400;

	margin-top: 0.25em;

}

.card-form {

	padding: 2rem 1rem 0;

}

.input {

	display: flex;

	flex-direction: column-reverse;

	position: relative;

	padding-top: 1.5rem;

}

.input + .input {

	margin-top: 1.5rem;

}

.input-label {

	color: #3b3c3d;

	position: absolute;

	top: 1.5rem;

	transition: 0.25s ease;

}

.input-field {

	border: 0;

	z-index: 1;

	background-color: transparent;

	border-bottom: 2px solid #eee;

	font: inherit;

	font-size: 1.125rem;

	padding: 0.25rem 0;

}

.input-field:focus, .input-field:valid {

	outline: 0;

	border-bottom-color: #3e3977;

}

.input-field:focus + .input-label, .input-field:valid + .input-label {

	color: #3e3977;

	transform: translateY(-1.5rem);

}

.action {

	margin-top: 2rem;

}

.action-button {

	font: inherit;

	font-size: 1.25rem;

	padding: 1em;

	width: 100%;

	font-weight: 500;

	background-color: #3A0B7F;

	border-radius: 6px;

	color: #fff;

	border: 0;

}

.action-button:focus {

	outline: 0;

}

.card-info {

	padding: 1rem 1rem;

	text-align: center;

	font-size: 0.875rem;

	color: #8597a3;

}

.card-info a {

	display: block;

	color: #3A0B7F;

	text-decoration: none;

}





/* //form style */

/* Thankyou style */

.thankyou{

	background: green;

	color: white;

	font-weight: 900;

	border-radius: 100%;

	padding: 4px 9px;

	font-family: tahoma, sans-serif;

}

.thankyou-main{

	height: 98%;

}

.thankyou-main-innner{

	position: relative;

	top: 40%;

	left: 50%;

	transform: translate(-50%, -60%);

	text-align: center;

}

/* //Thankyou style */

/* Policy */

.center{

	padding: 0 2%;

	text-align: center;

}

/* //Policy */

/* footer style */

.footer {

	background-color: #f1f3fb;

	position: absolute;

	bottom: -60;

	width: 100%;

	height: fit-content;

	text-align: center;

	color: #fff;

}

.footer-thankyou{

	bottom: 0;

}

.footer a{

	display: inline-block;

	padding: 0 10px;

	text-decoration: underline;

	color: #3A0B7F;

}

/* //footer style */

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */

@media screen and (min-width: 805px) {

    /* header */

     .header a.logo {

         float: right;

         width: unset;

    }

     .navigation {

         display: block;

    }

    /* // header */

     .main-innner-container{

         display: table;

    }

 

 

     .main-innner-imag {

         width: 50%;

         display: table-cell;

         float: right;

    }

 

     .inner-form {

         padding: 12px 20px 20px;

         margin: 20px auto;

         border-radius: 20px;

    }

 }