style.css

@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');

*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}
body{
	background: #121212;
	justify-content:center;
	align-content:center;
	align-items:center;
	text-align:center;
	color:white;
}
img{
	
	width:4rem;
}
.top{
	border: solid .5rem #FEE715FF;
	background:linear-gradient(#101820FF,#FEE715FF);
	background:linear-gradient(to left,#000000,#0f900f);
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-family: 'Almarai', sans-serif;
	color:white;
}
nav{
	background: rgba(255,255,255,.1);
}
nav ul{
	display: flex;
	justify-content: space-around;
	list-style: none;
}

nav ul li a i{
	margin: .5rem;
	font-size: 2rem;
	color:#0165E1;
	
}


.cards{
	font-family: 'Tajawal', sans-serif;
	margin: 2rem auto;
}

.card {
	border-radius: 10px;
	background-color: rgba(255,255,255,.9);
	transition: 0.7s ease;
	color:black;
	margin: 20px auto;
	padding:10px;
	width: 80%;

}

.cards .title{
	padding-top:20px;
}
.card:hover {
	transform: scale(1.1);
}

.icon {
	color: #021aee;
	font-size: 2rem;
	text-align: center;
}

.info {
	text-align: center;
}

.info h3 {
	color: #3a6cf4;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 10px;
}


.cards .card .info p{
	font-size: 1.3rem;
}






.contact .icon {
	font-size: 2.5rem;
}

.contact .info h3 {
	color: #3a6cf4;
	font-size: 1.2rem;
	font-weight: 700;
	margin: 10px;
}

.contact .info p {
	font-family: 'Gugi', cursive;
	font-size: 1.3em;
}








footer{
	margin: 3rem 0 0 0;
}

footer div h3{
	letter-spacing: 1px;
}