.home-background {
    margin-top: -8.5rem;
    padding-bottom: 5rem;
}

/*
 * Oculta el botón de play superpuesto en videos en navegadores WebKit (Safari, Chrome)
 */
.home-background video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

/* Opcional: Oculta todos los controles si el anterior no es suficiente */
.home-background video::-webkit-media-controls {
    display: none !important;
}

.home-background video {
    width: 94vw;
    height: 70vh;
    object-fit: cover;
    object-position: center center;
    border-radius: 0 0 25px 25px;
    margin-left: 2.5vw;
    pointer-events: none;
}

.home-float-image {
    position: absolute;
    top: 24vh;
    left: 12vw;
    width: 100vw;
    height: 65vh;
    max-width: 40rem;
    background-position: center left;
    background-size: contain;
    background-repeat: no-repeat;
    animation: float 10s ease-in-out infinite;
}

/* Animación */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    /* sube 15px */
    100% {
        transform: translateY(0px);
    }
}

.home-carousel {
    position: absolute;
    top: 25vh;
    right: 5vw;
}

.home-carousel h1 {
    color: #e1e1e1;
    font-weight: 600;
}

.home-carousel .carousel-inner {
    width: 26rem;
}

.home-carousel .carousel-item {
    width: 24rem;
    height: 12rem;
}

@media (max-width: 991.98px) {
    .home-background video {
        width: 100%;
        margin-left: 0vw;
    }

    .home-float-image {
        top: 28vh;
        left: 3vw;
        width: 60vw;
        height: 56vh;
    }
}

@media (max-width: 500px) {
    .home-carousel {
        top: 17vh;
    }
}
@media (max-width: 768px) {
    .home-carousel {
        right: 0vw;
    }

    .home-carousel .carousel-inner {
        width: 22rem;
    }

    .home-carousel .carousel-item {
        width: 20rem;
    }
}

@media (max-width: 1200px) {
    .home-background {
        padding-bottom: 5rem;
    }
}

@media (min-width: 1200px) {
    .home-float-image {
        top: 20vh;
    }

    .home-carousel {
        right: 15vw;
    }

    .home-carousel h1 {
        font-size: 3rem;
    }

    .home-carousel .carousel-inner {
        width: 32rem;
    }

    .home-carousel .carousel-item {
        width: 29rem;
        height: 14rem;
    }

}

@media (min-width: 1400px) {
    .home-background {
        padding-bottom: 7rem;
    }

    .home-carousel h1 {
        font-size: 4rem;
    }

    .home-carousel .carousel-inner {
        width: 42rem;
    }

    .home-carousel .carousel-item {
        width: 40rem;
        height: 20rem;
    }
}