.block-hero-homepage {
    position: relative;
}

.hero-slider {
    cursor: pointer;
}

.lazy-video {
  opacity: 0;
}
.lazy-video.loaded {
  opacity: 1 !important;
  transition: opacity 1s ease;
}

/* Solution of loading effect */
.block-hero-homepage .default-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.block-hero-homepage .default-bg:after {
    content: '';
    background: linear-gradient(-90deg, rgba(39, 26, 43, 0) 0%, rgba(39, 26, 43, 0.4) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.block-hero-homepage .default-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slider {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.hero-slider.slick-initialized {
    display: block;
    visibility: visible;
    opacity: 1;
}
/***/

.hero-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.hero-slider .hero-homepage-container {
    position: relative;
    height: 28.001rem;
}

.hero-slider .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-slider .hero-image img,
.hero-slider .hero-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slider .hero-image img {
    object-position: center top;
}

.hero-slider .hero-wrapper-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    /* background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); */
    background: linear-gradient(-90deg, rgba(39, 26, 43, 0) 0%, rgba(39, 26, 43, 0.4) 100%);
}
/* 
.hero-slider .hero-homepage-container:nth-child(2n) .hero-wrapper-container {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.hero-slider .hero-homepage-container:nth-child(3n) .hero-wrapper-container {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
} */

.hero-slider .hero-wrapper-container .container {
    position: relative;
    max-width: calc(1320px + var(--gap));
}

.hero-slider .hero-wrapper-container .container>* {
    position: relative;
}

.hero-slider .hero-wrapper-container .toptitle {
    margin: 0 0 0.25rem;
}

.hero-slider .hero-wrapper-container .title {
    margin: 0;
    width: 45%;
}

.hero-slider .hero-wrapper-container .btn {
    margin-top: 1.5rem;
}

.hero-slider .slick-dots {
    bottom: 2.478rem;
}

.hero-slider .hero-wrapper-container .arrows-control {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-slider .slick-prev {
    display: none !important;
}

.hero-slider .slick-next {
    right: calc(var(--gap) / 2);
}

/* Responsive */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
    .hero-slider .hero-wrapper-container .title {
        width: 58%;
    }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
    .hero-slider .hero-wrapper-container .title {
        width: 58%;
    }
}

@media only screen and (max-width: 767px) {
    .hero-slider .hero-homepage-container {
        height: 16.213rem;
    }

    .hero-slider .hero-wrapper-container .title {
        width: 100%;
    }

    .hero-slider .slick-dots {
        bottom: 1rem;
    }
}

@media only screen and (max-width: 575px) {
    .hero-slider .hero-image {
        position: relative;
        height: 10rem;
    }
    .hero-slider .hero-image::before {
        content: "";
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
        position: absolute;
    }

    .hero-slider .hero-homepage-container {
        height: auto;
    }

    .hero-slider .hero-wrapper-container,
    .hero-slider .hero-homepage-container:nth-child(2n) .hero-wrapper-container,
    .hero-slider .hero-homepage-container:nth-child(3n) .hero-wrapper-container {

        background: var(--color-primary);
    }

    .hero-slider .hero-wrapper-container .container {
        padding: 1rem 1rem 3.25rem;
    }


    .hero-slider .hero-wrapper-container .btn {
        border-radius: 0.313rem;
        border: 0.094rem solid var(--color-white);
        margin-top: 0;
    }

    .hero-slider .toptitle {
        font-size: 1rem;
        letter-spacing: 0.05rem;
        line-height: 1.375rem;
        margin: 0 0 0.125rem !important;
        font-weight: var(--font-weight-semi-bold);
    }

    .hero-slider .hero-wrapper-container .title {
        font-size: 2rem;
        line-height: 2.5rem;
        letter-spacing: 0;
        font-weight: var(--font-weight-semi-bold);
        margin: 0 0 1rem;
    }
    /* Slick dots for slider mobile */
    .hero-slider .slick-dots li button:before {
        background: var(--color-white);
    }

    .hero-slider .slick-dots li.slick-active button:before {
        background: var(--color-dark-primary);
    }

    .hero-slider .slick-dots li,
    .hero-slider .slick-dots li,
    .hero-slider .slick-dots li button:before {
        width: 6.625rem;
    }

    .hero-slider .slick-dots li {
         margin: 0 0.125rem;
    }
}