/* 
navbar styling
*/
.navbar{
	display: flex;
	justify-content: center;
	align-items: center;
	/*background: #986701;	for testing which property is to be applied*/
}

.nav-center{
	width: 90vw;	/*view width 90% */
	max-width: 1120px;
	/*background: #674589;	for testing which property is to be applied*/
}
.nav-header{
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/*.nav-header img{
	width: 200px;
}
*/
.nav-logo{
	display: flex;
}
.nav-btn{
	padding: auto;
}
 
.nav-btn i{
	font-size: 1.25rem;
}

.nav-links{
	display: flex;
	flex-direction: column;
	height: 0px;
	overflow: hidden;
	transition: ease-in-out;
}

.show-links{
	height: 310px;
}

.nav-link{
	display: block;
	text-align: center;
	text-transform: capitalize;
	color: black;
	letter-spacing: 0.95px;
	padding-bottom: 1.25rem;
	border-top: 1.25px solid grey;
	transition: ease-in-out;
}

.nav-link:hover{
	color: #e50914;
}

.contact-link a{
	padding: 0.15rem 1rem;
}

@media screen and (min-width: 992px){
	.nav-btn{
		display: none;
	}
	.navbar{
		height: 6rem;
	}
	.nav-center{
		display: flex;
		align-items: center;
	}
	.nav-header{
		height: auto;
		margin-right: 2rem;
	}
	.nav-links{
		height: auto;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}
	.nav-link{
		padding: 0;
		border-top: none;
		margin-right: 1rem;
		font-size: 1rem;
	}

	.contact-link{
		margin-left: auto;
	}
}
/* nav bar styling ends here */

/* footer css */
.footer-page{
	background: black;
	color: white;
	height: 4rem;
	text-align: center;
	margin-top: 20;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* footer css ends here */

/* main content css */
.main-page{
	/*background: blue;*/
	width: 90vw;	/* 90% of total width*/
	max-width: 1120px;
	margin: 0 auto;
	padding-top: 2rem;
	min-height: calc(100vh - (6rem + 4rem));
	/* here we use calc function to calculate 100% of the height by subracting our navbar and footer heights*/
}

/* main content ends here */
/* hero class css */
.hero{
	height: 40vh;
	background: url("../images/3.jpg") center/cover;
	background-repeat: no-repeat;
	margin-bottom: 2rem;
	border-radius: 50px;
	position: relative;
}

.hero-container{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50px;	/* border of rgb should be same as that of image so it overlaps*/
}

.hero-text{
	text-align: center;
	color: white;
}

@media screen and (min-width: 772px)
{
	.hero-text h1{
		font-size: 4rem;
		margin: 0;
	}
}
/* hero class css ends here */

/* styling the post-list where we added our posts */
.post-container{
	display: grid;
	gap:  2rem 1rem;
	/*border: 6px solid blue;*/
}

.tag-container{
	/*border: 6px solid darkred;*/
	order: 0;
	display: flex;
	flex-direction: column;
	padding-top: 1rem;
}

.posts-list{
	display: grid;
	gap: 2rem 1rem;
	padding-bottom: 1rem;
	/*border: 3px solid green;*/
	color: #ab68ef;
}

.tag-container h3{
	margin-bottom: 0.5rem;
	font-weight: 700;
	color: #ab68ef;
	font-size: 30px;
}

.tags-list{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	font-size: 20px;
}

.tags-list a{
	text-transform: capitalize;
	display: block;
	color: black;
	transition: 0.3s ease-in-out all;
}

.tags-list a:hover{
	color: #e50914;
}
.post{
	display: block;
}

.post-img{
	height: 25rem;
	border-radius: 10px;
	margin-bottom: 1rem;
}

.post h5{
	margin-bottom: 0;
	line-height: 1;
	color: #ab68ef;
	font-weight: 700;
	font-size: 20px;
}

.post p{
	margin-bottom: 0;
	line-height: 1;
	color: black;
	margin-top: 0.5rem;
	font-weight: 400;
	letter-spacing: 1.5px;
	font-size: 17px;
}

/* 3 different media queries as we deal with 3 different screen sizes */
/* 2 photos layout at 576px */
@media screen and (min-width: 576px)
{
	.posts-list{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.post-img{
		height: 17rem;
	}
}

@media screen and (min-width: 992px)
{
	/* here we get an extra column of list at the left side*/
	.post-container{
		display: grid;
		grid-template-columns: 200px 1fr;
	}
	/* 200px is for list and we don't need to set the grid again to 1fr 1fr as it is already set at 576 px screen size so it will inherit to be the same */
	.post p{
		font-size: 17px;
	}
	.tag-container{
		order: 0;
	}
	.tags-list{
		grid-template-columns: 1fr;
	}
	.post-img{
		height: 20rem;
	}
}

@media screen and (min-width: 1200px)
{
	/* we get more photos in a single row as the screen size is increased */
	.post h5{
		font-size: 1.5rem;
	}
	.posts-list{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	
	.post-img{
		
		width: 19.25rem;
		height: 22rem;
	}
	/* 3 column desgin */
}

/* error page css */
.error-page{
	text-align: center;
	display: flex;
	justify-content: center;
}
.error-page h3{
	letter-spacing: 3px;
	font-size: 4rem;
}

.error-page h1{
	font-size: 6rem;
	letter-spacing: 2px;
}

/* Styling About page */
.featured-title{
	text-align: center;
	font-size: 30px;
}

.about-page{
	display: grid;
	gap:  2rem 4rem;
	padding-bottom: 3rem;
}
.about-page h2{
	font-size: 30px;
	text-align: left;
	text-transform: none;
}

.about-img{
	border-radius: 15px;
	height:  300px;
}
@media screen and (min-width: 992px) {
	.about-page{
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 400px;
		align-items: center;	
	}
	.about-img{
		height: 100%;
	}
}
.about-page p{
	font-size: 20px;
	text-align: left;
}

/* form styling */
.form{
	width: 90vw;
	max-width: 1120px;
	background: white;
	border-radius: 5px;
	box-shadow: black;
	padding: 2rem 2.5rem;
	margin: 3rem auto;
}

.form-label{
	display: block;
	font-size: 15px;
	margin-bottom: 0.5rem;
	text-transform: capitalize;
	letter-spacing: 2px;
}

.form-input, .form-textarea{
	width: 100%;
	padding: 0.375rem 0.75rem;
	border-radius: 5px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.form-textarea{
	height: 7rem;
}

::placeholder{
	font-family: inherit;
	color: darkgray;
}
/* styling btn class */
.btn{
	cursor: pointer;
	color: white;
	background: #ab68ef;;
	border: transparent;
	border-radius: 5px;
	letter-spacing: 2px;
	padding: 0.375rem 0.75rem;
	box-shadow: black;
	transition: ease-in-out;
	text-transform: capitalize;
	/*display: inline-block;*/
}

.btn:hover{
	background: #e50914;
	box-shadow: 5px 10px black;
}
.btn-block{
	width: 100%;
}

/* contact page */
.contact-form{
	padding: 0;
	margin: auto;
	align-items: center;
	justify-content: center;
	display: flex;
}

.contact-container{
	display: grid;
	gap: 2rem 3rem;
	padding-bottom: 3rem;
}

.contact-info h3{
	text-align: center;
	font-size: 22px;
	font-weight: 50px;
}