body {
    height: auto;
    background-color: transparent !important;
}
.active {
    background-color: transparent !important;
}
.video-title {
    font-size: 3.5rem;
}
@media (max-width: 767px) {
    .video-title {
        font-size: 3rem !important;
    }
    .colorbox {
        width: 30px !important;
        height: 30px !important;
    }
    .card-height {
        min-height: 400px !important;
    }
}
.mt-header {
    margin-top: 70px;
}

.colorbox {
    width: 50px;
    height: 50px;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-background {
    background: url('img/highlight/highlight-background.jpg');
    background-size: cover;
}

.highlightSwiper {
    height: 500px;
    /* overflow: hidden; */
}

.highlightSwiper .swiper-pagination-vertical.swiper-pagination-bullets, 
.highlightSwiper .swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, auto);
    left: var(--swiper-pagination-left, 115px);
    top: 50%;
    transform: translate3d(0px, 50%, 0);
}

.highlightSwiper .swiper-slide {
    opacity: 0 !important;
}

.highlightSwiper .swiper-slide-prev {
    opacity: 0 !important;
}

.highlightSwiper .swiper-slide-active {
    opacity: 1 !important;
}

.highlightSwiper .swiper-slide-next {
    opacity: 0 !important;
}


#navbar-access {
    /* top: 5rem; */
    top: 0;
}

@media (max-width: 400px) {
    .highlightSwiper {
        height: 550px !important;
    }
    
    .highlightSwiper.swiper-pagination-vertical.swiper-pagination-bullets, 
    .highlightSwiper.swiper-vertical>.swiper-pagination-bullets {
        transform: translate3d(0px, 620%, 0) !important;
        left: var(--swiper-pagination-left, 35vw) !important;
    }

    .custom-swiper-button-next {
        top: 91.75% !important;
        left: 25% !important;
    }

    .custom-swiper-button-prev {
        top: 91.75% !important;
    }

    .nav-position {
        margin-top: 18rem !important;
    }

    .swiper-pagination-fraction {
        top: 85% !important;
    }
}

@media (min-width: 401px) and (max-width: 700px) {
    .highlightSwiper.swiper-pagination-vertical.swiper-pagination-bullets, 
    .highlightSwiper.swiper-vertical>.swiper-pagination-bullets {
        transform: translate3d(0px, 600%, 0) !important;
        left: var(--swiper-pagination-left, 38vw) !important;
    }

    .highlightSwiper {
        height: 600px !important;
    }

    .custom-swiper-button-next {
        top: 91.75% !important;
        left: 22% !important;
    }

    .custom-swiper-button-prev {
        top: 91.75% !important;
    }

    .nav-position {
        margin-top: 19rem !important;
    }

    .swiper-pagination-fraction {
        top: 85% !important;
    }
}

@media (min-width: 701px) and (max-width: 767px) {
    .highlightSwiper.swiper-pagination-vertical.swiper-pagination-bullets, 
    .highlightSwiper.swiper-vertical>.swiper-pagination-bullets {
        transform: translate3d(0px, 750%, 0) !important;
        left: var(--swiper-pagination-left, 42vw) !important;
    }

    .highlightSwiper {
        height: 650px !important;
    }

    .custom-swiper-button-next {
        left: 15% !important;
    }
}

@media (min-width: 768px) and (max-width: 820px) {
    .highlightSwiper.swiper-pagination-vertical.swiper-pagination-bullets, 
    .highlightSwiper.swiper-vertical>.swiper-pagination-bullets {
        left: var(--swiper-pagination-left, 100px) !important;
    }
}

@media (min-width: 821px) and (max-width: 1020px) {
    .highlightSwiper.swiper-pagination-vertical.swiper-pagination-bullets, 
    .highlightSwiper.swiper-vertical>.swiper-pagination-bullets {
        left: var(--swiper-pagination-left, 12vw) !important;
    }
}

.detail-ratio {
    aspect-ratio: 628 / 418 !important;
}


.nav-spy-link:has(.active) > .nav-link {
    color: #000 !important;
}

.nav-spy-link > .nav-link {
    color: #000 !important;
    padding-left: 0px !important;
}


.nav-spy-link:has(.active) {
    text-decoration: underline 3px  #ed0000;
    text-underline-offset: 8px;
}

.nav-model-link:has(.active) > .nav-link {
    color: #000 !important;
}

.nav-model-link > .nav-link {
    color: #6c757d !important;
}

.nav-model-link > .nav-link img {
    filter: opacity(50%);
}

.nav-model-link:has(.active) {
    text-decoration: underline 3px  #ed0000;
    text-underline-offset: 8px;
}

.nav-model-link:has(.active) > .nav-link img {
    filter: opacity(100%);
}

.nav-toggle-link:has(.active) > .nav-link {
    color: #000 !important;
}

.nav-toggle-link > .nav-link {
    color: #6c757d !important;
    padding-left: 0px !important;
}

.nav-toggle-link:has(.active) {
    text-decoration: underline 3px  #ed0000;
    text-underline-offset: 8px;
}

.swiper-pagination-start {
    text-align: start;
    font-size: 1.35rem;
}

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

.custom-swiper-button-prev,
.custom-swiper-button-next {
    font-size: 2rem;
}

.custom-swiper-button-prev {
    left: 1%;
    top: 95%;
    color: #000;
    z-index: 999;
}

.custom-swiper-button-next {
    left: 12.5%;
    top: 95%;
    color: #000;
    z-index: 999;
}

.swiper-pagination-fraction {
    left: 4.5%;
    top: 91.25%;
    width: fit-content;
}

@media (min-width: 768px) and (max-width: 1020px){
    .custom-swiper-button-next {
        left: 16% !important;
    }

    #navbar-access {
        /* top: 7rem !important; */
        top: 0;
    }

    .card-height {
        min-height: 360px !important;
    }
}

.top-40 {
    top: 40% !important;
}

.top-43half {
    top: 43.5% !important;
}

.top-55 {
    top: 55% !important;
}

.top-60 {
    top: 60% !important;
}

.active {
    background-color: #fff;
}

.colorbox {
    cursor: pointer;
}

.sticky-top {
    z-index: 999;
}

@media (max-width: 501px) {
    .terms-position {
        bottom: 0 !important;
    }
}

.terms-position {
    bottom: 25px;
}

@media (min-width: 900px) and (max-width: 1024px) {
    .terms-position {
        bottom: -50px !important;
    }
}

.underline-hover-black {
    color: black;
    text-decoration: underline;
    text-underline-offset: .75rem;
}

.underline-hover-black:hover {
    color: #ed0000;
    text-decoration: underline;
    text-underline-offset: .75rem;
}

.underline-hover {
    color: white;
    text-decoration: underline;
    text-underline-offset: .75rem;
}

.underline-hover:hover {
    color: #ed0000;
    text-decoration: underline;
    text-underline-offset: .75rem;
}

.card-hover:hover .bg-spec {
    transition: transform .3s ease;
    transform: scale(1.1);
}

.card-hover .bg-spec {
    transition: transform .3s ease;
    transform: scale(1);
}

.card-hover:hover .card-spec{
    transition: transform .5s ease;
    transform: translateY(-30px);
}

.card-hover .card-spec {
    transition: transform .5s ease;
    transform: translateY(0);
}

.card-height {
    min-height: 448px;
}