/*=========================================
  HERO SECTION
=========================================*/
.roister-hero-section{
    position: relative;
    overflow: hidden;
    height: 800px;
    display: flex;
    align-items: center;
}

/*=========================================
  VIDEO BACKGROUND
=========================================*/
.hero-bg-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-bg-video video{
    position: absolute;
    top: 50%;
    left: 50%;

    /* Always cover the hero */
    min-width: 100%;
    min-height: 100%;

    width: auto;
    height: auto;

    object-fit: cover;
    transform: translate(-50%, -50%);
    display: block;
    pointer-events: none;
}

/*=========================================
  DARK OVERLAY
=========================================*/


/*=========================================
  CONTENT ABOVE VIDEO
=========================================*/
.roister-hero-section .container,
.roister-hero-section .hero-shape-1,
.roister-hero-section .hero-shape-2,
.roister-hero-section .hero-shape-3,
.roister-hero-section .book-table-content{
    position: relative;
    z-index: 2;
}

/*=========================================
  RESPONSIVE HEIGHT
=========================================*/
@media (max-width:1600px){
    .roister-hero-section{
        min-height:550px;
    }
}

@media (max-width:1399px){
    .roister-hero-section{
        min-height: 800px;
    }
}

@media (max-width:1199px){
    .roister-hero-section{
        min-height:550px;
    }
}

@media (max-width:991px){
    .roister-hero-section{
        min-height:550px;
    }
}

@media (max-width:767px){
    .roister-hero-section{
        min-height:550px;
    }
}

@media (max-width:575px){
    .roister-hero-section{
        min-height:550px;
    }
}

@media (max-width:480px){
    .roister-hero-section{
        min-height:450px;
    }
}

/*=========================================
  REDUCED MOTION
=========================================*/
@media (prefers-reduced-motion: reduce){

    .hero-bg-video video{
        display:none;
    }

    .hero-bg-video{
        background-image: var(--hero-poster, none);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}