/* ============================================================
   HKUX HERO SLIDER
   Bootstrap 5 compatible
   Owl Carousel
============================================================ */

.hkux-hero {
    width: 100%;

    background: #ffffff;
}


/* ============================================================
   WRAPPER
============================================================ */

.hkux-hero__wrapper {
    position: relative;

    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    overflow: hidden;

    background: #0d1d42;
}


/* ============================================================
   SLIDER
============================================================ */

.hkux-hero__slider {
    width: 100%;
}


/* Remove Owl default spacing */

.hkux-hero__slider .owl-stage-outer {
    overflow: hidden;
}

.hkux-hero__slider .owl-stage {
    display: flex;
}

.hkux-hero__slider .owl-item {
    display: flex;

    align-items: stretch;
}


/* ============================================================
   SLIDE
============================================================ */

.hkux-hero__slide {
    position: relative;

    width: 100%;

    min-height: 550px;

    overflow: hidden;

    background: #0d1d42;
}


/* ============================================================
   IMAGE
============================================================ */

.hkux-hero__image {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;
}


.hkux-hero__image-element {
    width: 100% !important;

    height: 100% !important;

    display: block;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.001);

    transition:
        transform 8s cubic-bezier(.2,.7,.2,1);
}


/*
   Slight cinematic zoom when slide becomes active
*/

.owl-item.active
.hkux-hero__image-element {
    transform: scale(1.04);
}


/* ============================================================
   DARK GRADIENT
============================================================ */

.hkux-hero__gradient {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 15, 38, 0) 25%,
            rgba(5, 15, 38, .05) 42%,
            rgba(5, 15, 38, .50) 63%,
            rgba(5, 15, 38, .96) 100%
        );
}


/* ============================================================
   CONTENT
============================================================ */

.hkux-hero__content {
    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 2;

    padding:
        0 40px
        38px;
}


.hkux-hero__content-inner {
    width: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;
}


/* ============================================================
   TEXT
============================================================ */


.hkux-hero__title {
    margin: 0;

    color: #ffffff;

    font-size:20px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: -.2px;

    text-shadow:
        0 2px 10px rgba(0,0,0,.30);
}


.hkux-hero__date {
    margin-top: 8px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,.92);

    font-size: 15px;

    line-height: 1.4;

    font-weight: 500;
}


.hkux-hero__date i {
    font-size: 15px;
}


/* ============================================================
   CONTROLS
============================================================ */

.hkux-hero__controls {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


.hkux-hero__control {
    width: 46px;

    height: 46px;

    padding: 0;

    border: 1px solid
        rgba(255,255,255,.40);

    border-radius: 50%;

    background:
        rgba(8, 23, 55, .58);

    color: #ffffff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        color .25s ease;
}


.hkux-hero__control:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #18356f;

    transform: translateY(-3px);
}


.hkux-hero__control:focus-visible {
    outline: 3px solid #214AAB;

    outline-offset: 3px;
}


.hkux-hero__control i {
    font-size: 13px;
}


/* ============================================================
   PAUSE
============================================================ */

.hkux-hero__pause {
    width: 50px;

    height: 50px;

    background: #214AAB;

    border-color: #214AAB;

    color: #ffffff;
}


.hkux-hero__pause:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #18356f;
}


/* ============================================================
   INDICATORS
============================================================ */

.hkux-hero__indicators {
    position: absolute;

    left: 40px;

    bottom: 22px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 6px;
}


.hkux-hero__indicator {
    width: 38px;

    height: 4px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background: rgba(255,255,255,.35);

    cursor: pointer;

    transition:
        width .3s ease,
        background-color .3s ease;
}


.hkux-hero__indicator:hover {
    background: rgba(255,255,255,.7);
}


.hkux-hero__indicator--active {
    width: 78px;

    background: #A3BBF3;
}


/* ============================================================
   OWL DOTS
   Hide default Owl controls because custom controls used
============================================================ */

.hkux-hero__slider .owl-dots {
    display: none;
}


.hkux-hero__slider .owl-nav {
    display: none;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1199.98px) {

    .hkux-hero__slide {
        min-height: 620px;
    }


    .hkux-hero__content {
        padding:
            0 30px
            34px;
    }



    .hkux-hero__indicators {
        left: 30px;

        bottom: 20px;
    }

}


/* ============================================================
   TABLET / SMALL LAPTOP
============================================================ */

@media (max-width: 991.98px) {

    .hkux-hero__slide {
        min-height: 560px;
    }


    .hkux-hero__content {
        padding:
            0 24px
            32px;
    }


    .hkux-hero__content-inner {
        align-items: flex-end;

        gap: 20px;
    }


    .hkux-hero__title {
        font-size: 22px;

        line-height: 1.35;
    }


    .hkux-hero__date {
        margin-top: 13px;

        font-size: 14px;
    }


    .hkux-hero__control {
        width: 42px;

        height: 42px;
    }


    .hkux-hero__pause {
        width: 45px;

        height: 45px;
    }


    .hkux-hero__indicators {
        left: 24px;

        bottom: 18px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .hkux-hero__slide {

        /*
         * 16:9 style mobile hero
         */

        min-height: 480px;

    }


    .hkux-hero__image-element {
        object-position: center center;
    }


    .hkux-hero__gradient {

        background:
            linear-gradient(
                180deg,
                rgba(5,15,38,0) 20%,
                rgba(5,15,38,.12) 40%,
                rgba(5,15,38,.72) 68%,
                rgba(5,15,38,.98) 100%
            );

    }


    .hkux-hero__content {

        padding:
            0 18px
            28px;

    }


    .hkux-hero__content-inner {

        display: block;

    }


    .hkux-hero__title {

        font-size: 19px;

        line-height: 1.4;

    }


    .hkux-hero__date {

        margin-top: 12px;

        font-size: 13px;

    }


    /*
       Controls move to bottom-right
    */

    .hkux-hero__controls {

        margin-top: 18px;

        justify-content: flex-end;

    }


    .hkux-hero__control {

        width: 40px;

        height: 40px;

    }


    .hkux-hero__pause {

        width: 44px;

        height: 44px;

    }


    .hkux-hero__indicators {

        left: 18px;

        bottom: 18px;

        max-width: calc(
            100% - 170px
        );

        overflow: hidden;

    }


    .hkux-hero__indicator {

        width: 24px;

        flex-shrink: 0;

    }


    .hkux-hero__indicator--active {

        width: 48px;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 575.98px) {

    .hkux-hero__slide {

        min-height: 430px;

    }


    .hkux-hero__content {

        padding:
            0 15px
            22px;

    }


    .hkux-hero__title {

        font-size: 17px;

    }


    .hkux-hero__date {

        font-size: 12px;

    }


    .hkux-hero__controls {

        gap: 6px;

    }


    .hkux-hero__control {

        width: 37px;

        height: 37px;

    }


    .hkux-hero__pause {

        width: 41px;

        height: 41px;

    }


    .hkux-hero__indicators {

        left: 15px;

        bottom: 16px;

    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-hero__image-element {

        transition: none !important;

        transform: none !important;

    }

}