@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: #fff;
    overflow-x: hidden;
    font-family: "Inter", sans-serif !important;
}

img,
svg {
    width: 100%;
    max-width: 100%;
}

a {
    text-decoration: none !important;
}

.logo {
    width: 250px;
}

/* Topnav */
.topnav {
    text-align: center;
    background-color: #0A0A0A;
    padding: 60px 0;
}

.topnav p {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    font-family: "Geist", sans-serif !important;
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 3px;
}

/* Main Header */
.main-header {
    background-color: #000000;
    text-align: center;
    padding: 90px 0;
}

.explore {
    width: 500px;
}

.main-header .title {
    background: linear-gradient(291.23deg, #6484FF -15.77%, #ABC1D7 75.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 36px;
    font-weight: 500;
    margin-top: 32px;
}

.main-header .sub-title {
    color: #62748E;
    font-size: 18px;
    font-weight: 500;
    margin-top: 40px;
}

/*  */
.exploreModule {
    padding: 100px 0;
    background-color: #E2E8F0;
}

.section-title {
    font-size: 48px;
    font-weight: 500;
    text-align: center;
    background: linear-gradient(291.23deg, #6484FF -15.77%, #000000 75.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 50px;
}

.exploreCard {
    background: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 52%, rgba(248, 250, 251, 1) 98%);
    border-radius: 8px;
    height: 478px;
    overflow: hidden;
}

.card-header {
    background-color: transparent !important;
    padding: 24px !important;
    border-bottom: 0 !important;
}

.mb35 {
    margin-bottom: 35px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.z-index-8 {
    z-index: 8 !important;
}

.exploreCard h3 {
    font-weight: 500;
    font-size: 24px;
    text-transform: capitalize;
    line-height: 140%;
}

.exploreCard p {
    font-weight: 400;
    font-size: 12px;
    line-height: 180%;
    color: #262F3980;
    margin-bottom: 0;
}

.vector {
    position: absolute;
    top: 60px;
    left: 106px;
    width: 75%;
    z-index: 0;
}

.vector1 {
    position: absolute;
    top: 24px;
    left: 56px;
    width: 90%;
    z-index: 0;
}

.sign-up {
    position: absolute;
    right: 30px;
    bottom: 0;
    z-index: 8;
    width: auto;
}

.first-ever-diy {
    position: absolute;
    bottom: 0;
    right: 10px;
    z-index: 8;
}

/*  */
.qrModule {
    background-color: #020202;
    height: 800px;
    position: relative;
    overflow: hidden;
}

.qrModuleInner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.qrImg {
    width: 524px;
}

.qrModule h3 {
    font-weight: 500;
    font-size: 36px;
    line-height: 120%;
    text-align: center;
    background: linear-gradient(291.23deg, #6484FF -15.77%, #FFFFFF 75.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 40px;
}

.qrModule p {
    font-weight: 500;
    font-size: 18px;
    line-height: 160%;
    text-align: center;
    background: #62748E;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vector3 {
    position: absolute;
    left: 0;
    top: -500px;
}

/*  */
.footer {
    background-color: #000000;
    padding: 90px 0 70px 0;
    color: #fff;
}

.footer-title {
    color: #6366F1 !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 19.56px;
    margin-bottom: 20px;
}

.footer .list-unstyled li {
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: #CFD3D7;
}

.footer p {
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
}

.footer a:hover {
    color: #6c63ff !important;
    transition: 0.3s;
}

.footer input::placeholder {
    color: #bbb;
}

.footer input:focus {
    border-color: #6c63ff;
    box-shadow: none;
}

.footer .footerIcon {
    width: 20px;
    height: 20px;
}

.footer .form-label {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #CFD3D7;
}

.footer input {
    border-radius: 10px;
    border: 0.89px solid #475569;
    padding: 14px;
    font-size: 14px;
}

.submitBtn {
    padding: 14px 42px !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 150% !important;
}

.copyright {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #CFD3D7;
}

::placeholder {
    color: #77808B;
}

.desktop-view {
    display: block;
}

.mobile-view {
    display: none;
}


/* Terms and Conditions */
.page-header {
    /* height: 300px; */
    background-color: #000000;
    padding: 96px 0;
}

.page-header h1 {
    font-weight: 500;
    font-size: 60px;
    line-height: 120%;
    background: linear-gradient(291.23deg, #6484FF -15.77%, #ABC1D7 75.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-header .container {
    padding: 0 180px;
}

.back {
    background-color: #171717;
    border-radius: 100px;
    padding: 14px 24px;
    width: fit-content;
    margin-bottom: 36px;
}

.back .arrow {
    width: 5px;
}

.back span {
    background: linear-gradient(291.23deg, #6484FF -15.77%, #ABC1D7 75.45%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
    font-size: 12px;
    line-height: 180%;
    margin-left: 14px;
}

.termsContent .container {
    padding: 90px 180px;
}

.termsContent p {
    margin-bottom: 30px;
}

.termsContent p,
.termsContent li {
    font-weight: 400;
    font-size: 14px;
    line-height: 180%;
}

.termsContent h2 {
    font-weight: 700;
    font-size: 21px;
    line-height: 180%;
    margin-bottom: 24px;
}

.agreeBox {
    background-color: #E5E5E5;
    padding: 32px;
    margin-bottom: 50px;
}

.agreeBox h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 180%;
    margin-bottom: 0;
}


/* Mobile View */
@media (max-width:768px) {
    .desktop-view {
        display: none;
    }

    .mobile-view {
        display: block;
    }

    .topnav {
        padding: 30px 0;
    }

    .topnav p {
        font-size: 14px;
    }

    .main-header,
    .exploreModule,
    .footer {
        padding: 60px 0;
    }

    .explore {
        width: 370px;
    }

    .logo {
        width: 200px;
    }

    .main-header .title,
    .qrModule h3 {
        font-size: 20px;
    }

    .main-header .sub-title,
    .qrModule p {
        font-size: 14px;
    }

    .qrModule {
        height: 600px;
    }

    .qrImg {
        width: 280px;
    }

    .qrModule h3 {
        margin-top: 26px;
    }

    .vector3 {
        position: absolute;
        left: 0;
        top: -134px;
    }

    .exploreCard h3 {
        font-size: 20px;
    }

    .first-ever-diy {
        right: 0;
    }

    .vector {
        top: 80px;
        left: -20px;
        width: 100%;
    }

    .sign-up {
        right: 10px;
        width: 300px;
    }

    .vector1 {
        top: 100px;
        left: 0px;
        width: 100%;
    }

    /*  */
    .page-header {
        padding: 60px 0;
    }

    .page-header .container {
        padding: 0 12px;
    }

    .termsContent .container {
        padding: 60px 12px;
    }

    .agreeBox h4 {
        font-size: 20px;
    }

    .page-header h1 {
        font-size: 50px;
    }
}