*{
	margin: 0%;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
	background-color: #f3f3f3;
}
header{
	display: block;
	padding: 20px 0px;
	text-align: center;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}
#mob{
	display: none;
}
nav ul {
	display: flex;
	flex-direction: row;
	z-index: 10;
	background-color: #26877f;
	width: 100%;
	height: 5em;
	place-content: end, space-around;
	list-style-type: none;
	padding: 0px;
}
nav ul li {
	flex-grow: 1;
	height: 100%;
	display: inline-block;
}
nav ul li a{
	
	display: inline-block;
	height: 100% ;
	width: 100%;
	padding-top: 1.75em;

	text-align: center;
	color: whitesmoke;
	text-decoration: none;
}
nav ul li a:hover{
	background-color: white;
	height: calc(100% - 1.75em);
	color: #26877f;
	} 
	#promo{
		background-color: #3d3d3d;
		margin: 20px 20px 0px 20px;
		height: 14em;
		border-radius: 12px;
		box-shadow: rgba(20, 20, 20, 0.05) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;

		overflow: hidden;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("https://th.bing.com/th/id/OIG4.htHzwelddcfOYZ2PVJhm?w=1024&h=1024&rs=1&pid=ImgDetMain");
		background-position-y: 60%;
		background-blend-mode: overlay;
	}
	#promo  h1{
		color: rgba(255, 255, 255, 0.712);
		font-size: 2.2em;
		font-weight: normal;
		margin: 20px;
	}
	#blog{
		padding: 20px;
		display: flex;
		gap: 20px;
		justify-content: space-evenly;
		
	}
article{
	overflow: hidden;
	padding: 15px;
	flex: 1;
	display: block;
	height: 20em;
	border-radius: 12px;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(238, 238, 238);
	box-shadow: rgba(20, 20, 20, 0.05) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	
}
article img{

	width: 100%;
	max-height: 10em;
	object-fit: cover;
	border-radius: 12px;
}
article > p{
	color: #383838;


}
article h1{
	margin: 10px 15px 10px 0px;
}
article p {
	width: calc(100% - 1.75em);
	margin: 15px 10px 0px;
	text-wrap: wrap;
	text-overflow: ellipsis;
}
footer{
	display: flex;
}
footer > div{

	padding: 20px 20px 20px 20px;
	border-left: 1px solid rgb(240, 240, 240);
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: left;
	height: 5em;
	flex: 1;
}
#foot1 > *{

	display:inline;
	padding: 20px;
	font-size: smaller;
	
}
#foot2 h3{
	display:inline;
	width: 100%;
	padding: 20px;
	font-weight: 100;
	font-size: smaller;
	text-align: end;
}
@media (max-width: 931px){
	body{
		background-color: #26877f;
	}
	header{
		display: none;
	}
	#mob{
		display: block;
		padding: 20px 0px;
		text-align: center;
		width: max-content;
		margin-left: auto;
		margin-right: auto;
	}
	#promo  h1{
		color: rgba(255, 255, 255, 0.966);
		font-size: 1.8em;
		font-weight: normal;
		margin: 20px;
	}
	#blog{
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		justify-content: space-evenly;
		
	}

	
}