@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&family=Candal&family=Inter:wght@900&display=swap');

*, ::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: 'Inter', sans-serif;
    color: #08081b;
    font-size: 18px;
    line-height: 25px;
    font-weight: 300;
    overflow-x: hidden !important;
    text-align: left;
    position: relative;
}

.candal {
    font-family: 'Candal', cursive;
    letter-spacing: -2px;
    font-weight: 200;
}

#logo {
    font-size: 96px;
    font-family: 'Candal', cursive;
    font-weight: bolder;
    letter-spacing: -2px;
}

#powerby {
    font-size: 42px;
    font-family: 'Candal', cursive;
    font-weight: bolder;
    letter-spacing: -2px;
    padding: 0 8px;
}

.b {
    color: #00B0EF;
}

.y {
    color: #FFD336;
}

.p {
    color: #FF8EDE;
}

.o {
    color: #f0b38c;
}

.g {
    color: #afd7b3;
}

.f-r {
    float: right;
}

.f-l {
    float: left;
}

.bold {
    font-weight: bold;
}

.big-a {
    font-size: 1.5rem;
}

#myprofile {
    margin-top: 48px;
    margin-bottom: 5rem;
}

#hero {
    margin-top: 48px;
    min-height: 75vh;
}

#hero-text {
    font-weight: bold;
    font-size: 6.5rem;
    margin-top: 5.5rem;
    text-align: left;
}

.hero-title {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 4rem;
}

.strong-t {
    font-weight: 900;
    font-size: 3rem;
    margin: 0;
}

.hero-section {
    padding: 10rem 0;
}

.tl {
    font-weight: 900;
    font-size: 3.5rem;
    margin: 0;
}

#tll {
    border-bottom-style: inset;
    padding-bottom: 4px;
}

#logo,
#logo img {
    height: 100px;
    margin: auto;
    width: 348px;
    margin: inherit;
}

#logo-text {
    letter-spacing: 3px;
    font-weight: bold;
}

.badge {
    background: #08081b;
    color: white;
    padding: 0px 5px;
    border-radius: 10px;
}

.highlight {
    background: url(./images/stroke.svg);
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: 38px 18px;
    padding: 8px 0;
}

.highlight-1 {
    background: url(./images/hlight.svg);
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: 38px 18px;
    padding: 8px 0;
}

.highlight-2 {
    background-image: url(./images/under_high.svg);
    /* background-position: 50% 100%;
    background-size: contain;
    background-repeat: no-repeat;*/
    /* background-repeat: no-repeat;
    background-size: 75%;
    background-position: 38px 18px;
    padding: 8px 0;*/
    background-position: 50% 100%;
    background-size: contain;
    background-repeat: no-repeat;
}



.highlight-3 {
    background: url(./images/highlight-underline.svg);
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: 38px 18px;
    padding: 8px 0;
}

#Howitworks {
    margin: 10px 0 250px 0;
}

#meetcreator, #community {
    margin: 10px 0 250px 0;
}

.focus-details p {
    color: #00000061;
    font-size: 3rem !important;
    font-weight: 600 !important;
    margin-bottom: 4.5rem;
}

.focus-details .FH {
    color: #08081b;
}

.page {
    margin: 6rem 0 10rem 0;
}



footer #logo,
footer #logo img {
    height: 60px;
    margin: inherit;
    width: 60px;
}

footer #logo-text {
    letter-spacing: 3px;
    font-weight: bold;
}

.f-image {
    width: 100%;
}

#sub-hero-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
}

p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.hero2-text {
    font-weight: bold;
    font-size: 5.5rem;
}

#why, #htw {
    padding: 5rem 0 0 0;
}

footer,
.why-section {
    padding: 5rem 0 5rem 0;
}

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

#chart {
    width: 90% !important;
}

#onesix {
    font-size: 12rem;
    font-family: 'Montserrat';
    font-weight: bold;
}

.onesixone {
    line-height: 1;
}

#htw-details {
    padding: 15% 0;
}

    #htw-details .htw-img {
        padding-bottom: 1rem;
    }

.f1-5 {
    font-size: 1.5rem;
}

.btn {
    display: inline-block;
    padding: 25px 55px;
    background-color: #08081b;
    color: #fff !important;
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.4px;
    line-height: 30px;
    border-radius: 40px;
}

.btn-sm {
    font-size: 1.25rem;
    padding: 15px 45px;
}

#money-earned {
    font-weight: bold;
    font-size: 5.5rem;
}

#coffe-earned,
#book-earned,
#phone-earned,
#netflix-earned,
#vaca-earned {
    font-weight: bold;
    font-size: 2.5rem;
}

.cal-input {
    font-weight: bold;
    font-size: 2rem;
}

.cal-lable {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.cal-big-lable {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
}

a {
    text-decoration: none;
}

    a, a:hover, a:focus {
        color: #08081a;
        font-weight: normal;
    }

        a:hover, a:focus {
            color: #08081aa8;
        }

.sub-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5;
}

.lowkey-text {
    color: rgb(150, 150, 150);
}


.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-box:hover
.flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-box-back {
    transform: rotateY(180deg);
}

.footer-links {
    list-style: none;
    font-size: 14px;
    padding: 0px;
}

    .footer-links li {
        margin-top: 5px;
    }

.accordion {
    width: 100%;
    text-align: left;
}

    .accordion label {
        display: block;
        background-color: #0d0d0d;
        padding: 1rem 2rem;
        cursor: pointer;
        border-radius: 20px;
        width: 100%;
    }

    .accordion p {
        padding: 1rem 2rem;
        line-height: 1.7em;
        visibility: hidden;
        opacity: 0;
        display: none;
    }

#q1:checked ~ .hiddentext,
input[id^=q]:checked ~ .hiddentext {
    display: block;
    visibility: visible;
    opacity: 1;
}

.q {
    display: none;
    position: relative;
}

.img-rounded {
    width: 125px !important;
    height: 125px !important;
    border-radius: 50%;
    border-style: solid;
    border-width: 3px;
    border-color: #08081b;
}

.profile-img-flip {
    width: 125px !important;
    height: 125px !important;
    margin-bottom: 1rem !important;
}

#p-name {
    font-size: 56px;
    font-family: 'Candal', cursive;
    font-weight: bolder;
    letter-spacing: -2px;
    margin-bottom: 0;
}

.f-link-icon {
    height: 44px;
    margin-top: -8px;
}

.p-link-icon {
    height: 44px;
}

.p-link {
    height: 36px;
}

.offer {
    margin: 3rem 0 3rem 0;
}

    .offer .content-img {
        width: 100%;
        border-radius: 20px;
        height: 400px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

/*    .offer .content-des {
        width: 94%;
        position: absolute;
        padding: 0.5rem;
        box-sizing: border-box;
        z-index: 1;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        bottom: 0;
        background: -webkit-linear-gradient(rgb(255 255 255 / 0%),#08081b99);
        background: linear-gradient(rgb(255 255 255 / 0%), #08081b99);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

        .offer .content-des:hover {
            background: -webkit-linear-gradient(rgb(255 255 255 / 0%),#08081be8);
            background: linear-gradient(rgb(255 255 255 / 0%), #08081be8);
        }*/
.content {
    margin-bottom: 2rem;
}

.offer .content-des {
    /* width: 94%; */
    /* position: absolute; */
    padding: 1rem;
    box-sizing: border-box;
    z-index: 1;
    color: #08081a;
    display: flex;
    flex-direction: column;
    bottom: 0;
    /*background: rgb(240, 179, 140);*/
    /* background: -webkit-linear-gradient(rgb(255 255 255 / 0%),#08081b99); */
    /* background: linear-gradient(rgb(255 255 255 / 0%), #08081b99); */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

    .offer .content-des .badge {
        width: fit-content;
    }

.offer h3 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 0.1rem;
}

.bb {
    border-bottom: 3px solid #08081b;
}

.tb {
    border-top: 3px solid #08081b;
}

@media only screen and (max-width: 768px) {
    #hero {
        margin-top: 12%;
    }

    #hero-text {
        margin-top: 5rem;
    }

    #hero-text,
    .hero2-text {
        font-size: 4.5rem;
    }

    .sub-text {
        font-size: 1.4rem;
    }

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

    #money-earned {
        padding-top: 3rem;
    }

    .why-section {
        padding: 2.5rem 0 2.5rem 0;
    }

    #htw-details .col-sm-12 {
        padding-bottom: 4rem;
    }
}

@media only screen and (max-width: 600px) {
    body {
        font-size: 16px;
    }

    #hero {
        margin-top: 15%;
    }

    #logo, #logo img {
        height: 64px;
        width: 64px;
    }

    .hero-section {
        padding: 8rem 0;
    }

    .sub-text {
        font-size: 1.2rem;
    }

    .tl {
        font-size: 2.5rem;
    }

    #hiwlink {
        text-align: center;
        display: flow-root;
        margin: 0px !important;
    }

    .f-image {
        margin: 3rem 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .focus-details p {
        font-size: 1.9rem !important;
        margin-bottom: 2rem;
        line-height: 32px;
    }

    #meetcreator, #community {
        margin: 10px 0 150px 0 !important;
    }

    footer #logo, footer #logo img {
        height: 40px;
        width: 40px;
    }

    #logo {
        font-size: 3rem;
    }

    .btn {
        width: 100%;
        padding: 12px 45px;
        font-size: 1.2rem;
        transition: none;
        text-align: center;
        user-select: none;
    }

    .big-a {
        font-size: 1.2rem;
        text-align: center;
        display: flow-root;
        margin: 0px !important;
    }

    .footer .f-r,
    .power-footer .f-r {
        float: none !important;
    }

    .power-footer p {
        line-height: 40px;
    }
}

@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: 1400px
    }
}

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

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

small {
    font-weight: normal;
}

.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;
}

.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-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .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-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .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-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .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%
    }
}

#product h1 {
    font-size: 50px;
    font-family: 'Candal', cursive;
    letter-spacing: -2px;
    margin-bottom: 2rem;
}

#product h2 {
    margin: 1.2rem 0 0.5rem 0;
    font-weight: normal;
}

#product .img-rounded {
    width: 40px !important;
    height: 40px !important;
}

#product p {
    font-weight: bold;
    font-size: 1.2em;
}

#product small {
    font-size: 0.85rem;
}

#product .badge {
    width: fit-content;
    padding: 5px 10px;
    font-size: 1.2rem;
}

.product-img {
    width: 100%;
    border-radius: 20px;
}

.form-control {
    color: #08081b;
    font-size: 18px;
    line-height: 25px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: none;
    font-weight: normal;
    width: 100%;
    max-width: 350px;
}

.field-validation-valid {
    color: #ff4747;
    font-weight: normal;
    display: none;
}

.help-details {
    margin: 2rem 0;
}

    .help-details small {
        display: inline-block;
    }

.basic-icons {
    height: 40px;
}

.show {
    display: inline-block;
}

.hide {
    display: none;
}

.d-flwx {
    display: flex;
}