/*navigation*/
nav{
	top:0;
	width:100%;
	z-index: 99;
	color: var(--font-color);
	padding: 20px var(--wrapper-padding);
	box-sizing: border-box;
}
.nav-item{
	font-size:14px;
	margin:0px 12px;
}

.home{
	background-image: url("../images/homebg.png");
	background-repeat: no-repeat;
	background-size: 100vw;
	height: 650px;
	
}

.footer{
	color: var(--font-color);
	background-image: url("../../assets/images/footerbg.png");
	height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
}
.footer-content{
	align-content: center;
	margin-top: 80px;
}
.footerimg{
	width:100%;
}
.sub-contact .fa{
	color: var(--primary-color);
}
*{
	transition: .2s ease-in;
}
a{
	text-decoration: none;
	color:unset;
	cursor: pointer;
}
.social-media{
	font-size: 30px;
	color: var(--primary-color);
	border-radius:var(--border-radius);
	height:50px;
	width:50px;
	margin-right:10px;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
}
.social-media:hover{
	color:var(--light-color);
	background-color: var(--primary-color);
}

.contact-img{
	width: 100%;
    }

.footer .title{
	font-size:24px;
}


.body-nav {
	background: #fff;
	font-size:22px;
	line-height: 32px;
	color: var(--primary-color);
	margin: 0;
	padding: 1vw 7.5vw;
	word-wrap:break-word !important;
	}


#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
}


nav { 
	margin:0;
	padding: 0;
}

.logo {
	display: block;
	float: left;
	font-size:20px;
	line-height: 60px;
}
.logo {
	width:100px;
}


nav:after {
	content:"";
	display:table;
	clear:both;
}

nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	color:var(--font-color);
	}

nav a {
	display:block;
	padding:14px 30px;	
	color:var(--font-color);
	font-size:18px;
	text-decoration:none;
}


nav a:hover { 
	color:var(--primary-color);
}

nav ul ul {
	display: none;
	position: absolute; 
	top: 60px; 
	background-color: white;
}

nav ul li:hover > ul {
	display:inherit;
}
	
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
.contact-btn{
	display: flex;
	justify-content:center;
	align-items: center;
	
	background-color: var(--primary-color);
	padding: 10px 30px  !important;
	border-radius: var(--border-radius) ;
	font-family: var(--primary-font);
	cursor: pointer;
	width: fit-content  !important;
}
.contact-link{
	padding:unset !important;
	color: var(--light-color) !important;
}

/* mouse scroller */
.mouse{
	height: 40px;
    width: 25px;
    border-radius: 400px;
	border:2px solid var(--primary-color);

}
.mouse:after{
	content:'';
	display:block;
	height:8px;
	width:2px;
	margin:10px auto;
	background:var(--primary-color);
	position:relative;
	-webkit-animation:a 1.2s ease infinite;
	animation:a 1.2s ease infinite;
}
.arrow-scroll{
	width:35px;
	margin-top:10px
}
.arrow-scroll>span{
	font-family:Arial,sans-serif;
	display:block;
	width:5px;
	height:5px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	border-right:2px solid var(--primary-color);
	border-bottom:2px solid var(--primary-color);
	margin:5px auto 3px;
	-webkit-animation:b 1s infinite;
	animation:b 1s infinite;
	-webkit-animation-delay:.2s;
	animation-delay:.2s;
}
.arrow-scroll>span:first-child{
	-webkit-animation-delay:.1s;
	animation-delay:.1s;
}
.arrow-scroll>span:last-child{
		-webkit-animation-delay:.3s;
		animation-delay:.3s;
}
@-webkit-keyframes a{
	0%{
		opacity:1;
		-webkit-transform:translateY(0);
		transform:translateY(0);
	}to{
		opacity:0;
		-webkit-transform:translateY(8px);
		transform:translateY(8px);
	}
}
@keyframes a{
	0%{opacity:1;
		-webkit-transform:translateY(0);
		transform:translateY(0);
	}to{
		opacity:0;
		-webkit-transform:translateY(8px);
		transform:translateY(8px);
	}
}
@-webkit-keyframes b{
	0%{opacity:0}
	50%{opacity:.5}to{opacity:1}
}
	@keyframes b{
		0%{opacity:0}
		50%{opacity:.5}
		to{opacity:1}
}

/*range car*/
.wrap {
	
	flex-wrap: wrap;
}
.card {
display: flex;
background: #fff;
max-width: 550px;
margin: 120px 0;
border-radius: var(--border-radius);
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.card:hover{
	transform: scale(1.1);
}
.card-pic-wrap {
border-radius: var(--border-radius) 0 0 var(--border-radius);
width: 300px;
flex: 0 0 auto;
position: relative;
background: rgb(233, 233, 233);
}
.card-pic-wrap img {
	position: absolute;
	bottom: 3em;
	left: 50%;
	margin-left: -175px;
	width: 400px;
}
.card-content {
padding: 3em 4em 2em;
}

/*ride self*/
.half-gray{
	position: absolute;
	height: 200px;
	background-color: rgba(0, 0, 0, 0.096);
	width:100%;
}

.wheel-img{
	height:600px;
	width:600px;
}



/*Text marquee*/
.marquee {
    width: 100%; 
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee > div {
  display: table-row;
  white-space: nowrap;
  padding-left: 600px; 
  animation: marquee 40s ease-in-out infinite;
}

.marquee > div p {
  width: 100%; 
  padding-left: 600px;
  display: table-cell; 
}

@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}


.how-img{
	width:600px;
}
.banner{
	margin-top:-100px !important;
}
.banner-img{
	width:100%;
}
.home-img{
	display: none;;
}
.banner-last{
	display: none !important;
}