@font-face {
    font-family: 'AvenirMedium';
    src: url('assets/Avenir-Medium-09.ttf');
}
  
@font-face {
    font-family: 'AvenirLight';
    src: url('assets/Avenir-Light-07.ttf');
}

@font-face {
    font-family: 'CabinBold';
    src: url('assets/Cabin-Bold.ttf');
}
  
@font-face {
    font-family: 'CabinItalic';
    src: url('assets/Cabin-Italic.ttf');
}

@font-face {
    font-family: 'CabinRegular';
    src: url('assets/Cabin-Regular.ttf');
}

body {
    font-family: 'CabinRegular', Noto, Roboto, Helvetica Neue, sans-serif;
    /* background-image: url('assets/bg_vertical.png'); 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat; */
    /* color: #244376; */
}

/* ----------------------------------------------------------------------- For mobile: ---------------------------------------------------------------------- */

#dm-bg{
    position:absolute; 
    right: 0px; 
    bottom: 0px; 
    width:100%; 
    min-height: 100%; 
    justify-content: center; 
    background-image: url('assets/bg_vertical.png'); 
    background-size: cover; 
    background-position: center;
}
/* 
nav {
    position:absolute; 
    top:0px; 
    width:100%; 
    height: 54px; 
    background-color: white; 
    border-bottom: 2px solid black;
} */

#dm-header{
    position:relative; 
    /* top:54px;  */
    width:100%; 
    height: 54px; 
    background-color: #434345; 
    color:white;
}

#dm-header-text{
    position:absolute; 
    top:30%; 
    width:100%; 
    height: 80%; 
    text-align: center; 
}

#dm-header span{
    font-size: 0.9em;
}

#dm-header-desc{
    position:relative; 
    display: flex; 
    flex-direction: column;  
    /* top:108px;  */
    width:90%; 
    height: 23%; 
    color: #434345; 
    justify-content: center;
}

#dm-header-desc-text1{
    position: relative; 
    top:0em; 
    width:100%; 
    height: 60px; 
    text-align: center; 
    font-family: 'CabinBold'; 
    font-size: 0.85em;
}

#dm-header-desc-text2{
    position: relative; 
    top:10px; 
    width:100%; 
    height: 20px; 
    text-align: center; 
    font-family: 'CabinBold'; 
    font-size: 0.6em; 
    font-style: italic;
}

#dm-header-desc-text3{
    position: relative; 
    top:10px; 
    width:100%; 
    height: 20px; 
    text-align: center; 
    font-family: 'CabinBold'; 
    font-size: 0.5em; 
    font-style: italic;
}

.dm-centered {
    justify-content: center;
    position: fixed;
    bottom: 0%;
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0px auto;
    left: 0;
    right: 0;
}

.dm-card-container {
    position: relative;
    margin: 0.5em auto;
    display: flex;
    flex-direction: column;
    /* top: 12em; */
    /* bottom: 0em; */
    width: 84%;
    height: auto;
    max-width: 600px;
    max-height: 1500px;
    /* border-radius: 6px; */
    overflow: hidden;
    /* visibility: hidden; */
}

.dm-main-card {
    position: relative;
    margin: 0.2em auto;
    display: flex;
    flex-direction: column;
    top: 0em;
    bottom: 0em;
    width: 100%;
    height: 40%;
    min-height: 150px;
    max-width: 600px;
    max-height: 1500px;
    /* border-radius: 6px; */
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    /* visibility: hidden; */
    cursor: pointer;
}

.dm-card-image {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0px;
    width: 100%;
    height: 50%;
    /* max-width: 600px; */
    /* max-height: 900px; */
    /* border-radius: 6px; */
    /* background-color: white; */
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
    /* border-radius: 20px; */
    border: none;
    overflow: hidden;
    /* visibility: hidden; */
}

.dm-card-details {
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 0%;
    width: 100%;
    height: 50%;
    /* min-height: 250px; */
    /* max-width: 600px; */
    /* max-height: 900px; */
    /* border-radius: 6px; */
    /* background-color: white; */
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
    /* border-radius: 20px; */
    border: none;
    overflow: hidden;
    background-color: #cc0001;
    color: white;
    /* visibility: hidden; */
}

@media only screen and (max-width: 600px) and (orientation: portrait){
    #dm-ar-card-image {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: -5%;
        width: 100%;
        height: 50%;
        /* max-width: 600px; */
        /* max-height: 900px; */
        /* border-radius: 6px; */
        /* background-color: white; */
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        /* border-radius: 20px; */
        border: none;
        overflow: hidden;
        /* visibility: hidden; */
    }

    #dm-ar-card-details {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 0%;
        width: 100%;
        max-height: 60%;
        height: 60%;
        min-height: 100px;
        /* min-height: 250px; */
        /* max-width: 600px; */
        /* max-height: 900px; */
        /* border-radius: 6px; */
        /* background-color: white; */
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        /* border-radius: 20px; */
        border: none;
        overflow: hidden;
        background-color: #cc0001;
        color: white;
        /* visibility: hidden; */
    }
}

.dm-card-text-header {
    font-family: 'CabinBold';
    position: absolute;
    margin: 2% auto;
    top: 2%;
    height: 40%;
    width: 90%;
    font-size: 5vw;
    justify-content: center;
    font-weight: bold;
    /* max-height: 900px; */
    /* border-radius: 6px; */
    color:white;
    border: none;
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
    overflow: hidden;
}

.dm-card-text {
    font-family: 'CabinRegular';
    position: absolute;
    margin: 4% auto;
    top: 23%;
    left: 5%;
    height: 80%;
    width: 90%;
    font-size: 3.5vw;
    text-align: center;
    text-align-last: center;
    /* max-height: 900px; */
    /* border-radius: 6px; */
    color: white;
    border: none;
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
    overflow: hidden;
}

.dm-dark-screen-card{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0);
}

.dm-dark-screen{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    visibility: hidden;
}

.dm-popup-card{
    position: absolute;
    margin: 0.2em auto;
    display: flex;
    flex-direction: row;
    top: 25%;
    bottom: 0em;
    width: 80%;
    height: 38vw;
    min-height: 200px;
    max-width: 1500px;
    max-height: 740px;
    /* border-radius: 6px; */
    background-color: white;
    border-radius: 30px;
    overflow: hidden;
    visibility: hidden;
}

.dm-popup-card-image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40%;
    height: 100%;
    border: none;
    overflow: hidden;
    /* visibility: hidden; */
}

.dm-popup-card-details {
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 0%;
    right: 0px;
    width: 60%;
    height: 100%;
    border: none;
    overflow: hidden;
    background-color: #0c8188;
    color: #434345;
    /* visibility: hidden; */
}

.dm-popup-card-details > .dm-popup-card-text-header {
    font-family: 'CabinBold';
    position: absolute;
    margin: 2% auto;
    top: 20%;
    left: 8%;
    height: 40%;
    width: 90%;
    font-size: 5vh;
    justify-content: left;
    font-weight: bold;
    /* max-height: 900px; */
    /* border-radius: 6px; */
    color: white;
    border: none;
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
    overflow: hidden;
}

.dm-popup-card-details > .dm-popup-card-text {
    font-family: 'CabinRegular';
    position: absolute;
    margin: 4% auto;
    top: 35%;
    left: 8%;
    height: 80%;
    width: 80%;
    font-size: 4vh;
    text-align: left;
    text-align-last: left;
    /* max-height: 900px; */
    /* border-radius: 6px; */
    color: #434345;
    border: none;
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
    overflow: hidden;
}

.dm-video-player{
    position: absolute;
    /* margin: 1em auto; */
    top: 20%;
    left: 50%;
    bottom: 1em;
    transform: translate(-50%, 0%);
    width: 90%;
    max-width: 2400px;
    max-height: 1500px;
    /* border-radius: 6px; */
    overflow: hidden;
    justify-content: center;
    visibility: hidden;
}

/* ----------------------------------------------------------------------- For desktop: ---------------------------------------------------------------------- */

@media only screen and (min-width: 900px){
    /* For desktop: */

    #dm-bg{
        position:absolute; 
        right: 0px; 
        bottom: 0px; 
        width:100%; 
        min-height: 100%; 
        justify-content: center; 
        background-image: url('assets/bg_horizontal.png'); 
        background-size: cover; 
        background-position: center;
    }
/* 
    body{
        background-image: url('assets/bg_horizontal.png'); 
        background-size: cover; 
        background-position:center;
        background-repeat: no-repeat;
    } */

    /* nav {
        position:absolute; 
        top:0px; 
        width:100%; 
        height: 14%; 
        background-color: white; 
        border-bottom: 2px solid black;
    } */
    
    #dm-header{
        position:relative; 
        top:0px; 
        width:100%; 
        height: 12%; 
        background-color: #434345; 
        color:white;
    }
        
    #dm-header-text{
        position:absolute; 
        top:28%; 
        width:100%; 
        height: 80%; 
        text-align: center; 
    }

    #dm-header span{
        font-size: 3.6vh;
    }
    
    #dm-header-desc{
        position:relative; 
        display: flex; 
        flex-direction: column;  
        top:2%; 
        width:90%; 
        height: 20%; 
        color: #434345; 
        justify-content: center;
    }

    #dm-header-desc-text1{
        position: relative; 
        top:0%; 
        width:100%; 
        max-width: 1400px;
        height: 30%; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 3vh;
        /* font-size: 200%; */
    }
    
    #dm-header-desc-text2{
        position: relative; 
        top:15%; 
        width:100%; 
        
        height: 30%; 
        text-align: center; 
        font-family: 'CabinRegular'; 
        font-size: 2.5vh; 
        font-style: italic;
    }

    #dm-header-desc-text3{
        position: relative; 
        top:5%; 
        width:100%; 
        height: 10%; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 2vh; 
        font-style: italic;
    }
    
    .dm-card-container {
        position: relative;
        margin: 0.2em auto;
        display: flex;
        flex-direction: row;
        top: 5%;
        /* bottom: 0em; */
        width: 90%;
        
        height: 45%;
        max-width: 2400px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        /* visibility: hidden; */
    }

    .dm-main-card {
        position: relative;
        margin: 0.2em 2%;
        top: 0em;
        bottom: 0em;
        width: 100%;
        height: 90%;
        min-height: 100px;
        max-width: 600px;
        max-height: 1500px;
        /* border-radius: 6px; */
        background-color: white;
        border-radius: 20px;
        overflow: hidden;
        /* visibility: hidden; */
    }

    .dm-card-details {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 0%;
        width: 100%;
        max-height: 60%;
        min-height: 100px;
        /* min-height: 250px; */
        /* max-width: 600px; */
        /* max-height: 900px; */
        /* border-radius: 6px; */
        /* background-color: white; */
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        /* border-radius: 20px; */
        border: none;
        overflow: hidden;
        background-color: #cc0001;
        color: white;
        /* visibility: hidden; */
    }

    .dm-card-text-header {
        font-family: 'CabinBold';
        position: absolute;
        margin: 1% auto;
        top: auto;
        bottom: 75%;
        transform: translate(0, 50%);
        height: 30%;
        width: 90%;
        /* font-size: 5vh; */
        font-size: 4.5vh;
        justify-content: center;
        font-weight: bold;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        left:10%;
        top: auto;
        bottom: 3%;
        /* transform: translate(0, 60%); */
        min-height: 40%;
        height: fit-content;
        width: 80%;
        /* font-size: 2.7vh; */
        font-size: 2.1vh;
        text-align: center;
        text-align-last: center;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-popup-card-details > .dm-popup-card-text-header {
        font-family: 'CabinBold';
        position: absolute;
        margin: 2% auto;
        top: 15%;
        left: 4%;
        height: 40%;
        width: 90%;
        font-size: 7.6vh;
        justify-content: center;
        text-align: center;
        font-weight: normal;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-popup-card-details > .dm-qr-frame{
        font-family: 'CabinRegular';
        position: absolute;
        margin: 4% auto;
        top: 35%;
        left: 8%;
        height: 50%;
        width: 80%;
        font-size: 4vh;
        text-align: left;
        text-align-last: left;
        /* max-height: 900px; */
        background-color: white;
        border-radius: 40px;
        color: #434345;
        border: 5px solid red;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-qr-frame > .dm-qr-image {
        position: absolute;
        /* margin: auto; */
        top: 5%;
        left: 2%;
        height: 90%;
        width: 45%;
        background-image: url('./assets/qr-dragonfly.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-qr-frame > .dm-qr-instruct-image {
        position: absolute;
        /* margin: auto; */
        top: 10%;
        left: 50%;
        height: 30%;
        width: 15%;
        background-image: url('./assets/instruct-qr.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-qr-frame > .dm-popup-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        margin: 4% auto;
        top: 35%;
        left: 50%;
        height: 80%;
        width: 45%;
        font-size: 2.7vh;
        text-align: left;
        text-align-last: left;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: #434345;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-video-player{
        position: absolute;
        /* margin: 1em auto; */
        top: 10%;
        left: 50%;
        bottom: 1em;
        transform: translate(-50%, 0%);
        width: 90%;
        max-width: 2400px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        justify-content: center;
        visibility: hidden;
    }

    .dm-video-frame{
        width: 60vw;
        height: calc( 60vw * 0.5625);
    }
}

/* ----------------------------------------------------------------------- For iPad landscape ratio: ---------------------------------------------------------------------- */

@media only screen and (max-aspect-ratio: 3/2) and (min-width: 1025px){
    /* For desktop: */

    #dm-bg{
        position:absolute; 
        right: 0px; 
        bottom: 0px; 
        width:100%; 
        height: 100%; 
        justify-content: center; 
        background-image: url('assets/bg_horizontal.png'); 
        background-size: cover; 
        background-position: center;
    }

    /* nav {
        position:absolute; 
        top:0px; 
        width:100%; 
        height: 14%; 
        background-color: white; 
        border-bottom: 2px solid black;
    } */
    
    #dm-header{
        position:relative; 
        top:0px; 
        width:100%; 
        height: 100px; 
        background-color: #434345; 
        color:white;
    }
        
    #dm-header-text{
        position:absolute; 
        top:28%; 
        width:100%; 
        height: 80%; 
        text-align: center; 
    }

    #dm-header span{
        font-size: 30px;
    }
    
    #dm-header-desc{
        position:relative; 
        display: flex; 
        flex-direction: column;  
        top:2%; 
        width:90%; 
        height: 200px; 
        color: #434345; 
        justify-content: center;
    }

    #dm-header-desc-text1{
        position: relative; 
        top:0%; 
        width:90%; 
        max-width: 1200px;
        height: 70px; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 28px;
        /* font-size: 200%; */
    }
    
    #dm-header-desc-text2{
        position: relative; 
        top:30px; 
        width:100%; 
        
        height: 40px; 
        text-align: center; 
        font-family: 'CabinRegular'; 
        font-size: 20px; 
        font-style: italic;
    }

    #dm-header-desc-text3{
        position: relative; 
        top:30px; 
        width:100%; 
        height: 40px; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 16px; 
        font-style: italic;
    }
    
    .dm-card-container {
        position: relative;
        margin: 0.2em auto;
        display: flex;
        flex-direction: row;
        top: 5%;
        /* bottom: 0em; */
        width: 90%;
        
        height: 300px;
        max-width: 2400px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        /* visibility: hidden; */
    }

    .dm-main-card {
        position: relative;
        margin: 0.2em 2%;
        top: 0em;
        bottom: 0em;
        width: 100%;
        height: 90%;
        min-height: 100px;
        max-width: 600px;
        max-height: 1500px;
        /* border-radius: 6px; */
        background-color: white;
        border-radius: 20px;
        overflow: hidden;
        /* visibility: hidden; */
    }

    .dm-card-details {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 0%;
        width: 100%;
        max-height: 60%;
        min-height: 100px;
        /* min-height: 250px; */
        /* max-width: 600px; */
        /* max-height: 900px; */
        /* border-radius: 6px; */
        /* background-color: white; */
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        /* border-radius: 20px; */
        border: none;
        overflow: hidden;
        background-color: #cc0001;
        color: white;
        /* visibility: hidden; */
    }

    .dm-card-text-header {
        font-family: 'CabinBold';
        position: absolute;
        margin: 1% auto;
        top: auto;
        bottom: 75%;
        transform: translate(0, 50%);
        height: 30%;
        width: 90%;
        /* font-size: 5vh; */
        font-size: 26px;
        justify-content: center;
        font-weight: bold;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        left:10%;
        top: auto;
        bottom: 3%;
        /* transform: translate(0, 60%); */
        min-height: 40%;
        height: fit-content;
        width: 80%;
        /* font-size: 2.7vh; */
        font-size: 17px;
        text-align: center;
        text-align-last: center;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-popup-card-details > .dm-popup-card-text-header {
        font-family: 'CabinBold';
        position: absolute;
        margin: 2% auto;
        top: 15%;
        left: 4%;
        height: 40%;
        width: 90%;
        font-size: 7.6vh;
        justify-content: center;
        text-align: center;
        font-weight: normal;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-popup-card-details > .dm-qr-frame{
        font-family: 'CabinRegular';
        position: absolute;
        margin: 4% auto;
        top: 35%;
        left: 8%;
        height: 50%;
        width: 80%;
        font-size: 4vh;
        text-align: left;
        text-align-last: left;
        /* max-height: 900px; */
        background-color: white;
        border-radius: 40px;
        color: #434345;
        border: 5px solid red;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-qr-frame > .dm-qr-image {
        position: absolute;
        /* margin: auto; */
        top: 5%;
        left: 2%;
        height: 90%;
        width: 45%;
        background-image: url('./assets/qr-dragonfly.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-qr-frame > .dm-qr-instruct-image {
        position: absolute;
        /* margin: auto; */
        top: 10%;
        left: 50%;
        height: 30%;
        width: 15%;
        background-image: url('./assets/instruct-qr.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-qr-frame > .dm-popup-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        margin: 4% auto;
        top: 35%;
        left: 50%;
        height: 80%;
        width: 45%;
        font-size: 2.7vh;
        text-align: left;
        text-align-last: left;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: #434345;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-video-player{
        position: absolute;
        /* margin: 1em auto; */
        top: 0%;
        left: 50%;
        bottom: 1em;
        transform: translate(-50%, 0%);
        width: 90%;
        max-width: 2400px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        justify-content: center;
        visibility: hidden;
    }

    .dm-video-frame{
        width: 60vw;
        height: calc( 60vw * 0.5625);
    }
}

/* ----------------------------------------------------------------------- For mobile (landscape): ---------------------------------------------------------------------- */

@media only screen and (min-width: 567px) and (max-width: 900px) and (orientation: landscape){
    /* For desktop: */

    #dm-bg{
        position:absolute; 
        right: 0px; 
        bottom: 0px; 
        width:100%; 
        height: 100%; 
        justify-content: center; 
        background-image: url('assets/bg_horizontal.png'); 
        background-size: cover; 
        background-position: center;
    }

    /* nav {
        position:absolute; 
        top:0px; 
        width:100%; 
        height: 14%; 
        background-color: white; 
        border-bottom: 2px solid black;
    } */
    
    #dm-header{
        position:relative; 
        top:0px; 
        width:100%; 
        height: 12%; 
        background-color: #434345; 
        color:white;
    }
        
    #dm-header-text{
        position:absolute; 
        top:28%; 
        width:100%; 
        height: 80%; 
        text-align: center; 
    }

    #dm-header span{
        font-size: 3.6vh;
    }
    
    #dm-header-desc{
        position:relative; 
        display: flex; 
        flex-direction: column;  
        top:2%; 
        width:90%; 
        height: 20%; 
        color: #434345; 
        justify-content: center;
    }

    #dm-header-desc-text1{
        position: relative; 
        top:0%; 
        width:90%; 
        max-width: 1200px;
        height: 30%; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 3vh;
        /* font-size: 200%; */
    }
    
    #dm-header-desc-text2{
        position: relative; 
        top:15%; 
        width:100%; 
        
        height: 30%; 
        text-align: center; 
        font-family: 'CabinRegular'; 
        font-size: 2.5vh; 
        font-style: italic;
    }

    #dm-header-desc-text3{
        position: relative; 
        top:5%; 
        width:100%; 
        height: 10%; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 2vh; 
        font-style: italic;
    }
    
    .dm-card-container {
        position: relative;
        margin: 0.2em auto;
        display: flex;
        flex-direction: row;
        top: 5%;
        /* bottom: 0em; */
        width: 90%;
        
        height: 170px;
        max-width: 2400px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        /* visibility: hidden; */
    }

    .dm-main-card {
        position: relative;
        margin: 0.2em 2%;
        top: 0em;
        bottom: 0em;
        width: 100%;
        height: 90%;
        min-height: 0px;
        max-width: 800px;
        max-height: 1500px;
        /* border-radius: 6px; */
        background-color: white;
        border-radius: 20px;
        overflow: hidden;
        /* visibility: hidden; */
    }

    .dm-card-details {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 0%;
        width: 100%;
        max-height: 60%;
        min-height: 80px;
        /* min-height: 250px; */
        /* max-width: 600px; */
        /* max-height: 900px; */
        /* border-radius: 6px; */
        /* background-color: white; */
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        /* border-radius: 20px; */
        border: none;
        overflow: hidden;
        background-color: #cc0001;
        color: white;
        /* visibility: hidden; */
    }

    .dm-card-text-header {
        font-family: 'CabinBold';
        position: absolute;
        margin: 1% auto;
        top: auto;
        bottom: 75%;
        transform: translate(0, 50%);
        height: 30%;
        width: 90%;
        /* font-size: 5vh; */
        font-size: 4.6vh;
        justify-content: center;
        font-weight: bold;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        left:10%;
        top: auto;
        bottom: 3%;
        /* transform: translate(0, 60%); */
        min-height: 40%;
        height: fit-content;
        width: 80%;
        /* font-size: 2.7vh; */
        font-size: 2.3vh;
        text-align: center;
        text-align-last: center;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-popup-card-details > .dm-popup-card-text-header {
        font-family: 'CabinBold';
        position: absolute;
        margin: 2% auto;
        top: 15%;
        left: 4%;
        height: 40%;
        width: 90%;
        font-size: 7.6vh;
        justify-content: center;
        text-align: center;
        font-weight: normal;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-popup-card-details > .dm-qr-frame{
        font-family: 'CabinRegular';
        position: absolute;
        margin: 4% auto;
        top: 35%;
        left: 8%;
        height: 50%;
        width: 80%;
        font-size: 4vh;
        text-align: left;
        text-align-last: left;
        /* max-height: 900px; */
        background-color: white;
        border-radius: 40px;
        color: #434345;
        border: 5px solid red;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-qr-frame > .dm-qr-image {
        position: absolute;
        /* margin: auto; */
        top: 5%;
        left: 2%;
        height: 90%;
        width: 45%;
        background-image: url('./assets/qr-dragonfly.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-qr-frame > .dm-qr-instruct-image {
        position: absolute;
        /* margin: auto; */
        top: 10%;
        left: 50%;
        height: 30%;
        width: 15%;
        background-image: url('./assets/instruct-qr.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-qr-frame > .dm-popup-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        margin: 4% auto;
        top: 35%;
        left: 50%;
        height: 80%;
        width: 45%;
        font-size: 2.7vh;
        text-align: left;
        text-align-last: left;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: #434345;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-video-player{
        position: absolute;
        /* margin: 1em auto; */
        top: 0%;
        left: 50%;
        bottom: 1em;
        transform: translate(-50%, 0%);
        width: 90%;
        max-width: 2400px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        justify-content: center;
        visibility: hidden;
    }

    .dm-video-frame{
        width: 60vw;
        height: calc( 60vw * 0.5625);
    }
}

@media only screen and (min-width: 1920px) and (min-height: 1080px){
    .dm-popup-card-details > .dm-popup-card-text-header {
        font-family: 'CabinBold';
        position: absolute;
        margin: 2% auto;
        top: 15%;
        left: 4%;
        height: 40%;
        width: 90%;
        font-size: 80px;
        justify-content: center;
        text-align: center;
        font-weight: normal;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

    .dm-qr-frame > .dm-popup-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        margin: 4% auto;
        top: 35%;
        left: 50%;
        height: 80%;
        width: 45%;
        font-size: 30px;
        text-align: left;
        text-align-last: left;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: #434345;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
}

/* ----------------------------------------------------------------------- For tablet (iPad): ---------------------------------------------------------------------- */

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* nav {
        position:absolute; 
        top:0px; 
        width:100%; 
        height: 60px; 
        background-color: white; 
        border-bottom: 2px solid black;
    } */
    
    #dm-header{
        position:relative; 
        /* top:60px;  */
        width:100%; 
        height: 60px; 
        background-color: #434345; 
        color:white;
    }
    
    #dm-header-text{
        position:relative; 
        top:30%; 
        width:100%; 
        height: 80%; 
        text-align: center; 
    }
    
    #dm-header span{
        font-size: 1.4em;
    }
    
    #dm-header-desc{
        position:relative; 
        display: flex; 
        flex-direction: column;  
        /* top:114px;  */
        width:90%; 
        height: 20%; 
        color: #434345; 
        justify-content: center;
    }
    
    #dm-header-desc-text1{
        position: relative; 
        top:0px; 
        width:100%; 
        height: 50%; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 3.5vw;
    }
    
    #dm-header-desc-text2{
        position: relative; 
        /* top:50%;  */
        top:20px; 
        width:100%; 
        height: 10%; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 2vw; 
        font-style: italic;
    }

    #dm-header-desc-text3{
        position: relative; 
        top:20px; 
        width:100%; 
        height: 10%; 
        text-align: center; 
        font-family: 'CabinBold'; 
        font-size: 1.8vw; 
        font-style: italic;
    }
    
    .dm-centered {
        justify-content: center;
        position: fixed;
        bottom: 0%;
        display: flex;
        flex-direction: row;
        width: 100%;
        margin: 0px auto;
        left: 0;
        right: 0;
    }
    
    .dm-card-container {
        position: relative;
        margin: 0.5em auto;
        display: flex;
        flex-direction: column;
        /* top: 14em; */
        /* bottom: 0em; */
        width: 84%;
        height: 60%;
        max-width: 600px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        /* visibility: hidden; */
    }
    
    .dm-main-card {
        position: relative;
        margin: 0.5em auto;
        margin-top: 0em;
        display: flex;
        flex-direction: column;
        top: 0em;
        bottom: 0em;
        width: 100%;
        height: 40%;
        min-height: 150px;
        max-width: 600px;
        max-height: 1500px;
        /* border-radius: 6px; */
        background-color: white;
        border-radius: 20px;
        overflow: hidden;
        /* visibility: hidden; */
        cursor: pointer;
    }
    
    .dm-card-image {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 0px;
        width: 100%;
        height: 50%;
        /* max-width: 600px; */
        /* max-height: 900px; */
        /* border-radius: 6px; */
        /* background-color: white; */
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        /* border-radius: 20px; */
        border: none;
        overflow: hidden;
        /* visibility: hidden; */
    }
    
    .dm-card-details {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 0%;
        width: 100%;
        height: 50%;
        /* min-height: 250px; */
        /* max-width: 600px; */
        /* max-height: 900px; */
        /* border-radius: 6px; */
        /* background-color: white; */
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        /* border-radius: 20px; */
        border: none;
        overflow: hidden;
        background-color: #cc0001;
        color: white;
        /* visibility: hidden; */
    }
    
    .dm-card-text-header {
        font-family: 'CabinBold';
        position: relative;
        margin: 1% auto;
        top: 3%;
        height: 30%;
        width: 90%;
        font-size: 26px;
        justify-content: center;
        font-weight: bold;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        margin: 4% auto;
        top: 30%;
        left: 5%;
        height: 50%;
        width: 90%;
        font-size: 16px;
        text-align: center;
        text-align-last: center;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-video-player{
        position: absolute;
        /* margin: 1em auto; */
        top: 30%;
        left: 50%;
        bottom: 1em;
        transform: translate(-50%, 0%);
        width: 90%;
        max-width: 2400px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        justify-content: center;
        visibility: hidden;
    }

    .dm-video-frame{
        width: 60vw;
        height: calc( 60vw * 0.5625);
    }
}

/* ----------------------------------------------------------------------- For tablet (iPad Pro): ---------------------------------------------------------------------- */

@media only screen and (min-device-width: 1024px) and (orientation:portrait) {
    .dm-card-container {
        position: relative;
        margin: 0.5em auto;
        display: flex;
        flex-direction: column;
        /* top: 14em; */
        /* bottom: 0em; */
        width: 84%;
        height: 640px;
        max-width: 600px;
        max-height: 1500px;
        /* border-radius: 6px; */
        overflow: hidden;
        /* visibility: hidden; */
    }
    
    .dm-main-card {
        position: relative;
        margin: 1em auto;
        margin-top: 0em;
        display: flex;
        flex-direction: column;
        top: 0em;
        bottom: 0em;
        width: 100%;
        height: 40%;
        min-height: 150px;
        max-width: 600px;
        max-height: 300px;
        /* border-radius: 6px; */
        background-color: white;
        border-radius: 20px;
        overflow: hidden;
        /* visibility: hidden; */
        cursor: pointer;
    }

    .dm-card-text-header {
        font-family: 'CabinBold';
        position: relative;
        margin: 0% auto;
        top: 0;
        height: 25%;
        width: 90%;
        font-size: 30px;
        justify-content: center;
        font-weight: bold;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color:white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }
    
    .dm-card-text {
        font-family: 'CabinRegular';
        position: absolute;
        margin: 2% auto;
        top: 30%;
        left: 5%;
        height: 50%;
        width: 90%;
        font-size: 20px;
        text-align: center;
        text-align-last: center;
        /* max-height: 900px; */
        /* border-radius: 6px; */
        color: white;
        border: none;
        /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); */
        overflow: hidden;
    }

}