@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root {
    --theme-black: #1E1E1E;
    --main-font: 'Bricolage Grotesque', sans-serif;
    --theme-red: #9b0517;
    --theme-dark:#0e1217
}

.space{
    padding: 20px 0
}

.bg-red{
    background-color: #9b0517
}
.text-red{
    color: #9b0517
}
.theme-btn{
    background-color: var(--theme-red);
    padding: 12px 20px;
    color: #fff
}

.navbar-toggler {
    color: #fff
}

body {
    overflow-x: hidden;
    font-family: "Montserrat", sans-serif;
    background-color: #fff !important;
}

a {
    text-decoration: none !important;
}

.her_banner_svg {
    height: 100vh;
    width: 100vw;
}

.her_banner_svg {
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.whitebg {
    background-color: #fff
}

path {
    fill: none;
    stroke: #fff;
    stroke-width: 0.5px;
    vector-effect: non-scaling-stroke;
}

.section {
    padding: 100px 0;
    position: relative;
}

.main_title h2{
    font-size: 45px;
    font-weight: 600
}



.heading_animation h1 {
    visibility: hidden
}

.in-view .heading_animation h1 {
    overflow: hidden;
    visibility: visible
}

.in-view .heading_animation h1 span {
    display: block;
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}


@keyframes reveal {
    0% {
        transform: translate(0, 100%);
        visibility: visible
    }

    100% {
        transform: translate(0, 0);
        visibility: visible
    }
}


.main_banner_content_wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 9999
}


.hero_banner_cycle {
    position: absolute;
    bottom: 5%;
    left: 0%;
    width: 100%;
    z-index: 99999;
}

.hero_sub_slider_wrapper {
    position: absolute;
    top: 12%;
    left: 8%;
}

.hero_main_slider {
    height: 100vh
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: #fabb16 !important;
}

.main_menu .dropdown-menu {
    padding: 0px;
}

.main_menu .dropdown-menu li a {
    padding: 8px 15px !important;
}

/*
.hero_sub_slider .swiper-slide img {
    width: 40%
}
*/


/******top nav bar section*******/
.top_nv_menu {
    background-color: #000;
    height: 50px;
    position: relative;
    z-index: 999;
}

#bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.top_nv_menu {
    padding: 0px 50px
}

.main_menu {
    justify-content: center
}

.main_menu li a {
    font-size: 16px;
    color: #2d2d2d;
    font-weight: 500;
    text-transform: uppercase;
}

.main_menu li a:hover {
    color: var(--theme-yellow)
}
.main_menu .navbar-nav{
    gap: 25px
}

.top_nv_menu p {
    margin-bottom: 0;
    color: #fff;
    font-family: var(--main-font)
}

.top_nv_menu p a {
    color: #fff;
    text-decoration: none;
    font-size: 14px
}

.navbar-brand img {
    width: 100%;
}

.top_nv_menu .navbar-text {
    color: #fff
}

.top_nv_menu .navbar {
    display: flex;
    height: 50px;
    align-items: center
}

.navbar_test_ride {
    background-color: #000;
    border-radius: 50px;
    padding: 10px 35px;
    color: #fff;
    border: 1px solid #fff;
    font-size: 16px;
    font-weight: 500;
    transform: ease-in all 0.3s
}

.navbar_test_ride:hover {
    filter: drop-shadow(0px 2px 10px #FFFFFF);
    transform: ease-in all 0.3s;
    background-color: #000;
    color: #fff
}

.nav-link:focus,
.nav-link:hover {
    color: var(--theme-yellow)
}

/*
.product_list_wrapper {
    display: flex;
    justify-content: space-between
}
*/

.product_single_item {
    text-align: center
}

.product_list_nav {
    padding: 5px 0
}

.product_single_item a h4 {
    font-size: 16px;
    margin-top: 7px;
    color: #000
}

.product_single_item a img {
    transition: ease-in all 0.3s;
    height: 90px
}

.product_single_item:hover a img {
    transform: scale(1.1);
    transition: ease-in all 0.3s
}

.product_single_item:hover a h4 {
    color: #273f94;
    margin-bottom: 0
}




/**************Mobile Menu******************************/

body.overflow-hidden {
    overflow: hidden;
}

#side-menu {
    display: none;
    position: fixed;
    width: 300px;
    top: 0;
    right: -300px;
    height: 100%;
    overflow-y: auto;
    z-index: 999999;
    background: var(--theme-red);
    padding: 0px;
    color: #fff;
    transition: 0.4s;
}

body.side-menu-visible #side-menu {
    transform: translateX(-300px);
}

#side-menu .contents {
    margin-top: 15px;
    padding-left: 25px
}

#side-menu .nav-link {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 12px 0;
}

#side-menu .navbar-nav .nav-link.active,
#side-menu .navbar-nav .nav-link.show {
    color: #000 !important;
}

#side-menu .nav-link:hover {
    opacity: 0.8;
}

#side-menu .close {
    font-size: 36px;
    font-weight: normal;
}

.side-menu-overlay {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
}

#side-menu.side-menu-left {
    right: auto;
    left: -300px;
}

body.side-menu-visible #side-menu.side-menu-left {
    transform: translateX(300px);
}

.contents ul li a {
    color: #fff;
    padding: 8px 20px;
    display: block;
}

#side-menu .close {
    opacity: 1;
    line-height: 5px;
    background-color: transparent;
    border: none;
}

.mobile_menu_logo {
    width: 70px;
}

.mobile_menu_header {
    display: flex;
    justify-content: space-between;
    padding: 14px 25px;
    background-color: #000;
    align-items: center;
}

/****main banner section********/

.main_banner_sec {
    overflow: hidden;
    position: relative;
}
.single_hero_slider{
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.single_hero_slider img {
    width: 100%
}
.banner1{
    /*background-color: #03828a;*/
    background-color: #f0f0f0;
}
.banner2{
    background-color: #b55b39
}
.banner3{
    background-color: #cc2a30
}

.banner_title h2 {
    font-size: 45px;
    color: #000;
    font-weight: 400
}

.banner_title {
    position: absolute;
    z-index: 999;
    top: 50%;
    right: 0%;
    transform: translate(-50%, -50%);
}


.banner_btn2 {
    background-color: #fff;
    color: #000;
    padding: 8px 32px;
    display: inline-block;
    margin-top: 0;
    transition: ease-in all 0.3s;
    border: 1px solid transparent;
    margin-left: 15px;
    border-radius: 3px;
}

.banner_btn:hover {
    background-color: #000;
    color: #f9bc16;
    transition: ease-in all 0.3s;
    border-color: #f9bc16
}

.banner_title h4 {
    color: #000;
    font-weight: 300
}

.hero_sub_slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 9
}

.main_banner_sec video {
    transform: scale(1.5)
}

.hero_banner_text {
    position: relative;
    z-index: 9999
}

.hero_banner_text h1 {
    font-size: 60px;
    color: #000;
    margin-bottom: 50px;
    font-weight: 700
}

.hero_banner_text h4 {
    font-weight: 300;
    letter-spacing: 3px
}

.hero_banner_text p {
    color: #fff;
    font-size: 18px;
    margin-bottom: 30px;
    font-weight: 300
}

.hero_banner_text .book_test_ride_btn {
    background-color: #fff;
    border-radius: 50px;
    padding: 15px 55px;
    color: #000;
    background-color: #fff;
    filter: drop-shadow(0px 4px 39px #FFFFFF);
    border: 1px solid #fff;
    font-size: 18px;
    font-weight: 500;
    margin-top: 50px;
    transition: ease-in all 0.3s
}

.explore_more_btn {
    background-color: #000;
    border-radius: 50px;
    padding: 15px 55px;
    color: #fff;
    filter: drop-shadow(0px 4px 39px #FFFFFF);
    border: none;
    font-size: 18px;
    font-weight: 500;
    margin-top: 50px;
    transition: ease-in all 0.3s;
    margin-right: 15px;
    letter-spacing: 1px
}

.navbar_right_item a {
    margin-left: 15px
}


.hero_banner_text .book_test_ride_btn:hover {
    background-color: #000;
    color: #fff;
    transition: ease-in all 0.3s
}

.link_btn {
    color: #000;
    font-size: 18px;
}


.abt_title h2 {
    font-size: 45px
}


.discover_btn {
    background-color: #f9bc16;
    border-radius: 35px;
    color: #000;
    padding: 12px 35px;
    display: inline-block;
}



.mobile_app_secreen_slider_sec {
    padding: 100px 0;
    background: url(../img/bg.png) #f8f8f8;
    position: relative
}

.app_content h2 {
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000
}

.app_button img {
    margin: 0px 10px
}


.swiper-full-mobile {
    position: relative;
    margin: 50px auto;
    padding-bottom: 50px;
}

.swiper-full-mobile:before {
    content: "";
    width: 265px;
    background: url(../img/mobile_fream.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    height: 565px;
    z-index: 2;
    margin: auto;
}

.swiper-full-mobile .swiper-slide {
    height: 100%;
}

.swiper-full-mobile .swiper-slide img {
    width: 100%;
    height: 540px;
    object-fit: cover;

}

.swiper-full-mobile .swiper-slide img {
    opacity: 1;
    transform: scale(0.7);
    transition: ease-in all 0.3s;
    border-radius: 15px
}

.swiper-full-mobile .swiper-slide-active img {
    opacity: 1 !important;
    transform: scale(0.95);
    transition: ease-in all 0.3s
}

/*
.swiper-slide.swiper-slide-active img {
    border-radius: 30px;

}
*/

.single_product_one {
    background: linear-gradient(0deg, #FFEB3B 0%, rgba(69, 24, 24, 0) 50%);
    padding: 40px;
    border-radius: 10px;
}

.single_product_two {
    background: linear-gradient(0deg, #2b52c5 0%, rgba(69, 24, 24, 0) 50%);
    padding: 40px;
    border-radius: 10px;
}


.swiper-button-prev,
.swiper-button-next {
    z-index: 999 !important;
}

.product_list_single_content h4 {
    font-size: 20px;
    font-weight: 600
}

.product_list_single_content p {
    margin-bottom: 0
}

.product_list_single_content p strong i {
    font-size: 15px
}

.filter_select a {
    font-size: 14px
}

.product_list_single {
    background: linear-gradient(360deg, #f1f1f1 24%, rgba(69, 24, 24, 0) 100%);
    border-radius: 0px;
    padding: 15px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden
}
.product_list_single_img{
    height: 300px;
    overflow: hidden;
    background: #fff;
}
.product_list_single_img img{
    height: 100%;
    width: 100%;
    object-fit: contain
}

.product_list_single_color_plate {
    position: absolute;
    bottom: 60px;
    right: 30px
}
.product_list_single_content h4{
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 24px;
    opacity: 0.7
}
.product_list_single_content h3{
    font-weight: 600
}
.product_list_single_content h3 a {
    color: #000;
}
.product_list_single_content h3 a:hover {
    color: #9b0517;
}
/*.product_tag span{
    display: inline-block;
    font-size: 12px;
    background-color: #fff;
    margin: 5px 5px 5px 0;
    padding: 2px 10px;
    border: 1px solid #ccc;
    border-radius: 0px;
    color: #000;
    opacity: 0.7;
    width: 110px;
}*/
.home_product_content_wrapper .product_tag span{
    background-color: #faf8f8;
    padding: 5px 10px;
    height: 50px;
    /*display: inline-block;
    font-size: 12px;
    background-color: #fff;
    margin: 5px 5px 5px 0;
    padding: 2px 10px;
    border: 1px solid #ccc;
    border-radius: 0px;
    color: #000;
    opacity: 0.7;
    width: 104px;*/
}
.product_tag ul {
    list-style-type: none;
    column-count: 2;
    padding-left: 0;
    margin-left: 0;
    display: block;
}
.product_tag ul li {
    width: auto;
    max-width: 100%;
    font-size: 14px;
    background-color: #fff;
    margin-bottom: 5px;
    padding: 5px 10px;
    height: 50px;
    display: grid;
    flex-direction: row;
    align-items: center;
}
.product_list_single_content .price{
    font-size: 25px;
}

.product_list_single_color_plate span {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50px;
    margin-right: 5px;
}


.product_list_single_onhover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(9 16 47 / 79%);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: ease-in all 0.3s
}

.product_list_single:hover .product_list_single_onhover {
    opacity: 1;
    transition: ease-in all 0.3s
}

.product_list_single_cart {
    background-color: #000;
    border: none;
    border-radius: 0px;
    padding: 12px 25px;
    margin-right: 10px;
    font-size: 14px;
    color: #fff;
    display: inline-block
}

.product_list_single_buy {
    background-color: var(--theme-red);
    border: none;
    border-radius: 0px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    display: inline-block;
    width: 100%
}

.product_maping_sec_title h1 {
    color: #000;
    font-weight: 600
}


.single_big_title {
    font-size: 130px;
    position: absolute;
    z-index: 0;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.1
}

.single_product_focus {
    height: 350px;
    background-color: #ccc;
    padding: 50px;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative
}

.single_product_focus::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(11, 25, 66, 0.8)
}

.single_product_focus h4,
.single_product_focus p {
    position: relative;
    z-index: 99;
    color: #fff
}

.focus_section_title h4 {
    font-size: 35px;
    font-weight: 600
}

.focus_section_title span,
.range_sec_title span {
    text-transform: uppercase;
    letter-spacing: 11px;
    font-size: 14px;
}

.single_product_focus h4,
.range_sec_title h4 {
    font-size: 30px;
    font-weight: 600
}

.single_product_focus p {
    font-weight: 300;
    font-size: 15px
}



.inner_banner{
    background-color: #f1f1f1;
    padding: 60px 0
}


/*****************Product slide section*****************/


.product_slider_section {
    position: relative;
}

.big_motovolt {
    position: absolute;
    top: 0%;
    left: 10%;
    font-size: 150px;
    z-index: 999;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px;
    opacity: 0.2;
}

.product_color_option {
    display: none !important
}


.animate__delay_1st {
    animation-delay: 0.5s !important;
}

.animate__delay_2nd {
    animation-delay: 0.7s !important;
}

.animate__delay_3rd {
    animation-delay: 0.9s !important;
}

.animate__delay_4th {
    animation-delay: 1.1s !important;
}

.single_color_option img {
    width: 150px;
}

.single_products:hover .product_color_option {
    display: block !important;
}

.single_product_img {
    margin-bottom: 30px;
    transition: ease-in all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center
}

.full_product_desc {
    opacity: 0;
    transition: ease-in all 0.5s
}

.swiper-slide-active .full_product_desc {
    opacity: 1;
    transition: ease-in all 0.5s
}



.single_product_img img {
    text-align: left
}

.single_product_header h4 {
    font-size: 30px;
    margin-bottom: 5px;
    font-weight: 500
}

.single_product_header p {
    font-size: 15px;
    margin-bottom: 0;
    opacity: 0.7;
}

.single_product_left_part h4 {
    font-size: 25px;
    margin-bottom: 5px
}

.single_product_left_part h4 span {
    font-size: 18px
}

.single_product_left_part h4 i {
    font-size: 25px
}


.product_slider_wrapper h1 {
    margin-bottom: 50px;
    font-size: 60px
}

.product_color_option span {
    height: 15px;
    width: 15px;
    border-radius: 50px;
    display: block;
    margin: 2px 0
}

.case_wrapper {
    display: flex;
    justify-content: center;
    column-gap: 20px
}


/*
.swiper-button-next,
.swiper-button-prev {
    background-image: none !important;
}*/

.product_slider_section .swiper-button-next {
    right: 22%
}

.product_slider_section .swiper-button-prev {
    left: 22%
}

/*
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: 0 !important;
}*/

/*******************Test ride ****************/
.test_ride_content h4 {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    margin-bottom: 40px
}

.test_ride_content h4 span.ev {
    background-color: #fff;
    color: #000;
    padding-left: 5px;
    font-weight: 500
}

.test_ride_img img {
    width: 100%
}

.test_ride_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.test_ride_content h1 {
    font-size: 50px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 40px;
    line-height: 80px
}

.test_ride_content p {
    font-size: 20px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 30px
}

.book_test_ride_a {
    display: block;
    color: #fff;
    margin-top: 40px;
    font-size: 25px;
    font-weight: 300;
    display: flex;
    align-items: center;
    text-shadow: 4px 1px 30px rgba(255, 255, 255, 1);
}

.test_ride_girl {
    position: absolute;
    bottom: 0;
    right: 0
}

.book_test_ride_a img {
    margin-right: 30px
}

.link {
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    position: relative;
}

.link span,
.link i {
    position: relative;
}

.link i {
    margin-left: 0.5em;
}

.link .color {
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background-color: #fabb15;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    left: -0.65em;
}



.border_end {
    height: 1px;
    width: 100%;
    background-color: rgb(102 102 102 / 19%);
    display: block;
    margin-bottom: 50px
}

/************Transport Cost Monthly*************/
.transport_title h1 {
    font-size:60px;
    color: #fff;
    font-weight: 500;
}



.transport_title p {
    color: #ffff;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 300
}

.test_ride_section {
    overflow: hidden;
    position: relative;
    height: 70vh;
}

.test_ride_section video {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.calculator_sec {
    position: relative
}

.cost_section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center
}


.calculator_sec .upper .left {
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.calculator_sec .upper .right {
    align-items: center;
    display: flex;
}

.calculator_sec .upper .right .price {
    font-size: 40px;
    margin-right: 5px;
    font-weight: 600
}

.calculator_sec .upper .right .price i {
    font-size: 30px
}

.calculator_sec .upper .right .price sub {
    font-size: 20px
}

.upper .cal_item {
    display: flex;
    background-color: #fff;
    width: 32%;
    border-radius: 0px;
    padding: 10px 20px;
    align-items: center
}

.cost_calculate_sec{
    background-color: var(--theme-dark)
}

.calc_result {
    width: 60%;
    margin-left: 20px
}

.outline_battery {
    position: absolute;
    right: 0px;
    bottom: 0px;
    opacity: 0.2;
    z-index: -1;
    width: 40%
}

@keyframes taadaa {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



.calculator_sec .toggle-container {
    text-align: right;
    color: #858fad;
    font-size: 0.95em;
    padding: 40px;
}

.calculator_sec .toggle-container .show {
    display: none;
}

.calculator_sec .toggle-container .switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
    margin: 0 15px;
}

.calculator_sec .toggle-container .switch .slide {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cdd7ee;
    transition: 0.2s;
}

.calculator_sec .toggle-container .switch .slide:hover {
    background-color: #fbbc19;
}

.calculator_sec .toggle-container .switch .slide:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.calculator_sec .toggle-container .switch .slide.round {
    border-radius: 34px;
}

.calculator_sec .toggle-container .switch .slide.round:before {
    border-radius: 50%;
}

.calculator_sec .toggle-container .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.calculator_sec .toggle-container .switch input:checked + .slide {
    background-color: #fbbc19;
}

.calculator_sec .toggle-container .switch input:focus + .slide {
    box-shadow: 0 0 1px #fbbc19;
}

.calculator_sec .toggle-container .switch input:checked + .slide:before {
    transform: translateX(18px);
}

.calculator_sec .toggle-container .discount {
    background-color: #feece7;
    color: var(--theme-red);
    font-size: 0.85em;
    padding: 1px 8px;
    border-radius: 15px;
    margin-left: 6px;
}

.calculator_sec .bottom {
    padding: 20px 40px 20px 20px;
    border-top: 2px solid rgba(133, 143, 173, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calculator_sec .bottom ul li span {
    margin-left: 10px;
}

.calculator_sec .bottom button {
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: none;
    background-color: #293356;
    color: #bdccff;
    padding: 15px 50px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s;
}

.calculator_sec .bottom button:hover {
    color: white;
}

.calculator_sec .slider {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 30px 0;
    border-radius: 10px
}

.slider h4 {
    text-align: center;
    font-size: 18px;
    color: #fff;
    font-weight: 300
}

.slider h4 span {
    font-size: 25px;
    font-weight: 500
}

.calculator_sec .slider input {
    background: linear-gradient(to right, var(--theme-red) 0%, var(--theme-red) 100%, #eaeefb 100%, #eaeefb 100%);
    height: 8px;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    outline: none;
    transition: all 450ms ease-in;
    -webkit-appearance: none;
}

.calculator_sec .slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0px 5px 10px 0px var(--theme-red);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    background-color: var(--theme-red);
    border: 3px solid #fff
}






/****************Home product sec**************/
.home_product_section {
    padding: 100px 0;
}

.home_product_content_wrapper h4 {
    font-size: 40px;
    font-weight: 600;
    font-family: var(--heading-font);
}

.home_product_content_wrapper p {
    color: var(--font-color);
    font-size: var(--font-16);
    line-height: 25px;
    font-weight: 400;
    font-size: 14px
}

.pice_range {
    font-size: 18px;
    margin-bottom: 10px;
    font-family: var(--body-font);
}

.select_color input {
    display: none;
}
.select_color ul{
    list-style: none;
    margin-bottom: 0
}

.select_color .button {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    margin: 10px;
    cursor: pointer;
}

.select_color .button span {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background: #eeeeee;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    transition: ease 0.3s;
}

.select_color input:checked ~ .button span::before {
    content: "";
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 50px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.select_color .color_aqua .button span {
    background: #82bfb9;
}

.select_color .color_aqua input:checked ~ .button span::before {
    border-color: #82bfb9;
}

.select_color .color_red .button span {
    background: #ff0000;
}

.select_color .color_red input:checked ~ .button span::before {
    border-color: #ff0000;
}

.select_color .color_black .button span {
    background: #000;
}

.select_color .color_black input:checked ~ .button span::before {
    border-color: #000;
}

.select_color .color_gray .button span {
    background: #ccc;
}

.select_color .color_gray input:checked ~ .button span::before {
    border-color: #ccc;
}

.select_color .color_pink .button span {
    background: #f407db;
}

.select_color .color_pink input:checked ~ .button span::before {
    border-color: #f407db;
}

.connectivity_type select,
.model_type select {
    border: none;
    border-bottom: 1px solid #b1b1b1;
    background-color: transparent;
    margin-right: 15px;
    padding: 10px;
    padding-left: 0;
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 600;
    width: 90%;
}

.main_price {
    font-size: 18px;
    font-weight: 300;
    font-family: var(--heading-font);
    color: #616161;
    text-decoration: line-through;
    margin-right: 10px
}

.offer_price {
    font-size: 25px;
    color: var(--theme-red);
    font-family: var(--heading-font);
    margin-right: 20px;
    font-weight: 600
}

.offer_percentage {
    color: #d9a00b;
    font-family: var(--heading-font);
}
.rating_sec{
    gap: 10px
}

.buy_now_sec .theme-btn{
    padding: 12px 40px;
    display: inline-block
}


/***********Riding Mode***************/
.discover_section {
    overflow: hidden;
    min-height: 100vh;
}



.cycle_animated_fream {
    position: absolute;
    right: 250px;
    max-width: 613px;
    text-align: center;
    height: 320px;
    z-index: 99;
    bottom: 60px
}

@media (min-width: 1200px) and (max-width:1400px) {
    .cycle_animated_fream {
        right: 90px
    }
}

.cycle_animated_fream .frontwheel {
    left: -69px;
    bottom: 5px;
    z-index: -1;
    position: absolute
}

.cycle_animated_fream .backwheel {
    right: 10px;
    bottom: 5px;
    z-index: -1;
    position: absolute
}

.cycle_animated_fream .padel {
    bottom: 44px;
    right: 226px;
    position: absolute;
    z-index: auto;
    width: 65px
}

.rotating {
    animation: .8s linear infinite rotating
}

@keyframes rotating {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

.mode_tab {
    height: 58vh;
    position: relative;
    padding-bottom: 100px;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .mode_tab {
        height: 68vh
    }
}

.mode_tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200%;
    background: url(../img/cityscape.png) 0/20% auto;
    animation: 3.5s linear infinite move1;
    background-repeat: repeat-x;
    animation-direction: reverse;
    background-position: bottom
}

.mode_tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(80deg, rgba(255, 255, 255, 1) 6%, rgba(255, 255, 255, 0) 73%);
}

.mode_option {
    background: #FFFFFF;
    box-shadow: 13px 3px 34px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    padding: 20px;
    position: absolute;
    width: 300px;
    top: 0px;
    left: 5%;
    z-index: 99;
}

span.big_mode_name {
    position: absolute;
    left: 15%;
    bottom: 10px;
    font-size: 90px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: #fff;
    -webkit-text-stroke-width: 1px;
    opacity: 0.5;
}

@media (min-width: 1200px) and (max-width:1400px) {
    span.big_mode_name {
        bottom: -10px;
        font-size: 70px;
    }
}

.mode_option button {
    font-size: 18px;
    color: #000;
    border-radius: 50px !important;
    padding: 12px 0
}

.mode_option button.active {
    background-color: #000 !important;
}

.mode3_tab::before {
    animation: 5s linear infinite move1 !important;
    animation-direction: reverse !important;
}

.mode4_tab::before {
    animation: 10s linear infinite move1 !important;
    animation-direction: reverse !important;
}

.mode3_tab .rotating {
    animation: 1.5s linear infinite rotating
}

.mode4_tab .rotating {
    animation: 4s linear infinite rotating
}

.mode2_tab .padel.rotating,
.mode4_tab .padel.rotating {
    animation: inherit !important
}

.mode4_tab {
    animation: 10s linear infinite moving !important
}


@keyframes move1 {
    to {
        transform: translateX(-50%);
    }

    /* change to "50%" for the opposite direction */
}


.discover_titie h4 {
    font-size: 60px;
    font-weight: 300
}

.discover_titie h4 span {
    font-weight: 600
}

.mode_assest_single h4 span {
    display: block;
    height: 20px;
    width: 10px;
    background-color: #ccc;
    border-radius: 50px;
    margin: 0 3px
}


.mode_assest_single h4 span.effort_do {
    background-color: var(--theme-yellow);
}



.mode_tab_btn_group li a {
    font-size: 18px;
    font-weight: 500
}

.mode_tab_btn_group {
    width: 33%;
    padding: 15px 10px;
    margin: 30px auto !important;
    border-radius: 10px
}

/************battery Section*****************/
.batter_sec_title h1 {
    font-size: 45px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
    position: relative
}

.batter_sec_title span {
    color: #fabb15;
    text-transform: uppercase;
    letter-spacing: 14px;
    font-size: 17px
}

.main_battery_img img {
    width: 100%
}

.battery_section {
    overflow: hidden;
    background-color: #000;
    position: relative;
    background: url(../img/bg.png) #000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.battery_section .big_motovolt {
    -webkit-text-stroke-color: #fff;
    font-size: 130px
}

.battery_section .left_pos {
    position: absolute;
    left: -130px;
    width: 310px;
    transform: rotate(45deg);
    top: 30%;
    animation: bounce1 6s infinite alternate;
}

@-webkit-keyframes bounce1 {
    0% {
        transform: translateY(0) rotate(45deg);
    }

    100% {
        transform: translateY(50px) rotate(45deg);
    }
}

.battery_section .right_pos {
    position: absolute;
    right: -100px;
    transform: rotate(45deg);
    width: 310px;
    top: 30%;
    animation: bounce2 4s infinite alternate;
}

@-webkit-keyframes bounce2 {
    0% {
        transform: translateY(0) rotate(45deg);
    }

    100% {
        transform: translateY(50px) rotate(45deg);
    }
}

.feature_icon {
    height: 90px;
    width: 90px;
    border-radius: 50px;
    overflow: hidden;
    background-color: #fff;
}

.feature_icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    padding: 10px
}

.battery_sigle_feature {
    display: flex;
    align-items: center;
    margin: 65px 0;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 80px;
    width: 80%;
}

.battery_sigle_feature h4 {
    color: #fff;
    font-size: 15px;
    width: 65%;
    font-weight: 300
}

.battery_sigle_feature h4 span {
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 10px
}

.ml-100 {
    margin-left: 100px
}




/**********Mobile App section**************/
.mobile_app_section {
    padding: 70px 0;
    position: relative
}

.app_content span {
    color: #f9bc16;
    text-transform: uppercase;
    letter-spacing: 14px;
    font-size: 14px
}

.app_cycle {
    position: absolute;
    right: 0;
    bottom: 0
}

.app_content h2 {
    font-size: 40px;
    margin-bottom: 30px;
    color: #000;
    font-weight: 600
}

.app_content p {
    font-size: 16px;
    line-height: 25px;
}

.app_content {
    position: relative;
    z-index: 9999
}

.mobile2 {
    margin-left: -75px;
}


/***********************************/
.trusted_by_sec {
    background: #f5f5f5;
    padding: 100px 0;
    position: relative
}

.trusted_by_sec_title p {
    font-size: 5vw;
    line-height: 75px;
    -webkit-text-stroke: 1px;
    -webkit-text-fill-color: transparent;
    color: #274599;
}

.trusted_by_sec_title span {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 20px;
    margin-bottom: 20px;
    display: block;
    color: #2b52c5;
    font-size: 25px
}

.trusted_logo {
    background-color: #ffffff;
    border-radius: 15px;
    margin-top: 50px;
    padding: 30px 40px;
    box-shadow: 0px 5px 15px rgb(8 8 8 / 22%);
}

.trusted_logo h4 {
    margin-bottom: 0px;
}

.trusted_logo img {
    height: 60px
}

.o-layout {
    position: relative;
    z-index: 99999
}


/*******************************/
.case_section {
    padding-left: 50px;
    padding-right: 50px
}

.battery_part,
.battery_wrapper {
    position: relative
}

.battery_part::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.97) 35%, rgba(255, 255, 255, 0) 100%);
}

.battery_conetnt {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(0, -50%);
}

.battery_part {
    height: 600px;
    overflow: hidden;
    border-radius: 15px
}

.battery_part video {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.singl_content h4 {
    color: #fff;
}

.singl_content {
    margin: 40px 0
}

.singl_content h4 span {
    font-size: 40px;
    color: #FABB15;
    font-weight: 400
}

.singl_content h4 i {
    color: #fff;
    font-size: 35px;
}


.mobile_app_sec {
    background-color: #ffef66;
    position: relative;
    overflow: hidden;
    height: 300px;
    padding: 30px;
    border-radius: 15px;
    overflow: hidden
}

.services_sec {
    height: 300px;
    background-color: #A3BDFF;
    padding: 30px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc
}

.accessories_img {
    width: 100%;
    position: absolute;
    bottom: -90px;
    right: -80px;
}

.services_sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(179deg, rgb(157 227 255 / 97%) 25%, rgba(255, 255, 255, 0) 100%);
}

.mobile_app_sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(179deg, rgb(18 18 18 / 97%) 25%, rgba(255, 255, 255, 0) 100%);
}

.acces_whi h4 {
    color: #fff
}

.services_sec.accessories_sec::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(179deg, rgb(18 18 18 / 97%) 25%, rgba(255, 255, 255, 0) 100%);
}

.services_cont {
    position: relative;
    z-index: 999
}

.services_sec {
    position: relative
}

.services_sec a {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background-color: #FABB15;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    color: #000
}


.accessories_sec {
    height: 400px;
    background-color: #64efcf;
    padding: 30px
}

.mobile_app_sec h4 {
    font-size: 35px;
    font-weight: 400
}

.app_hand {
    position: absolute;
    right: 0;
    bottom: 50px
}

.app_scooty {
    position: absolute;
    left: -100px;
    width: 84%;
    bottom: 0;
}

.services_logo {
    position: absolute;
    top: 15px;
    right: 15px
}

.couple_scooty {
    position: absolute;
    right: 0;
    bottom: -100px;
}

.services_sec {
    position: relative;
    overflow: hidden
}



.services_btn {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    text-decoration: underline !important
}

.services_sec h4 {
    font-size: 35px;
    font-weight: 400
}



.main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    background-color: transparent;
    gap: 50px 50px;
}

.focus_imag_wraper {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: auto;
    gap: 50px 50px;
}

.focus_imag_wraper img {
    border-radius: 10px
}

.single_feature_wrapper:hover {
    box-shadow: 2px 2px 50px rgb(0 0 0 / 35%);
    transition: ease-in all 0.3s
}

.single_feature_wrapper {
    position: relative;
    transition: ease-in all 0.3s;
    border-radius: 10px
}

.single_feature_cont {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 99
}

.single_feature_cont p {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 14px
}

.single_feature_image_wrapper {
    border-radius: 10px;
    overflow: hidden
}

.single_feature_image_wrapper::before {
    content: "";
    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 50%) !important;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 10px
}

.single_feature_cont h4,
.single_feature_cont p {
    color: #fff
}

.greeting {
    text-align: center;
    font-weight: 600;
    font-size: 40px
}


.right_form_img {
    background-color: #ffffff;
    padding: 50px;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*********************************feature section************/

.feature_section .slide-arrow {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    border: 2px solid var(--black);
    line-height: 30px;
    text-align: center;
    color: var(--black);
    padding: 0;
    background-color: transparent;
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    z-index: 999;
}

.feature_section .slide-arrow.prev-arrow {
    left: 0;
    top: 10%;
}

.feature_section .slide-arrow.next-arrow {
    right: 0;
    top: 10%;
}

.feature_section .slick-dots button {
    font-size: 0px;
    height: 15px;
    width: 15px;
    border: none;
    border-radius: 50px;
    background-color: #cbcbcb;
    margin: 0px 5px;
    transition: ease-in all 0.3s;
}

.feature_section .slick-dots .slick-active button {
    width: 40px;
    background-color: var(--theme-blue);
    transition: ease-in all 0.3s;
}

.single_feature img {
    margin: 0px auto;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.single_feature {
    width: 100%;
    height: 550px !important;
}

.feature_big_title {
    font-size: 25vh;
    font-family: var(--body-font);
    font-weight: 700;
    position: absolute;
    left: 50%;
    z-index: -1;
    opacity: 0.1;
    top: 0px;
    z-index: 99;
    transform: translate(-50%);
    pointer-events: none;
    z-index: -1;
}

.feature_section {
    position: relative;
    position: relative;
    background: url(../img/bg.png) #000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.single_feature .wrap {
    position: absolute;
}

.single_feature {
    position: relative;
}

.single_feature .wrap button {
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background-color: var(--theme-yellow);
    color: #fff;
    font-size: 22px;
    box-shadow: 0px 2px 4px #000;
}

.feature_section .batter_sec_title h1 {
    font-size: 80px
}

.first_feature_slide .pos2 {
    left: 44%;
    top: 37%;
}

.first_feature_slide .pos1 {
    left: 22%;
    top: 56%;
}

.swiper_button img {
    filter: invert(1)
}

.first_feature_slide .pos3 {
    left: 78%;
    top: 80%;
}

.first_feature_slide .pos4 {
    left: 60%;
    top: 11%;
}

.first_feature_slide .pos5 {
    left: 62%;
    top: 30%;
}

.second_feature_slide .pos2 {
    left: 40%;
    top: 9%;
}

.second_feature_slide .pos1 {
    left: 31%;
    top: 73%;
}

.second_feature_slide .pos3 {
    left: 63%;
    top: 70%;
}

.second_feature_slide .pos4 {
    left: 63%;
    top: 22%;
}

.second_feature_slide .pos5 {
    left: 52%;
    top: 51%;
}

.single_feature .wrap button::before {
    content: "";
    position: absolute;
    left: 5px;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    top: 5px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNGRkZGRkYiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjRkZGRkZGIj4gICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjEiPiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjVzIiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDIwIiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIgICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4xNjUsIDAuODQsIDAuNDQsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IiAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi41cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAwIiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIgICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4zLCAwLjYxLCAwLjM1NSwgMSIgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+ICAgICAgICA8L2NpcmNsZT4gICAgICAgIDxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjEiPiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiICAgICAgICAgICAgICAgIGJlZ2luPSItMC45cyIgZHVyPSIyLjVzIiAgICAgICAgICAgICAgICB2YWx1ZXM9IjE7IDIwIiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIgICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4xNjUsIDAuODQsIDAuNDQsIDEiICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1vcGFjaXR5IiAgICAgICAgICAgICAgICBiZWdpbj0iLTAuOXMiIGR1cj0iMi41cyIgICAgICAgICAgICAgICAgdmFsdWVzPSIxOyAwIiAgICAgICAgICAgICAgICBjYWxjTW9kZT0ic3BsaW5lIiAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDsgMSIgICAgICAgICAgICAgICAga2V5U3BsaW5lcz0iMC4zLCAwLjYxLCAwLjM1NSwgMSIgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+ICAgICAgICA8L2NpcmNsZT4gICAgPC9nPjwvc3ZnPg==) transparent no-repeat 50% 50%;
}

.feature_list_wrapper {
    opacity: 0;
    transition: ease-in all 1s;
}

.feature_slider .swiper-slide-active .feature_list_wrapper {
    opacity: 1;
    transition: ease-in all 1s;
}

.feature_modal .modal-header {
    background-color: var(--theme-yellow);
}



/**********************************/
.why_motovolt {
    background-color: #fff;
    padding: 50px 0
}

.c-sections_infos_text h2 {
    font-size: 45px;
    font-weight: 400
}

.c-section_infos_inner p {
    text-transform: uppercase;
    letter-spacing: 6px
}

.why_common {
    min-height: 200px;
    position: relative;
    z-index: 9999
}

.why_common h1 {
    font-size: 45px;
    font-weight: 500;
    color: #000
}

.why_icon_wrapper {
    height: 100px;
    width: 100px;
    overflow: hidden;
    border-radius: 50px;
    background-color: #fff;
    margin-bottom: 20px;
    margin: 0px auto
}

.why_common img {
    width: 100%;
    padding: 10px;
    height: 100%;
    object-fit: cover
}

.why_common h1 span {
    color: #f9bc16
}

.why_common p {
    font-size: 20px;
}

.fixed_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/********************instagram Section*****************/
.single_instagram {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0px auto
}

.instagram_section {
    padding: 70px 0 15px 0;
    position: relative
}


.left_instagram img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.right_instagram img {
    width: 100%
}

.right_instagram {
    height: 500px;
}

.right_instagram .insta_rel {
    height: 250px;
    width: 50%
}

.left_instagram {
    width: 50%;
    height: 500px;
    position: relative
}

.left_instagram i {
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

.right_instagram {
    width: 50%
}

.right_instagram {
    display: flex;
    flex-wrap: wrap;
}

.left_instagram::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5)
}

.instagram_slider .swiper_btn img {
    filter: invert(1) !important;
}

.big_text_insta {
    font-size: 80px;
    text-transform: uppercase;
    letter-spacing: 65px;
    color: #fff;
    position: relative;
    text-align: center;
    z-index: 9;
    opacity: 0.4;
    padding-left: 30px
}



.scroll-snap-slider ul {
    display: flex;
    align-items: center;
    grid-gap: 20px;
    list-style: none;
    padding-left: 0
}


.scroll-snap-slider ul li a {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1;
    flex: 1;
    scroll-snap-align: start;
    position: relative;
    text-decoration: none;
    color: #fff;
}

.scroll-snap-slider ul li a h4 {
    position: absolute;
    bottom: 30px;
    left: 30px;
}


.scroll-snap-slider ul li {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}

@media (min-width: 1024px) {
    .scroll-snap-slider li {
        -ms-flex: 1;
        flex: 1;
    }
}



.extra_section {
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0px 50px
}

.extra_title h4 {
    font-size: 30px;
    color: #000;
    opacity: 0.5;
    margin-bottom: 20px;
    font-weight: 300
}

/*******************************************/
.testimonial_sec {
    position: relative;
}

.testi_user {
    height: 170px;
    width: 170px;
    border-radius: 90px;
    overflow: hidden;
    margin: 0px auto;
    margin-bottom: 20px;
    border: 10px solid rgba(255, 255, 255, 0.1);
}

.testi_content h4 {
    font-size: 20px;
    margin-bottom: 15px;
}

.testi_content p {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.7
}

.testi_user img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.testimonila_slider .swiper-slide {
    transform: scale(0.8);
    opacity: 0.2
}

.testimonila_slider .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    border-radius: 0px;
}

.testimonila_slider .swiper-slide-active .single_testimonial {

    background: linear-gradient(0deg, rgb(167 167 167 / 15%) 0%, rgba(217, 217, 217, 0.00) 97%);
}

.single_testimonial {
    padding: 50px 30px;
    text-align: center;
    border-radius: 0px;
    overflow: hidden;
    transition: ease-in all 0.3s
}

.testimonila_slider .swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    right: 32%
}

.testimonila_slider .swiper-button-prev {
    left: 32%
}


.testi_rating i {
    color: #fabb15
}

.testimonial_sec .swiper-button-next,
.testimonial_sec .swiper-button-prev {
    background-image: none;
    background-color: var(--theme-red);
    height: 50px;
    width: 50px;
    border-radius: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff
}

.blog_img_wrapper {
    margin-bottom: 15px;
    height: 225px;
    overflow: hidden
}


.blog_title h2 {
    font-size: 50px
}

.blog_content a {
    text-transform: uppercase;
    font-size: 16px
}

.single_blog {
    border-bottom: 2px solid #ccc;
    padding-bottom: 20px;
    background-color: #fff
}

.blog_content {
    padding-left: 0px
}

.blog_content h4 {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    text-transform: capitalize;
    margin-bottom: 20px;
}

/*******Footerer Section*********/

.footer_section {
    padding: 50px 50px 30px 50px;
    background-color: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    transition: ease-in all 0.3s
}

.left_footer p {
    margin-bottom: 10px;
    color: #fff
}

.left_footer {
    padding-top: 30px
}

.left_footer p a {
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 3px;
}

.copyright_text {
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    letter-spacing: 3px
}

.footer_menu ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.footer_menu ul li a {
    color: #fff;
    padding: 6px 0;
    display: block
}

.footer_menu h4,
.footer_newsletter h4 {
    color: #fff;
    opacity: 0.5;
    margin-bottom: 20px;
    font-weight: 300
}


.tag_line h1 {
    font-size: 60px;
    color: #fff;
    padding: 50px 0
}

.subscribe_form input {
    width: 100%;
    height: 55px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 15px;
}

.subscribe_form button {
    background-color: transparent;
    border: none;
    color: #fff
}

.footer_newsletter small {
    color: #fff;
}

.footer_newsletter small a {
    color: #fff;
    text-decoration: underline !important;
    opacity: 0.5
}




.product_maping_sec {
    padding: 100px 0;
    background: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.imagepin {
    position: relative;
    display: block;
    border-radius: 10px;
    max-width: 1000px;
    margin: 30px auto;
}

.imagepin .pins {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.imagepin img {
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
}

.imagepin .pin {
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    z-index: 9;
    border-radius: 100%;
    position: absolute;
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    text-decoratio: none;
}

.imagepin .pin span {
    position: absolute;
    top: -20px;
    left: 40px;
    font-size: 14px;
    width: 210px;
    height: 120px;
    text-align: left;
    background: rgb(45 69 149 / 94%);
    color: #fff;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(34px);
    padding: 30px 20px !important;
    border-radius: 5px;
    z-index: 10;
    line-height: 1;
    display: none;
    transition: 0.2s all ease-in-out;
    align-items: center;
    box-shadow: 10px 12px 94px rgb(59 91 255 / 70%);
}

.part_img {
    height: 140px;
    width: 150px;
    overflow: hidden;
    margin-right: 15px;
    padding: 10px;
    border-radius: 5px
}

.imagepin .pin span h4 {
    font-size: 18px;
    width: 100%;
    margin-bottom: 8px;
    font-weight: 600
}

.imagepin .pin:hover {
    border-color: #fff;
}

.imagepin .pin:hover:after {
    width: 7px;
    height: 7px;
}

.imagepin .pin:hover span {
    display: block;
    top: -20px;
    width: 210px
}

.imagepin .pin:active {
    border-color: #ffaa67;
}

.imagepin .pin:active:after {
    width: 20px;
    height: 20px;
}

.imagepin .pin:after {
    content: "";
    width: 20px;
    height: 20px;
    transition: 0.2s all ease-in-out;
    background: #fabb15;
    position: relative;
    display: block;
    border-radius: 100%;
}

.imagepin .pin:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    -webkit-animation: shockwave 2s 0.5s ease-out infinite;
    animation: shockwave 2s 0.5s ease-out infinite;
}

@-webkit-keyframes shockwave {
    0% {
        transform: scale(1);
        box-shadow: 0 0 2px rgba(255, 187, 21, 0.15), inset 0 0 1px #fabb15;
    }

    95% {
        box-shadow: 0 0 10px rgba(255, 187, 21, 0), inset 0 0 30px rgba(255, 187, 21, 0);
    }

    100% {
        transform: scale(1.8);
    }
}

@keyframes shockwave {
    0% {
        transform: scale(1);
        box-shadow: 0 0 2px rgba(255, 187, 21, 0.15), inset 0 0 1px #fabb15;
    }

    95% {
        box-shadow: 0 0 10px rgba(255, 187, 21, 0), inset 0 0 30px rgba(255, 187, 21, 0);
    }

    100% {
        transform: scale(1.8);
    }
}

.imagepin .pin:nth-of-type(1):before {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.imagepin .pin:nth-of-type(2):before {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.imagepin .pin:nth-of-type(3):before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.imagepin .pin:nth-of-type(4):before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

.imagepin .pin:nth-of-type(5):before {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}

.imagepin .pin:nth-of-type(6):before {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}

.imagepin .pin:nth-of-type(7):before {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}

.imagepin .pin:nth-of-type(8):before {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.imagepin .pin:nth-of-type(9):before {
    -webkit-animation-delay: 2.2s;
    animation-delay: 2.2s;
}










@media (min-width: 1200px) and (max-width: 1440px) {
    .hero_sub_slider_wrapper .swiper-slide img {
        width: 600px;
    }

    .hero_sub_slider_wrapper {
        top: 20%
    }

}

@media (max-width: 759px) {
    .battery_sigle_feature {
        width: 100%
    }

    .feature_section .batter_sec_title h1 {
        font-size: 40px;
    }

    .trusted_by_sec_title p {
        font-size: 5vw;
        line-height: 8px;
        -webkit-text-stroke: 1px;
        -webkit-text-fill-color: #000000;
        color: #ffffff;
    }

    .trusted_by_sec_title span {
        font-size: 15px;
        letter-spacing: 10px
    }

    .product_slider_section {
        padding: 0px
    }

    .big_motovolt {
        font-size: 40px
    }

    .hero_sub_slider_wrapper .swiper-slide img {
        width: 350px;
    }

    .hero_sub_slider_wrapper {
        top: 10%;
        left: 0
    }

    .main_nav_sec {
        position: inherit
    }

    .hero_banner_text h1,
    .test_ride_content h1,
    .transport_title h1,
    .discover_titie h4,
    .batter_sec_title h1,
    .product_slider_wrapper h1 {
        font-size: 45px
    }

    .hero_banner_text .book_test_ride_btn {
        filter: drop-shadow(0px 3px 9px #FFFFFF);
        margin-top: 15px
    }



    .her_banner_svg {
        transform: scale(2.5);
        opacity: 0.2
    }

    .upper .cal_item {
        width: 100%;
        margin-bottom: 15px
    }

    .mode_option {
        position: inherit;
        width: 100%
    }

    .big_text_insta {
        font-size: 30px;
        letter-spacing: 15px
    }

    .right_instagram {
        width: 100%
    }

    .right_instagram .insta_rel {
        height: 170px
    }

    .app_cycle {
        width: 30%
    }

    .left_footer p,
    .copyright_text,
    .right_footer {
        text-align: center !important;
    }

    .right_footer {
        margin-top: 30px
    }

    .test_ride_img img {
        margin-top: 30px
    }

    .buy_now_btn {
        padding: 10px 35px
    }

    span.big_mode_name {
        display: none
    }

    .battery_sigle_feature {
        margin: 30px 0
    }

    .battery_sigle_feature h4 {
        font-size: 20px
    }

    .feature_icon {
        height: 60px;
        width: 60px
    }

    .batter_left_feature,
    .batter_right_feature {
        padding: 0px 25px;
    }

    .transport_title {
        margin-bottom: 40px
    }

    .footer_section {
        padding: 15px
    }
}

@media (max-width:575.98px) {
    .cycle_animated_fream {
        max-width: 100%;
        right: 0;
        width: 295px;
        bottom: 40px
    }

    .cycle_body {
        width: 265px;
        position: absolute;
        right: 0;
        bottom: 80px
    }

    .cycle_animated_fream .frontwheel {
        width: 110px;
        left: -12px;
        bottom: 46px;
        z-index: -1;
        position: absolute
    }

    .cycle_animated_fream .backwheel {
        width: 110px;
        right: 4px;
        bottom: 48px;
        z-index: -1;
        position: absolute
    }

    .cycle_animated_fream .padel {
        bottom: 62px;
        right: 126px;
        position: absolute;
        z-index: auto;
        width: 44px
    }

    .mode_tab::before {
        background: url(../img/cityscape.png) 0/80% auto;
        background-repeat: repeat-x;
        background-position: bottom
    }

    .mode_tab {
        padding-top: 50px;
        height: 55vh;
    }

    .mode_description p {
        font-size: 14px;
    }

    .main_battery_img img {
        width: 60%
    }

    .app_cycle {
        display: none
    }

    .app_content {
        text-align: center
    }

    .app_scree {
        margin-bottom: 30px
    }

    .app_content h4 {
        margin-bottom: 20px
    }
}