.topnavcontainer { 
	width: 100%;
	padding: 23px 0;
	background-color: rgb(82, 82, 82);
}
.topnav{
	background-color: rgba(15, 15, 15, 0.619);
	overflow: hidden;
	position: fixed; top: 0%;
	width: 100%;
	z-index: 10;
	text-align: center;
}
.topnav a{
	display: inline-block;
	color: whitesmoke;
	text-align: center;
	padding: 10px 16px;
	text-decoration: none;
	font-size: 17px;
	font-family:Arial;
	font-weight: 400;
}
.topnav a:hover{
	background-color:rgba(245, 245, 245, 0.075);
	color: white;
}
.topnav a.active{
	background-color: rgba(245, 245, 245, 0.082);
	color: white;
}
.topnav .icon{
	display: none;
}
.topnav .logo{
	position: relative;
	width: 13%;
	padding: 2px 0;
	display: none;
}

li:link{color:#e9e9e9;}
a:hover{color:lightskyblue}
a:visited{color: #f5f5f5;;}
a.btn{color:black}
a.btntxt:visited{color:rgb(0, 0, 0)}
a.tp:visited {color: #06c;
	text-shadow: .5px .5px 20% black;}

	#Tscroll{color:orange;
		font-size:4vw;
		display: none;
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 99; 
		cursor: pointer;}

/*--------body-----------*/
*, html, body {
	   margin: 0;
	   padding: 0;
}

h1::selection{visibility: hidden;}
h2::selection{visibility: hidden;}
p::selection { visibility: hidden;}
li::selection{visibility: hidden;}


.full{
    margin-top: -2px; 
    background:linear-gradient(to right whitesmoke,rgb(216, 216, 216));
	
}
h1{
    text-align: center;
    margin: 2% 2%;
	font-family: 'ghala-bold';
}
.fa-language{ width: 35px; position:fixed; left: 40px; top: 7px; z-index: 11; cursor: pointer; line-height: 10px;}
.fa-language:hover{ filter:sepia(500%)  }
@keyframes show {
	to { opacity: 1; display: block;}
}


.update{
    text-align: right;
    margin: 2% 2%;
	font-size: 20px;
	animation-name:update; animation-duration: 3s;  transition-timing-function: ease-in;
	font-family: 'asmaa';
}

@keyframes update {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.rut{
    font-family: 'mbc';
    font-size: 23px;
    margin: 2% 2%;
    text-align: center;
}
h2{
    text-align: center;
	font-family: 'ghala-bold';
}
  

/*Footer---------------->*/
.footer { position: relative; display: flex; flex-wrap:wrap; width: 100%;  color: whitesmoke;
	background:linear-gradient( rgb(4, 6, 7),rgb(0, 28, 44));
    border-top:1px solid whitesmoke;}
.center-footer{
	display:flex; align-items: center; justify-content: center; padding-bottom: 3px;
	background-color:rgb(0, 28, 44);}
.footer1 {position:relative;  display: grid; place-items: center; width: 100%; color: whitesmoke; 
	background:linear-gradient( rgb(0, 28, 44), rgb(4, 6, 7));}

.hrs {position: absolute; right:50%; transform:translate(-50%);min-height: 85%; max-height: 50vh; background-color: white; width: 1px; border: 0 none;
	color: whitesmoke;}

ul {list-style-type:none;}
    
.pounce{ color: whitesmoke; transition: .1s;}
.pounce:hover{transform: scale(1.2);}

.footer-section {margin: auto; margin-top: 4px; text-align: center;font-family:'Cairo';}

.ftitles{color: white; font-size: 18px; font-weight: bold; font-family:'ghala-bold'; }

.ftxt{color: whitesmoke;}
.ftxt a{color: whitesmoke;}

.seperator {background-color: white; border: 0 none; height: 1px; width: 20%;}
  
img.social{ padding: 0 20px; height: 20px; transition: .5s; margin: auto;}
.social:hover{ transform: scale(1.5);}

img.flogo{height: 30px;}
.ftxtlast { color: whitesmoke; font-family: ui-rounded; text-align: center;}


/*Mediaaaaaaaaaaaaaaaaaa iphone 420px */
@media screen and (max-width: 800px) {
	.topnavcontainer{visibility: hidden;}
	.h1hidden{ display: none;}
	.tpo {display: none;}
	.topnav{ background:linear-gradient(to  right, #000f19, #2989cc); position: fixed;}
	.topnav a{float:right; color: white;}
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {float: left; display: block;}
	.topnav.responsive {position: relative; margin-top: -46px;}
	.topnav.responsive a.icon {position: absolute; left: 0; top: 0;}
	.topnav.responsive a {display: block; float: none; text-align: right; }
	.topnavcontainer.responsive{display: none;}
	.topnav .logo{ display: none;}
	.ftitles {font-size: 12px;}
	.footer-section{ font-size: 10px;}
}

  @media screen and (min-width:800px) and (max-width: 1650px) {
	.h1hidden{ display:none;}
	.Cam{width: 25%;}
	.Car{top: 45%; left: 49%;width: 24%;}
	.TA{ width: 18%;}
	.SH{width: 23%;}
	.KG{width: 20%;}
	.Next{width: 20%;}
  }

  @media screen and (min-width: 1650px) {
	.topnav a{font-size: 18px; padding: 10px 40px;}
	.tpo {font-size: 20px; line-height: 40px;}
	.Cam{width: 25%;}
	.Car{top: 44.8%; width: 25%;}
	.TA{width: 18%;}
	.SH{width: 24%;}
	.KG{width: 20%;}
	.Next{width: 20%;}
	.Text{font-size: 120px;}
  }