* {
	margin:0;
	padding:0;
	box-sizing: border-box;	
	overflow-x: hidden;
	font-family:'Open Sans';
}

header{
	background-color: white;
}

.topnav {
	display:flex;
	justify-content: space-between;
	align-items: center;
	padding:10px 30px;
	background-color: rgb(196, 142, 7);
	color:white;
	top:0;
	position: fixed;
	width:100%;
}

.topnav .left {
	display: flex;
	gap:5px;
	justify-content: center;
}

.topnav .mid-nav {
    display: flex;
    gap:5px;
    justify-content: center;
}

.topnav .right {
	display:flex;
	gap:5px;
	justify-content: center;
}

.socialmedia {
	display: flex;
	gap:15px;
	cursor: pointer;
}

@media(max-width:768px) {
	.topnav {
		display:flex;
		flex-direction: column;
		gap:5px;
	}
}

li{
	list-style: none;
}

a{
	text-decoration: none;
	color:white;
}

.navbar{
	min-height:50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px;
	background-color:rgb(28, 27, 27, 0.8);
	position: fixed;
	top:35px;
	width:100%;
	margin-bottom: 0px;
}

@media(max-width:768px) {
	.navbar {
		background-color: rgb(28, 27, 27, 0.8);
	}
	.topnav .mid-nav {
		display:none;
	}
	.topnav .left {
		display:none;
	}
}

@media(max-width:450px) {
	.topnav .right {
		font-size: 0.7rem;
	}
	.navbar {
		top:34px;
	}
}

@media(max-width:1024px) and (min-width:850px){
	.topnav {
		font-size: 12px;
	}
}

@media(max-width:850px) and (min-width:768px){
	.topnav {
		font-size: 11px;
	}
}

@media(max-width:350px) {
	.topnav .right {
		font-size: 0.6rem;
	}
	.navbar {
		top:31px;
	}
}

@media(max-width:300px) {
	.topnav .right {
		font-size: 0.55rem;
	}
	.navbar {
		top:33px;
	}
}

.nav-menu{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:60px;
}

.nav-branding{
	font-size: 1rem;
    padding:5px;
}

.nav-link{
	transition: 0.7s ease;	
}

.nav-link:hover{
	color:rgb(196, 142, 7);
}

.hamburger{
	display: none;
	cursor:pointer;
}

.bar{
	display:block;
	width:25px;
	height:3px;
	margin:5px auto;
	-webkit-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	background-color: rgb(196, 142, 7, 0.66);
}

@media(max-width:768px){
	.hamburger{
		display: block;
	}

	.hamburger.active .bar:nth-child(2){
		opacity:0;
	}
	.hamburger.active .bar:nth-child(1){
		transform:translateY(8px) rotate(45deg);
	}
	.hamburger.active .bar:nth-child(3){
		transform:translateY(-8px) rotate(-45deg);
	}

	.nav-menu{
		position:fixed;
		left:-100%;
		top:109px;
		gap:0;
		flex-direction: column;
		background-color:rgb(196, 142, 7, 0.66);
		width:100%;
		text-align: center;
		transition:0.3s;
	}
	.nav-item{
		margin:16px 0;
	}
	.nav-menu.active{
		left:0;
	}
	.nav-link{
		color:white;
	}
    .nav-menu {
        margin-right: 80px;
    }
	.nav-branding{
		width:70px;
		height:70px;
	}
}

@media(min-width:768px) {
    .navbar {
        padding:0 35px;
    }
}

#socialmedia {
	display: flex;
	color:white;
	gap:20px;
	cursor: pointer;
}

.topwords {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20vh;
    margin-bottom: 5vh;
    padding: 20px;
}

.toppic {
	display: flex;
	justify-content: center;
	margin: auto;
    width:60%;
    height:550px;
	/*background-image: url('blogs1.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;*/
}

@media(max-width:400px){
	.toppic {
		display: flex;
		justify-content: center;
		margin: auto;
    	width:auto;
    	max-height:300px;
	}
}

.toppic {
    margin-bottom: 30px;
}

.mainbody {
    font-size: 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:20px;
    margin-bottom: 30px;
}


footer {
	background-color: rgb(28, 27, 27, 0.9);
	color:white;
	justify-content: space-around;
	text-align: center;
	padding:10px 40px 10px 40px;
	display:grid;
	grid-template-columns: repeat(4,1fr);
	padding:30px;
	padding-left: 30px;
	margin-top: 20px;
	margin:auto;
}

@media(min-width:769px) {
    .item1 {
        text-align: left;
    }
}

.item2 a:hover {
	color:#023E8A;
}

 @media(max-width:500px) {
	footer {
		display:grid;
		grid-template-columns: repeat(1,1fr);
		padding:30px;
		grid-gap:20px;
	}
 }

 .copyright {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding:5px;
	background-color: rgb(179, 125, 1);
	opacity:0.9;
	color:white;
 }

 /*CSS FOR REVIEWS PAGE*/
content{
	margin-top: 30vh;
}