/*--------------------------------------------------------------*
Author        : Sacred Themes.
Template Name : Wheels
Version       : 1.0
*-------------------------------------------------------------*
    
*--------------------------------------------------------------*/
:root {
  --main-color:#dd0707;
  --text-color:#3b3b3b;
  --heading-color:#000000;
  --light-gray:#eeeeee;
  --white-color:#ffffff;
  --dark-gray:#282828;
  --dark-gray-2:#8c8c8c;
  --black-color:#000000;
}

/*--------------------------------------------------------------*
Preloader
*--------------------------------------------------------------*/
#st-preloader {position: fixed; z-index: 999999; top: 0; right: 0; bottom: 0; left: 0; display: block; background: #fff;}
.st-preloader-wave {position: absolute; top: 50%; left: 50%; width:100px; height:100px; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); background:var(--main-color); ; padding:10px; border-radius:50%;}
.st-preloader-wave img{-webkit-transform: translate3d(0, 0, 0); -webkit-transform-origin:40px 40px; -webkit-transform: translate3d(0, 0, 0); -webkit-animation: rotateicon 3s linear 0s infinite; animation: rotateicon 3s linear 0s infinite;}
.st-preloader-wave:before{position: absolute;display: inline-block; width:150px; height:150px; content: "";  -webkit-animation: preloader-wave 1.5s linear infinite;
            animation: preloader-wave 1.5s linear infinite; border-radius: 50%; background: var(--main-color); ; left: -25px; top: -25px;}

@-webkit-keyframes rotateicon {
	from {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes rotateicon {
	from {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

@-webkit-keyframes preloader-wave {
    0% {-webkit-transform: scale(0, 0); transform: scale(0, 0); opacity: .5;}
    100% {-webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 0;}
}

@keyframes preloader-wave {
    0% {-webkit-transform: scale(0, 0);transform: scale(0, 0);opacity: .5; }
    100% {-webkit-transform: scale(1, 1); transform: scale(1, 1);opacity: 0;}
}
/*--------------------------------------------------------------*
 Basic
*--------------------------------------------------------------*/
html{margin:0; padding:0;  }
body {color:var(--text-color); font-family: 'PT Sans', sans-serif; font-size:16px; font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x: hidden;}
a:active, a:focus {outline: none !important;}
a{text-decoration: none !important; color:var(--main-color); ; }
a:hover, a:focus {color: var(--text-color); ;}
a, .btn {-webkit-transition: all .3s;  transition: all .3s;}
a img, iframe {border: none;}
p {margin: 0 0 30px; /*color: var(--text-color);*/ line-height:1.5;}
p:last-child{margin-bottom:0; }
.text-lead, p.text-lead, .text-lead > *{font-size: 22px; line-height: 1.6;}
b, strong {font-weight: bold;}

.empty-15{display:table; margin:auto; clear:both; height:15px;}
.empty-30{display:table; margin:auto; clear:both; height:30px;}
.empty-45{ display:table; margin:auto; clear:both; height:45px; }

hr {margin-top: 0; margin-bottom: 0; border: 0; border-top: 1px solid var(--light-gray); ;}
pre {display: block; margin: 0 0 30px; padding: 9.5px; word-wrap: break-word; word-break: break-all; color: #333; border: 1px solid #ededed; border-radius: 0;  background-color: #f9f9f9; font-size: 13px;    line-height: 1.5;}
img{max-width:100%; vertical-align:top; outline:none;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin: 0 0 15px 0; color: var(--heading-color); ; font-weight:700; line-height: 1.5; font-family: 'Poppins', sans-serif;}
.h1, h1{font-size:2.5rem; line-height:1.5;}
.h2, h2{font-size:2rem; line-height:1.5;}
.h3, h3{font-size:1.75rem; line-height:1.5;}
.h4, h4{font-size:1.5rem; line-height:1.4; }
.h5, h5{font-size: 1.25rem; line-height:1.5; }
.fw-100{font-weight:100 !important;}
.fw-300{font-weight:300 !important;}
.fw-400{font-weight:400 !important;}
.fw-600{font-weight:600 !important;}
.fw-700{font-weight:700 !important;}

.m-top-0, .m-top-10, .m-top-15, .m-top-20, .m-top-25, .m-top-30, .m-top-35, .m-top-40,.m-top-50, .m-top-80, .m-top-100, .m-bot-0, .m-bot-10, .m-bot-15, .m-bot-20, .m-bot-25, .m-bot-30, .m-bot-35, .m-bot-40,.m-bot-50,
.m-bot-80, .m-bot-100 { display: inline-block;}
.m-top-0{ margin-top: 0 !important;}
.m-top-5{ margin-top: 5px;}
.m-top-10{margin-top: 10px;}
.m-top-15{margin-top: 15px;}
.m-top-20 {margin-top: 20px;}
.m-top-25 { margin-top: 25px;}
.m-top-30 {margin-top: 30px;}
.m-top-35 {margin-top: 35px;}
.m-top-40 {margin-top: 40px;}
.m-top-50 {margin-top: 50px;}
.m-top-80 {margin-top: 80px;}
.m-top-100 {margin-top: 100px;}
/*margin bottom*/
.m-bot-0 {margin-bottom: 0 !important;}
.m-bot-10 {margin-bottom: 10px;}
.m-bot-15 {margin-bottom: 15px;}
.m-bot-20 {margin-bottom: 20px;}
.m-bot-25 {margin-bottom: 25px;}
.m-bot-30 {margin-bottom: 30px;}
.m-bot-35 {margin-bottom: 35px;}
.m-bot-40 {margin-bottom: 40px;}
.m-bot-50 {margin-bottom: 50px;}
.m-bot-80 {margin-bottom: 80px;}
.m-bot-100 {margin-bottom: 100px;}
.m-left-10 {margin-left: 20px;}
/*padding top*/
.p-top-0 {padding-top: 0 !important;}
.p-top-10 {padding-top: 10px;}
.p-top-15 {padding-top: 15px;}
.p-top-20 {padding-top: 20px;}
.p-top-25 {padding-top: 25px;}
.p-top-30 {padding-top: 30px;}
.p-top-35 {padding-top: 35px;}
.p-top-40 {padding-top: 40px;}
.p-top-50 {padding-top: 50px;}
.p-top-80 {padding-top: 80px;}
.p-top-100 {padding-top: 100px;}
.p-tb-10 {padding: 10px 0;}
.p-tb-20 {padding: 20px 0;}
.p-tb-30 {padding: 30px 0;}
.p-tb-50 {padding: 50px 0;}
.p-tb-100 {padding: 100px 0;}
.p-tb-150 {padding: 150px 0;}
.p-tb-200 {padding: 200px 0;}

.p-bot-0 {padding-bottom: 0 !important;}
.p-bot-100 {padding-bottom: 100px !important;}

.fw-300{font-weight:300;}
.fw-700{font-weight:700;}
.fw-600{font-weight:600;}

.half-top-padding {padding-top:15px;}
.half-bottom-padding {padding-bottom:15px;}
.single-top-padding {padding-top:30px;}
.single-bottom-padding {padding-bottom:30px;}
.double-top-padding {padding-top:60px;}
.double-bottom-padding {padding-bottom:60px;}
.half-block-padding{padding:15px;}
.single-block-padding{padding:30px;}
.double-block-padding{padding:60px;}


.container{max-width:1520px; width:100%;}
.small-container{max-width:1200px; width:100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
.container-fluid{padding-right:0px; padding-left:0px;}
.height-100{height:100vh; }
.height-100 > *{height:100%; }
.verticle-center .row{vertical-align:middle; align-items:center; height:100%; }

.btn, input[type="button"], input[type="submit"], button, .btn-primary{color:var(--white-color); height:56px; line-height:50px; border:3px solid var(--black-color); font-size:1.175rem; padding:0px 45px; text-align:center; text-transform:uppercase; -webkit-border-radius:30px; border-radius:30px; font-weight:700; letter-spacing:1px; transition:all 300ms ease-in-out; -webkit-box-shadow:none; box-shadow:none; background:var(--black-color); position: relative; cursor:pointer;  }
.fw{width:100%;}

.btn-primary{background:transparent; color:var(--black-color);}
.btn-primary.has-icon span {left: 0px; display: inline-block; -ms-transform: translateX(-18px);
-webkit-transform: translateX(-18px); transform: translateX(-18px); transition: opacity .45s cubic-bezier(0.25,1,0.33,1),transform .45s cubic-bezier(0.25,1,0.33,1); -webkit-transition: opacity .45s cubic-bezier(0.25,1,0.33,1),-webkit-transform .45s cubic-bezier(0.25,1,0.33,1); position: relative;}

.btn-primary.has-icon i{right: 14px; margin-top: 0; text-align: center; vertical-align: middle; border-radius: 50%;line-height:40px; height:40px; width:40px; -webkit-transition: all .45s cubic-bezier(0.25,1,0.33,1); transition: all .45s cubic-bezier(0.25,1,0.33,1); position: absolute; top: 50%;}
.btn-primary.has-icon i {-webkit-transform: translateY(-50%) translateX(6px); transform: translateY(-50%) translateX(6px); color: #fff; background-color: rgb(0, 0, 0);
box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 15px;}


.btn:hover, input[type="button"]:hover, input[type="submit"]:hover, button:hover, .btn:focus, input[type="button"]:focus, input[type="submit"]:focus, button:focus{background:transparent; color:var(--black-color); border-color:var(--black-color); -webkit-box-shadow:none; box-shadow:none;}
.btn-primary:focus, .btn-primary:hover{background:var(--black-color); color:var(--white-color);}
.btn-primary.has-icon:hover i{background:var(--white-color); color:var(--black-color); }

.btn-transparent{background:rgba(0,0,0,0.8); color:var(--white-color);  }
.btn-square{border-radius:0 !important; }

.accent-color{border-color:var(--main-color);}
.accent-color:hover{background:var(--main-color); border-color:var(--main-color);}

.btn-primary.btn-inverse{background:var(--black-color); color:var(--white-color);}
.btn-primary.btn-inverse.has-icon i{background:var(--white-color); color:var(--black-color);}

.btn-primary.btn-inverse:hover{background:transparent; color:var(--black-color);}
.btn-primary.btn-inverse.has-icon:hover i{background:var(--black-color); color:var(--white-color); }

.btn-primary.btn-accent{background:var(--main-color); color:var(--white-color); border-color:var(--main-color);}
.btn-primary.btn-accent.has-icon i{background:var(--white-color); color:var(--black-color);}

.btn-primary.btn-accent:hover{background:transparent; color:var(--black-color);}
.btn-primary.btn-accent.has-icon:hover i{background:var(--main-color); color:var(--white-color); }




.scroll-to{position:absolute; bottom:30px; height:auto; right:calc((100% - 1490px) / 2);}
.scroll-to a{position:relative; display:block; color:var(--black-color); font-weight:bold;  }
.scroll-to i{background:#ffffff; height:36px; width:36px; -webkit-border-radius:50%; border-radius:50%; border:2px solid var(--main-color); line-height:32px; color:var(--main-color); text-align:center; animation: jumparrow 2s infinite;  }
.scroll-to span{-webkit-transform:rotate(90deg) translateY(0px)); transform:rotate(90deg) translateY(0px); display:block; text-transform:uppercase; text-align: center;
margin: 0 0 25px; line-height: 1; transform-origin: center top; }

button, select{-moz-appearance: none; -webkit-appearance: none;}
@-webkit-keyframes jumparrow {
  0% {
    -webkit-transform:translate(0, 0);
  }
  20% {
    -webkit-transform:translate(0px, 10px);
  }
  40% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes jumparrow {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0px, 10px);
  }
  40% {
    transform: translate(0, 0);
  }
}

/*--------------------------------------------------------------*
 03. Body Content
*--------------------------------------------------------------*/
.main-container > section{position: relative; clear: both; border: 0; padding:80px 0px; }
.section-background{position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; border-radius: inherit; background-clip: padding-box; -webkit-overflow-scrolling: touch;}
.section-background .background-wrapper{backface-visibility: hidden; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;overflow: hidden; border-radius: inherit; background-clip: padding-box;}
.section-background .background-wrapper .background-inner{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-attachment: scroll;}
.section-background .background-wrapper .overlay-bg{position:absolute;top: 0; bottom: 0; left: 0; right: 0; background-attachment: scroll; background-size:cover; background-position:center center;  }
.top-sub-heading{font-weight:500; font-size:3.125rem; -webkit-text-shadow: 6px 6px 7.83px rgba(0, 0, 0, 0.18);  text-shadow:6px 6px 7.83px rgba(0, 0, 0, 0.18); line-height:1;   }
h1.large-heading{font-size:6.75rem; color:var(--main-color); font-weight:bold; text-transform:uppercase; line-height:1; -webkit-text-shadow: 6px 6px 7.83px rgba(0, 0, 0, 0.18);  text-shadow:6px 6px 7.83px rgba(0, 0, 0, 0.18);}
h1.large-heading span{display:block; font-size:4.725rem; }
h2.large-heading{font-size:4.625rem; line-height:1; }
h2.large-heading span{display:block; font-size:2.225rem; color:var(--main-color); font-weight:400; }
.banner-content{padding-top:60px;}
.about-text{padding-left:120px; }
.about-text:before{background:var(--main-color); position:absolute; left:90px; top:0; bottom:0; width:2px; content:""; display:block; }
.text-block{margin-bottom:30px; }
.offset-y-50{-wenkit-transform:translateY(50px); transform:translateY(50px); }
.offset-y-100{-wenkit-transform:translateY(100px); transform:translateY(100px); }
.heading-wrapper{margin-bottom:30px; }
.light-text, .light-text *{color:#ffffff; }

.site-footer{background:var(--black-color); padding:18px 0px;  }
.site-footer a{color:var(--main-color); }


.before-after-car-container{margin:50px 0px 0px; }
.before-after-car-container .twentytwenty-overlay{display:none; }
.twentytwenty-horizontal  .before-after-car-container .twentytwenty-handle::after, .twentytwenty-horizontal .before-after-car-container .twentytwenty-handle::before{background:var(--black-color); box-shadow: none;}
.twentytwenty-horizontal .twentytwenty-handle::before, .twentytwenty-horizontal .twentytwenty-handle::after{width:0; }
.before-after-car-container .twentytwenty-handle{border-color:var(--black-color); background: #fff;}
.twentytwenty-left-arrow{border-right:6px solid var(--main-color);}
.twentytwenty-right-arrow{border-left:6px solid var(--main-color);}

.banafits-section{border-top:2px solid #eeeeee !important;}
.icon-box{padding:80px 15px; }
.icon-box.align-center{text-align:center;}
.icon-box.icon-top .icon{display:table; width:100%; margin-bottom:15px;   }
.banafits-section .row > div{border-right:2px solid #eeeeee;}
.banafits-section .row > div:first-child{border-left:2px solid #eeeeee;}
.features-section{background:#efefef; }
.features-section .icon-box{background:#e3e3e3; border-radius:20px; padding:50px 30px; margin:15px 0px; -webkit-transition:all 400ms; transition:all 400ms;    }
.features-section .icon-box:hover{box-shadow: 6px 7px 15.2px 0.8px rgba(0, 0, 0, 0.19); -webkit-box-shadow: 6px 7px 15.2px 0.8px rgba(0, 0, 0, 0.19);}
.features-section .icon-box.icon-top .icon{background:#ffffff; border-radius:50%; padding:21px; width:110px; height:110px; display:inline-block; line-height:110px }

.layout-box{margin:30px 0px; }
.layout-img{position:relative;}
.layout-img img{position: relative; transform:}



.purchase-section{background:var(--main-color); }

.roadmap{position:absolute; bottom:0; left:0; right:0; height:170px; background:url("../images/road-img.png") repeat-x scroll 0px 0px; background-size: auto 185px;}
.roadmap .left-right > div, .roadmap .right-left > div{position:absolute; left:0; bottom:30px; width:100%;    }
.roadmap .left-right > div img, .roadmap .right-left > div img{max-height:50px;}

.roadmap .bike-logo{ left:auto; right:0px; top:28px; bottom:auto; transform: translateX(100%); -webkit-animation: mymove 15s 1s infinite linear; /* Safari 4.0 - 8.0 */
  animation: mymove 15s 1s infinite linear; } 
.roadmap .left-right > div{transform: translateX(-10%);}

@-webkit-keyframes mymove {
  from {transform: translateX(100%);}
  to {transform: translateX(-10%);}
}

@keyframes mymove {
   from {transform: translateX(100%);}
   to {transform: translateX(-10%);}
}

.roadmap .car-logo.move_active{-webkit-animation: carmove 15s 1s infinite linear; /* Safari 4.0 - 8.0 */   animation: carmove 15s 1s infinite linear; }
.roadmap .bus-logo.move_active{-webkit-animation: carmove 15s 1s infinite linear; /* Safari 4.0 - 8.0 */   animation: carmove 15s 1s infinite linear; }
.roadmap .bicycle-logo.move_active{-webkit-animation: carmove 15s 1s infinite linear; /* Safari 4.0 - 8.0 */   animation: carmove 15s 1s infinite linear; }
.roadmap .ebike-logo.move_active{-webkit-animation: carmove 15s 1s infinite linear; /* Safari 4.0 - 8.0 */   animation: carmove 15s 1s infinite linear; }

@-webkit-keyframes carmove {
   from {transform: translateX(-10%);}
   to {transform: translateX(100%);}
}

@keyframes carmove {
   from {transform: translateX(-10%);}
   to {transform: translateX(100%);}
}
.new-tag{
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 50px;
  height: 80px;
  width: 80px;
}