body {
    background-color: #000;
}

.thumb-position {
    bottom: 30%;
}

.bg-banner {
    background: url('../../../assets/img/models/J8-ARDIS/J8_desktop.webp') no-repeat bottom center;
    background-size: cover;
    width: 100%;
    height: 670px;
}

.bg-color-type-banner {
    background: url('../../../assets/img/models/J8-ARDIS/exterior/white_color_desktop.webp') 50% 50%;
    background-size: cover;
    width: 100%;
    height: 710px;
}

.swiper-tab-slide {
    height: 92.5vh;
    z-index: 999;
}

.swiper-thumb-tab {
    cursor: pointer;
}

.swiper-thumb-slide:not(.swiper-slide-thumb-active)::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: white !important;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.swiper-thumb-slide.swiper-slide-thumb-active::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: white !important;
    opacity: 1;
    transition: opacity 0.3s ease;
}


/* @media (max-width: 768px) {
    .icon-width {
        height: 35px !important;
    }
} */

.tab-content-position {
    bottom: 45%;
}

@media (min-width: 1280px) {
    .bg-banner {
        height: 740px !important;
    }

    .bg-color-type-banner {
        height: 780px !important;
    }
}

@media (min-width: 768px) and (max-width: 1020px) {
    .bg-banner {
        height: 100vh !important;
    }

    .bg-color-type-banner {
        height: 90vh !important;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    .banner-word {
        top: 17.5% !important;
    }

    .banner-spec {
        bottom: 3.5% !important;
    }

    .bg-banner {
        height: 600px !important;
    }

    .bg-color-type-banner {
        height: 640px !important;
    }
}

@media (min-width: 701px) and (max-width: 1020px) {
    .banner-word {
        top: 15% !important;
    }   

    .banner-spec {
        bottom: 6.25% !important;
    }

    .bg-banner {
        background: url('../../../assets/img/models/J8-ARDIS/J8_mobile.webp') no-repeat bottom center;
        background-size: cover;
        width: 100%;
        height: 80vh;
    }

    .bg-color-type-banner {
        background: url('../../../assets/img/models/J8-ARDIS/exterior/white_color_mobile.webp') no-repeat;
        background-size: cover;
        width: 100%;
        height: 85vh;
    }
}

@media (min-width: 501px) and (max-width: 699px) {
    .bg-banner {
        background: url('../../../assets/img/models/J8-ARDIS/J8_mobile.webp') no-repeat center;
        background-size: cover;
        width: 100%;
        height: 100vh;
    }

    .bg-color-type-banner {
        background: url('../../../assets/img/models/J8-ARDIS/exterior/white_color_mobile.webp') no-repeat top center;
        background-size: cover;
        width: 100%;
        height: 100vh;
    }
}

@media (min-width: 401px) and (max-width: 500px) {
    .bg-color-type-banner {
        background: url('../../../assets/img/models/J8-ARDIS/exterior/white_color_mobile.webp') 50% 100%  / cover;
        background-size: cover;
        width: 100%;
        height: 85vh !important;
    }
}

@media (min-width: 401px) and (max-width: 700px) {
    .banner-spec {
        bottom: 7.5% !important;
    }

    .banner-word {
        top: 15% !important;
    } 
}

@media (max-width: 400px) {
    .banner-word {
        top: 20% !important;
    } 

    .bg-color-type-banner {
        background: url('../../../assets/img/models/J8-ARDIS/exterior/white_color_mobile.webp') 50% 100% / cover;
        /* background-size: cover; */
        width: 100%;
        height: 105vh !important;
    }

    .banner-spec {
        bottom: 7.5% !important;
    }
}

@media (max-width: 500px) {
    .bg-banner {
        background: url('../../../assets/img/models/J8-ARDIS/J8_mobile.webp') no-repeat center;
        background-size: cover;
        width: 100%;
        height: 100vh !important;
    }
}

@media (max-width: 768px) and (orientation: landscape){
    .bg-banner {
        background: url('../../../assets/img/models/J8-ARDIS/J8_mobile.webp') no-repeat center;
        background-size:cover;
        width: 100%;
        height: 100vh;
    }

    .bg-color-type-banner {
        background: url('../../../assets/img/models/J8-ARDIS/exterior/white_color_mobile.webp') no-repeat center;
        background-size: cover;
        width: 100%;
        height: 100vh !important;
    }
}

.banner-word {
    top: 17.5%;
}

.banner-spec {
    bottom: 3.5%;   
}

.color-silver {
    background: url('../../../assets/img/models/J8-ARDIS/color/silver-color.svg');
    background-size: 100% 100%;
}

.color-black {
    background: url('../../../assets/img/models/J8-ARDIS/color/black-color.svg');
    background-size: 100% 100%;
}

.color-white {
    background: url('../../../assets/img/models/J8-ARDIS/color/white-color.svg');
    background-size: 100% 100%;
}

.color-green {
    background: url('../../../assets/img/models/J8-ARDIS/color/green-color.svg');
    background-size: 100% 100%;
}

.squareBox {
    width: 30px;
    height: 30px;
}

.icon-width {
    height: 50px;
}

.nav-pills .nav-link {
    background: 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;    
}

.nav-pills .nav-link, .nav-pills > .nav-link > .nav-item {
    border-bottom: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link > .nav-item {
    border-bottom: 2px solid #fff !important;
    background-color: transparent !important;
}

.image-position-feature {
    width: 100%;
    object-position: bottom center;
}

.pills-font-size {
    font-size: 1.075rem;
}

@media (max-width: 920px) {
    .swiper-button-next, .swiper-button-prev {
        display: block;
    }
}

@media (max-width: 360px) {
    .nav-position-feature-text {
        bottom: -5% !important;
        width: 100% !important;
    }

    .nav-position-feature-text-2 {
        bottom: -30% !important;
        width: 100% !important
    }
}

@media (min-width: 390px) and (max-width: 400px) {
    .nav-position-feature-text {
        bottom: 12.5% !important;
        width: 100% !important;
    }

    .nav-position-feature-text-2 {
        bottom: -25% !important;
        width: 100% !important
    }
}


@media (min-width: 361px) and (max-width: 389px) {
    .nav-position-feature-text {
        bottom: -5% !important;
        width: 95% !important;
    }

    .nav-position-feature-text-2 {
        bottom: -25% !important;
        width: 95% !important
    }
}


@media (max-width: 400px) {
    .nav-position-feature {
        width: 95% !important;
        bottom: 35% !important;
    }
    
    .pills-font-size {
        font-size: .575rem !important;
    }

    .swiper-button-next, 
    .swiper-button-prev {
        top: var(--swiper-navigation-top-offset, 42%);
    }

    .custom-label-margin {
        margin-top: 7rem;
    }

    @-moz-document url-prefix() {
        .custom-label-margin {
            margin-top: 10rem !important;
        }
    }
}

@media (min-width: 401px) and (max-width: 500px) {
    .nav-position-feature {
        width: 90% !important;
        bottom: 20% !important;
    }

    .nav-position-feature-text {
        bottom: 15% !important;
        width: 95% !important;
    }

    .nav-position-feature-text-2 {
        bottom: -15% !important;
        width: 95% !important;
    }

    .swiper-button-next, 
    .swiper-button-prev {
        top: var(--swiper-navigation-top-offset, 45%);
    }

    .custom-label-margin {
        margin-top: 5.5rem;
    }

    .nav-position {
        margin-top: -9.5rem;
    }
}

@media (min-width: 501px) and (max-width: 600px) {
    .nav-position-feature {
        width: 90% !important;
        bottom: 20% !important;
    }

    .image-position-feature {
        width: auto !important;
        height: 65vh;
        object-position: -130px 0 !important;
    }

    .nav-position-feature-text {
        bottom: 3.5% !important;
        width: 80% !important;
    }

    .nav-position-feature-text-2 {
        bottom: 0% !important;
        width: 90% !important;
    }
}

@media (min-width: 601px) and (max-width: 767px) {
    .nav-position-feature {
        width: 90% !important;
        bottom: 20% !important;
    }

    .image-position-feature {
        width: auto !important;
        height: 65vh;
        object-position: -300px 0 !important;
    }

    .nav-position-feature-text, 
    .nav-position-feature-text-2 {
        bottom: 6% !important;
        width: 80% !important;
    }
}

@media (min-width: 768px) and (max-width: 820px) {
    .nav-position-feature {
        bottom: 20% !important;
    }

    .nav-position-feature-text, .nav-position-feature-text-2 {
        bottom: .25% !important;
        width: 80% !important;
    }
}

@media (min-width: 821px) and (max-width: 912px) {
    .nav-position-feature {
        bottom: 17.5% !important;
    }

    .nav-position-feature-text-2 {
        bottom: -2.5% !important;
        width: 85% !important;
    }
}

@media (min-width: 913px) and (max-width: 1024px) {
    .nav-position-feature {
        bottom: 17.5% !important;
    }

    .nav-position-feature-text-2 {
        bottom: 5% !important;
        width: 85% !important;
    }
}

@media (max-width: 767px) {
    .green-pulse {
        width: 10px!important;
        height: 10px!important;
    }

    .rs-video-2 .animate-border-2 .video-vemo-icon-2:before {
        width: 40px !important;
        height: 40px !important;
    }

    .rs-video-2 .animate-border-2 .video-vemo-icon-2:after {
        width: 40px !important;
        height: 40px !important;
    }

    .custom-swiper-button-prev {
        left: 5% !important;
    }

    .custom-swiper-button-next {
        right: 5% !important;
    }

    .swiper-slide:not(.swiper-thumb-slide) {
        width: 100% !important;
    }

    .swiper-tab-slide {
        height: auto !important;
    }

    .swiper-safety-height {
        height: auto !important;
    }

    .thumb-position {
        bottom: 35% !important;
    }

    
}

@media (min-width: 768px) and (max-width: 1024px) {
    .nav-position-feature-text {
        bottom: 5% !important;
        min-width: 80%;
    }
}

.background-format {
    background-color: #000;
    color: #fff;
}

@media (min-width: 701px) and (max-width: 767px) {
    .background-format {
        min-height: 450px;
    }
}

@media (max-width: 700px) {
    .background-format {
        min-height: 400px;
        background-color: #fff !important;
        color: #000 !important;
    }

    .custom-swiper-button-prev, .custom-swiper-button-next {
        color: #000 !important;
    }

    .safety-border {
        margin-top: -.125rem !important;   
    }

    .tab-content-position {
        bottom: 12.5% !important;
    }
}

.safety-border {
    margin-top: -1.25rem;   
    z-index: 4;
    border-radius:1.5rem;
    overflow:hidden;
}

.nav-position-feature {
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.nav-position-feature-text {
    bottom: 5.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nav-position-feature-text-2 {
    bottom: 1.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.popover {
    z-index: 9999;
}

.popover-width {
    max-width: 420px;
}

.popover-icon-position {
    top: 2.5%;
    right: 2.5%;
}

.swiper:not(.swiper-thumb-tab) {
    width: 100%;
    height: 100%;
}

.swiper-slide:not(.swiper-thumb-slide) {
    width: 87.5%;
}

/* .swiper-slide {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* custom swiper icons */
.custom-swiper-button-prev, 
.custom-swiper-button-next {
    font-size: 3rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: transparent;   
}

.custom-swiper-button-prev:after, .swiper-rtl .custom-swiper-button-next:after {
    content: none;
}

.custom-swiper-button-next:after, .swiper-rtl .custom-swiper-button-prev:after {
    content: none;
}

.custom-swiper-button-prev {
    left: 3.5%;
}

.custom-swiper-button-next {
    right: 3.5%;
}

.swiper-safety-height {
    height:468px;
}

.swiper-pagination-bullet-active {
    background: transparent !important;
}

/* Optional: Ensure container also aligns to top */
.swiper-slide {
    display: flex;
    align-items: flex-start !important;
}

@media (min-width: 1024px) and (orientation: landscape) {
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, 
    .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: .5vh;
    }
}

@media (min-width: 700px) and (orientation: portrait) {
    .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, 
    .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 1.5vh;
    }
}

@media (min-width: 700px) {
    .swiper-safety {
        height: 540px;
    }

    .custom-swiper-button-prev, 
    .custom-swiper-button-next {
        color: #fff !important;
    }
}

.swiper-videos {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}