@media screen and (max-width: 800px){
	.resp_nav{
		display: unset;
	}
	.main-view{
		display: none;
	}
	.navbar{
		height: 6vh;
	}
	.brand_photo{
		position: absolute;
		top: 10px;
		left: 10px;
	} 
	.brand_photo img{
		height: 30px;
		width: 31px; 
	}
	.menu_btn{
		height: 30px;
		width: 30px;
		background: none;
		border:none;
		position: absolute;
		right: 5%;
		top: 12px;
	}
	.menu_btn img{
		height: 20px;
		width: 20px; 
	}

	.links{
		background: #ffffff;
		height: 0; /* 100% Full-height */
	    width: 100%; /* 0 width - change this with JavaScript */
	    position: fixed; /* Stay in place */
	    z-index: 1000; /* Stay on top */
	    top: 0; /* Stay at the top */
	    left: 0; 
	    overflow-x: hidden; /* Disable horizontal scroll */
	    padding-top: 60px; /* Place content 60px from the top */
	    transition: 0.3s ease-in-out; /* 0.5 second transition effect to slide in the sidenav */ 
	}  
	.links li{
		list-style: none;
		margin-top: 7vh;
		padding: 8px 10px;
		transition: 0.3s ease-in-out;
		width: 95%;  
	}
	.links a:hover{ 
		transition: 0.3s ease-in-out; 
		color: #6600ff;
	} 
	.links a{
		transition: 0.3s ease-in-out; 
		text-decoration: none;
		color: black; 
		font-weight: bold;
	}  
	.links li>a{
		color: white;
		font-weight: normal;
		transition: 0.3s ease-in-out; 
	}
	.links li>a:hover{
		background: #6600ff;
		transition: 0.3s ease-in-out;
		color: white;
	}
	.menu-contact{
		background:#6600ff;
		padding: 10px 30px; 
		border-radius: 30px;	
	}
	.menu-contact span{
		margin-left: 10px;
	}
	#close{
		display: none;
		transition: 0.2s ease-in-out;
	}

	
	.landing{
		margin-top: 10vh;
	}
	.landing h1{ 
		font-size: 35px; 
		font-weight: bold;
		color: black;
	} 
	.landing h3{ 
		font-size: 18px; 
	}

	.landing a{ 
		font-size: 18px;
		padding: 10px 25px;
		border-radius: 30px; 
	}
	.card h1{
		font-size: 20px; 
	}	

	.landing img{
		margin-top: 30px;
		border-radius: 10px; 
	}

	.about{
		margin-top: 6vh; 
	}
	.about h1{
		font-size: 25px;
	}
	.services{
		margin-top: 4vh;
	}
	.brands{  
		margin-top: 6vh;
	}

	.topics{
		height: 300px;
		border-radius: 15px;
		padding: 10px;
		background: blue;
	}
	.topics h4{
		font-size: 25px;
	}
	.plum{
		background: linear-gradient(to bottom right, #363636, #000000);
	}
	.navy{
		background: linear-gradient(to bottom right, #c78126, #735d41);
	}
	.velvet{
		background: linear-gradient(to bottom right, #eb172d, #2c0f12);
	}
	.emerald{
		background: linear-gradient(to bottom right, #9d0eb0, #2d1e2f);
	}
	.teal{
		background: linear-gradient(to bottom right, #415373, #141e30);
	}


	.price{ 
		width: 100%; 
		height: 450px;
		padding: 15px;
	}



	.instructor h1{
		font-size: 70px; 
	}
	.instructor img{
		height: 250px;
		width: 300px; 
		margin-top: 11vh;
	} 
}

@media screen and (max-width: 400px){
	.brands{  
		margin-top: 10vh;
	} 
}