@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: 7px 20px;
		border-radius: 30px; 
	}
	.card h1{
		font-size: 20px; 
	}	

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

	.about{
		margin-top: 6vh; 
	}
	.about img{
		margin-top: 15vh;
	}	
	.about h1{
		font-size: 25px;
	}
	.services{
		margin-top: 4vh;
	}
	.brands{  
		margin-top: 12vh;
	} 
	.brands .col-xs-4{
		margin-top: -15vh; 
	}

	.price-sub-header{
		width: 90%;
	} 	
	.price{
		height: 20%;
	}
	.price h2{
		margin-top:0.1px !important; 
	}
	.features{
		height: 45%;
	} 


	.team{
		margin-top: 10vh;
	}
	.team .role{
		width: 50%;
	}

	.contact{
		padding-top: 7vh; 
	}
	.contact h1{
		font-weight: bold; 
		margin-bottom: 2vh;
	} 
	.chat{
		text-align: center;
	}
	.footer{
		margin-top: 7vh;
	} 



}

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