html,
    body {
        height: 100%;
        font-family: "Source Sans 3", sans-serif;
    }

    body {
        margin: 0;
        background: #16162C;
        justify-content: center;
        padding-top: 5em;
        color: #F5F5F5;
        width: 100%;
        position: relative;
    }

    a {
        text-decoration: none;
        color: #C71B4B;
        font-weight: 700;
    }

    .layout-wrapper {
        width: 100%;
        display: block;
    }

    /* HEADER */
    .header-logo-bar {
        display: block;
        justify-content: center;
        margin-bottom: 10px;
        width: 100%;
        background: #1B1C2F;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        height: 5em;
    }

    .header-brand-image {
        height: auto;
        width: 9em;
        top: 0;
        top: 0;
        display: block;
        margin: auto;
    }

    /* HERO */
    .hero-section {
        display: flex;
        align-items: center;
        margin-bottom: var(--gap);
        position: relative;
        width: 100%;
    }

    .hero-text {
        position: absolute;
        left: 11vw;
        top: calc(50% - 8.6em);
    }

    .hero-title {
        margin: 0;
        font-size: 1.4vw;
        color: #E8E16C;
    }

    .hero-subtitle {
        margin-top: 6px;
        font-size: 2.8vw;
        font-weight: 700;
    }

    #chat-btn {
        background-color: #2ED2FF;
        color: #252525;
        position: relative;
        margin-top: -.5em;
        display: block;
        width: 13vw;
        padding: .5em .8em .4em 4em;
        border-radius: .3em;
        font-weight: 800;
        font-size: 1.9vw;
        cursor: pointer;
    }

    #chat-btn:hover {
        filter: brightness(1.1);
        -webkit-box-shadow: 0px 0px 45px 8px rgba(66, 192, 214, 0.07);
        -moz-box-shadow: 0px 0px 45px 8px rgba(66, 192, 214, 0.07);
        box-shadow: 0px 0px 45px 8px rgba(66, 192, 214, 0.07);
    }

    #chat-bell {
        position: absolute;
        left: .5em;
        top: -.3em;
        width: 3em;
        display: inline-block;
        animation: tada-paused 1.3s infinite ease-in-out;
    }

    @keyframes tada-paused {

        0% {
            transform: scale(1) rotate(0deg);
        }

        25% {
            transform: scale(1) rotate(0deg);
        }

        49% {
            transform: scale(1) rotate(0deg);
        }

        50% {
            transform: scale(1.1) rotate(-10deg);
        }

        65% {
            transform: scale(1) rotate(10deg);
        }

        70% {
            transform: scale(1.1) rotate(-10deg);
        }

        80% {
            transform: scale(1) rotate(3deg);
        }

        90% {
            transform: scale(1) rotate(0deg);
        }

        100% {
            transform: scale(1) rotate(0deg);
        }
    }

    .hero-image {
        height: auto;
        width: 100%;
    }

    .hero-image-m {
        display: none;
    }


    .cta-band {
        background: #C71B4B;
        text-align: center;
        position: relative;
        padding: 2em 0 2.6em 0;
        transform: skew(0deg, 358deg);
        z-index: 2;
        margin-top: 4em;
    }

    .cta-link-btn {
        background-color: #fff;
        border-radius: .2em;
        padding: .5em 1em;
        display: block;
        margin: .5em auto;
        max-width: 10em;
        z-index: 4;
        position: relative;
        transform: skew(0deg, -358deg);
        font-size: 2.4em;
        font-weight: 900;
    }

    .cta-link-btn:after {
        content: '';
        height: 2.2em;
        width: 2.2em;
        background: url("assets/hand-cursor.svg") no-repeat bottom;
        background-size: contain;
        position: absolute;
        bottom: -1.3em;
        left: calc(50% - .5em);
    }

    .cta-text {
        z-index: 9;
        transform: skew(0deg, -358deg);
        font-size: 2em;
        font-family: "Oswald", sans-serif;
        font-weight: 600;
    }

    .text-container {
        margin: 3em auto 5em;
    }

    .faqs .tab {
        background-color: #15152d;
        width: 94%;
        max-width: 800px;
        padding: 1em;
        border-radius: 9px;
        margin: 8px auto 0 auto;
        display: block;
    }

    .faqs h3 {
        display: flex;
        justify-content: space-between;
        color: #232c3d;
        font-size: 17px;
        font-family: "Source Sans 3", sans-serif;

    }

    .faqs h4 {
        display: flex;
        justify-content: space-between;
        color: #232c3d;
        font-size: 14px;
    }

    .faqs h5 {
        display: flex;
        justify-content: space-between;
        color: #232c3d;
        font-size: 12px;
    }

    .plus-icon {
        cursor: pointer;
        color: #c71b4a;
        transition: 0.5s;
    }

    .plus-icon:hover {
        transform: rotate(90deg);
    }

    .tab-content-faq {
        display: none;
        border-radius: 10px;
        width: 99%;
    }

    .show-text .tab-content-faq {
        display: block;
    }

    .tab-content-faq p {
        padding-top: 15px;
        padding-left: 15px;
    }

    .button-div {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .faqs {
        width: 100%;
        padding: 7em 10vw;
        margin-top: -3em;
        background-color: #0B0B21;
        display: block;
        position: relative;
        box-sizing: border-box;
        z-index: 1;
    }

    .faqs p {
        color: #D2D2D2;
        font-size: 16px;
    }

    .faqs h3 {
        color: #D2D2D2;

        line-height: 22px;
        margin: 0;
        padding-right: 1.6em;

    }

    .faqs .plus-icon {
        color: #D2D2D2;
        font-size: 14px;
    }

    .accordion.tab {
        border: none;
        text-align: left;
        position: relative;
    }

    .accordion.tab:before {
        content: "+";
        font-size: 24px;
        color: #c71b4a;
        font-weight: bold;
        width: 30px;
        padding: 0 8px;
        position: absolute;
        right: .5em;
        margin-top: -.3em
    }

    .accordion.tab.active:before {
        content: "-";
    }

    .accordion.tab.active {
        background-color: #23233a;
        display: block;
        border-radius: 9px 9px 0 0;
    }

    .tab-content-faq.panel {
        background-color: #15152c;
        width: 94%;
        margin: -.6em auto 0;
        border-radius: 0 0 9px 9px;
    }

    .tab-content-faq.panel h3 {
        font-size: 1.7em;
    }

    .tab-content-faq.panel .accordion.tab.active {
        background-color: #15152d;
    }

    .tab-content-faq.panel p {
        color: #dddddd;
        padding: .4em 0em;
        font-size: 1.8em;
    }

    .footer-pg p,
    .footer-pg li {
        font-weight: 500;
        font-size: 2em;
        line-height: 1.6em;
        text-align: left;
        color: #f5f5f5;
    }

    .footer-pg h3 {
        font-size: 1.9em;
        font-weight: 600;
        color: #f5f5f5;
    }

    @media only screen and (min-width: 800px) {
        .faqs h1 {
            font-size: 30px;
        }

        .accordion-faqs {
            width: 80%;
            margin: auto;
        }

        .tab {
            width: 100%;
            max-width: 100%;
        }

        .tab-content-faq.panel {
            width: 80%;
            width: 94%;
            max-width: 100%;
            margin: -1.6em auto 2em;
        }

        .tab-content-faq.panel .tab {
            padding: 1.8em .6em;
        }

        .tab-content-faq.panel p {
            margin-top: -.5em;
        }

        .faqs p {
            font-size: 18px;
            line-height: 28px;
        }

        .faqs h3 {
            font-size: 2em;
        }

        .footer-pg.text-justify {
            border-top: 3px solid #15152B;
            width: 80vw;
            margin: 0 auto;
            padding: 7em 6vw;
        }

        body {
            background-color: #141526;
            background-color: #16162C;
        }

        .footer-pg p,
        .footer-pg li {
            font-weight: 500;
            font-size: 2.3em;
            line-height: 1.6em;
            text-align: left;
            color: #f5f5f5;
        }

        .footer-pg h3 {
            font-size: 2.6em;
            font-weight: 600;
        }

        .tab-content-faq.panel h3 {
            font-size: 1.6em;
            line-height: 1.4em;
        }

        .footer-pg h1 {
            font-size: 4em;
        }

        .tab-content-faq.panel p {
            margin-top: -.9em;
            padding: 0 1.8em 1em 1.2em;
            font-size: 1.2em;
        }

        .faqs .tab {
            padding: 2.6em;
            margin: 2em auto;
            max-width: 100%;
        }
    }


    .intro-text,
    .vid-tut {
        width: 80vw;
        margin: auto;
    }

    .vid-tut {
        text-align: center;
    }

    .vid-tut video {
        width: 30%;
        margin: 3em 2%;
        height: auto;
    }

    #videoModal.modal {
        display: none;
        position: fixed;
        z-index: 99999999 !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
    }

    #videoModal .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 26vw;
        border: .5em solid #15152c
    }

    #videoModal .closevid {
        position: absolute;
        top: -19px;
        right: -40px;
        font-size: 50px;
        cursor: pointer;
        z-index: 99999;
        opacity: 1;
        color: #c0c0c5;
        text-shadow: none;
        font-weight: 600;
    }

    .vid-tut .video-link {
        font-size: 1.3em;
        display: inline-block;
        width: 20%;
        margin: 1em 1em 2em 1em;
        background-color: #0C0C24;
        position: relative;
        color: #f5f5f5;
        font-weight: 500;
        padding: 1em;
        border-radius: .5em;
    }

    .vid-tut .video-link:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2em;
        bottom: -1em;
        left: 0;
        background-color: #0C0C24;
        transform: skew(0deg, 356deg);
        border-radius: 0 0 .5em .5em;
        z-index: -1;
    }

    .vid-tut .video-link img {
        display: block;
        margin: auto;
        max-width: 6em;
        width: 100%;
    }

    .video-link:after {
        content: "";
        width: 2.4em;
        height: 2.4em;
        background: url("https://d3n9ik8ok897ap.cloudfront.net/library/play-ic.svg") no-repeat bottom;
        background-size: contain;
        position: absolute;
        top: 1em;
        right: 1em;
    }



    .intro-text h1 {
        display: block;
    }

    h2 {
        position: relative;
        text-align: left;
        font-family: 'Oswald', sans-serif;
        padding-bottom: .4em;
        font-size: 2.4em;
    }

    h2:after {
        width: 3em;
        height: .2em;
        background: #c71b4a;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .app-download {
        width: 100%;
        margin: auto;
        padding: 4em 10vw;
        box-sizing: border-box;
        display: block;
        position: relative;
        background: url("assets/android-bg.svg") no-repeat top;
        background-size: cover;
        height: auto;
        background-color: #16162C;
    }

    .app-text {
        width: 46%;
        text-align: center;
        display: inline-block;
    }

    .app-text p {
        font-weight: 300 !important;
        margin: .5em;
        font-size: 1.2em;
    }

    .app-text p span {
        font-size: 1.3em;
    }

    .app-text a {
        font-size: 1.3em;
        color: #fff;
        background: #c71b4b;
        border-radius: .4em;
        padding: 1em 3em;
        display: inline-block;
        margin-top: 1.2em;
    }

    .app-text a img {
        margin-right: .6em;
        width: 1.4em;
        margin-bottom: -.3em;
    }

    .app-banner {
        width: 46%;
        display: inline-block;
        padding: 4em;
        box-sizing: border-box;
    }

    .app-banner img {
        width: 100%;
    }

    /* FOOTER */
    .footer-section {
        font-size: .8em;
        text-align: center;
        background-color: #121228;
        height: 3em;
        line-height: 3em;
        color: #ffffffd6;
    }

    .footer-description {
        max-width: 650px;
    }




    @media only screen and (max-width: 800px) {
        .header-brand-image {
            width: 7em;
        }

        .text-container {
            width: 90%;
        }

        h2 {
            font-size: 1.7em;
        }

        .faqs .tab {
            width: 100%;
            padding: 1.5em 1.6em;
            margin: .6em auto
        }

        .accordion.tab:before {
            right: 0;
            top: calc(50% - .25em)
        }

        .tab-content-faq.panel {
            width: 100%;
        }

        .faqs h3 {
            font-size: 1.6em;
        }

        .tab-content-faq.panel h3 {
            font-size: 1.5em;
            font-weight: 600;
            line-height: 1.5em
        }

        .tab-content-faq.panel p {
            padding: 0 1.7em;
            margin-top: -.7em;
            padding: 0 1.8em 1em 1.2em;
            font-size: 1.2em;
            opacity: .9;
            font-weight: 400;
        }

        .intro-text,
        .vid-tut,
        .faqs {
            padding: 1.5em 3em
        }

        .faqs {
            padding: 2em 5%;
        }

        .app-download {
            padding: 1em 0;
        }

        .app-text,
        .app-banner {
            width: 90%;
            margin: auto;
            display: block;
            padding: 0;
        }

        .app-text p {
            font-weight: 500 !important;
        }

        .app-text a {
            margin-top: .4em;
        }

        .app-banner img {
            width: 90%;
            display: block;
            margin: 1em auto;
        }

        .app-text img {
            width: 50%;
        }

        .vid-tut {
            padding-top: 0em;
            margin-top: 0em;
            padding: 0;
            width: 90%;
            display: block;
            position: relative;
        }

        .vid-tut .video-link {
            font-size: 1.4em;
            margin: 0 auto 2.5em auto;
            width: 90%;
            padding: 1em 0 0.5em 0;
            z-index: 3;
        }

        .vid-tut .video-link img {
            max-width: 5em;
            margin-bottom: 0.4em;
        }

        #videoModal .closevid {
            top: -.5em;
            right: -.5em;
            background: #15142d;
            height: 34px;
            width: 34px;
            text-align: center;
            line-height: 30px;
            border-radius: 50em;
            border: 2px solid #15142d;
            font-size: 30px;
        }

        #videoModal .modal-content {
            max-width: 86%;
        }

        .hero-text {
            transform: scale(2.1);
            left: 3%;
            top: 18%;
            transform-origin: top left;
        }

        .hero-image {
            display: none;
        }

        .hero-image-m {
            display: block;
            width: 100%;
        }

        .hero-title {
            font-size: .5em;
            line-height: 1.5em;
        }

        #chat-btn {
            transform: scale(1.55);
            transform-origin: top left;
            border-radius: .3em;
            padding: .5em 0em .35em 3.5em;
            margin-top: -.1em;
            font-weight: 800;
            box-shadow: 00px 0px 0px 3px rgb(33 33 33 / 91%);
            -webkit-box-shadow: 0px 0px 0px 3px rgb(33 33 33 / 91%);
            -moz-box-shadow: 0px 0px 0px 3px rgb(33 33 33 / 91%);
        }

        #chat-bell {
            left: .15em;
        }

        .cta-band {
            padding: 1em .5em 1.9em;
            display: block;
            margin: 1.8em auto;
        }

        .cta-text {
            font-size: 1.7em;
            width: 100%;
            text-align: center;
        }

        .cta-link-btn {
            width: 60%;
            margin: .5em auto .3em auto;
            text-align: center;
            display: block;
            font-size: 1.7em;
        }

        .cta-link-btn:after {
            width: 1.8em;
            height: 1.8em;
            bottom: -1em;
        }

        #videoModal .closevid {
            top: -.5em;
            right: -.5em;
            background: #020202;
            height: 34px;
            width: 34px;
            text-align: center;
            line-height: 34px;
            border-radius: 50em;
            border: .1em solid #3e3e3e;
            font-size: 30px;
        }

        #videoModal .modal-content {
            max-width: 86%;
        }

        .video-link:after {
            width: 2em;
            height: 2em;
            background-size: cover;
        }

        .footer-section {
            margin-top: 2.5em;
        }
    }