@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200;12..96,300;12..96,400;12..96,700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&family=Bricolage+Grotesque:opsz,wght@12..96,200;12..96,300;12..96,400;12..96,700');*/
/*@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200;12..96,300;12..96,400;12..96,700&family=Outfit:wght@200;400;500;800&display=swap');*/
@font-face {
    font-display: swap;
    font-family: "Geist";
    src: url("../fonts/Geist-Thin.woff2");
    font-weight: 100;
}

@font-face {
    font-display: swap;
    font-family: "Geist";
    src: url("../fonts/Geist-UltraLight.woff2");
    font-weight: 200;
}

@font-face {
    font-display: swap;
    font-family: "Geist";
    src: url("../fonts/Geist-Light.woff2");
    font-weight: 300;
}

@font-face {
    font-display: swap;
    font-family: "Geist";
    src: url("../fonts/Geist-Regular.woff2");
    font-weight: 400;
}

@font-face {
    font-display: swap;
    font-family: "Geist";
    src: url("../fonts/Geist-Medium.woff2");
    font-weight: 500;
}

@font-face {
    font-display: swap;
    font-family: "Geist";
    src: url("../fonts/Geist-Bold.woff2");
    font-weight: 700;
}

@font-face {
    font-display: swap;
    font-family: "Geist";
    src: url("../fonts/Geist-Black.woff2");
    font-weight: 900;
}

@font-face {
    font-display: swap;
    font-family: "Geist";
    src: url("../fonts/Geist-UltraBlack.woff2");
    font-weight: 950;
}


*, ::after, ::before {
    box-sizing: border-box;
}

#hero:focus,
#why:focus {
    outline: none;
}

html {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

body {
    margin: 0;
    background: #fff;
    font-family: 'Geist', sans-serif;
    font-weight: 300;
    color: #121212;
    font-size: 1.1rem;
    line-height: 25px;
    overflow-x: hidden !important;
    text-align: left;
    position: relative;
}

#titlebar {
    padding: 8px 0 8px 0;
    display: flow-root;
    border-bottom: 1px solid rgba(81, 93, 113, .13);
}

    #titlebar .logo-text {
        font-weight: bold;
        font-size: 2rem;
        position: relative;
        top: 8px;
    }

    #titlebar #menu {
        float: right;
        top: -4px;
        position: relative;
    }

        #titlebar #menu a {
            font-weight: bold;
            font-size: 1rem;
            padding: 0.35rem 1rem;
            /* padding-top: 0.35rem;*/
            padding-right: 1rem;
            padding-bottom: 0.35rem;
            padding-left: 1rem;
            top: 4px;
            position: relative;
        }

#logo {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: bold;
    font-size: 2rem;
    position: relative;
    top: 8px;
}
#hero {
   
    margin-top: 12vh;
}

  

    #hero label,
    .chip {
        background: #33c27f;
        font-size: 0.75rem;
        padding: 0px 10px;
        color: #fff !important;
        border-radius: 40px;
        margin-bottom: 1rem;
    }

.hilight-stat {
    font-size: 0.85rem;
}

#logo-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: bold;
    font-size: 14rem;
}

.logo-text {
    font-family: 'Bricolage Grotesque', sans-serif;
}
/*.hero-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: bold;
    font-size: 5rem;
    margin: 2rem 0 1.35rem 0;
}*/
#hero h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
}

#hero h2 {
    font-size: 1.25rem;
    font-weight: 300;
}

#hero img {
    display:block;
    width: 100%;
    padding: 15px;
    max-width:850px;
    border: 1px solid rgba(81, 93, 113, .13);
    border-radius: 20px;
    outline: 2px solid rgba(81, 93, 113, .03);
    border-radius: 40px;
    margin-top: 3.5rem;
}
.nm {
    font-size: 0.85rem;
}


#why, #what, #abu, #pri, #trust, #faq {
    padding: 5rem 0 5rem 0;
}

    #why h2, #what h2, #abu h2, #pri h2, #CTA h2, #trust h2, #page h1, #faq h2 {
        font-family: 'Bricolage Grotesque', sans-serif;
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 1.25rem;
    }

    #what .fun,
    .fun {
        background: #fafafa;
        transition: width 0.3s ease;
        height: 300px;
        outline-offset: 0px;
        border: 1px solid rgba(81,93,113,.13);
        border-radius: 20px;
        outline: 2px solid rgba(81,93,113,.03);
        display: flex;
        text-align: left;
        padding: 12px;
        margin: 14px 0;
    }

        #what .fun svg {
            margin-bottom: 100px;
            transition: width 0.3s ease;
        }

        #what .fun:hover svg {
            width: 100px;
        }

        #what .fun p {
            font-weight: bold;
            margin:0;
        }
        #what .fun small {
            display:table;
        }
        .fun div {
            width: 100%;
        }
        .fun .WIP svg,
        .fun .WIP p,
        .fun .WIP small{
            opacity: 0.2;
        }
    #what span {
        font-weight: bold;
    }

    #why span, #pri span, footer p, footer a {
        font-size: 1rem;
    }


#makerpic {
    height: 206px;
    border-radius: 20px;
    margin-bottom: 1rem;
    border: 1px solid rgba(81, 93, 113, .13);
    border-radius: 20px;
    outline: 2px solid rgba(81, 93, 113, .03);
}

kbd {
    background: #121212;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    line-height: 11px;
}

.blog-card {
    cursor: pointer;
    border-radius: 20px;
    width: inherit;
    margin: 14px 0;
}

    .blog-card img,
    #blog-hero {
        border-radius: 20px;
        width: 100%;
    }



    .blog-card h2 {
        font-weight: bold;
        font-family: 'Bricolage Grotesque', sans-serif;
        margin: 10px 0 0 0 !important;
        font-size: 1.3rem !important;
    }

    .blog-card .tm {
        font-size: 0.8rem;
        color: #b2b2b2;
    }

    .blog-card .category {
        font-size: 1rem;
    }
    #page,
#blogpost {
    padding: 3rem 0 3rem 0;
}

    #blogpost h1 {
        font-family: 'Bricolage Grotesque', sans-serif;
        font-size: 2rem;
        font-weight: bold;
        margin: auto;
    }

    #blogpost img {
        border-radius: 20px;
    }



    #blogpost .tm {
        font-size: 0.8rem;
        color: #b2b2b2;
    }

    #blogpost .category {
        font-size: 1rem;
    }

    #blogpost #author {
        float: right;
        font-size: 1rem;
        position: relative;
    }

        #blogpost #author img {
            border-radius: 40px;
            object-fit: cover;
            margin-right: 5px;
        }

    #blogpost #author-fotter img {
        border-radius: 40px;
        object-fit: cover;
        margin-right: 5px;
    }

    #blogpost p,
    #blogpost li,
    {
        margin: 0.5rem 0;
        font-size: 1.15rem;
    }

    #blogpost .author {
    }

.CTA {
    background: #fafafa;
    outline-offset: 0px;
    border: 1px solid rgba(81, 93, 113, .13);
    border-radius: 20px;
    outline: 2px solid rgba(81, 93, 113, .03);
    padding: 2rem;
    margin-top: 2rem;
    /* text-align: center;*/
    margin-bottom: 4rem;
}

    .CTA img {
        height: 124px;
        border-radius: 12px;
        font-weight: bold;
    }

    .CTA p {
        font-size: 2rem;
        font-weight: bold;
        line-height: normal;
    }



footer {
    padding: 2rem 0 5rem 0;
    border-top: 1px solid rgba(81, 93, 113, .13);
}

    footer .footer-logo {
        font-family: 'Bricolage Grotesque', sans-serif;
        font-weight: bold;
        font-size: 2rem;
    }


.footer-links {
    font-size: 1rem;
    list-style: none;
    padding: 0;
}
.footer-links li{
     padding: 0 0 8px 0;
}

#CTA {
    padding: 12rem 0 12rem 0;
}
footer #rights {
    font-size: 0.8rem;
}


.btn {
    display: inline-block;
    padding: 8px 35px;
    background-color: #121212;
    color: #fff !important;
    font-size: 1.1rem;
    font-family: 'Bricolage Grotesque', sans-serif;
    line-height: 30px;
    border-radius: 40px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0.70659px 0.70659px -0.625px, rgba(0, 0, 0, 0.145) 0px 1.80656px 1.80656px -1.25px, rgba(0, 0, 0, 0.137) 0px 3.62176px 3.62176px -1.875px, rgba(0, 0, 0, 0.125) 0px 6.8656px 6.8656px -2.5px, rgba(0, 0, 0, 0.106) 0px 13.6468px 13.6468px -3.125px, rgba(0, 0, 0, 0.05) 0px 30px 30px -3.75px, rgba(255, 255, 255, 0.23) 0px 2px 2px 0px inset;
}

    .btn:hover {
        background-color: #33c27f;
    }



a {
    text-decoration: none;
}

    a, a:hover, a:focus {
        color: #121212;
    }

.faq-accordion {
    text-align: left;
    margin-top: 20px;
}

    .faq-accordion details {
        background-color: #fafafa;
        border: 1px solid rgba(81, 93, 113, .13);
        border-radius: 20px;
        outline: 2px solid rgba(81, 93, 113, .03);
        margin-bottom: 10px;
    }

    .faq-accordion summary {
        padding: 15px;
        cursor: pointer;
        list-style: none;
    }

    /* .faq-accordion summary::marker {
            color: #121212;
        }*/

    .faq-accordion details[open] summary {
        border-bottom: 1px solid #ddd;
    }

    .faq-accordion .faq-content {
        padding: 15px;
    }




/*@media only screen and (max-width: 992px) {
    #logo-text {
        font-size: 10rem;
    }

    #hero h2 {
        font-size: 4rem;
    }
}*/

@media only screen and (max-width: 768px) {
    #logo-text {
        font-size: 8rem;
    }

  

    #menu .nm {
        display: none;
    }
    #what .fun p {
        font-size: 1rem;
    }
    #what .fun small {
        font-size: 0.85rem;
        display: block;
        line-height: 1.4;
    }
    #blogpost {
        padding: 2rem 0 2rem 0;
    }


        #blogpost h1 {
            font-size: 2rem;
        }

        #blogpost #blogcontent img {
            width: 100%;
        }

    .container {
        max-width: 100% !important;
    }

    .CTA p {
        font-size: 2rem;
        line-height: 1;
    }

    .CTA img {
        height: 84px;
    }

    .CTA #promt-detail {
        top: 10px;
        font-size: 1.2rem;
    }

    .CTA .btn {
        width: auto;
    }

    .footer-links {
        margin: 0;
    }
}

@media only screen and (max-width: 600px) {
    .nm {
        display: none;
    }

    body {
        font-size: 1rem;
    }

    #hero {
        margin-top: 30%;
       
    }

        #hero img {
            border-radius: 20px;
        }

    #logo-text {
        font-size: 5.2rem;
    }

    #hero h2 {
        font-size: 1.2rem;
    }

    #what .fun p {
        font-size: 1.5rem;
    }

    .btn {
        font-size: 1.25rem;
        padding: 8px 35px;
    }

    #CTA {
        padding: 6rem 0 6rem 0;
    }

    footer {
        padding-top: 0;
    }

    .footer-links li {
        margin-bottom: 0.75rem;
    }
}

@media only screen and (max-width: 460px) {
    #hero-text,
    .hero2-text {
        font-size: 3.5rem;
    }
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width:576px) {
    .container {
        max-width: 540px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }
}

img {
    vertical-align: middle;
    border-style: none;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0;
}

.text-left {
    text-align: left !important
}

.text-right {
    text-align: right !important
}

.text-center {
    text-align: center !important
}


.mt-0, .my-0 {
    margin-top: 0 !important
}

.mr-0, .mx-0 {
    margin-right: 0 !important
}

.mb-0, .my-0 {
    margin-bottom: 0 !important
}

.ml-0, .mx-0 {
    margin-left: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.mt-1, .my-1 {
    margin-top: .25rem !important
}

.mr-1, .mx-1 {
    margin-right: .25rem !important
}

.mb-1, .my-1 {
    margin-bottom: .25rem !important
}

.ml-1, .mx-1 {
    margin-left: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.mt-2, .my-2 {
    margin-top: .5rem !important
}

.mr-2, .mx-2 {
    margin-right: .5rem !important
}

.mb-2, .my-2 {
    margin-bottom: .5rem !important
}

.ml-2, .mx-2 {
    margin-left: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.mt-3, .my-3 {
    margin-top: 1rem !important
}

.mr-3, .mx-3 {
    margin-right: 1rem !important
}

.mb-3, .my-3 {
    margin-bottom: 1rem !important
}

.ml-3, .mx-3 {
    margin-left: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.mt-4, .my-4 {
    margin-top: 1.5rem !important
}

.mr-4, .mx-4 {
    margin-right: 1.5rem !important
}

.mb-4, .my-4 {
    margin-bottom: 1.5rem !important
}

.ml-4, .mx-4 {
    margin-left: 1.5rem !important
}

.m-5 {
    margin: 3rem !important
}

.mt-5, .my-5 {
    margin-top: 3rem !important
}

.mr-5, .mx-5 {
    margin-right: 3rem !important
}

.mb-5, .my-5 {
    margin-bottom: 3rem !important
}

.ml-5, .mx-5 {
    margin-left: 3rem !important
}

.m-0 {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important
}

.pt-0, .py-0 {
    padding-top: 0 !important
}

.pr-0, .px-0 {
    padding-right: 0 !important
}

.pb-0, .py-0 {
    padding-bottom: 0 !important
}

.pl-0, .px-0 {
    padding-left: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.pt-1, .py-1 {
    padding-top: .25rem !important
}

.pr-1, .px-1 {
    padding-right: .25rem !important
}

.pb-1, .py-1 {
    padding-bottom: .25rem !important
}

.pl-1, .px-1 {
    padding-left: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.pt-2, .py-2 {
    padding-top: .5rem !important
}

.pr-2, .px-2 {
    padding-right: .5rem !important
}

.pb-2, .py-2 {
    padding-bottom: .5rem !important
}

.pl-2, .px-2 {
    padding-left: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.pt-3, .py-3 {
    padding-top: 1rem !important
}

.pr-3, .px-3 {
    padding-right: 1rem !important
}

.pb-3, .py-3 {
    padding-bottom: 1rem !important
}

.pl-3, .px-3 {
    padding-left: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.pt-4, .py-4 {
    padding-top: 1.5rem !important
}

.pr-4, .px-4 {
    padding-right: 1.5rem !important
}

.pb-4, .py-4 {
    padding-bottom: 1.5rem !important
}

.pl-4, .px-4 {
    padding-left: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

.pt-5, .py-5 {
    padding-top: 3rem !important
}

.pr-5, .px-5 {
    padding-right: 3rem !important
}

.pb-5, .py-5 {
    padding-bottom: 3rem !important
}

.pl-5, .px-5 {
    padding-left: 3rem !important
}

.m-auto {
    margin: auto !important;
}

@keyframes blink-border {
    0% {
        border-color: #c9c9c9;
    }

    50% {
        border-color: #121212;
    }

    100% {
        border-color: #c9c9c9;
    }
}

.blinking-border {
    border: 2px solid transparent;
    animation: blink-border 2s ease-in-out infinite;
}

@keyframes blink-green {
    0% {
        background: #6c6;
    }

    50% {
        background: #9fdf9f;
    }

    100% {
        background: #6c6;
    }
}

.live-dot {
    position: absolute;
    right: 30px;
    top: 30px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation-delay: 0.5s;
}



    .live-dot.live-dot-green {
        background: #6c6;
        animation: blink-green 1s infinite;
    }

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}




@media (min-width:576px) {

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

@media (min-width:768px) {
    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
}

@media (min-width:992px) {
    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }
}

@media (min-width:1200px) {
    .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }
}