@import url('https://fonts.googleapis.com/css2?family=Alata&family=Josefin+Sans:wght@300&family=Outfit&family=Poppins&display=swap');

*{
	box-sizing:border-box;
}
body{
	font-family: outfit;
	background-color: whitesmoke;
	margin: 0;
	padding: 0
}
header h1{
	text-align: center;
	
	margin: 0;

}
header{
	padding: 3%;
	background-color: white;
	border-bottom: 1px solid blue;

}
.navbar{
	background-color: blue;
	overflow: hidden;
}
.navbar a{
	text-decoration: none;
	border-right: 1px solid white;
	padding:  1%;
	color:white;
	float: left
}
.body-container{
	margin:2%;
}
.main{
	background-color: lightgrey;
	padding: 1%;
	margin-top: 1%;
	overflow: hidden;
}
.main .col-1{
	position: relative;
	width: 55%;
	margin: 1%;
	float: left;




}
.main .col-1 .write-up{
	position: absolute;
	left: 5%;
	bottom: 25px;
	color: white
	
}
.write-up a{
	text-decoration: none;
	padding: 1%;
	border: 1px solid white;
	color: white
}
.write-up p span{
	font-size: 10px;
	color:lightgrey;
}
.col-2{
	width: 42%;
	float: left;
	margin-top: 1%;

}
.main .col-2 .col-container{
	position: relative;
	width: 100%;

	overflow: hidden;
	height: 200px;


}
.main .col-2 .col-container .write-up{
	position: absolute;
	left: 5%;
	bottom: 10px;
	color: white;
	
}
.heading{
	width: 80%;
	margin: 0 auto;
	text-align: center;
	color: white;
	clear: left;
	margin-top: 3%;
}
.heading h1{
	background-color: blue;
	padding: 2%
}
section h3{
	padding: 5px;
	border-bottom: 2px solid blue
}
.left-sec{
	position: relative;
	width: 48%;
	float: left;
	margin: 1%;
	margin-left: 0

}
.left-sec img{
	
}
.left-sec .write-up{
	position: absolute;
	top: 30%;
	opacity: 0.8;
	background-color: white;
	left: 2%;
	right: 2%;
	padding: 20px;;
}
.left-sec .write-up a{
	border: 1px solid grey;
	color: black;
	padding:2%
}
.right-sec{
	width: 48%;
	float: left;
	margin: 1%
}
.right-sec img{
	width: 15%;
	height: 70px;
	float: left
}
.right-sec .text{
	width: 77%;
	float: left;
	margin-left: 2%
}
.right-sec .text p{
	line-height: 7px;
}
.right-sec .container{
	margin-bottom: 2%;
	float: left;
	width: 100%
}
.sec-1{
	margin-bottom: 400px;
}
.sec-2{
	clear: left;

}
.sec-2 .con{
	position: relative;
}
.sec-2 .text{
	position: absolute;
	bottom: 5%;
	left: 3%;
	color: white
}
.sec-2 .left{

	width: 48%;
	float: left;

	position: relative;
	margin: 2%;
	margin-left: 0;
	margin-bottom: 15%
}
.sec-2 .write-up{
	position: absolute;
	top: 40%;
	left: 3%;
	right: 3%;
	background-color: white;
	padding: 5%
}
.sec-2 .write-up a{
	border: 1px solid grey;
	color: black;
	padding:2%;

}
.pag{
	clear: left;
	text-align: center;
	background-color: white;
	overflow: hidden;
}
.pag a{
	text-decoration: none;
	padding: 1%;
	display: inline-block;
	text-align: center;
	color: black
}
.pag a:hover{
	background-color: grey
}
@media screen and (max-width: 900px){
		.sec-2 .left{
			margin-bottom: 220px;
		}
	}
@media screen and (max-width: 760px){
	.main .col-1{
		width: 99%
	}
	.main .col-2{
		width: 48%;
		margin:1%;
	}
	.left-sec{
		width: 99%;
		margin-bottom: 150px;
	}
	.right-sec{
		width: 100%
	}
	.sec-2 .left{
		margin-bottom: 38%;
		width: 100%
	}
	.sec-2 .write-up{
		top: 60%
	}
	}