/* Intro Video
-------------------------------------------------------------------*/
.intro-video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

@media screen and (max-width: 993px) {
    .intro-video {
        height: 400px;
    }
}

#intro-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-video .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.video-wrap {
    z-index: -100;
}

.custom-video {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/* Hero Text
-------------------------------------------------------------------*/
.hero-section h1 {
    color: var(--white);
    font-size: 6.3rem;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-family: var(--ff-default);
    text-shadow: 4px 4px 14px rgba(0, 0, 0, 0.3);
}

.hero-section .ff-fancy {
    font-family: var(--ff-fancy);
    font-weight: normal;
}

@media screen and (max-width: 1400px) {
    .hero-section h1 {
        font-size: 7.0rem;
    }
}

@media screen and (max-width: 1199px) {
    .hero-section h1 {
        font-size: 6.8rem;
        max-width: 62%;
    }
}

@media screen and (max-width: 991px) {
    .hero-section h1 {
        font-size: 5.5rem;
        max-width: 68%;
    }
}

@media screen and (max-width: 767px) {
    .hero-section h1 {
        font-size: 5rem;
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .hero-section h1 {
        font-size: 4rem;
        max-width: 100%;
    }
}