@media screen and (max-width: 1200px) {

	section{
		width:100%;
		padding: 30px;
		box-sizing: border-box;
	}
	
	.footer{
		height: max-content;
		margin-top:unset !important;
	}
	.footer-content{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top:unset;
	}
	.footer-content>img{
		width:50%;
		margin-bottom:30px;
	}
	.contact{
		flex-direction: column;
	}
	.touch{
		margin-top:40px;
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
	}
	.connect{
		margin-top:40px;
		text-align: center;
	}
	.body-nav {
		padding: 0px !important;
	}

	.home{
		flex-direction: column;
		background: unset;
		justify-items: center;
		height: unset;
	}
	.home-img-container{
		width:80vw;
	}
	.home-img{
		display: block;
	}
	.home>.text-area{
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width:unset !important;
		margin-top:-10%;
	}
	.description{
		letter-spacing:unset !important;
		width: unset !important;
	}
	.home>.image-area{
		padding:20px 0;
	}
	.home>.image-area>img{
		width:100%;
	}
	
	.empty{
		display:none;
	}
	
	#logo {
		display: flex;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
		height: 25vh;
		justify-content: center;
	}

	nav {
		margin: 0;
		
	}
	nav a, nav label{
		font-size:18px !important;
		padding-left: 8% !important;
	}
	.contact-btn{
		padding: 7px 20px !important;
		margin-left:2%;
	}

	.toggle + a,
	.menu {
		display: none;
	}
	.toggle-main {
		display: block;
		background-color: var(--primary-color);
		padding:14px 20px  !important;	
		color:#FFF;
		font-size:22px !important;
		text-decoration:none;
		border:none;
	}
	.toggle {
		display: block;
		padding:14px 20px;	
		font-size:14px;
		text-decoration:none;
		border:none;
	}

	[id^=drop]:checked + ul {
		display: block;
	}
	nav ul {
		float: none;
		margin: 0;
	}

	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav ul li ul li .toggle,
	nav ul ul a,
  	nav ul ul ul a{
		padding:14px 20px;	
		color:var(--font-color);
		font-size:14px; 
		background-color: rgb(255, 234, 234);
	}

	nav ul ul {
		float: none;
		position:static;
	}
		
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
	}
	.about{
		flex-direction: column;
	}
	.tyre-icon{
		margin-top:-10vh;
		z-index: -1;
	}
	.self-rent{
		flex-direction: column-reverse;
	}
	.self-rent .text-area {
		padding: unset;
	}
	.wheel-img{
		height: unset;
		width: 80vw;
		margin-top:10%;
	}
	.how-img{
		width:80vw;
	}
	.wrap {
		flex-wrap: unset;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	  }
	  .card {
		flex-direction: column;
		margin-top: 50px;
		margin-bottom: 50px;
	  }
	  .card-pic-wrap {
		width: 100%;
		border-radius: var(--border-radius) var(--border-radius) 0 0;
		
	  }
	  .card-pic-wrap img {
		  bottom: 20px;
		  position: relative;
		  width:80vw;
		}
	  .card-content {
		padding: 2em 2em 1em;
	  } 
	.banner{
		display: none;
	}
	.banner-last{
		display: block !important;
	}
  }