@charset "utf-8";
/* CSS Document */




		body{
			width: 100%;
			height: 100vh;
			font-family: "Helvetica";
			background-color: #F4F4F4;
			flex-direction: column;
			gap: 20px;
			margin: 0;
			overflow-x: hidden;
		}
.desktop-container{
	
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	align-content: center;
	align-items: center;
}
		
		.top{
			display: flex;
			width: 100%;
			height: auto;
			flex-direction: column;
			background-color: #2F2324;
			color: #fff;
		align-items: center;

			
			
		}
.left-wrap{
	
	display: flex;
	width: 20%;
	height: auto;
	background-color: #f4f4f4;
	padding: 20px;
	
}
.left{
	display: flex;
	width: 100%;
	height: auto;
	background-color: #f4f4f4;
	padding: 20px;
	
}

.right-wrap{
	display: flex;
	width: 20%;
	height: 100%;
	flex-direction: column;
	align-items: flex-start;

align-content: flex-start;
align-self: flex-start;
}
.right{
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	background-color: #fff;
	padding: 20px;
	gap: 10px;
}


.lrg-img{
	width: 100%;
	height: auto;
	box-sizing: content-box;
	
}
.thumb-img{
	max-width: 100%;
	height: auto;
	box-sizing:border-box;
	border: 1px solid #000;
	box-shadow: 0px 0px 3px 3px lightgray;
	
}
.thumbs{
	
	display: flex;
	width: 100%;
	height: auto;
	gap: 20px;
}
.thumb-box{
	display: flex;
	max-width: 100%;
	height: auto;
	flex-direction: column;
	background-color: #000;
	padding: 10px;
}
.text{color: #fff;
padding: 10px;
}
.right-popular{font-size: 28px;
font-weight: 700;
}

		.top-mid{
			display: flex;
			width: 100%;
			height: auto;
			align-items: center;
			
			justify-content: space-around;
		}
		.bottomline{
			display: flex;
			width: 100%;
			height: auto;
			justify-content: center;
			background-color: #0093FF;
			box-shadow: 1px 0 1px 1px #000;
			
		}
		.container{
			
			display: flex;
			max-width: 100%;
			height: 80%;
			flex-direction: column;
			
			align-items: center;
			padding: 20px;
			gap: 20px;
		}
		
		
		.mid{
			display: flex;
			max-width: 55%;
		height: auto;
			flex-direction: column;
		justify-content: space-between;
			background-color: #FFF;
			border-radius: 4px;
			border: 1px solid #ddd;
			padding: 20px;
			gap: 20px;
			
		}
.mid-mid{
	display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	
}
		.page-info{display: flex;
		width: auto;
			height: auto;
			flex-direction: column;
		}
		.page-title{font-size: 32px;
		font-weight: bold;
		}
		
		.top-links{
			display: flex;
			width: 40%;
			height: auto;
			justify-content: space-around;
			
		}
		.link{
			font-size: 24px;
			padding: 20px;
			font-weight: bold;
			
		
		}
		.under-link{
			font-size: 14px;
			padding: 20px;
			font-weight: bold;
			padding: 10px;
		
		}
		
		.link:hover{
			
			/*background-color: lightcyan;*/
			
			border-bottom: 1.8px solid #fff;
		}
		.under-link:hover{
			
			background-color: lightcyan;
			color: #000;
						border-bottom: 1.8px solid #000;

		}
		.img{
			display: block;
			border: 1px solid #000;}
		
		.block{
			display: flex;
			max-width: 100%;
			height: auto;
			border: 1px solid #ddd;
			padding: 20px;
			gap: 20px;
		}
		.block-title{
			font-size: 18px;
			
		}
		.block-left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			
		}
		.block-right{
			display: flex;
			width: 100%;
			height: auto;
			flex-direction: column;
		}
		.block-img{}
		.block-description{
			font-size: 15px;
			
		}






/* page page start */
	.page-container{
			
			display: flex;
			width: 100%;
			height: 80%;
			align-items: center;
			
			padding: 20px;
			gap: 20px;
		}

.main-content{display: flex;
width: 100%;
	height: auto;
}
		
/* page page end */



/* review page start*/

		
		
		
		.img{
			display: block;
			border: 1px solid #000;}
		
		.review-block{
			display: flex;
			width: 100%;
			height: auto;
			border: 1px solid #ddd;
			padding: 20px;
			gap: 20px;
		}
.nav-block{
			display: flex;
			max-width: 100%;
			height: auto;
			border: 1px solid #ddd;
			padding: 20px;
			gap: 20px;
		}
		.block-title{
			font-size: 18px;
			
		}
		.block-left{
			
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
		}
		.block-right{
			display: flex;
			width: 100%;
			height: auto;
			flex-direction: column;
		}
		.block-img{}
		.block-description{
			font-size: 15px;
			
		}
/* review page end*/





/*index page start*/

.index-page-container{
			display: flex;
			width: 85%;
		height: 100%;
			justify-content: space-around;
	padding: 20px;
	gap: 20px;
		}
	
		.section-area-left{
			display: flex;
			width: 20%;
			height: 100%;
			flex-direction: column;
			padding: 10px;
			
		
		}
.latest-post{
display: block;
	width: 100%;
	height: auto;
}
.latest-post-title{
	width: 30%;
	background-color: #000;
	color: #fff;
	font-weight: bold;
	border-top-right-radius: 10px;
	align-content: center;
	padding: 10px;
}
.ad-box{display: flex;
width: 100%;
height: auto;
	
}
.index-mid{display: flex;
width: 100%;
	height: auto;
	flex-direction: column;
	padding: 20px;
	gap: 20px;
}
		.main-featured{display: flex;
		max-width: 65%;
			height: auto;
			flex-direction: column;
			
		}
		.mf-img{
			
			width: 100%;
			height: 300px;
			border: 1px solid #000;
			align-content:flex-end;
			padding: 10px;
		}
		.mf-title{font-size: 28px;
		font-weight: bold;
			max-width: 100%;
		}
		.section-area-right{
			display: flex;
		max-width: 20%;
			height: auto;
			flex-direction: column;
			padding: 10px;
			gap: 20px;
			align-items: center;
			
		}
		.mf-titlee{
			max-width: 100%;
			height: auto;
			font-size: 28px;
			font-weight: bold;
			color: #000;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 10px;
		}
		.ss{
			
			border: 1px solid #000;
			
			
		}
		.post-box-img{}
		.post-box-title{
			background-color: #000;
			color: #fff;
			font-weight: bold;
			padding: 10px;
}
.post-grid{
	
	display: grid;
		max-width: 100%;
			height: auto;
			grid-template-columns: repeat(1, 65%);
			grid-auto-rows: auto;
			padding: 10px;
			gap: 20px;
	
}
.post-container{
	
display: flex;
	border: 1px solid #ddd;
	
	flex-direction: row;
	align-items: center;
	align-content: center;
	padding: 20px;
	gap: 20px;
	
}
.post-container-left{
	width: 20%;
	height: auto;
	
}
.post-container-right{
width: 50%;
	height: auto;
	
}
.post-container-title{
	
	font-weight: bold;
}
.post-container-description{}
.post-container-img{
	
	width: 80px;
	height: auto;
	background-color: #000;
	padding: 10px;
}

/*index page end*/


/*reviews page start*/
.reviews-page-container{
	
display: flex;
	width: 100%;
	height: auto;
	flex-direction: column;
	align-content: center;
	align-items: center;
}
.rvpc-one{
	display: flex;
	width: 100%;
	height: auto;
	
}
.rvpc-two{
		display: flex;
	width: 100%;
	height: auto;
	
}


.category-bar{
	display: grid;
	max-width: 100%;
	height: 200px;
	justify-content: space-between;
	grid-template-columns: repeat(3, 100px);
	grid-auto-rows: 100px;
		align-content: center;
	background-color: #000;
	padding: 10px;
	
}
.category-circle{
	display: flex;
	border: 1px solid #000;
	border-radius: 50% 50%;
	background-color: #fff;
	align-content: center;
	align-items: center;
	justify-content: center;

}
/*reviews page end*/

a{
	display: inline-block;
	width: auto;
	text-decoration: none;
color: inherit;
	white-space: nowrap;
}
a:visited{
	display: block;
	width: auto;
	text-decoration: none;
	color: inherit;
}