@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');
:root{
	--main-color-green:#22783d;
	--dark-color:#130e0e;
	--gold-color:#00c774;
}
body {
	background:#fff;
		font-family: 'cairo', sans-serif;
		
}

*{
	margin: 0 ;
	padding: 0;
	box-sizing: border-box;

}

html::-webkit-scrollbar {
	width:5px;
  }
  html::-webkit-scrollbar-track {
	background-color: #fff;
  }
  html::-webkit-scrollbar-thumb {
	background-color: var(--main-color-green);
  }
.nav{
	max-width:100vw;
	height: 9rem !important;
}
.navbar-brand img{
	width: 9rem;
}

svg{
	background-color: #fff;
}
svg path{
	fill:var(--main-color-green) !important;
}

.nav-link {
	color: var(--main-color-green);
}
.nav-link:hover {
	color: var(--main-color-green);
}

.nav-tabs{
	height: 60px !important;
}
.nav-link{
	font-size: 1.25rem;
}
.hover-mouse{
	fill: #e8d22a !important;
	cursor:zoom-in;
}  
.hover-mouse:hover{
	fill: #99f345 !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	color:var(--dark-color)
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link{
	font-weight: 600;
}

svg.sa{
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer{
	height: 60px;
	color: #fff;
	display: flex;
	align-items: center;
}
.ra-map{
	position: relative;
}

.ra-map::before{
content: "الرياض";
color: #191818 ;
font-weight: 500;
position: absolute;
z-index: 200;
right: 130px;
top: 130px;
}
.ra-map::after{
	content: "";
	font-weight:bolder;
	position: absolute;
	height: 8px;
	width: 8px;
	background-color: #000;
	border-radius: 50%;
	z-index: 2000;
	right: 140px;
	top: 160px;
	}
.ga-map{
	position: relative;
}
.ga-map::after{
	content: "جدة ";
	color: #191818 ;
	font-weight: 500;
	position: absolute;
	z-index: 200;
	right: 205px;
	top: 160px;
	}
	.ga-map::before{
		content: "";
		font-weight:bolder;
		position: absolute;
		height: 8px;
		width: 8px;
		background-color: #000;
		border-radius: 50%;
		z-index: 2000;
		right: 222px;
		top: 180px;
		}
	.ma-map{
		position: relative;
			}
	.ma-map::after{
	content: "الحديثة";
	color: #191818 ;
	font-weight: 500;
	position: absolute;
	z-index: 200;
	right: 211px;
	top: 28px;
	}
	.ma-map::before{
	content: "";
	font-weight:bolder;
	position: absolute;
	height: 8px;
	width: 8px;
	background-color: #000;
	border-radius: 50%;
	z-index: 200;
	right: 249px;
	top: 21px;
	}
	.offcanvas{
		height: 50vh !important;
	}
	.hover-mouse{
		width: 2em;
	}

svg{
	stroke: #000 !important;
}
.map{
	overflow: hidden; 
	position: relative;

}
.world-map{
	position: relative;
	transform:scale(2.5);
	left: -418px;
	top: 120px;
}
	@media (min-width:2000px) {
		.world-map {
			position: relative;
			transform: scale(1.9);
			left: -1000px;
			
		}
			
		}
		@media (max-width:767px) and (max-width:992px) {
		.world-map {
			position: relative;
			transform: scale(2.2);
			top: 40px;
			right: 130px;
			
		}
		
			.information div{
				display: flex;
				flex-direction: column;
			}
		
		}
			.om-color{
				fill: #5e5607 !important;
				background-color: #5e5607 !important;
				width: 10px !important;
				height: 10px !important;
				border-radius: 50%;
			}
			.eg-color{
				fill: #e8d22a !important;
				background-color: #e8d22a !important;
				width: 10px !important;
				height: 10px !important;
				border-radius: 50%;
			}
			.om-color{
				fill: #9f9f9f !important;
				background-color: #9f9f9f !important;
				width: 10px !important;
				height: 10px !important;
				border-radius: 50%;
			}
			.tr-color{
				fill: #ffff9b !important;
				background-color: #ffff9b !important;
				width: 10px !important;
				height: 10px !important;
				border-radius: 50%;
			}
			.uk-color{
				fill: #ecf626 !important;
				background-color: #ecf626 !important;
				width: 10px !important;
				height: 10px !important;
				border-radius: 50%;
			}
			.ae-color{
				fill: #03a552 !important;
				background-color: #03a552 !important;
				width: 10px !important;
				height: 10px !important;
				border-radius: 50%;
			}
			.sd-color{
				fill: #474646 !important;
				background-color: #474646 !important;
				width: 10px !important;
				height: 10px !important;
				border-radius: 50%;
			}
			.my-color{
				fill: #000066 !important;
				background-color: #000066 !important;
				border-radius: 50%;
				width: 10px !important;
				height: 10px !important;
			}
			.ng-color{
				fill: #45fa9a !important;
				background-color: #45fa9a !important;
				border-radius: 50%;
				width: 10px !important;
				height: 10px !important;
			}
			.lb-color{
				fill: #ee232b !important;
				background-color: #ee232b !important;
				border-radius: 50%;
				width: 10px !important;
				height: 10px !important;
			}
			.ly-color{
				fill: #000 !important;
				background-color: #000 !important;
				border-radius: 50%;
				width: 10px !important;
				height: 10px !important;
			}
	
			.gr-color{
				fill: #00f !important;
				background-color: #00f !important;
				border-radius: 50%;
				width: 10px !important;
				height: 10px !important;
			}