html,
body {
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    overflow: hidden !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-image: url('../images/Banner\ BGS.png');
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    position: fixed;
}

.video-bg video
{
    height: 100vh;
    width: 100vw; 
    position: absolute; 
    z-index: -1; 
    top: 0;
    object-fit: cover;
    /* display: none; */
}


.navbar
{
    z-index: 2;
}
/* Add this CSS to your website's stylesheet */
.popup-content3 iframe {
    width: 100%; /* Adjust the width as needed */
    height: 100%; /* Adjust the height as needed */
  }
  
  .popup-content3 iframe body {
    color: white !important; /* Set the desired text color */
  }
  
  .popup-content3 iframe a {
    color: white !important; /* Set the desired link color */
  }
/* 
*{
    outline: 1px solid red;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Controller Ext W01 Four";
}

p,
a,
li,
ul {
    font-family: "Controller Ext W01 Four";
}

nav {
    position: absolute;
    background-color: #020c1abd;
    height: 15vh;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.navbar-brand {
    width: 100% !important;
    text-align: center;
}

.navbar-brand {
    font-size: 30px;
}

.main {
    height: 100%;
    width: 100%;
    background-size: cover;
}

.nav-item li,
.nav-item a {
    color: #08bece !important;
    background-color: #071531;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-top: 30px;
    margin-top: 10px;
    border-radius: 16px;
}

.nav-item li:hover,
.nav-item a:hover {
    border: 1px solid #08bece;
    transition: 0ms;
}

.popup {
    display: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
}

.popup1 {
    left: calc(30.5% + 0.5%);
    top: 43%;
    padding: 0px !important;
}

.popup2 {
    left: 16.8%;
    top: 60.2%;
    padding: 0px !important;
    -webkit-clip-path: polygon(24% 17%, 17% 32%, 17% 87%, 30% 87%, 33% 82%, 73% 82%, 76% 87%, 80% 86%, 80% 44%, 69% 23%, 39% 23%, 36% 17%);
    clip-path: polygon(24% 17%, 17% 32%, 17% 87%, 30% 87%, 33% 82%, 73% 82%, 76% 87%, 80% 86%, 80% 44%, 69% 23%, 39% 23%, 36% 17%);
    width: 33.999% !important;
    height: 35% !important;
    transform: translate(-50%, -50%);
}

.popup2 video {
    width: 100% !important;
    height: 1000% !important;
    z-index: -2;
}

.popup3 {
    left: calc(20% + 30%);
    top: 50%;
    right: calc(10%);
    padding: 0px !important;
    width: 40%;
    height: 60%;
    overflow-y: scroll;
}

.popup4 {
    left: calc(10% + 42%);
    top: calc(40% + 10%);
    right: calc(0% + 0%);
    padding: 0px !important;
    width: 50%;
}

.popup4 img {
    width: 100%;
}

.popup5 {
    left: calc(10% + 30%);
    right: calc(0% + 0%);
    padding: 0px !important;
    width: 60%;
}

.popup6 {
    left: calc(0% + 50%);
    right: calc(0% + 0%);
    top: calc(0% + 50%);
    padding: 0px !important;
    width: 60%;
}

.popup1 {
    display: none;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 1;
    width: 60%;
    height: 600px;
    overflow-y: scroll;
}

.popup-content1 {
    margin-bottom: 10px;
}

.all-news .line-by-line-news {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.heading-and-short-description-news {
    width: 75%;
    color: white;
}

.date-for-news-with-align-title-and-desc {
    width: 25%;
    text-align: center;
    color: white;
}

.heading-and-short-description-news h2 {
    font-weight: 800;
}

.heading-and-short-description-news p {
    font-weight: 300;
}

.date-for-news-with-align-title-and-desc h6 {
    font-weight: 700;
}

.news-date-heading-para {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 25px;
    padding-bottom: 25px;
}

.popup-close1 {
    cursor: pointer;
    color: white;
    background-color: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 2%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-1 {
    cursor: pointer;
    color: white;
    background-color: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 6%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-1 i {
    margin-top: -10px;
}

.popup-max-1 {
    cursor: pointer;
    color: white;
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: #08bfce;
    right: 10%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close2 {
    cursor: pointer;
    color: white;
    background-color: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 2%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-2 {
    cursor: pointer;
    color: white;
    background-color: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 12%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-2 i {
    margin-top: -10px;
}

.popup-max-2 {
    cursor: pointer;
    color: white;
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: #08bfce;
    right: 22%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close3 {
    cursor: pointer;
    color: white;
    background: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 2%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-3 {
    cursor: pointer;
    color: white;
    background-color: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 8%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-3 i {
    margin-top: -10px;
}

.popup-max-3 {
    cursor: pointer;
    color: white;
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: #08bfce;
    right: 14%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close4 {
    cursor: pointer;
    color: white;
    background: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 2%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-4 {
    cursor: pointer;
    color: white;
    background-color: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 10%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-4 i {
    margin-top: -10px;
}

.popup-max-4 {
    cursor: pointer;
    color: white;
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: #08bfce;
    right: 18%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close5 {
    cursor: pointer;
    color: white;
    background: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 2%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-5 {
    cursor: pointer;
    color: white;
    background-color: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 10%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-5 i {
    margin-top: -10px;
}

.popup-max-5 {
    cursor: pointer;
    color: white;
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: #08bfce;
    right: 6%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close5 {
    cursor: pointer;
    color: white;
    background: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 2%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-close6 {
    cursor: pointer;
    color: white;
    background: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 2%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-6 {
    cursor: pointer;
    color: white;
    background-color: #08bfce;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 6%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-min-6 i {
    margin-top: -10px;
}

.popup-max-6 {
    cursor: pointer;
    color: white;
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: #08bfce;
    right: 10%;
    font-size: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup1.active {
    display: block;
}

.popup2 {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    z-index: 2;
    width: 450px;
}

.popup-trigger2,
.popup-trigger1,
.popup-trigger3,
.popup-trigger4,
.popup-trigger5 {
    height: 100% !important;
}

.popup-content2 {
    margin-bottom: 10px;
}

.popup-close2 {
    cursor: pointer;
}

.popup2.active {
    display: block;
}

.popup3 {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    z-index: 3;
}

.popup-content3 {
    margin-bottom: 10px;
    color: white !important;
}

.popup-close3 {
    cursor: pointer;
}

.popup3.active {
    display: block;
}

.popup4 {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    z-index: 4;
    height: 647px;
    overflow-y: scroll;
}

.popup-content4 {
    margin-bottom: 10px;
}

.popup-close4 {
    cursor: pointer;
}

.popup4.active {
    display: block;
}

.popup5 {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    z-index: 5;
}

.popup-content5 {
    margin-bottom: 10px
}

.popup-close5 {
    cursor: pointer;
}

.popup5.active {
    display: block;
}

.popup6 {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    z-index: 5;
    height: 600px;
    overflow-y: scroll;
}

.popup-content6 {
    margin-bottom: 10px;
}

.popup-close6 {
    cursor: pointer;
}

.popup6.active {
    display: block;
}

.popup {
    background-color: #183d63ec;
    outline: 2px solid #08bece;
    border: none;
}

.popup-content-row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.column-1,
.column-2 {
    width: 48%;
}

.single-column {
    width: 96%;
    padding: 60px;
}

.news-clip {
    margin-top: 15px;
    margin-bottom: 15px;
}

.cctv-footage {
    margin-bottom: 15px;
    margin-top: 15px;
}

.column-2 .heading h1 {
    font-weight: 900;
    text-transform: uppercase;
    color: white;
}

.column-2 .para p {
    color: #08bfce;
    text-transform: capitalize;
    font-weight: 200;
}

#popup1header1 {
    cursor: move;
    height: 60px;
    width: 100%;
    background-color: #071531;
    display: flex;
}

#popup2header2 {
    cursor: move;
    height: 60px;
    width: 100%;
    background-color: #071531;
    display: flex;
}


#popup3header3 {
    cursor: move;
    height: 60px;
    width: 100%;
    background-color: #071531;
    display: flex;
}

#popup4header4 {
    cursor: move;
    height: 60px;
    width: 100%;
    background-color: #071531;
    display: flex;
}

#popup5header5 {
    cursor: move;
    height: 60px;
    width: 100%;
    background-color: #071531;
    display: flex;
}

#popup6header6 {
    cursor: move;
    height: 60px;
    width: 100%;
    background-color: #071531;
    display: flex;
}

.full-screen {
    width: 100vw !important;
    height: 100vh !important;
    /* position: static !important; */
    margin-left: auto !important;
    margin-right: auto !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 6 !important;
}

.ScreenSingleCol {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
}

.mission-ticket-nav-item-center-button-of-web a,
.mission-ticket-nav-item-center-button-of-web a:hover {
    color: white;
    text-decoration: none;
}

.mission-ticket-nav-item-center-button-of-web {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px !important;
    font-size: 20px;
    position: absolute;
    top: 50%;
    text-align: center;
    border-radius: 50%;
    left: 46.7%;
    right: 0%;
    bottom: 0%;
    transform: translateY(-50%);
    background-color: #071531;
    height: 150px;
    width: 120px;
    color: white !important;
    border: 3px solid #08bece;
    opacity: 0;
}

/* FAQ CSS ( POPUP 6 ) */
.faq-section {
    padding-top: 25px;
    padding-bottom: 25px;
}

.faq-title p {
    padding: 0 190px;
    margin-bottom: 10px;
}

.faq {
    background: #FFFFFF;
    box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.faq .card {
    border: none;
    background: none;
    border-bottom: 1px dashed #071531;
}

.faq .card .card-header {
    padding: 0px;
    border: none;
    background: #246970;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.faq .card .card-header:hover {
    background: #1f464a;
    padding-left: 10px;
}

.faq .card .card-header .faq-title {
    width: 100%;
    text-align: left;
    padding: 0px;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 1px;
    text-decoration: none !important;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    padding-top: 20px;
    padding-bottom: 20px;
    color: white;
}

.faq .card .card-header .faq-title .badge {
    width: 20px;
    height: 20px;
    line-height: 14px;
    float: left;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    text-align: center;
    background: #08bece;
    color: #fff;
    font-size: 12px;
    margin-right: 20px;
}

.faq .card .card-body {
    padding: 30px;
    padding-left: 35px;
    padding-bottom: 16px;
    font-weight: 400;
    font-size: 16px;
    color: #6F8BA4;
    line-height: 28px;
    letter-spacing: 1px;
    border-top: 1px solid #F3F8FF;
}

.faq .card .card-body p {
    margin-bottom: 14px;
}

@media (max-width: 991px) {
    .faq {
        margin-bottom: 30px;
    }

    .faq .card .card-header .faq-title {
        line-height: 26px;
        margin-top: 10px;
    }
}

.FrequentlyAskedQuestions {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.image-icon {
    color: #08bece;
    filter: invert(65%) sepia(79%) saturate(1435%) hue-rotate(134deg) brightness(87%) contrast(94%);
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.faq-link-dimesions {
    width: 19% !important;
    height: 5% !important;
    position: absolute !important;
    top: 25% !important;
    left: 4% !important;
    cursor: pointer !important;
    opacity: 0 !important;
}


.research-base-news-link-dimesions {
    width: 550px !important;
    height: 120px !important;
    position: absolute !important;
    top: 14% !important;
    left: 3.8% !important;
    cursor: pointer !important;
    opacity: 0 !important;
}

.mission-team-link-dimesions {
    width: 20% !important;
    height: 50px !important;
    position: absolute !important;
    top: 73.4% !important;
    left: 75% !important;
    cursor: pointer !important;
    opacity: 0 !important;
}

.security-footage-link-dimesions {
    width: 22% !important;
    height: 15% !important;
    position: absolute !important;
    top: 53% !important;
    left: 5.5% !important;
    cursor: pointer !important;
    opacity: 0 !important;
}

.research-base-locations-link-dimesions {
    width: 550px !important;
    height: 230px !important;
    position: absolute !important;
    top: 1.1% !important;
    right: 1% !important;
    cursor: pointer !important;
    opacity: 0 !important;
}

.character-info {
    color: white;
}

.character-info p {
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}

.character-info h2 {
    font-size: 40px;
}

.heading-and-short-description-news {
    margin-right: 20px;
}

.heading-and-short-description-news p {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
}

.heading-and-short-description-news a,
.heading-and-short-description-news a:hover,
.heading-and-short-description-news a:visited {
    color: white;
    border-bottom: none;
    text-decoration: none;
}

.location {
    color: white;
    font-size: 25px;
    text-align: center;
}

.main-location {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 25px;
}

.popup1.active {
    z-index: 3;
    display: block;
}




/* ------------------------------------------------------------------------------------------------------------------------------------- */




/* NOT READY FOR MOBILE AND TABLET VIEW */

/* EVERYTHING HIDDEN ON MOBILE AND TABLET _____ START ____ */

/* @media(max-width:1024px)
{
    body{
    display: none;
}
} */

/* EVERYTHING HIDDEN ON MOBILE AND TABLET _____ END ____ */



/* ------------------------------------------------------------------------------------------------------------------------------------- */




/* TABLET VIEW STARTS FROM HERE  */

body {
    display: block !important;
}

@media (max-width:2000px) {

body
{
    display: none;
}

    /* body {
        display: block !important;
        width: 100%;
        height: 100vh;
    }

    /* .main
{
    display: none !important;
} */

    /* .main-tablet {
        display: block;
    }

    .main {
        display: none;
    }

    body {
        background-image: url('../images/Banner\ BGS.png');
        overflow-y: scroll !important;
    }

    .navbar {
        display: block !important;
    }

    nav
    {
        height: auto !important;
    }

    .navbar-toggler
    {   
        display: none;
    }

    .folder
    {
        background-color: #071531;
        min-height:5vh;
        width: 30%;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: 20px;
        border-radius: 25px;
        padding: 10px;
    }


    .ul-list-of-folder ul
    {
        margin-top: 50px;
    }

    .ul-list-of-folder ul li img
    {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .main-tablet li a, .main-tablet li a:hover, .main-tablet li a:visited
    {
        text-align: center;
        color: white;
        margin-top: 10px;
    }
    .popup6, .popup5, .popup4, .popup3, .popup1
    {
        width: 95%;
        top: 50%;
        left: 50%;
    }

    #popup6-tabheader6-tab {
        cursor: move;
        height: 60px;
        width: 100%;
        background-color: #071531;
        display: flex;
    }

    .popup-close6-tab {
        cursor: pointer;
        color: white;
        background: #08bfce;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 2%;
        font-size: 20px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .popup-close6-tab {
        cursor: pointer;
    }

    #popup5-tabheader5-tab {
        cursor: move;
        height: 60px;
        width: 100%;
        background-color: #071531;
        display: flex;
    }
    
    #popup4-tabheader4-tab {
        cursor: move;
        height: 60px;
        width: 100%;
        background-color: #071531;
        display: flex;
    }
    
    
    #popup3-tabheader3-tab {
        cursor: move;
        height: 60px;
        width: 100%;
        background-color: #071531;
        display: flex;
    }
    
    #popup2-tabheader2-tab {
        cursor: move;
        height: 60px;
        width: 100%;
        background-color: #071531;
        display: flex;
    }
    
    #popup1-tabheader1-tab {
        cursor: move;
        height: 60px;
        width: 100%;
        background-color: #071531;
        display: flex;
    }

    .popup2
    {
        display: none !important;
    } */
}

/* STILL MORE WORK NEED TO BE DONE */

/* TABLET VIEW ENDS HERE  */



/* ------------------------------------------------------------------------------------------------------------------------------------- */


/* MOBILE VIEW STARTS HERE  */




/* STILL MORE WORK NEED TO BE DONE */




/* MOBILE VIEW ENDS HERE  */









/* <div class="main-tablet">
<nav class="navbar navbar-expand-lg navbar-dark bg-* navbar-overlap-bg">
    <div class="container">
        <a class="navbar-brand" href="#">
            <div><img src="./images/Logo (Back To Space).png" width="170px" height="170px"
                    style="margin-right: 50px;" alt=""></div>
            <div class="tablet-view-navbar-heading">
                <h4> The Lunar Light :
                    Discovery</h4>
            </div>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>
<div class="right-folders-nav">
    <div class="ul-list-of-folder">
        <ul>
            <li class="folder folder-link-1">
                <a class="nav-link active popup-trigger1 me-3" aria-current="page" data-popup-id="popup1"
                    href="#"><img src="./images/research-3.svg" class="image-icon" /><br>RESEARCH BASE
                    NEWS</a>
            </li>
            <li class="folder folder-link-2"> <a class="nav-link active popup-trigger2 me-3" aria-current="page"
                    data-popup-id="popup2" href="#"><img src="./images/cctv-security-technology.svg"
                        class="image-icon" /><br>SECURITY
                    FOOTAGE</a></li>
            <li class="folder folder-link-3"> <a class="nav-link active popup-trigger4 me-3" aria-current="page"
                    data-popup-id="popup4" href="#"><img src="./images/team-17.svg"
                        class="image-icon" /><br>MISSION TEAM</a></li>
            <li class="folder folder-link-4"> <a class="nav-link active popup-trigger5 me-3" aria-current="page"
                    data-popup-id="popup5" href="#"><img src="./images/location-35.svg"
                        class="image-icon" /><br>RESEARCH BASE
                    LOCATIONS</a></li>
            <li class="folder folder-link-5"> <a class="nav-link active popup-trigger6 me-3" aria-current="page"
                    data-popup-id="popup6" href="#"><img src="./images/faq-replication.svg"
                        class="image-icon" /><br>FAQ</a></li>
            <li class="folder folder-link-6"> <a class="nav-link active popup-trigger6 me-3" aria-current="page"
                    data-popup-id="popup6" href="#"><img src="./images/ticket-icon.svg"
                        class="image-icon" /><br>Mission Tickets</a></li>
        </ul>
    </div>
</div>
<div class="popups-area container-fluid">
    <div id="popup1-tab" class="popup popup1">
        <div id="popup1-tabheader1-tab">
            <span class="popup-close1" data-popup-id="popup1"><i class="fas fa-times"></i></span>
            <span class="popup-min-1" data-popup-id="popup1"><i
                    class="fas fa-window-minimize minimize-icon"></i></span>
            <span class="popup-max-1" id="popup1Max-tab"> <i
                    class="fas fa-window-maximize resize-icon"></i></span>
        </div>
        <div class="popup-content popup-content-row news-date-heading-para">
            <div class="all-news">
                <div class="line-by-line-news">
                    <div class="heading-and-short-description-news">
                        <a target="new" href="./Blog Articles/Earth Bound - Interstellar Asteroid Spotted.html">
                            <h2>Earth Bound - Interstellar Asteroid Spotted</h2>
                        </a>
                        <p>
                            Astronomers working with the Sandstrom Space Telescope have reported an interstellar
                            asteroid today. The first so-called extragalactic asteroid, Oumuamua, passed by the
                            Sun
                            without incident in 2017, about 35 years ago.

                        </p>
                    </div>
                    <div class="date-for-news-with-align-title-and-desc">
                        <h5>July / 4 / 2055
                        </h5>
                    </div>
                </div>
            </div>
            <!-- <div class="column-1">
                <div class="cctv-footage">
                    <img src="./images/cctv-footages.webp" width="100%" height="300px" alt="">
                </div>
                <div class="news-clip">
                    <img src="./images/moon-image-popup.jpg" width="100%" height="300px" alt="">
                </div>
            </div> -->
            <!-- <div class="column-2">
                <div class="content1-with-heading">
                    <div class="heading">
                        <h1>Back TO Space</h1>
                    </div>
                     <div class="para">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore in quia, inventore
                            voluptates nostrum non fugiat quaerat recusandae officiis nobis iusto iure quidem ex
                            similique, rerum numquam amet ratione, culpa provident dicta. Debitis odit amet
                            laudantium voluptatum nam neque temporibus impedit, a, vitae consequuntur
                            exercitationem, eveniet natus reprehenderit dignissimos! Eaque, possimus maxime
                            officiis nobis vel beatae numquam, odit architecto sit nisi in id consectetur
                            dolorem reiciendis a sed porro adipisci dicta libero illo at corrupti? Reiciendis
                            distinctio non quidem, corporis suscipit omnis repudiandae excepturi molestiae?
                            Neque dicta reprehenderit molestias ipsum nisi aliquam dolor ipsa laboriosam
                            pariatur error aperiam corrupti optio laudantium perferendis rerum quisquam,
                            adipisci laborum distinctio veniam molestiae? Assumenda delectus placeat accusantium
                            explicabo sunt similique eos commodi perferendis soluta ullam quae aspernatur eaque,
                            enim ex sapiente iusto veniam suscipit vel voluptas. Animi, quisquam est autem
                            mollitia expedita eum iure non sint repellendus reprehenderit earum ducimus
                            voluptates labore dolore, amet nobis sunt cumque? Delectus error ipsa quibusdam
                            nobis officia perferendis repellat earum optio, sunt enim laudantium fuga incidunt
                            ratione? Atque nihil neque, odit iure vitae tempore eveniet impedit voluptatem
                            nesciunt?</p>
                    </div> -->
            <!-- </div>
            </div>  -->
        </div>
    </div>


    <!-- 2 -->

    <div id="popup2-tab" class="popup popup2">
        <div class="popup-content2 popup-content-row">
            <div class="video-of-secruity-footage">
                <video src="./images/security-cctv-footage.mp4" loop autoplay muted width="100%"></video>
            </div>
        </div>
    </div>

    <!-- 3 -->

    <div id="popup3-tab" class="popup popup3">
        <div id="popup3-tabheader3-tab">
            <span class="popup-close3" data-popup-id="popup3"><i class="fas fa-times"></i></span>
            <span class="popup-max-3" id="popup3Max-tab"> <i
                    class="fas fa-window-maximize resize-icon"></i></span>
            <span class="popup-min-3" data-popup-id="popup3"><i
                    class="fas fa-window-minimize minimize-icon"></i></span>
        </div>
        <div class="popup-content3 popup-content-row">
            <!-- Ticket Tailor Widget. Paste this into your website where you want the widget to appear. Do not change the code or the widget may not work properly. -->
            <div class="tt-widget">
                <div class="tt-widget-fallback">
                    <p><a href="https://www.tickettailor.com/all-tickets/backtospace/?ref=website_widget&show_search_filter=true&show_date_filter=true&show_sort=true"
                            target="_blank">Click here to buy tickets</a><br /><small><a
                                href="https://www.tickettailor.com?rf=wdg_166583" class="tt-widget-powered">Sell
                                tickets online with Ticket Tailor</a></small></p>
                </div>
                <script src="https://cdn.tickettailor.com/js/widgets/min/widget.js"
                    data-url="https://www.tickettailor.com/all-tickets/backtospace/?ref=website_widget&show_search_filter=true&show_date_filter=true&show_sort=true"
                    data-type="inline" data-inline-minimal="true" data-inline-show-logo="false"
                    data-inline-bg-fill="false" data-inline-inherit-ref-from-url-param=""
                    data-inline-ref="website_widget"></script>
            </div>
            <!-- End of Ticket Tailor Widget -->
        </div>
    </div>


    <!-- 4 -->


    <div id="popup4-tab" class="popup popup4">
        <div id="popup4-tabheader4-tab">
            <span class="popup-close4" data-popup-id="popup4"><i class="fas fa-times"></i></span>
            <span class="popup-max-4" id="popup4Max-tab"> <i
                    class="fas fa-window-maximize resize-icon"></i></span>
            <span class="popup-min-4" data-popup-id="popup4"><i
                    class="fas fa-window-minimize minimize-icon"></i></span>
        </div>
        <div class="popup-content4 popup-content-row">
            <div class="column-1 single-column">
                <div class="mission-team-with-characters">
                    <div class="character-picture">
                        <img src="./images/0.png" alt="">
                    </div>
                    <div class="character-info mt-4">
                        <div class="name-of-character">
                            <h2>General Jackson:</h2>
                        </div>
                        <div class="desc-of-character">
                            <p> GenJack is a New England bad boy. He’s been kindly asked by the
                                higher ups to get outta space and is spending his last days getting Mission
                                Specialists suited up
                                and briefed on their mission. He has a longstanding feud with DG33 - and isn't
                                afraid to tell
                                anyone who will listen about it.
                                Feel free to ask GenJack about his past on the lunar surface and how he feels
                                about
                                going
                                home to earth.</p>
                        </div>
                        <!-- Character 2 -->
                        <div class="character-picture mt-5 pt-3">
                            <img src="./images/1.png" alt="">
                        </div>
                        <div class="character-info mt-4">
                            <div class="name-of-character">
                                <h2>Gaia:</h2>
                            </div>
                            <div class="desc-of-character">
                                <p> Originally created to assist the LunaAqua team with finding and purifying
                                    Moon
                                    ice into
                                    water, Gaia’s A.I. capabilities were expanded to cover all lunar operations.
                                    She’s become the
                                    voice every astronaut has had in their ears since lunar expansion began. Her
                                    main objective is
                                    to protect and to warn the staff of possible problems and find solutions.
                                    No need to ask her questions; she’ll let you know when and if there is a
                                    problem.</p>
                            </div>
                            <!-- Character 3 -->
                            <div class="character-picture mt-5 pt-3">
                                <img src="./images/2.png" alt="">
                            </div>
                            <div class="character-info mt-4">
                                <div class="name-of-character">
                                    <h2>Stella:</h2>
                                </div>
                                <div class="desc-of-character">
                                    <p> Stella was assigned to the lunar research base after some key
                                        discoveries
                                        she
                                        made in college.. What Stella has in brains, she lacks in confidence.
                                        DG33
                                        is her
                                        teacher and friend. She’s desperate to find out what's going on in the
                                        impact zone so
                                        she can get back to work with Deej!
                                        Ask her questions about what it’s like to be a researcher on the moon
                                        and
                                        her life goals.</p>
                                </div>
                                <!-- Character 4 -->
                                <div class="character-picture mt-5 pt-3">
                                    <img src="./images/3.jpg" alt="">
                                </div>
                                <div class="character-info mt-4">
                                    <div class="name-of-character">
                                        <h2>DG-33:</h2>
                                    </div>
                                    <div class="desc-of-character">
                                        <p> Also known as “DEEJ”, DG-33 one of the moon exploration DG rover
                                            bots
                                            that set up
                                            habitats for the crew and their equipment before getting to work on
                                            their primary job of
                                            ice detection. Brought up in the Texas oil fields, Deej kept his
                                            accent
                                            after switching to
                                            H2O discovery. . He’s a bit snarky, but endlessly faithful and
                                            strong
                                            willed.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 5 -->


    <div id="popup5-tab" class="popup popup5">
        <div id="popup5-tabheader5-tab">
            <span class="popup-close5" data-popup-id="popup5"><i class="fas fa-times"></i></span>
            <span class="popup-max-5" id="popup5Max-tab"> <i
                    class="fas fa-window-maximize resize-icon"></i></span>
            <span class="popup-min-5" data-popup-id="popup5"><i
                    class="fas fa-window-minimize minimize-icon"></i></span>
        </div>
        <div class="popup-content5 popup-content-row">
            <div class="column-1 single-column">
                <div class="location">
                    <h2> MISSION BASE 1: <span class="main-location"> 2226 Valley View Mall, Dallas, TX 75240
                        </span> </h2>
                </div>
            </div>
        </div>
    </div>
    <!-- 6 -->


    <div id="popup6-tab" class="popup popup6">
        <div id="popup6-tabheader6-tab">
            <span class="popup-close6-tab" data-popup-id="popup6"><i class="fas fa-times"></i></span>
            <span class="popup-max-6" id="popup6Max-tab"> <i
                    class="fas fa-window-maximize resize-icon"></i></span>
            <span class="popup-min-6" data-popup-id="popup6"><i
                    class="fas fa-window-minimize minimize-icon"></i></span>
        </div>
        <div class="popup-content6 popup-content-row">
            <section class="faq-section">
                <div class="container">
                    <div class="faq-title text-center pb-3">
                        <h2 class="text-light FrequentlyAskedQuestions">Frequently Asked Questions</h2>
                    </div>
                    <div class="row">
                        <!-- ***** FAQ Start ***** -->
                        <div class="col-md-10">
                            <div class="faq" id="accordion">
                                <div class="card">
                                    <div class="card-header" id="faqHeading-1">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-1" data-aria-expanded="true"
                                                data-aria-controls="faqCollapse-1">
                                                <span class="badge">1</span>How does the Lunar Light:
                                                Discovery
                                                work?
                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-1" class="collapse" aria-labelledby="faqHeading-1"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <b>
                                                <p>The Experience is three connected zones. <br>
                                            </b>
                                            <b> Zone 1: </b> You will be briefed on you mission and
                                            “suit up” (put
                                            on VR
                                            headset and gear), <br>
                                            <b> Zone 2: </b> Fully in VR <br>
                                            <b> zone 3: </b> Games in the real world (out of VR). </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-2">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-2" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-2">
                                                <span class="badge">2</span> How long is the Experience?
                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-2" class="collapse" aria-labelledby="faqHeading-2"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p><b> Please plan for a total of about 1 hour and 30
                                                    minutes <br> </b>
                                                <b> · </b> Arrive to check in with the Galactic Travel
                                                Safety Agency
                                                -
                                                15-30 minutes prior to your booking time <br>
                                                <b> · </b> About 1 hour in the Experience <br>
                                                <b> · </b> Additional 15 minutes post Experience
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-3">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-3" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-3">
                                                <span class="badge">3</span>Can I wear glasses?
                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-3" class="collapse" aria-labelledby="faqHeading-3"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p>Sure!</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-4">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-4" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-4">
                                                <span class="badge">4</span> What should I wear?
                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-4" class="collapse" aria-labelledby="faqHeading-4"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p> Something that you can comfortably walk around in.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-5">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-5" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-5">
                                                <span class="badge">5</span> When should I arrive?
                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-5" class="collapse" aria-labelledby="faqHeading-5"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p> 15-30 minutes ahead of your slotted time.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-6">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-6" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-6">
                                                <span class="badge">6</span> Guest Requirements?
                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-6" class="collapse" aria-labelledby="faqHeading-6"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p><b> Guests must be </b> <br>
                                                <b> • </b> 1.2m (48″) or taller to play <br>
                                                <b> • </b> Be able to support a VR headset and gear for
                                                20 minutes.
                                                <br>
                                                <b> • </b> For guests under 18 years old, a
                                                parent/guardian must be
                                                physically present at the venue during the Experience to
                                                sign a
                                                minor
                                                waiver form.<br>
                                                <b> This Experience is not recommended for pregnant
                                                    women or those
                                                    with
                                                    heart conditions </b>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-7">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-7" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-7">
                                                <span class="badge">7</span> How will people avoid
                                                bumping into each
                                                other?
                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-7" class="collapse" aria-labelledby="faqHeading-7"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p>Everyone will be able to see other players’ avatars.
                                                Hands and
                                                real-world
                                                structures are mapped into VR. If there is a wall in
                                                VR…it’s also a
                                                wall
                                                in the real world. Pay attention to the design and
                                                everyone will be
                                                safe!</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-8">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-8" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-8">
                                                <span class="badge">8</span> Will I get motion sickness?
                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-8" class="collapse" aria-labelledby="faqHeading-8"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p>Discovery is different from most other VR experiences.
                                                Physical
                                                buttons,
                                                dials and handrails are mapped into VR.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-9">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-9" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-9">
                                                <span class="badge">9</span> What's the headset cleaning
                                                and
                                                sanitization process?

                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-9" class="collapse" aria-labelledby="faqHeading-9"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p>All equipment is cleaned and disinfected after every use,
                                                including
                                                the
                                                masks on our headsets, headset lenses, and props. The
                                                disinfectants
                                                are
                                                also qualified for use against COVID-19 (coronavirus
                                                disease 2019)
                                                by
                                                the U.S. Environmental Protection Agency (EPA).
                                                Sanitizing equipment
                                                and
                                                facilities is always a standard procedure as health,
                                                safety, and
                                                cleanliness is a priority.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-10">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-10" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-10">
                                                <span class="badge">10</span> How do I book for a large
                                                group?

                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-10" class="collapse" aria-labelledby="faqHeading-10"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p>If you'd like us to help book a group of more than 6
                                                people, or
                                                multiple
                                                consecutive time slots, email us at <a
                                                    href="mailto:events@backtospace.com">
                                                    events@backtospace.com
                                                </a>.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-11">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-11" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-11">
                                                <span class="badge">11</span> What payment methods do
                                                you accept?

                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-11" class="collapse" aria-labelledby="faqHeading-11"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p>It is best to choose a timeslot online. Walk-ins can only
                                                pay by
                                                credit
                                                card.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="faqHeading-12">
                                        <div class="mb-0">
                                            <h5 class="faq-title" data-toggle="collapse"
                                                data-target="#faqCollapse-12" data-aria-expanded="false"
                                                data-aria-controls="faqCollapse-12">
                                                <span class="badge">12</span> How much is a ticket?

                                            </h5>
                                        </div>
                                    </div>
                                    <div id="faqCollapse-12" class="collapse" aria-labelledby="faqHeading-12"
                                        data-parent="#accordion">
                                        <div class="card-body">
                                            <p>Our prices are <b> $55 per person </b>.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>
</div> */

.video-bg
{
    height: 100vh;
    width: 100%;
}