* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.hero {
    width: 100%;
    height: 100vh;
    position: relative;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    color:white;
}

#header {
    height: 80px;
}

#showcase {
    height: 1000px;
}

#demo {
    height: 900px;
}

#about {
    height: 600px;
}

#contact {
    height: 300px;
}

#privacypolicy {
    height: 1700px;
}

#footer {
    position: absolute;
    width: 100%;
    height: 80px;
    background-color: rgba(12,12,12, 1);
}

.bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.explore-button {
    position: absolute;
    top: 5%;
    right: 5%;
}

.explore-button a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    border: 2px solid #fff;
    padding: 14px 70px;
    border-radius: 50px;
}

.explore-button a:hover {
    border: 2px solid #834ac3;
    color: #834ac3;
}

.navbar {
    top: 0px;
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: rgba(12,12,12, 1);
    z-index: 10;
}

.navbar-mid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navbar-mid img {
    vertical-align: middle;
    width: 60px;
}

.navbar-mid b {
    color: #834ac3;
    font-size: 32px;
    vertical-align: middle;
    padding: 8px;
}

.navbar-left {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(-5%, -50%);
}

.navbar-left ul li {
    display: inline-block; 
    margin-right: 50px;
}

.navbar-left ul li a {
    text-decoration: none;
    color: white;
    font-size: 15px;
}

.navbar-left ul li a:hover {
    color: #834ac3;
}

.navbar-right {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(2%, -50%);
}

.navbar-right ul li {
    display: inline-block; 
    margin-right: 20px;
}

.navbar-right ul li a img{
    width: 25px;
}

.footer h1 {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 60%;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.showcase {
    position: absolute;
    width: 80%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.showcase-banner {
    width: 100%;
    height: 40%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

.showcase-left {
    width: 50%;
    height: 60%;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.showcase-right {
    width: 50%;
    height: 60%;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.showcase-banner img {
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

.showcase-title {
    color: #fff;
    position: absolute;
    top: 100px;
}

.showcase-description {
    color: #fff;
    width: 100%;
    height: 100px;
    position: absolute;
    top: 160px;
}

.showcase-buttons {
    width: 100%;
    position: absolute;
    top: 420px;
}

.showcase-buttons ul li {
    display: inline-block; 
    margin-right: 30px;
}

.showcase-buttons ul li a {
    width: 400px;
    border: 2px solid #fff;
    padding: 14px 14px;
    border-radius: 5px;

    text-decoration: none;
    color: white;
    font-size: 15px;
}

.showcase-buttons ul li .showcase-buttons-mint {
    border: 2px solid orange;
    color: orange;
}

.showcase-buttons ul li a:hover {
    border: 2px solid blueviolet;
    color: blueviolet;
}

.showcase-buttons ul li .showcase-buttons-mint:hover {
    border: 2px solid yellow;
    color: yellow;
}

.showcase-right iframe {
    aspect-ratio: 16/9;
    width: 90%;
    position: absolute;
    right: 30%;
    top: 50%;
    transform: translate(30%, -50%);
}

.demo-unity {
    width: 700px;
    height: 700px;
    
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

#demo p {
    color: white;
    text-align: center;
}

.demo-unity iframe {
    width: 100%;
    height: 100%;
    border: none;
}


.team {
    position: absolute;
    width: 100%;
    height: 500px;
}

.team-title {
    width: 100%;
    position: absolute;
    color: white;
    text-align: center;

    top: 20px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.team-description {
    width: 60%;
    position: absolute;
    color: white;
    text-align: center;

    top: 80px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.team-members {
    width: 90%;
    height: 200px;
    position: absolute;
    top: 230px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.team-members ul li {
    display: inline-block; 
    margin-right: 50px;

    width: 150px;
}

.team-members ul li img{
    width: 100%;
}

.team-members ul li p{
    color: #fff;;
    font-size: 14px;
}


.contact {
    position: absolute;
    width: 100%;
    height: 300px;
}

.contact-title {
    width: 100%;
    position: absolute;
    color: white;
    text-align: center;

    top: 20px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.contact-description {
    width: 60%;
    position: absolute;
    color: white;
    text-align: center;

    top: 80px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.privacypolicy-holder {
    position: absolute;
    width: 80%;
    height: 95%;
    left: 50%;
    transform: translate(-50%, 0%);
}

.privacypolicy-holder h1 {
    width: 100%;
    position: absolute;
    color: white;
    text-align: center;

    top: 30px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.privacypolicy-holder p {
    width: 80%;
    position: absolute;
    color: white;

    top: 100px;
    left: 50%;
    transform: translate(-50%, 0%);
}

.privacypolicy-holder .policy {
    position: absolute;
    background-color: rgba(12,12,12, .9); 
    width: 80%; 

    left: 50%;
    transform: translate(-50%, 0%);
}

.privacypolicy-holder .policy h1 {
    font-size: 18px;
    text-align: start;
}

.privacypolicy-holder .policy p {
    top: 70px;
    width: 100%;
    font-size: 14px;
    text-align: start;
}

@media (min-aspect-ratio: 16/9) {
    .bg-video {
        width: 100%;
        height: auto;
    }
}

.popup .overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 1;
    display: none;
}

.popup .content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #222;
    width: 900px;
    height: 500px;
    z-index: 2;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.popup .content .qr-playstore {
    position: absolute; 
    top: 45%;
    left: 35%;
    transform: translate(-65%, -55%);
}

.popup .content .badge-playstore {
    height: 70px;
    position: absolute;
    top: 80%;
    left: 35%;
    transform: translate(-65%, -20%);
}

.popup .content .qr-appstore {
    position: absolute;
    top: 45%;
    left: 65%;
    transform: translate(-35%, -55%);
}

.popup .content .badge-appstore {
    height: 70px;
    position: absolute;
    top: 80%;
    left: 65%;
    transform: translate(-35%, -20%);
}

.popup .close-btn {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background-color: #222;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

.popup.active .overlay {
    display: block;
}

.popup.popup.active .content {
    transition: all 300ms ease-in-out;
    transform: translate(-50%, -50%) scale(1);
}

@media (max-aspect-ratio: 16/9) {
    .bg-video {
        width: auto;
        height: 100%;
    }
}


@media only screen and (max-width: 480px) {
    /* Style for mobile devices of width 480*/
    .navbar {
        top: 0px;
        position: fixed;
        width: 100%;
        height: 60px;
        background-color: rgba(12,12,12, 1);
        z-index: 10;
    }

    #showcase {
        height: 1250px;
    }
    
    .navbar-mid {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }
    
    .navbar-mid img {
        vertical-align: middle;
        width: 40px;
    }
    
    .navbar-mid b {
        color: #834ac3;
        font-size: 30px;
        vertical-align: middle;
        padding: 8px;
    }

    .navbar-left {
        display: none;
    }

    .navbar-right {
        display: none;
    }


    /*SHOWCASE AREA*/
    .showcase {
        position: absolute;
        width: 80%;
        height: 100%;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .showcase-banner {
        width: 100%;
        height: 20%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .showcase-left {
        /*In mobile view, this left showcase will be shown on top*/
        width: 100%;
        height: 75%;
        position: absolute;
        left: 0px;
        top: 200px;
    }
    
    .showcase-right {
        /*In mobile view, this left showcase will be shown on the bottom*/
        width: 100%;
        height: 40%;
        position: absolute;
        right: 0px;
        top: 650px;
    }
    
    .showcase-banner img {
        height: 100%;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
    }
    
    .showcase-title {
        color: #fff;
        position: absolute;
        top: 0px;

        width: 100%;
        text-align: center;
    }
    
    .showcase-description {
        color: #fff;
        width: 100%;
        height: 100px;
        position: absolute;
        top: 50px;

        font-size: 15px;
    }
    
    .showcase-buttons {
        width: 10%;
        position: absolute;
        top: 750px;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    .showcase-buttons ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* center the buttons horizontally */
        align-items: center;
        max-width: 100%;
    }
    
    .showcase-buttons ul li {
        display: block;
        margin-bottom: 50px;
        margin-left: 100%;
    }
    
    .showcase-buttons ul li a {
        border: 2px solid #fff;
        padding: 14px 20px; /* add a fixed width to the buttons */
        border-radius: 5px;
    
        text-decoration: none;
        color: white;
        font-size: 15px;
        white-space: nowrap;
    }
    
    .showcase-buttons ul li .showcase-buttons-mint {
        border: 2px solid orange;
        color: orange;
        white-space: nowrap;
    }
    
    .showcase-buttons ul li a:hover {
        border: 2px solid blueviolet;
        color: blueviolet;
    }
    
    .showcase-buttons ul li .showcase-buttons-mint:hover {
        border: 2px solid yellow;
        color: yellow;
    }
    
    .showcase-right iframe {
        aspect-ratio: 16/9;
        width: 90%;
        position: absolute;
        right: 30%;
        top: 50%;
        transform: translate(30%, -50%);
    }

    .showcase-right iframe {
        aspect-ratio: 16/9;
        width: 90%;
        position: absolute;
        right: 30%;
        top: 50%;
        transform: translate(30%, -50%);
    }    

    #demo {
        height: 800px;
    }
    
    .demo-unity {
        width: 80%;
        height: 80%;
        
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
    }

    #demo p {
        color: white;
        text-align: center;
        font-size: 14px;
    }
    
    .demo-unity iframe {
        width: 100%;
        height: 100%;
        border: none;
    }    


    #about {
        height: 400px;
    }
    
    #contact {
        height: 600px;
    }
    
    .team {
        position: absolute;
        width: 100%;
        height: 500px;
    }
    
    .team-title {
        width: 100%;
        position: absolute;
        color: white;
        text-align: center;
    
        top: 20px;
        left: 50%;
        transform: translate(-50%, 0%);
    }
    
    .team-description {
        width: 80%;
        position: absolute;
        color: white;
        text-align: center;
    
        top: 80px;
        left: 50%;
        transform: translate(-50%, 0%);

        font-size: 15px;
    }
    
    .team-members {
        width: 90%;
        height: 200px;
        position: absolute;
        top: 230px;
        left: 50%;
        transform: translate(-50%, 0%);

        display: none;
    }

    .contact {
        position: absolute;
        width: 100%;
        height: 300px;
    }
    
    .contact-title {
        width: 100%;
        position: absolute;
        color: white;
        text-align: center;
    
        top: 20px;
        left: 50%;
        transform: translate(-50%, 0%);
    }
    
    .contact-description {
        width: 80%;
        position: absolute;
        color: white;
        text-align: center;
    
        top: 80px;
        left: 50%;
        transform: translate(-50%, 0%);

        font-size: 15px;
    }

    .popup .overlay {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.7);
        z-index: 1;
        display: none;
    }
    
    .popup .content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        background: #222;
        width: 90%;
        height: 300px;
        z-index: 2;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .popup .content .qr-playstore {
        position: absolute; 
        top: 45%;
        left: 35%;
        transform: translate(-65%, -55%);
        display: none;
    }
    
    .popup .content .badge-playstore {
        height: 70px;
        position: absolute;
        left: 50%;
        top: 35%;
        transform: translate(-50%, -65%);
    }
    
    .popup .content .qr-appstore {
        position: absolute;
        top: 45%;
        left: 65%;
        transform: translate(-35%, -55%);
        display: none;
    }
    
    .popup .content .badge-appstore {
        height: 70px;
        position: absolute;
        left: 50%;
        top: 65%;
        transform: translate(-50%, -35%);
    }
    
    .popup .close-btn {
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 20px;
        width: 30px;
        height: 30px;
        background-color: #222;
        color: #fff;
        font-size: 25px;
        font-weight: 600;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
    }
    
    .popup.active .overlay {
        display: block;
    }
    
    .popup.popup.active .content {
        transition: all 300ms ease-in-out;
        transform: translate(-50%, -50%) scale(1);
    }
  }