body{font-size:14px;}
img{max-width:100%;}
.btn-primary{background:#86C7C9;border-color:#86C7C9;color:#000;padding:10px 30px;border-radius:10px;}
.btn-primary:hover,.btn-primary:focus{background:#86C7C9;border-color:#86C7C9;box-shadow:0 0 0 .25rem #86C7C930;color:#000;}
.btn-primary:active:focus,.btn-primary:focus{box-shadow:0 0 0 .25rem #86C7C980;}

.navbar {
    background-color: black;
    color: white;
}
.navbar .collapse.navbar-collapse{flex:1;margin-left:200px;}
.navbar .collapse.navbar-collapse .navbar-nav{justify-content: space-between;width:100%;}
.navbar .nav-link {
    color: white;
}

.navbar .nav-link:hover {
    color: lightgray;
}

.header-info {
    background-color: #6db3b7;
    color: white;
    padding: 10px 0;
    position:sticky;
    top:0;
    left:0;
    z-index:100;
}
.hero-section .container{position:relative;}
.hero-section .top_content{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    padding:100px 0;
}
.hero-section .top_content p{margin:30px 0;}

.hero-section h1{
    font-weight:bold;
}
.hero-section .top_bg{
    position: relative;
    z-index:0;
}
.hero-image {
    max-width: 100%;
}

.feature-list li {
    margin:10px 0;
    font-size:14px;
    display:flex;
    align-items:center;
    text-align:left;
}

.feature-list .icon {
    width:20px;
    text-align:center;
    margin-right:10px;
}
.feature-list img {
    display:block;
    margin:auto;
    height:18px;
}
.feature-list .check{margin-right:10px;}

.why-trust-section {
    background-color: black;
    color: white;
    padding: 60px 0;
}

.why-trust-section h2{
    margin-bottom: 60px;
}

.why-trust-section .feature-list li {
    align-items: start;
    margin:30px 0;
}

.why-trust-section .feature-list .icon {
    margin-top:3px;
    width:30px;
}
.why-trust-section .feature-list .icon img{
    height:20px;
}
.why-trust-section .feature-list li h5{font-weight:bold;}
.why-trust-section .feature-list li h5 small{
    font-weight:normal;
    font-size:14px;
    margin-top:10px;
    display:block;

}
.bike-options-section {
    background-color: black;
    color: white;
    padding: 60px 0;
}
.bike-options-section .box{
    padding: 60px 0;
}
.bike-options-section h5{font-weight:bold;}
.bike-options-section .box{
    display:flex;
    justify-content:space-between;
}
.bike-options-section .card{width:32%;}
.bike-options-section .card-text{font-size:14px;}
.bike-options-section .card-body{padding:30px;}
.bike-options-section div.card-text{text-align:left;margin-bottom:30px;}
.bike-swiper{
    display:flex;
    overflow-x: auto;
    height:200px;
}
.bike-swiper .cover{
    width:180px;
    height:180px;
    display:flex;
    align-items:center;
    justify-content: center;
}
.bike-swiper img{
    max-height:180px;
    max-width:180px;
}

.insurance-section {
    background-color: #f0f0f0;
    padding: 60px 0;
    padding-bottom:600px;
    background:#f0f0f0 url(../img/peace_bg.png) no-repeat 125% 115%;
    background-size:auto 80%;
    position: relative;
}
.insurance-section::after{
    position:absolute;
    bottom:0;
    left:0;
    content:" ";
    display:block;
    width:100%;
    height:200px;
    background: linear-gradient(to bottom left, 
                transparent 50%,
                #000 0%);
}
.insurance-section .container{
    display:flex;
    justify-content:space-between;
}
.insurance-section .container .peace-mind{margin-right:30px;}
.insurance-section .container .peace-mind,.insurance-section .container .card{
    width:32%;
}
.insurance-section .container h2{font-weight:bold;}
.insurance-section .container span{
    display:block;
    margin:5px 0;
}
.insurance-section .card{border:2px solid #333;border-radius:10px;position: relative;text-align:center;}
.insurance-section .card-header{
    position:absolute;
    top:0;
    right:0;
    border-radius:0 8px 0 0;
}
.insurance-section .card-header.bg-basic{
    background: #86C7C9;
    color:#000;
    font-weight:bold;
}
.insurance-section .card-header.bg-premium{
    background: #FFE200;
    color:#000;
    font-weight:bold;
}
.insurance-section .card-title{padding:30px 0;font-weight:bold;border-bottom:2px solid #333;margin-top:30px;}
.insurance-section .card-text{line-height:2;margin:30px 0;}
.insurance-section .btn{margin:10px 0;color:#000;}
.steps-section {
    background-color: black;
    color: white;
    padding: 60px 0;
}
.steps-section .container{width:800px;}
.steps-section .step {
    background: transparent linear-gradient(270deg, #86C7C9 0%, #000000 100%) 0% 0% no-repeat padding-box;
    border-radius: 15px;
    padding:30px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    text-align:left;
    position: relative;
    overflow:hidden;
}

.steps-section .step-number {
    font-size:72px;
    font-weight:bold;
    margin-right: 20px;
    line-height:1;
    color:#3D5A5C;
}
.steps-section .icon {
    position:absolute;
    bottom:0px;
    right:-30px;
    height:80%;
    opacity:0.8;
}
.steps-section .icon img{max-height:100%;transform: rotate(-30deg);}
.included-section{
    background:#E6E6E6;
}
.included-section h2,.included-section h6{font-weight:bold;}
.included-section .container{
    padding-top:100px;
    padding-bottom:400px;
    background:url(../img/include_bg.png) no-repeat center bottom;
    background-size:80% auto;
}
.included-section img {
    max-height: 200px;
    object-fit: cover;
}
.included-section .content{
    margin:60px 0;
    display:flex;
    gap:0 30px;
    overflow-x:auto;
}
.included-section .card{
    width:260px;
    flex:none;
}
.included-section .card img{max-height:none;}
.included-section .card-img-overlay{
    color:#fff;
    display: flex;
    flex-direction: column;
    justify-content:flex-end;
    padding:30px;
}
.plans-section{
    
}
.plans-section h2{font-weight:bold;}
.plans-section .container{
    padding:100px 0;
}
.plans-section .content {
    padding:50px 100px;
    display:flex;
    justify-content:space-between;
}
.plans-section .card {
    width:32%;
    border-radius:10px;
    border:2px solid #555;
}
.plans-section .card-header{border-radius:8px 8px 0 0;padding:15px 0;font-weight: bold;font-size:18px;}
.plans-section .card-body{padding:15px 50px;}
.plans-section .card-body h3{
    padding-bottom:30px;
    padding-top:20px;
    margin-bottom:30px;
    font-weight:bold;
    border-bottom:2px solid #333;
}

.rent-to-own-section {
    background-color: black;
    color: white;
}
.rent-to-own-section .container{
    padding:100px 0;
}
.rent-to-own-section h2{font-weight:bold;}
.rent-to-own-section .content{display:flex;justify-content:center;align-items:center;padding:50px 0;}
.rent-to-own-section .list-unstyled{margin-left:30px;}
.rent-to-own-section .list-unstyled li{font-weight:bold;font-size:16px;padding:10px 0;text-align:left;}
.rent-to-own-section .list-unstyled li img{height:20px;margin-right:10px;}
.faq-section{padding:50px 0;}
.faq-section .quick-btn{
    background: #E4E4E4;
    border: 1px solid #707070;
    border-radius:30px;
    padding:10px 30px;
    font-weight:bold;
}
.faq-section .faq-item {
    margin-top:15px;
    padding:15px 0;
    border-bottom:1px solid #999;
}
.faq-section .faq-item h5{font-weight:bold;}
.faq-section .faq-item span{font-weight: bold;color:#86C7C9;margin-right:10px;}

.footer-section {
    background-color: black;
    color: white;
    padding:50px 0;
}
.footer-section h5{font-weight:bold;}
.js_down_box{
    display: none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:100;
    margin:auto;
    background:#0003;
}
.popup-down{
    width: 400px;
    height:450px;
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:100;
    margin:auto;
    background:#fff;
    padding:30px;
    border-radius:10px;
    text-align:center;
}
.popup-down .close{position:absolute;top:0;right:0;z-index:10;color:#000;width:30px;height:30px;text-align: center;line-height:30px;cursor: pointer;}
.popup-down .close:hover{color:#86C7C9;}
.popup-down img{max-width:100%;}
@media (max-width:1400px) {
    .hero-section .top_content{
        position: relative;
    }
    .hero-section .top_bg{
        position:absolute;
        bottom:0;
        right:0;
        text-align:right;
    }
    .hero-section .top_bg .hero-image {
        max-width:100%;
    }
}
@media (max-width:1200px) {
    
    .hero-section .top_content h1{
        margin-right:200px;
    }
}
@media (max-width:996px) {
    .container{
        padding-left:15px!important;
        padding-right:15px!important;
    }
    .navbar .collapse.navbar-collapse{flex:1;margin-left:0px;flex-basis:100%;}
    .hero-section .top_content h1{
        margin-right:0;
    }
    .bike-options-section .box{
        display:block;
    }
    .bike-options-section .box .card{width:100%;margin:15px 0;}
    .bike-options-section .box .card .bike-swiper{justify-content: center;}
    .insurance-section .container span{
        display:inline;
        margin:0;
    }
    .insurance-section .container{
        display:block;
    }
    .insurance-section .container .peace-mind,.insurance-section .container .card{
        width:100%;
        margin-bottom:15px;
    }
    .steps-section .container{width:100%;}
    .included-section .container{padding-bottom:150px;}
    .plans-section .content{display:block;padding:30px 0;}
    .plans-section .content .card{width:100%;margin-bottom:15px;}
    .insurance-section{
        padding-bottom:300px;
        background-position:right 101%;
        background-size:auto 30%;
    }
    .insurance-section::after{height:50px;}
}