.bg_style {
    width: 200px;
    height: 120px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168.73 101.67'%3E%3Cpath d='M163.06 39.69 140.12 14.1A42.48 42.48 0 0 0 108.7 0h-227.03c-12.09 0-23.62 5.19-31.67 14.24l-51.6 58.06c-6.55 7.34-6.52 18.43.03 25.74l22.94 25.6a42.42 42.42 0 0 0 31.41 14.09H79.82c12.09 0 23.62-5.19 31.67-14.24l51.6-58.06c6.55-7.34 6.52-18.43-.03-25.74m-42.14 19.52L94.79 88.58l-15.63 17.58a13.36 13.36 0 0 1-10 4.51h-202.69c-3.8 0-7.43-1.62-9.96-4.45l-10.67-11.91-2.6-2.92-2.65-2.95c-2.54-2.8-2.54-7.08-.03-9.91l26.12-29.37 15.63-17.57c2.54-2.86 6.16-4.51 10-4.51H95c3.8 0 7.43 1.62 9.96 4.45l10.68 11.91 2.59 2.92 2.65 2.95c2.54 2.8 2.54 7.08.03 9.91' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168.73 101.67'%3E%3Cpath d='M163.06 39.69 140.12 14.1A42.48 42.48 0 0 0 108.7 0h-227.03c-12.09 0-23.62 5.19-31.67 14.24l-51.6 58.06c-6.55 7.34-6.52 18.43.03 25.74l22.94 25.6a42.42 42.42 0 0 0 31.41 14.09H79.82c12.09 0 23.62-5.19 31.67-14.24l51.6-58.06c6.55-7.34 6.52-18.43-.03-25.74m-42.14 19.52L94.79 88.58l-15.63 17.58a13.36 13.36 0 0 1-10 4.51h-202.69c-3.8 0-7.43-1.62-9.96-4.45l-10.67-11.91-2.6-2.92-2.65-2.95c-2.54-2.8-2.54-7.08-.03-9.91l26.12-29.37 15.63-17.57c2.54-2.86 6.16-4.51 10-4.51H95c3.8 0 7.43 1.62 9.96 4.45l10.68 11.91 2.59 2.92 2.65 2.95c2.54 2.8 2.54 7.08.03 9.91' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

.img-light-grey {
    filter: grayscale(100%) brightness(1.7);
}

.img-light-green {
    height: 54vw;
    background-color: #e9fdff;
    -webkit-mask: url(../images/ec06/long_band.webp) no-repeat center / contain;
    mask: url(../images/ec06/long_band.webp) no-repeat center / contain;
    top: -50%;;
}

.rotate-180 {
    transform: rotate(180deg) !important;
}

/*--------------------------------------------------------------
# 360 Section
--------------------------------------------------------------*/

.watermark_360 {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -65%);
    font-size: 32vw;
    font-weight: 700;
    z-index: 0;
    letter-spacing: 10px;
    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

.experience_360 {
    background: url(../../assets/images/ec06/360/bg-360.webp);
    background-size: cover;
    height: 51vw;
    /* padding: 5% 0px; */
    /* border: 14px solid white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1); */
}

.exp_360_upper_container {
    position: relative;
    height: inherit;
}

.experience_360 .heading {
    font-size: var(--font-head);
    padding: 2vw 0;
}

.exp_360_rotate_image_container {
    position: absolute;
    width: 60%;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    /* padding-bottom: 2% */
}

.exp_360_rotate_ellipse {
    width: 100%;
    height: 10vw;
    border-radius: 100%;
    /* border: 1px solid #686868; */
    background: rgba(52, 53, 58, .18);
    /* display: none */
    /* border: 2px solid #fff; */
}

.exp_360_rotate_ellipse img {
    width: 3vw;
}

.exp_360_rotate_image {
    position: absolute;
    bottom: 0%;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    transition: transform .5s ease;
    transform-style: preserve-3d;
    overflow: hidden
}

.exp_360_rotate_image_nav {
    position: absolute;
    right: 5%;
    bottom: 30%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    left: 5px
}

.exp_360_arrow {
    cursor: pointer
}

.exp_360_arrow {
    animation: pulseAnimation 1.5s infinite alternate;
    transition: transform .2s ease-in-out;
    transform: scale(1.2)
}

.exp_360_background_img_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    height: inherit;
}

.exp_360_background_img_upper {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.exp_360_background_dots {
    mix-blend-mode: multiply;
    width: 25%;
    background-color: rgba(0, 0, 0, 0) !important
}

.exp_360_background_dots.right {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.exp_360_background_img_lower {
    flex-grow: 3;
    width: 100%;
    position: relative
}

.exp_360_background_img_lower img {
    width: 100%;
    user-select: none
}

.exp_360_background_text_container {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -20%);
    text-align: center;
    user-select: none;
    opacity: .5;
    display: none;
}

.exp_background_image {
    width: 635px;
    height: 140px;
    background-size: cover;
    background-size: contain;
    background-position: center;
    opacity: .1;
    display: inline-block;
    background-repeat: no-repeat;
    z-index: -1;
    display: none
}

.exp_background_text {
    opacity: .5;
    background: linear-gradient(180deg, #ffffff 19.51%, #999999 56.05%, #a6a6a9 75%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    text-align: center;
    font-family: "Krona One";
    font-size: 85px;
    font-weight: 400
}

.exp_background_text:first-child {
    background: linear-gradient(180deg, #ffffff 19.51%, #999999 75%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.exp_360_background_text {
    opacity: .5;
    background: linear-gradient(180deg, #55565b 19.51%, #25272b 56.05%, #1f2022 75%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    text-align: center;
    font-family: "Krona One";
    font-size: 175px;
    font-weight: 400;
    line-height: 178px
}

.exp_360_background_text:first-child {
    background: linear-gradient(180deg, #55565b 19.51%, #424246 75%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    font-size: 200px
}

.exp_360_select_color_container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0)
}

.exp_360_select_color_container svg {
    width: 100%;
    height: auto
}

.exp_360_info_container {
    display: flex;
    width: 100%
}

.exp_360_heading_container {
    width: 60%;
    padding: 2%;
    color: #fff;
    font-family: "Montserrat"
}

.exp_360_name_heading_container {
    justify-content: center;
    display: flex;
    align-items: center;
    color: #fff;
    user-select: none;
    padding-top: 25px
}

.exp_360_bike_name {
    font-size: 50px;
    font-weight: 800
}

.exp_360_price_color {
    font-size: 40px;
    font-weight: 800;
    font-family: "Krona One"
}

.exp_360_bike_color {
    text-align: center
}

.exp_360_bike_color img {
    width: 100%;
    text-align: center;
    transition: opacity .5s ease-in-out, transform .5s ease-in-out;
    transform-origin: center center
}

.exp_360_bike_color img.hidden {
    opacity: 0;
    transform: scale(0.8)
}

.exp_360_bike_color img.visible {
    opacity: 1;
    transform: scale(1)
}

.exp_360_content_container {
    width: 60%;
    padding: 2% 0;
    color: #fff;
    font-family: "Krona One";
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: x-large
}

.exp_360_color_details {
    font-size: 20px;
    font-weight: 600;
    font-family: "Montserrat"
}

.exp_360_color_details span {
    margin: 10px 0px
}

.exp_360_color_details span:first-child {
    text-transform: uppercase
}

.exp_360_exShowroom {
    color: #7d7d7d;
    font-size: 14px;
    font-weight: 400;
    line-height: 0px
}

.exp_360_price {
    font-size: 40px;
    font-weight: 600;
    font-family: "Montserrat"
}

.exp_360_disclaimer {
    color: #7d7d7d;
    font-size: 10px;
    font-weight: 100;
    margin: 0px 0px
}

.exp_360_location_selector {
    width: 100%
}

#exp_360_city_selector {
    color: #fff;
    border-radius: 5px;
    border: 1px solid #424242;
    background: #1c1c1d;
    padding: 14px;
    font-size: 14px;
    width: 70%;
    max-width: 380px;
    margin: 10px 0;
    font-family: "Montserrat"
}

.exp_360_bookNow_btn {
    display: inline-flex;
    padding: 10px 15px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #0002d7;
    border: 0;
    color: #fff;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px
}

.exp_360_bookNow_btn_white {
    display: inline-flex;
    padding: 10px 15px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #0002d7;
    border: 0;
    background: #fff;
    font-family: "Montserrat";
    font-size: 14px;
    font-weight: 600;
    margin-top: 15px
}

.exp_360_rotate_ellipse {

    position: relative;
    border-radius: 50%;
    background: rgba(52, 53, 58, .18);
}

/* Curved ring */
.exp_360_rotate_ellipse::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    border-left-color: transparent;
    border-right-color: transparent;
}

.exp_360_rotate_ellipse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    transform: rotate(180deg);
}

/* LEFT arrow */
.exp_360_rotate_ellipse .arrow-left,
.exp_360_rotate_ellipse .arrow-right {
    position: absolute;
    width: 14px;
    height: 14px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}

/* Left arrow */
.exp_360_rotate_ellipse .arrow-left {
    bottom: 2.5vw;
    left: 2.9vw;
    transform: translateY(-10%) rotate(-110deg);
}

/* Right arrow */
.exp_360_rotate_ellipse .arrow-right {
    top: 2.65vw;
    right: 2.96vw;
    transform: translateY(0%) rotate(65deg);
}

/* @media screen and (min-width: 657px) and (max-width: 991px){
    .exp_360_rotate_ellipse .arrow-left{

    }
    .exp_360_rotate_ellipse .arrow-right{
        
    }
} */

@media screen and (max-width: 566px) {
    .exp_360_rotate_ellipse .arrow-left {
        bottom: 2.8vw;
        left: 21vw;
        transform: translate(-17vw, 0.2vw) rotate(-110deg);
    }

    .exp_360_rotate_ellipse .arrow-right {
        top: 2.4vw;
        right: 4vw;
        transform: translate(0vw, 0.2vw) rotate(70deg);
    }
}

@media screen and (min-width: 567px) and (max-width: 991px) {
    .exp_360_rotate_ellipse .arrow-left {
        bottom: 3.5vw;
        left: 21vw;
        transform: translate(-17vw, 0.2vw) rotate(-110deg);
    }

    .exp_360_rotate_ellipse .arrow-right {
        top: 3.2vw;
        right: 4vw;
        transform: translate(0vw, 0.2vw) rotate(70deg);
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .exp_360_rotate_ellipse .arrow-left {
        bottom: 3.7vw;
        left: 21vw;
        transform: translate(-17vw, 0.2vw) rotate(-110deg);
    }

    .exp_360_rotate_ellipse .arrow-right {
        top: 3.4vw;
        right: 4vw;
        transform: translate(0vw, 0.2vw) rotate(70deg);
    }
}

/* Center icon */
.exp_360_icon {
    width: 6vw;
    z-index: 2;
}

.exp_360_select_color_btns_ {
    display: flex
}

.exp_360_select_color_btns {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex
}

.exp_360_select_color_btn {
    padding: 10px;
    display: flex
}

.exp_360_color_dot_out {
    display: flex;
    padding: 2px;
    border-radius: 50%;
    cursor: pointer
}

.exp_360_color_dot_inner {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    margin: 2px
}

.exp_360_color_dot_out {
    border: 2px solid #bdbdbf
}

.exp_360_details_container {
    width: 200px;
    height: fit-content;
    position: absolute
}

.exp_360_details_heading {
    color: #fff;
    font-family: "Montserrat";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.exp_360_details_info {
    color: #868686;
    font-family: "Montserrat";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.exp_360_tyre_size {
    top: -70%;
    text-align: right;
    left: -2%
}

.exp_360_fuel_system {
    right: 0;
    top: -140%
}

.exp_360_suspension {
    right: -5%;
    top: -15%
}

/* EC-06 360 */
.ec-06.experience_360 .exp_360_rotate_image_container {
    bottom: 30%;
}

.ec-06.experience_360 .exp_360_rotate_image {
    bottom: -30%;
    width: 90%;
    left: 50%;
}

@media(max-width: 800px) {
    .exp_360_background_dots {
        mix-blend-mode: multiply;
        width: 25%
    }

    .connect_section {
        display: none
    }

    .product_connectapp_card {
        width: calc(50% - 20px);
        justify-content: center
    }

    .product_connectapp_card_containt {
        height: 30%
    }

    .ellipse_carousel_description {
        font-size: 12px;
        line-height: 20px
    }

    .ellipse_carousel_img_container_wrapper {
        width: 50%
    }

    .ellipse_carousel_bike_title {
        font-size: 15px
    }

    .ellipse_carousel_heading {
        font-size: 10px
    }

    .ellipse_carousel_sub_heading {
        font-size: 14px
    }

    .exp_360_rotate_image_container {
        bottom: 15%
    }

    .exp_360_rotate_image {
        width: 105% !important;
    }

    .exp_360_details_heading {
        font-size: 10px
    }

    .exp_360_details_info {
        font-size: 12px
    }

    .exp_360_tyre_size {
        left: -25%
    }

    .exp_360_fuel_system {
        right: -25%;
        top: -160%
    }

    .exp_360_suspension {
        right: -27%;
        top: 10%
    }

    .product_specification_button {
        font-size: 12px
    }

    .product_specification_details {
        width: 100%;
        grid-template-columns: repeat(2, 1fr)
    }

    .product_specification_img_container {
        display: none
    }

    .exp_360_info_container {
        flex-direction: column
    }
}

@media(max-width: 600px) {
    .exp_360_background_dots {
        mix-blend-mode: multiply;
        width: 25%
    }

    .product_connect_title_section h3 {
        font-size: 25px
    }

    .product_connect_title_section h1 {
        font-size: 28px;
        margin: 5px 0
    }

    .product_connect_title_section span {
        font-size: 14px
    }

    .product_connectapp_card {
        padding: 20px 10px
    }

    .product_connectapp_card h4 {
        font-size: 14px;
        margin: 0
    }

    .product_connectapp_card p {
        font-size: 12px;
        margin: 0
    }

    .product_connectapp_card_containt {
        height: 55%
    }

    .ellipse_carousel_content_container {
        width: 100%;
        padding: 10% 1rem
    }

    .ellipse_carousel_selection_label {
        font-size: 8px
    }

    .ellipse_carousel_center_img_container {
        margin: 15px 0 2% 0
    }

    .exp_360_background_text {
        font-size: 90px;
        line-height: 74px
    }

    .exp_360_background_text:first-child {
        font-size: 50px
    }

    .exp_360_content_container {
        width: 100%
    }

    .exp_360_select_color_container {
        width: 50%
    }

    .exp_360_bike_name {
        font-size: 25px
    }

    .exp_360_price_color {
        font-size: 30px;
        text-align: center
    }

    .exp_360_color_details {
        font-size: 14px
    }

    .exp_360_exShowroom {
        font-size: 12px
    }

    .exp_360_price {
        font-size: 35px
    }

    .exp_360_disclaimer {
        font-size: 12px
    }

    .exp_360_select_color_btn {
        padding: 7px
    }

    .exp_360_details_container {
        display: none
    }

    .exp_360_rotate_image_nav {
        display: none
    }

    .product_specification_button {
        padding: 4px 8px
    }

    .product_item_title {
        font-size: 14px
    }

    .product_item_value {
        font-size: 12px
    }

    .product_accessories_nav_container_sm {
        display: flex
    }

    .gallery-button {
        font-size: 16px
    }

    .exp_360_content_container {
        width: 100%
    }

    #exp_360_city_selector {
        width: 100%
    }

    .exp_360_select_color_container {
        width: 50%
    }

    .exp_360_bike_name {
        font-size: 25px
    }

    .exp_360_price_color {
        font-size: 30px;
        padding: 1rem;
        text-align: center
    }

    .exp_360_color_details {
        font-size: 14px
    }

    .exp_360_exShowroom {
        font-size: 12px
    }

    .exp_360_price {
        font-size: 35px
    }

    .exp_360_disclaimer {
        font-size: 12px
    }

    .exp_360_select_color_btn {
        padding: 7px
    }

    .exp_360_details_container {
        display: none
    }

    .exp_360_rotate_image_nav {
        display: none
    }

    .product_specification_button {
        padding: 4px 8px
    }

    .product_item_title {
        font-size: 14px
    }

    .product_item_value {
        font-size: 12px
    }

    .product_accessories_nav_container_sm {
        display: flex
    }

    .gallery-button {
        font-size: 16px
    }
}

@media(max-width: 450px) {
    .ellipse_carousel_center_img_container {
        margin: 5px 0 2% 0
    }

    .exp_360_color_dot_inner {
        height: 12px;
        width: 12px
    }

    .exp_360_select_color_btn {
        padding: 5px
    }
}

@media(max-width: 380px) {
    .product_specification_button {
        margin: 0 0 0 10px
    }
}

@media(max-width: 500px) {
    .product_specification_button {
        padding: -1px 16px;
        font-size: 12px;
        text-align: center;
        display: flex;
        align-content: center;
        flex-wrap: wrap
    }
}

.exp_360_arrow:hover {
    transform: scale(1.2)
}

.exp_360_bookNow_btn:hover {
    border: 1px solid #0002d7;
    color: #0002d7;
    background-color: #f0f1f6
}

.exp_360_bookNow_btn_white:hover {
    border: 1px solid #0002d7;
    background-color: #0002d7;
    color: #f0f1f6
}

.product_accessories_book_btn:hover {
    border: 1px solid #0002d7;
    color: #0002d7;
    background-color: #f0f1f6
}

.gallery-button:hover:not(.gallery-active) {
    border: 1px solid #0002d7;
    color: #0002d7
}

.exp_360_bookNow_btn:hover {
    border: 1px solid #0002d7;
    color: #0002d7;
    background-color: #f0f1f6
}

.exp_360_select_model_container {
    display: flex;
    align-items: center;
    font-size: 19px
}

.exp_360_select_model_label {
    margin-right: 10px
}

.exp_360_model_option {
    margin-right: 20px
}

.custom-radio {
    margin-right: 5px
}

/* Ellipse */
@media(max-width: 768px) {
    .exp_360_select_model_container {
        flex-direction: column;
        align-items: flex-start
    }

    .exp_360_model_option {
        margin-right: 0;
        margin-bottom: 10px
    }

    .exp_360_select_model_label {
        margin-right: 0;
        margin-bottom: 5px
    }
}

@media (min-width: 1200px) {
    .exp_360_rotate_image_container {
        width: 80%;
    }

}

@media (max-width: 1200px) {
    .exp_360_container {
        padding-top: 490px !important;
    }

    .experience_360 .heading {
        font-size: 10px;
    }

    .exp_360_rotate_ellipse {
        height: 15vw;
    }

    .exp_360_rotate_ellipse img {
        width: 7vw;
    }

    .watermark_360 {
        top: 45%;
        left: 50%;
        transform: translate(-50%, -65%);
        font-size: 40vw;
        font-weight: 700;
        z-index: 0;
        letter-spacing: 10px;
        background: #000000;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 60%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        user-select: none;
    }

    .exp_360_rotate_image_container {
        width: 90%;
    }
}

@media (max-width: 1000px) {
    .watermark_360 {
        top: 25%;
    }

    .experience_360 {
        margin: 5% 0px !important;
    }

    .exp_360_container {
        padding-top: 400px !important;
    }
}

@media (max-width: 900px) {
    .exp_360_container {
        padding-top: 380px !important;
    }

    /* .exp_360_rotate_ellipse .arrow-left, .exp_360_rotate_ellipse .arrow-right {
        display: none;
    } */
}

@media (max-width: 800px) {
    .exp_360_container {
        padding-top: 450px !important;
    }

    .experience_360 {
        height: 75vw !important;
    }

    .watermark_360 {
        top: 35%;
    }

    /* .exp_360_rotate_ellipse img {
        width: 8vw;
    } */
}

.spec-section {
    background: #e6e6e2;
    /* light grey same as image */
}

.spec-box {
    transform: scale(1);
    width: max-content;
}

.spec-box .spec-value {
    font-size: clamp(40px, 10vw, 200px);
    font-weight: 700;
    line-height: 1;
    color: var(--ev-color);
}

.spec-box .spec-unit {
    font-size: clamp(20px, 4vw, 36px);
    font-weight: 600;
    margin-top: 1vw;
    text-align: left;
    color: #4a4a4a;
}

.spec-box .spec-label {
    font-size: clamp(14px, 2.8vw, 32px);
    font-weight: 500;
    font-style: italic;
    margin-top: -5px;
    text-align: left;
    width: 25vw;
}

@media screen and (max-width: 768px) {
    .exp_background_image {
        height: 60px;
        margin: 10px;
        width: 300px
    }
}

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

    /* .experience_360{
            height: 40%;
        } */
    /* .exp_360_rotate_ellipse {
        height: 32px;
    } */
}

@media screen and (max-width: 480px) {
    .exp_background_image {
        height: 50px;
        margin: 30px;
        width: 250px
    }

    #selected_color_name {
        font-size: 6.8vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
    .experience_360 {
        height: 56vw;
    }
}

@media (max-width: 768px) {
    .experience_360 {
        height: auto;
        min-height: 500px;
        padding-bottom: 3rem;
    }

    .exp_360_container {
        padding-top: 380px !important;
    }
}

@media (max-width: 576px) {

    .exp_360_rotate_image_container {
        width: 95%;
        bottom: 10%;
    }
}

@media (max-width: 500px) {
    .exp_360_container {
        padding-top: 320px !important;
    }

    .experience_360 {
        height: auto;
        min-height: 400px !important;
        padding-bottom: 3rem;
    }

    /* .exp_360_rotate_ellipse img {
        width: 15vw;
    } */
}

@media (max-width: 400px) {
    .exp_360_container {
        padding-top: 290px !important;
    }
}

.cloudimage-360 img {
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.45));
}

@media screen and (min-width: 1201px) {
    .exp_360_container {
        padding-top: 36vw;
    }
}

/* End EC-06 360 */

#contactSidebar svg,
#confirmation_p svg {
    height: 3vw;
    width: 3vw;
    /* color: green; */
    margin: 1rem 0;
}

/* Main Image */
#mainImage {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Scroll strip */
.thumb-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 0;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.thumb-scroll::-webkit-scrollbar {
    display: none;
}

.thumb-scroll.dragging {
    cursor: grabbing;
}

/* Thumbnail wrapper */
.thumb-item {
    flex: 0 0 25%;
    /* Desktop default: 4 visible */
}

/* Thumbnail images */
.thumbnail-img {
    width: 100%;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
    opacity: 0.3;
    background: #000;
    border: 4px solid #fff;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.thumbnail-img.active-thumb {
    opacity: 1;
}

/* Hover effect (desktop only) */
@media (hover: hover) {
    .thumbnail-img:hover {
        opacity: 0.8;
        transform: scale(1.03);
    }
}

/* Tablet (≤ 991px) → 3 thumbnails */
@media (max-width: 991px) {
    .thumb-item {
        flex: 0 0 33.33%;
    }
}

/* Mobile (≤ 575px) → 2 thumbnails */
@media (max-width: 575px) {
    .thumb-item {
        flex: 0 0 50%;
    }

    #mainImage {
        border-radius: 12px;
    }
}

/* End Gallery Section */

.display-2 {
    font-size: calc(1.25rem + 2.5vw);
    font-weight: 300;
    line-height: 1.2;
}

/* ---------- MOBILE VIEW ACCORDION ---------- */

/* ----------- DESKTOP stays same ----------- */
.list-group-item {
    position: relative;
}

.list-group-item .arrow {
    font-size: 18px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.active-content-box {
    display: none;
}

/* ----------- MOBILE ACCORDION ----------- */



@media (max-width: 768px) {

    .spec-box .spec-value {
        font-size: clamp(90px, 10vw, 90px);
    }

    /* Hide right content box */
    #contentBox {
        display: none !important;
    }

    .active-content-box {
        display: block;
    }

    /* Mobile answer box */
    .mobile-answer {
        display: none;
        padding: 10px 0 0 45px;
        font-size: 14px;
        color: #333;
    }

    .list-group-item .arrow {
        font-size: 18px;
        position: absolute;
        right: 15px;

    }

    /* Show answer when active */
    .list-group-item.active-item .mobile-answer {
        display: block;
    }

    /* Arrow rotates */
    .list-group-item.active-item .arrow {
        transform: translateY(0%) rotate(270deg);
        top: 10%;
    }

    .list-group-item.active-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .list-group-item.active-item .active-content-box {
        width: 100%;
        padding-left: 45px;
        margin-top: 10px;
    }


}

@media (max-width: 768px) {

    /* Hide right side box on mobile */
    #contentBox {
        display: none !important;
    }

    /* Prepare mobile answer box */
    .mobile-answer {
        display: none;
        padding: 10px 0 0 35px;
        font-size: 14px;
        color: #444;
    }

    /* Active item shows answer */
    .list-group-item.active-item .mobile-answer {
        display: block;
    }

    /* Arrow fix position */
    .list-group-item {
        position: relative;
        padding-right: 35px !important;
    }

    .list-group-item .arrow {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        font-size: 18px;
        transition: 0.3s ease;
    }

    .list-group-item.active-item {
        background: none;
        padding: 0px !important;
    }

    .list-group-item.active-item>div.mobile-que {
        background-color: #ecfcfc;
        padding: 15px;
        padding-right: 35px;
    }
}

.watermark {
    top: 2%;
    left: 2%;
    font-size: 14vw;
    font-weight: 400;
    color: #fff;
    z-index: 0;
    letter-spacing: 10px;
    opacity: 0.7;
}

/* Info Section */
#info-sec {
    /* background-color: var(--ev-color); */
}

.info_img {
    filter: drop-shadow(5px 5px 12px rgba(0, 0, 0, 0.1));
    /* filter: brightness(0) saturate(100%)
          invert(47%) sepia(93%) saturate(749%)
          hue-rotate(152deg) brightness(93%) contrast(101%); */
}

@media screen and (max-width: 370px) {
    #info-detail {
        transform: scale(0.8);
    }
}

@media screen and (min-width: 767px) {
    .info_img {
        width: 75% !important;
    }
}


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/

#about_sec .about_head {
    font-size: var(--font-head);
    line-height: normal;
}

#about_sec .about_des {
    font-size: var(--font-description);
    color: var(--ev-text-desc);
}

.about_watermark {
    font-size: 24vw;
    font-weight: 700;
    color: #000;
    /* z-index: 0; */
    letter-spacing: 10px;
    opacity: 0.05;
    user-select: none;
    width: auto;
    line-height: normal;
}

.about_ev {
    margin-bottom: 8vw;
}

@media screen and (min-width: 900px) {
    .about_watermark {
        font-size: 16vw !important;
        position: absolute !important;
        top: 25%;
        left: 3%;
        transform: translateY(-50%);
    }
}

/*--------------------------------------------------------------
# Features and Specification
--------------------------------------------------------------*/

#feature_mode_head {
    font-size: var(--font-title);
    font-weight: bolder;
    color: var(--ev-color);
    line-height: 70px;
    margin-bottom: 1.5rem;
}

#feature_mode_desc {
    font-size: var(--font-description);
}

.feature_heading {
    font-size: var(--font-head);
    font-weight: bolder;
    text-align: center;
    padding: 4rem 0 2rem 0;
}

.slide-content .feature_title, #app_connectivity_desc .feature_title{
    font-size: var(--font-title);
    font-weight: bolder;
    color: var(--ev-color);
    line-height: clamp(40px, 5vw, 70px);
    margin-bottom: 1.5rem;
}



.slide-content p, #app_connectivity_desc p {
    font-size: var(--font-description);
}

.app_connectivity_img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* optional, keeps layout stable */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: appSnap 6s infinite;
    /* background-color: #efefef;  */
    border-radius: 3vw;
}

.carousel-btn{
    border: 0;
    background-color: var(--ev-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

#app_connectivity_desc{
    margin: clamp(0px, 4vw, 10vh) 0 !important;
}

#app_connectivity_desc a{
    color: var(--ev-color);
}

@keyframes appSnap {

    0%,
    33% {
        background-image: url("../images/ec06/features/screen1.webp");
    }

    34%,
    66% {
        background-image: url("../images/ec06/features/screen2.webp");
    }

    67%,
    100% {
        background-image: url("../images/ec06/features/screen3.webp");
    }
}

.slide-content h3 {
    font-weight: bold;
}

#feature_spec {
    display: grid;
    gap: 11vw;
}


#feature_spec .carousel-control-next,
#feature_spec .carousel-control-prev {
    width: 8%;
}

#feature_spec .carousel-control-prev-icon,
#feature_spec .carousel-control-next-icon {
    filter: invert(1);
}

#feature_spec img.slide-img {
    background-color: #efefef;
    border-radius: 3vw;
}

#ec06-tv div {
    font-size: 64px;
    font-weight: bolder;
    color: var(--ev-color);
}

#ec06-tv {
    position: absolute;
    top: 0%;
    right: 5%;
    width: 32%;
}

#ec06-tv p {
    font-size: 1.4vw;
    font-weight: 600;
    color: #8a8a8a;
    line-height: 2.0vw;
    margin-bottom: 1.5rem;
    /* text-transform: uppercase; */
}

/* #tv_img::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/ec06/long_band.webp) center / cover no-repeat;
    transform: scale(1.1);
} */

@media screen and (max-width: 767px) {
    #feature_mode_head {
        line-height: 3rem;
        margin-bottom: 0 !important;
    }

    .slide-content .feature_title {
        line-height: 3rem !important;
        margin-bottom: 0 !important;
    }
}

/*--------------------------------------------------------------
# TrendSetter
--------------------------------------------------------------*/
#trendsetter {
    /* font-family: 'TradeGothicInline'; */
    font-family: "Bebas Neue", sans-serif;
    font-size: 160px;
    padding: 5rem 0rem 0rem 0;
    width: fit-content;
    border-radius: 2rem;
    width: 75%;
}

#trendsetter_head {
    /* font-family: 'TradeGothicInline'; */
    font-size: 13vw;
    color: var(--ev-color);
    /* padding: 0rem 2rem 3rem 2rem; */
    line-height: 12vw !important;
    /* width: fit-content; */
    border-radius: 2rem;
    font-weight: bolder;
    letter-spacing: 2px;
}

.trendsetter-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* optional, keeps layout stable */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    animation: imageSwap 2s infinite;
}

@keyframes imageSwap {

    0%,
    49% {
        background-image: url("../../assets/images/ec06/trend_setter/boy_jumping.webp");
    }

    50%,
    100% {
        background-image: url("../../assets/images/ec06/trend_setter/girl_jumping.webp");
    }
}

@media (max-width: 560px) {
    #trendsetter_head {
        font-size: 12.5vw;
        color: var(--ev-color);
        /* padding: 0rem 7rem 0rem 0rem; */
        /* width: fit-content; */
        border-radius: 2rem;
        line-height: 2rem;
        font-weight: bolder;
    }
}

@media screen and (max-width: 767px) {
    #trendsetter {
        width: 100% !important;
    }

    #trendsetter_head {
        font-size: 12.5vw;
        color: var(--ev-color);
        /* padding: 0rem 5rem 0rem 1rem; */
        border-radius: 2rem;
        line-height: 12vw !important;
        font-weight: bolder;
        padding-bottom: 2rem;
        margin-left: 50px;
    }

    .trendsetter-img {
        background-position: center !important;
    }
}

@media (max-width: 1080px) {
    #trendsetter_head {
        line-height: 5rem;
    }

}

/*--------------------------------------------------------------
# FAQ Section
--------------------------------------------------------------*/
.faq-box {
    border: none;
    margin-bottom: 12px;
}

.faq_heading {
    font-size: var(--font-head) !important;
    color: #fff !important;
}

.faq-button {
    background: #e9fdff;
    border-radius: 12px !important;
    padding: 18px 20px;
    font-size: 16px;
    gap: 12px;
}

.faq-button:not(.collapsed) {
    background: #d5faff;
    box-shadow: none;
}

.faq-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    display: none !important;
}

/* Dot Style */
.dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    background: #00aac6;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
    /* 🔑 KEY FIX */
}

/* Arrow Icon Style */
.faq-button {
    position: relative;
}

.faq-button .faq-text {
    padding-right: 8px;
}

.faq-button::before {
    content: "\276F";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 18px;
    color: #00d6e9;
    transition: transform 0.3s ease;
}

.faq-button:not(.collapsed)::before {
    transform: translateY(-50%) rotate(270deg);
}

#customCarousel .carousel-control-next,
#customCarousel2 .carousel-control-next {
    left: 45%;
}

/*--------------------------------------------------------------
# Color & Price Section
--------------------------------------------------------------*/
#colorPrice_head {
    font-size: 2.3vw;
    line-height: 3.5rem;
}

#colorPrice_head p {
    font-size: 4rem;
    font-weight: 700;
}

#colorPrice_head p span {
    font-style: italic;
    color: #05ff66;
    padding-right: 8px;
}

@media screen and (max-width: 767px) {
    #colorPrice_head {
        font-size: 6vw;
        line-height: 8vw;
        margin-top: 2rem;
    }

    #colorPrice_head p {
        font-size: 10vw;
        font-weight: 700;
        margin-top: 1rem;
    }
}

@media screen and (max-width: 991px) {
    #colorPrice .btn.btn-lg {
        font-size: 1rem !important;
    }
}


/* Modes */
.nav-pills {
    /* background: color-mix(in srgb, var(--ev-color), transparent 95%); */
    background: #efefef;
    border-radius: 50px;
    padding: 8px;
    display: inline-flex;
    margin: 0 auto;
}

.nav-pills .nav-item .nav-link.active {
    background: var(--ev-color);
    color: #fff !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--ev-color), transparent 70%);
}

.nav-pills .nav-item .nav-link {
    background: transparent;
    border: none;
    color: #000;
    padding: 12px 3vw;
    border-radius: 40px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 0;
}

@media screen and (max-width: 567px) {
    .nav-pills .nav-item .nav-link {
        padding: 12px 8vw;
    }
}


.faq-img {
    width: 40vw !important;
    position: absolute;
    left: -8%;
    bottom: -140px;
}

@media (max-width: 768px) {

    /* Feature spec carousel controls */
    #feature_spec {
        position: relative;
    }

    #feature_spec .carousel-control-prev,
    #feature_spec .carousel-control-next,
    #customCarousel .carousel-control-prev,
    #customCarousel .carousel-control-next,
    #customCarousel2 .carousel-control-prev,
    #customCarousel2 .carousel-control-next {
        width: 40px;
        height: 40px;
        /* background: #f1f1f1; */
        bottom: 20px;
        top: auto;
    }

    /* Group centering logic */
    #feature_spec .carousel-control-prev,
    #customCarousel .carousel-control-prev,
    #customCarousel2 .carousel-control-prev {
        left: 50%;
        transform: translateX(-100%) translateY(-50%);
        margin-left: -12px;
        /* gap between arrows */
    }

    #feature_spec .carousel-control-next,
    #customCarousel .carousel-control-next,
    #customCarousel2 .carousel-control-next {
        left: 50%;
        transform: translateX(0) translateY(-50%);
        margin-left: 12px;
        /* gap between arrows */
    }


    @media (max-width: 576px) {

        #feature_spec .carousel-control-prev,
        #feature_spec .carousel-control-next,
        #customCarousel .carousel-control-prev,
        #customCarousel .carousel-control-next,
        #customCarousel2 .carousel-control-prev,
        #customCarousel2 .carousel-control-next {
            width: 44px;
            height: 44px;
        }
    }

    /* ===============================
   TEXT BLOCK (Responsive)
================================ */
    #ec06-tv {
        text-align: left;
        margin-bottom: clamp(2rem, 6vw, 4rem);
        padding: 0 1rem;
        position: absolute;
        top: -20%;
        right: 0;
        width: 100%;
    }

    #ec06-tv p {
        font-size: 6vw;
        font-weight: 600;
        color: #8a8a8a;
        line-height: 1.2;
        text-transform: uppercase;
    }

}

@media (max-width: 480px) {
    #ec06-tv p {
        font-size: 6vw;
        text-align: center;
    }
}

/* @media screen and (min-width: 1200px) and (max-width: 1399px){
    .faq-img {
        width: 100% !important;
        left: -10%;
    }
} */

@media screen and (min-width: 1400px) {
    .faq-img {
        left: 50%;
        max-width: 560px;
        transform: translateX(-50%);
    }
}


/* ===============================
   BACKGROUND BAND
================================ */
.scooter-outer-wrapper {
    margin: 10rem auto 0rem;
}

.scooter-image-warpper {
    background: url('../../assets/images/ec06/long_band.webp') no-repeat center;
    background-size: contain;
    padding: 5rem 0 0 !important;
    background-position: left;
}

@media (min-width: 576px) {
    .scooter-image-warpper {
        padding: 6rem 0;
    }
}
/* ===============================
   IMAGE CENTERING WRAPPER
================================ */
.scooter-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}



/* ===============================
   ROTATED SCOOTER IMAGE
================================ */
.scooter-rotate-img {
    height: auto;
    width: 60%;
    /* transform: rotate(90deg); */
    /* transform-origin: center; */
    display: block;
    margin: 0 auto;
}

/* Small tablets */
@media (min-width: 576px) {
    .scooter-rotate-img {
        /* height: 300px; */
    }
}

/* Tablets */
@media (min-width: 768px) {
    .scooter-rotate-img {
        height: 340px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .scooter-rotate-img {
        height: 380px;
    }
}

@media (max-width: 480px) {
    .scooter-wrapper {
        padding-top: 4rem;
    }
}


/* ===============================
   EC06 Product Enquiry
================================ */

.eco_std_pwd {
    >.tab-pane {
        display: none;
    }

    >.active {
        display: block;
    }
}

.product-enquiry-section {
    /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.60) 100%), url(../images/home/ec06-pc.webp) white 60% / cover no-repeat; */
    background-color: #F3F4EF;
    background
    background-attachment: fixed;
    background-size: cover;
    background-position: center center !important;
    color: #000;
}

.product_enquiry_heading {
    color: #000;
    text-align: center;
    font-size: var(--font-head);
    font-weight: 800;
    margin-top: 3%;
}

#enquireProduct_p  input, #enquireProduct_p  select{
    background: #fff !important;
}

label.error,
label.is-invalid {
    color: red;
    display: block !important;
    font-size: 11px;
}

.custom-checkbox {
    align-items: baseline;
}

@media (min-width: 1400px) {
    .product-enquiry-section .container {
        max-width: 1000px;
    }

    .form-row-md {
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .product_enquiry_heading {
        font-size: 25px;
    }

    .custom-control-label {
        font-size: 12px;
    }

    .custom-control-label {
        margin-top: -30px;
        margin-left: 10px;
    }

}

#sendOtp_p {
    font-size: 13px;
    height: 40px;
}

.product-enquiry-section .custom-checkbox.d-flex {
    display: block !important;
}

.product-enquiry-section .custom-checkbox.d-flex a{
    color: var(--ev-color) !important;
}

/*--------------------------------------------------------------
# Policy
--------------------------------------------------------------*/

.policy_section{
    background: var(--ev-color);
    color: #b7cbee;
    font-size: 1.375rem;
    padding: 3rem 0;
    text-align: center;
}

.policy_heading {
    color: #fff;
    font-size: 4.625rem;
    margin: 0;
    position: relative;
    font-weight: 700;
}
button.btn, button.btn:hover {
    background-color: #3796B6;
    color: #fff;
    border-color: #3796B6;
}
.modal-title {
    color: #00aac6;
    font-weight: 900;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}
.register-heading {
    width: 100%;
    text-align: center;
    padding: 30px auto;
}
#myModal {
    background: rgb(0 170 198 / 83%);
}

#openSidebarBtn{
    z-index: 999 !important;
}