/* HERO CAROUSEL */
.hero-houm {
    padding: 0 !important;
    background-color: transparent;
    margin-left: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

.carousel-inner {
    height: 100%;
}


.logo-houm-white {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.houm-scroll-down {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    max-width: 30px;

    @media (min-width:992px) {
        max-width: 50px;
        width: 100%;
        height: 50px;
    }
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(100px);
    }
}

.houm-scroll-down #wheel {
    animation: scroll ease 1.5s infinite;
}

@media (min-width: 992px) {
    .logo-houm-white {

        opacity: 1;
        position: absolute;
        top: 50%;
        /* Vertically centered */
        left: 50%;
        /* Horizontally centered */
        transform: translate(-50%, -50%);
        /* Fine-tune to center exactly */
        z-index: 9;
    }

    .logo-houm-white.logo-houm-white-scroll {
        opacity: 0;
        z-index: 6;
    }
}

.hero-houm .item-1,
.hero-houm .item-2,
.hero-houm .item-3 {
    height: 30rem;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw !important;
    /* Ensures each item takes up the full width */
    left: 0 !important;
    /* Aligns items to the left edge */
}

@media (min-width: 992px) {

    .hero-houm .item-1,
    .hero-houm .item-2,
    .hero-houm .item-3 {
        height: 70rem;
        /* Greater height on large screens */
    }
}

/* Hero Text */
.hero-houm-text {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 12% 0 14%;
    opacity: 0.8;
    z-index: 8;
    /* The text should be above the background */
    position: absolute;
    /* Change to absolute to ensure it is above */
    right: 0 !important;
}

/* Container for image and video behind */
.detras {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 3;
    /* Ensures the background images and video are behind */
}

.detras-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 999999;
    /* Ensures the image and video occupy the full space without distortion */
}

.detras-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Ensures the image and video occupy the full space without distortion */
}

/* Adjustments for the video in the hero section */
.hero-houm-video video,
.hero-houm-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the video covers the background */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

@media (min-width: 992px) {
    .hero-houm-text {
        width: 45%;
        padding: 0 10% 0 10%;
    }


}

.hero-houm-title {
    color: #dfeb82;
    font-size: 30px !important;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.hero-houm-subtitle {
    color: white;
    font-size: 35px !important;
}

.hero-houm-subtitle::after {
    background-color: #dfeb82;
    font-size: 3rem;
    content: "";
    display: flex;
    height: 5px;
    width: 150px;
    margin-top: 3rem;
}

@media (min-width: 992px) {
    .hero-houm-title {
        font-size: 3.2rem;
        /* Increased the title font size */
    }

    .hero-houm-subtitle {
        font-size: 4rem;
        /* Increased the subtitle font size */
    }
}

/* Carousel item adjustments */
.carousel-item {
    height: 100%;
    min-height: 45vh;
    width: 100vw !important;
    left: 0 !important;
}

.carousel-item-img {
    z-index: 5;
}

@media (min-width: 992px) {
    .carousel-item {
        height: 80vh;
        position: relative;
    }

    .carousel-item::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
    }
}

/* Carousel controls */
.carousel-control-next-icon,
.carousel-control-prev-icon {
    display: block;
    width: 5rem;
    height: 5rem;
    position: relative;
    filter: drop-shadow(0 0px 5px rgba(0, 0, 0, 1));
}

.carousel-control-next,
.carousel-control-prev {
    z-index: 11 !important;
}


/** HERO VIDEO **/

.hero-houm-video {
    height: 100%;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-houm-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.fade-load {
    opacity: 0;
    animation: fadeLoad 2s ease-in-out forwards;
}


@keyframes fadeLoad {
    0% {
        opacity: 0;
        transform: translateY(20px);
        /* Slight upward movement */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* houm new */
.wrap-hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media (width > 768px) {
        flex-direction: row;
    }
}

.video-bg,
.hero-img-bg {
    position: relative;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    background-size: cover;
}

.hero-img-bg {
    object-fit: cover;
}

video {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.video-container {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    overflow: hidden;
    top: 0;
    right: 0;
    position: relative;

    &>a::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.25);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;

    }

    & h2 {
        z-index: 4;
        font-size: 3rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-transform: uppercase;
        font-family: 'Lato', Arial, Helvetica, sans-serif;
        margin: 0 !important;
        width: 90%;
        font-weight: 300;
        text-align: center;


        @media (width>=768px) {
            font-size: 4rem;
        }

        & p {
            margin: 0 !important;
            color: #f9f7f2;
            font-weight: 300;

            & a {
                color: #f9f7f2;
                text-decoration: none;
                font-weight: 700;
                display: block;
                margin-top: 1.5rem;
            }
        }

        &::after,
        &::before {
            display: none;
        }
    }

    &:nth-child(1) {
        & h2 {
            top: 70%;

            @media (width >=768px) {
                top: 50%;
            }
        }
    }
}