﻿* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 110;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    overflow:hidden;
}

.hero2 {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 60px;
    color: #fff;
}


.section {
    position: absolute;
    top: calc(200vh + 80px);
    position: relative;
    z-index:200;
}

.hero-content {
 
    background-color: black;
    padding-bottom: 70px;
}

.content {
    width: 90vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}


.images-container {
    padding-top: 60px;
}

html {
    overflow: scroll;
    overflow-x: hidden;
}

.move-section {
    transition: left 0.4s linear, bottom 0.4s linear, transform 0.4s linear;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    
}

::-webkit-scrollbar {
    width: 0; /* Remove scrollbar space */
    background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}



/* Make the iframe keep an aspect ratio, and
position it in the middle of its parent wrapper*/



.iframe-wrapper {
    height: calc(max(calc(100vw / 16), calc(100vh / 9)) * 9 + 400px);
    position: absolute;
    width: calc(max(calc(100vw / 16), calc(100vh / 9)) * 16 + 200px);
}

.iframe-element{
    position: absolute;
    width: 100%;
    height: 100%;
}

.dark-overlay {
    transition-duration: 1s;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, .75);
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-flex {
    justify-content: center;
}


.watch-more-link{
    opacity:0;
    transition-duration: 1s;
    position:absolute;
    z-index:900;
    bottom: 60px;
    right: 120px;
}


.watch-more-link-2 {
    position: absolute;
    z-index: 900;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}