html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('/assets/images/paper-bg.jpg');
    background-position: center top;
    background-repeat: repeat;
    background-size: contain;
    scroll-behavior: smooth;
}

body {
    /* top: 110px; */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gooey-selected {
    -webkit-tap-highlight-color: transparent;
}

/*-----header-----*/

.header {
    /* background: linear-gradient(#2d2d2d00080, transparent); */
    box-shadow: none;
}

.header .top-menu {
    position: static;
}

/* .header.active .top-menu {} */

/* .header .top-menu .menuLeft a img:nth-child(2) {
    opacity: 0;
}

.header.active .top-menu .menuLeft a img:nth-child(2) {
    opacity: 1;
} */

.header .top-menu .menuLeft h2 {
    padding: 40px;
    color: #2d2d2d;
}

@media only screen and (max-width: 1060px) {
    .header .top-menu .menuLeft h2 {
        display: none;
    }
}

.word {
    color: #2d2d2d;
}

.header.active .top-menu div .word {
    color: #2d2d2d;
}

.header.active .top-menu div .word:hover {
    color: #ec1c23;
}

/* #btnMenuWrap {
    border: 2px solid #2d2d2d;
} */

#btn-menu span {
    background: #fff;
}

.menuRight a {
    color: #2d2d2d;
}

/*-----background video-----*/

/* .videoWrapper {
    position: relative;
    width: auto;
    max-width: 1920px;
    height: calc(100% - 210px);
    background-image: url(/assets/videos/cover-loop.mp4);
    background-repeat: repeat;
    background-position: center;
}

video {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    height: 100%;
    object-fit: cover;

}

.bgVideo {
    display: none;
}

@media only screen and (min-width: 768px) {
    .bgVideoMob {
        display: none;
    }

    .bgVideo {
        display: flex;
    }
} */
/* YOUR EXISTING CODE - UNCHANGED */
.videoWrapper {
    top: 110px;
    position: relative;
    /* width: fit-content; */
    max-width: 1920px;
    height: calc(100% - 220px);
    margin: 0 auto;
    /* Center the wrapper */
    /* overflow-x: visible; */
}

@media (min-aspect-ratio: 0/999) {
    .videoWrapper {
        height: calc(100% - 220px);
    }
}

.desktopVideoContainer {
    display: none;
    position: relative;
    top: 0;
    left: 50%;
    /* Center the container */
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    /* Let content determine width */
    /* overflow: visible; */
}

video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}


.desktopVideoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-main {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: contain;
    /* Maintain aspect ratio */
    /* min-width: fit-content; */
    /* At least viewport width */
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.video-side {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    /* Same dimensions as main video */
    z-index: 1;
}

.video-side.left {
    right: calc(100% - 1px);
}

.video-side.right {
    left: 100%;
}


.bannerWrapper {
    left: 50%;
    position: absolute;
    width: 100vw;
    height: fit-content;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bannerWrapper img {
    display: block;
    width: calc(100% - 40px);
    max-width: 800px;
}

.bannerWrapper .bannerBtn {
    position: absolute;
    top: 42.5%;
    width: auto;
    color: #ec1c23;
    background-color: #fff;
    padding: 0 clamp(0px, 3vw, 25px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 25px;
    cursor: pointer;
}

.bannerWrapper .bannerBtn img {
    width: 0;

}

.bannerWrapper .bannerBtn:hover img {
    width: clamp(0px, 2.4vw, 20px);
    font-size: clamp(0px, 3.22vw, 27px);
    padding-left: clamp(0px, 3.6vw, 30px);
}

.bgVideo.ar9-16 {
    display: block;
}

.bgVideo.ar21-9,
.bgVideo.ar16-9,
.bgVideo.ar3-2,
.bgVideo.ar1-1,
.bgVideo.ar2-3 {
    display: none;
}

.bannerWrapper {
    top: calc((100vh - 220px) * 0.45 + 110px);
}

.bannerWrapper .bannerBtn {
    font-size: 2vh;
    height: 4vh;
    padding: 0 3vh;
}

.bannerWrapper .bannerBtn:hover img {
    width: 1.5vh;
    padding-left: 1.5vh;
}

@media (min-aspect-ratio: 9/16) {
    .bgVideo.ar2-3 {
        display: block;
    }

    .bgVideo.ar21-9,
    .bgVideo.ar16-9,
    .bgVideo.ar3-2,
    .bgVideo.ar1-1,
    .bgVideo.ar9-16 {
        display: none;
    }

    .bannerWrapper {
        top: calc((100vh - 220px) * 0.46 + 110px);
    }

    .bannerWrapper .bannerBtn:hover img {
        width: 1.5vh;
        padding-left: 1.5vh;
    }
}


@media (min-aspect-ratio: 7/8) {
    .bgVideo.ar1-1 {
        display: block;
    }

    .bgVideo.ar21-9,
    .bgVideo.ar16-9,
    .bgVideo.ar3-2,
    .bgVideo.ar2-3,
    .bgVideo.ar9-16 {
        display: none;
    }

    .bannerWrapper {
        top: calc((100vh - 220px) * 0.46 + 110px);
    }

    .bannerWrapper .bannerBtn:hover img {
        width: 1.2vh;
        padding-left: 1.2vh;
    }
}

@media (min-aspect-ratio: 8/7) {
    .bgVideo.ar3-2 {
        display: block;
    }

    .bgVideo.ar21-9,
    .bgVideo.ar16-9,
    .bgVideo.ar1-1,
    .bgVideo.ar2-3,
    .bgVideo.ar9-16 {
        display: none;
    }

    .bannerWrapper {
        top: calc((100vh - 220px) * 0.41 + 110px);
    }

    .bannerWrapper .bannerBtn:hover img {
        width: 1.5vh;
        padding-left: 1.5vh;
    }
}

@media (min-aspect-ratio: 4/3) {
    .bgVideo.ar16-9 {
        display: block;
    }

    .bgVideo.ar21-9,
    .bgVideo.ar3-2,
    .bgVideo.ar1-1,
    .bgVideo.ar2-3,
    .bgVideo.ar9-16 {
        display: none;
    }

    .bannerWrapper {
        top: calc((100vh - 220px) * 0.44 + 110px);
    }

    .bannerWrapper .bannerBtn:hover img {
        width: 1.5vh;
        padding-left: 1.5vh;
    }
}

@media (min-aspect-ratio: 16/8) {
    .bgVideo.ar21-9 {
        display: block;
    }

    .bgVideo.ar16-9,
    .bgVideo.ar3-2,
    .bgVideo.ar1-1,
    .bgVideo.ar2-3,
    .bgVideo.ar9-16 {
        display: none;
    }

    .bannerWrapper {
        top: calc((100vh - 220px) * 0.46 + 110px);
    }

    .bannerWrapper .bannerBtn:hover img {
        width: 1.5vh;
        padding-left: 1.5vh;
    }
}

@media only screen and (max-height:500px) {
    body {
        height: 500px;
        overflow-y: auto;
    }

    .videoWrapper {
        height: 500px;
    }

    .bannerWrapper {
        top: clamp(0px, calc(110px + 81vw), 337px);
    }

    .bannerWrapper .bannerBtn {
        font-size: 16px;
        padding: 0 20px;
        height: 22px;
        top: 0;
        transform: translateY(0);
    }
}

@media only screen and (max-height:500px) and (min-aspect-ratio: 9/16){
    .bannerWrapper {
        top: clamp(0px, calc(110px + 69vw), 341px);
    }
}

@media only screen and (max-height:500px) and (min-aspect-ratio: 7/8){
    .bannerWrapper {
        top: clamp(0px, calc(110px + 45vw), 342px);
    }
}

@media only screen and (max-height:500px) and (min-aspect-ratio: 8/7){
    .bannerWrapper {
        top: clamp(0px, calc(110px + 27vw), 999px);
    }
}

@media only screen and (max-height:500px) and (min-aspect-ratio: 4/3){
    .bannerWrapper {
        top: clamp(0px, calc(110px + 25vw), 335px);
    }
}

@media only screen and (max-height:500px) and (min-aspect-ratio: 16/8){
    .bannerWrapper {
        top: clamp(0px, calc(110px + 20vw), 346px);
    }
}

/*-----footer-----*/

.footer {
    top: 110px;
    position: inherit;
    /* background: linear-gradient(transparent, #2d2d2d00080); */
    max-width: 1920px;
    bottom: 0;
}

@media only screen and (max-width: 1024px) {
    .footer {
        align-items: center;
    }
}

.footer .footerRight .footerContainer a {
    color: #2d2d2d;
    border-right: 1px solid #2d2d2d;
}

.footer .footerRight .footerContainer a {
    color: #2d2d2d;
    font-size: 12px;
}

.footer .footerRight .footerContainer:not(:last-child) a:hover {
    color: #ec1c23;
}