/*
| -------------------------------------------------------------------
|
|	Helpers
|
| -------------------------------------------------------------------
*/

.flex-center-container {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.flex-right-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
}

.flex-left-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}

.flex-vertical {
	flex-direction: column;
}

.link {
	display: inline-block;
	text-decoration: none;
	color: black;
}

.d-none {
	display: none;
}

.hide {
	visibility: hidden;
	opacity: 0;
	position: absolute;
}

.show {
	visibility: visible;
	opacity: 1;
	position: inherit;
}

/*
| -------------------------------------------------------------------
|
|	General
|
| -------------------------------------------------------------------
*/

body {
	background-color: #fcedd5;
	scroll-behavior: smooth;
	font-family: "Rubik", sans-serif;
	margin: 0;
}

p {
	margin: 0;
	margin-top: 5px;
	direction: rtl;
}
.main-container {
	width: 100%;
}
.pages-container {
	width: 100%;
}

.fixed-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	opacity: 0.2;
	z-index: -1;
}

.background-image {
	width: 114vw;
	height: 100vh;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: -31px;
	z-index: -1;
}

.background-image2 {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.bg2 {
	background-color:wheat;
}
.page-title {
	font-size: 13px;
	font-weight: bold;
}
@media only screen and (min-width: 700px) {
	.page-title {
		font-size: 25px;
	}
}

h1,
h2,
p,
img {
	pointer-events: none;

	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/*
| -------------------------------------------------------------------
|
|	Main Page
|
| -------------------------------------------------------------------
*/

.main-page {
	width: 100%;
	height: 100vh;
}

.lines-bg-left {
	max-width: 325px;
	width: 50%;
	position: relative;
	top: 26px;
	left: -9px;
}

.lines-bg-right {
	max-width: 460px;
	width: 70%;
	position: relative;
	left: 37px;
	top: -14px;
}

#slogan {
	margin-top: 7px;
	font-weight: 400;
	font-size: 18px;
	color: #333;
}

.link {
	max-width: 550px;
	width: 80%;
}

@media only screen and (min-width: 450px) {
	#slogan {
		font-size: 22px;
	}
}

@media only screen and (min-width: 612px) {
	#slogan {
		font-size: 24px;
	}

	.lines-bg-left {
		width: 40%;
	}

	.lines-bg-right {
		width: 57%;
	}

	.link {
		width: 60%;
	}
}

@media only screen and (min-width: 660px) {
	.lines-bg-left {
		top: -4px;
	}
}

@media only screen and (min-width: 810px) {
	.lines-bg-left {
		top: -4px;
	}
}

/*
| -------------------------------------------------------------------
|
|	Video Page
|
| -------------------------------------------------------------------
*/

.video-page {
	width: 100%;
	max-width: 948px;
}

#vid {
	width: 94%;
	max-width: 885px;

	border-radius: 16px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.greeny-left {
	width: 44%;
	max-width: 400px;
}

.greeny-right {
	width: 44%;
	max-width: 400px;
}

/*
| -------------------------------------------------------------------
|
|	Disc Page
|
| -------------------------------------------------------------------
*/

.desc-page {
	width: 100%;
	max-width: 948px;
}

.pur-left {
	width: 52%;
	max-width: 400px;
	position: relative;
	left: -95px;
	margin-top: 30px;
}

@media only screen and (min-width: 1270px) {
	.pur-left {
		margin-top: 45px;
	}
}

.pur-right {
	width: 52%;
	max-width: 400px;
	position: relative;
	right: -95px;
	margin-bottom: 30px;
}

.abo-image {
	width: 70%;
	max-width: 220px;
}

.disc2 {
	width: 90%;
	height: 105px;
	max-width: 612px;
}

@media only screen and (min-width: 450px) {
	.disc2 {
		font-size: 19px;
	}
}

@media only screen and (min-width: 700px) {
	.disc2 {
		font-size: 25px;
	}
}

/*
| -------------------------------------------------------------------
|
|	Chart Page
|
| -------------------------------------------------------------------
*/

.chart-text {
	width: 90%;
	margin-top: 16px;
}

@media only screen and (min-width: 450px) {
	.chart-text {
		width: 100%;
		font-size: 19px;
	}
}

@media only screen and (min-width: 700px) {
	.chart-text {
		font-size: 25px;
	}
}

.chart-image {
	width: 90%;
	max-width: 1300px;
	margin-top: 16px;
}

/*
| -------------------------------------------------------------------
|
|	Cards Page
|
| -------------------------------------------------------------------
*/

.page-card {
	background: rgba(245, 227, 200, 0.9);
	border-radius: 8px;
	padding: 20px;
	width: 80%;
	max-width: 500px;
	margin: 50px 0;
	text-align: center;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.cards-page {
	direction: rtl;
}

.cards-page p {
	font-size: 23px;
}

/*
| -------------------------------------------------------------------
|
|	Features Page
|
| -------------------------------------------------------------------
*/

.features-text {
	width: 90%;
	margin-top: 16px;
}

@media only screen and (min-width: 450px) {
	.features-text {
		width: 100%;
		font-size: 21px;
	}
}

@media only screen and (min-width: 700px) {
	.features-text {
		font-size: 32px;
	}
}

.f-img {
	width: 209px;
	border: 3px solid #325d79;
	border-radius: 20px;
	padding: 20px;
}

/*
| -------------------------------------------------------------------
|
|	Lines Page
|
| -------------------------------------------------------------------
*/

.lines-parent-container {
	width: 100%;
	display: flex;
	/* align-items: center; */
	text-align: center;
	justify-content: space-between;
}

.left-line-container {
	margin-top: 66px;
}

@media only screen and (min-width: 900px) {
	.left-line-container {
		margin-top: 114px;
	}
}

.lines-image-left,
.lines-image-right {
	width: 150px;
}

.lines-text {
	font-size: 10px;
	font-weight: bold;
}

@media only screen and (min-width: 560px) {
	.lines-image-left,
	.lines-image-right {
		width: 240px;
	}

	.lines-text {
		font-size: 15px;
		font-weight: bold;
	}
}

@media only screen and (min-width: 900px) {
	.lines-image-left,
	.lines-image-right {
		width: 370px;
	}

	.lines-text {
		font-size: 22px;
		font-weight: bold;
	}
}

/* BLUE */

.lines-b-t1 {
	position: relative;
	top: -80px;
	right: -55px;
}

.lines-b-t2 {
	position: relative;
	top: -72px;
	right: -58px;
}

.lines-b-t3 {
	position: relative;
	top: -105px;
	right: -127px;
}

/* YELLOW */

.lines-y-t1 {
	position: relative;
	top: -83px;
	right: -3px;
}
.lines-y-t2 {
	position: relative;
	top: -71px;
	left: -27px;
}
.lines-y-t3 {
	position: relative;
	top: -105px;
	left: -93px;
}

/* ORANGE */

.lines-o-t1 {
	position: relative;
	left: 2px;
	width: 151px;
	top: -92px;
}

.lines-o-t2 {
	position: relative;
	top: -86px;
	right: -35px;
}

.lines-o-t3 {
	position: relative;
	top: -120px;
	right: -109px;
}

/* RED */

.lines-r-t1 {
	position: relative;
	top: -77px;
	right: -2px;
}

.lines-r-t2 {
	position: relative;
	top: -74px;
	left: -12px;
}
.lines-r-t3 {
	position: relative;
	top: -105px;
	left: -75px;
}

/* GREEN */

.lines-g-t1 {
	position: relative;
	left: 49px;
	top: -77px;
}

.lines-g-t2 {
	position: relative;
	top: -76px;
	right: -68px;
}

.lines-g-t3 {
	position: relative;
	top: -107px;
	right: -138px;
}
/* PURPLE */

.lines-p-t1 {
	position: relative;
	top: -93px;
	right: 0px;
}

.lines-p-t2 {
	position: relative;
	top: -88px;
	left: -41px;
}
.lines-p-t3 {
	position: relative;
	top: -119px;
	left: -111px;
}

@media only screen and (min-width: 560px) {
	/* BLUE */

	.lines-b-t1 {
		position: relative;
		top: -119px;
		right: -80px;
	}

	.lines-b-t2 {
		position: relative;
		top: -115px;
		right: -101px;
	}

	.lines-b-t3 {
		position: relative;
		top: -157px;
		right: -209px;
	}

	/* YELLOW */

	.lines-y-t1 {
		position: relative;
		top: -126px;
		right: -3px;
	}
	.lines-y-t2 {
		position: relative;
		top: -115px;
		left: -33px;
	}
	.lines-y-t3 {
		position: relative;
		top: -154px;
		left: -140px;
	}

	/* ORANGE */

	.lines-o-t1 {
		position: relative;
		left: 36px;
		width: 205px;
		top: -143px;
	}

	.lines-o-t2 {
		position: relative;
		top: -135px;
		right: -74px;
	}

	.lines-o-t3 {
		position: relative;
		top: -180px;
		right: -186px;
	}

	/* RED */

	.lines-r-t1 {
		position: relative;
		top: -121px;
		right: -12px;
	}

	.lines-r-t2 {
		position: relative;
		top: -116px;
		left: -12px;
	}
	.lines-r-t3 {
		position: relative;
		top: -157px;
		left: -111px;
	}

	/* GREEN */

	.lines-g-t1 {
		position: relative;
		left: 88px;
		top: -119px;
	}

	.lines-g-t2 {
		position: relative;
		top: -114px;
		right: -106px;
	}

	.lines-g-t3 {
		position: relative;
		top: -159px;
		right: -219px;
	}
	/* PURPLE */

	.lines-p-t1 {
		position: relative;
		top: -143px;
		right: 0px;
	}

	.lines-p-t2 {
		position: relative;
		top: -135px;
		left: -62px;
	}
	.lines-p-t3 {
		position: relative;
		top: -177px;
		left: -175px;
	}
}

@media only screen and (min-width: 900px) {
	/* BLUE */

	.lines-b-t1 {
		position: relative;
		top: -180px;
		right: -131px;
	}

	.lines-b-t2 {
		position: relative;
		top: -169px;
		right: -159px;
	}

	.lines-b-t3 {
		position: relative;
		top: -235px;
		right: -325px;
	}

	/* YELLOW */

	.lines-y-t1 {
		position: relative;
		top: -187px;
		right: -7px;
	}
	.lines-y-t2 {
		position: relative;
		top: -171px;
		left: -33px;
	}
	.lines-y-t3 {
		position: relative;
		top: -228px;
		left: -200px;
	}

	/* ORANGE */

	.lines-o-t1 {
		position: relative;
		left: 65px;
		width: 296px;
		top: -212px;
	}

	.lines-o-t2 {
		position: relative;
		top: -199px;
		right: -119px;
	}

	.lines-o-t3 {
		position: relative;
		top: -263px;
		right: -294px;
	}

	/* RED */

	.lines-r-t1 {
		position: relative;
		top: -183px;
		right: -10px;
	}

	.lines-r-t2 {
		position: relative;
		top: -165px;
		left: -4px;
	}
	.lines-r-t3 {
		position: relative;
		top: -230px;
		left: -159px;
	}

	/* GREEN */

	.lines-g-t1 {
		position: relative;
		left: 156px;
		top: -181px;
	}

	.lines-g-t2 {
		position: relative;
		top: -168px;
		right: -168px;
	}

	.lines-g-t3 {
		position: relative;
		top: -233px;
		right: -339px;
	}
	/* PURPLE */

	.lines-p-t1 {
		position: relative;
		top: -217px;
		right: 0px;
	}

	.lines-p-t2 {
		position: relative;
		top: -195px;
		left: -83px;
	}
	.lines-p-t3 {
		position: relative;
		top: -259px;
		left: -264px;
	}
}

/*
| -------------------------------------------------------------------
|
|	Map Page
|
| -------------------------------------------------------------------
*/

.vid-container {
	position: sticky;
	height: auto;
	top: 0;
	/* padding-top: 285px; */
}
.map-video {
	width: 210px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	border-radius: 22px;
}
.subpage1 {
	padding-top: 93px;
}
.map-page-container {
	height: 914px;

	display: flex;
	justify-content: center;
	align-items: flex-start;
	text-align: center;
}
.abo-img {
	width: 50px;
}
.map-text {
	font-size: 10px;
}

@media only screen and (min-width: 500px) {
	.map-video {
		width: 295px;
	}
	.abo-img {
		width: 75px;
	}
	.map-text {
		font-size: 15px;
	}
	.map-page-container {
		height: 1061px;
	}
}

@media only screen and (min-width: 830px) {
	.map-video {
		width: 410px;
	}
	.abo-img {
		width: 120px;
	}
	.map-text {
		font-size: 25px;
	}
	.map-page-container {
		height: 1325px;
	}
}

@media only screen and (min-width: 1280px) {
	.map-video {
		width: 635px;
	}
	.abo-img {
		width: 150px;
	}
	.map-text {
		font-size: 29px;
	}
	.map-page-container {
		height: 1690px;
	}
	.subpage1 {
		padding-top: 236px;
	}
}

/*
| -------------------------------------------------------------------
|
|	Calc Page
|
| -------------------------------------------------------------------
*/

.form-group .label {
	text-align: right;
	font-size: 16px;
	font-weight: bold;
	padding-right: 10px;
}

.label,
.form-element {
	width: 50%;
	text-align: right;
}
.form-element select {
	width: 91%;
	font-size: 15px;
}
.form-group {
	margin-top: 20px;
	margin-bottom: 20px;
}
.calc-img {
	width: 120px;
}

@media only screen and (min-width: 600px) {
	.calc-img {
		width: 150px;
	}
	}



@media only screen and (min-width: 700px) {
	.form-group .label {
		font-size: 21px;
	}
	.calc-res-container {
		font-size: 26px;
	}
}

/*
| -------------------------------------------------------------------
|
|	Footer
|
| -------------------------------------------------------------------
*/

.calc-desc-text {
	font-size: 24px;
	margin-bottom: 15px;
}

.profile-item {
	color: #4f0808;
	font-size: 12px;
	margin: 0;
}

@media only screen and (min-width: 700px) {
	.profile-item {
		font-size: 21px;
	}
}

.footer {
	width: 100%;
	background-color: blue;
	padding: 18px 0;
	background-color: #e4d3ba;
}

/*
| -------------------------------------------------------------------
|
|	EOF
|
| -------------------------------------------------------------------
*/

.desc-text {
	font-size: 1.5rem;
	direction: rtl;
	line-height: 15px;
}
.text-pre {
	font-size: 1.5rem;
	direction: rtl;
	line-height: 15px;
	color: red;
}

.map {
}
.map-img {
	width: 100%;
}
.illu {
	flex-direction: column;
}

.compact {
	line-height: 15px;
}

.rtl {
	direction: rtl;
}