/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


.revi-hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 120px 40px 40px 40px;
    box-sizing: border-box;
    overflow: hidden;
}


.revi-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
}


/* YouTube / Vimeo background embed */
.revi-hero-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.revi-hero-embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    border: 0;
}

/* Vimeo background mode has no chrome, so its frame renders 1:1 (sharpest).
   YouTube overlays a title bar and end-screen links, so its frame is oversized
   slightly to push them outside the hero. Sizing the iframe up - rather than
   transform: scale() - avoids the resampling blur that scaling causes. */
.revi-hero-embed--youtube iframe {
    width: 118vw;
    height: 66.375vw;
    min-width: 209.78vh;
    min-height: 118vh;
}

.revi-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* ==========================================
   Mobile Responsiveness (Under 768px)
   ========================================== */
@media (max-width: 767px) {
    .revi-hero-video,
    .revi-hero-embed {
        display: none !important;
    }
  
    .revi-hero-container {
        height: 100vh;
        min-height: 100vh;
        padding: 80px 20px 30px 20px;
    }
}