* {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#navBar,
#heroText {
    opacity: 0;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroBackVidDesk {
    display: block;
}

.heroBackVidMob,
.heroBackVidIphone {
    display: none;
}

.card .cardFlexLeft>h2 {
    font-size: 2.8rem;
    line-height: 3rem;
    /* margin-top: 1rem; */
}

.card .cardFlexLeft>p {
    font-size: 1.5rem;
    line-height: 2rem;
    /* margin-top: 1rem; */
}

.card2 .cardFlexRight {
    width: 50%;
}

.card2 .cardFlexRight>img {
    scale: 1.3;
    transform: translateY(-10%);
}

.card3 .cardFlexRight>img {
    scale: 1.4;
    transform: translateY(-7%);
}

.card4 .cardFlexRight>img {
    scale: 1.2;
    transform: translateY(-7%);
}

.card4>div>div,
.card4 .cardFlexCon {
    height: 100%;
}

.card4>div {
    padding-block: 0;
}

.card4 .cardFlexRight {
    margin-bottom: 0 !important;
}

@media (max-width: 1500px) {}

@media (max-width: 1300px) {
    .heroBackVidCon {
        padding-inline: 10rem;
    }
}

@media (max-width: 1200px) {
    .cardHeading>p {
        font-size: 1.4rem;
    }

    .cardFlexCon>*:nth-child(2) {
        width: 50%;
    }

    article>div>div {
        padding-inline: 0rem !important;
    }

    .footer>div {
        scale: 0.8;
    }

    .iphoneTempImg img {
        margin-left: auto;
        margin-right: 8rem;
        /* padding-top: 3rem; */
    }
}

@media (max-width: 1101.98px) {
    .heroBackVidCon {
        padding-inline: 5rem;
    }

    .cardFlexCon>*:nth-child(2) {
        width: 40%;
    }

    .cardFlexLeft>h2 {
        margin-top: 1rem;
        font-size: 2.5rem;
    }

    .cardFlexLeft>p {
        margin-top: 0.5rem;
        font-size: 1.3rem;
    }

    .cardFlexLeft>a {
        margin-top: 1.5rem;
        font-size: 1.1rem;
    }

    .card2>div {
        padding-left: 5rem !important;
    }

    .card2 .cardFlexRight {
        width: 60%;
    }

    .iphoneTempImg img {
        margin-left: auto;
        margin-right: 4rem;
        scale: 0.82;
        /* padding-top: 3rem; */
    }
}

@media (max-width: 999.98px) {
    .cardHeading>p {
        font-size: 1.2rem;
    }
}

@media (max-width: 950px) {
    .navCircle {
        display: none;
    }

    .footer>div {
        padding-inline: 0;
    }

    .iphoneTempImg img {
        margin-left: auto;
        margin-right: 1rem;
        scale: 0.7;
        /* padding-top: 3rem; */
    }
}

@media (max-width: 850px) {
    #heroText {
        margin-block: 0rem;
    }

    .cardFlexCon {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

    .cardFlexRight {
        width: 50% !important;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card2 .cardFlexRight {
        width: 70% !important;
    }

    .cardFlexLeft {
        width: 80%;
        margin-inline: auto;
    }

    .cardFlexLeft>* {
        margin-inline: auto;
        text-align: center;
        margin-top: 0.5rem;
    }

    .cardFlexLeft>h2 {
        font-size: 2rem;
        line-height: 2.2rem;
    }

    .cardFlexLeft>p {
        font-size: 1.2rem;
    }

    .cardFlexLeft>a {
        font-size: 1rem;
    }

    .cardFlexRight>img {
        margin-block: 0;
    }

    .card2>div {
        padding-left: 0rem !important;
    }

    .card2>div>div {
        margin-right: 0;
    }

    .card2 .cardFlexRight>img,
    .card2 .cardFlexRight>img,
    .card3 .cardFlexRight>img,
    .card4 .cardFlexRight>img {
        scale: 1;
        transform: translateY(0%);
    }
}

@media (max-width: 767.98px) {
    .cardFlexLeft {
        width: 100%;
        margin-inline: 0;
    }

    .card1 .cardFlexCon {
        gap: 0rem;
    }

    .card2 .cardFlexRight {
        margin: 0;
        width: 100% !important;
    }

    .card5 .cardFlexRight>img,
    .card3 .cardFlexRight>img,
    .card2 .cardFlexRight>img {
        width: 100% !important;
        margin-inline: 0 !important;
    }

    .card4 .cardFlexRight>img {
        width: 80% !important;
    }

    .card4 .cardFlexCon {
        transform: translateY(-17%) !important;
    }

    .card4 .cardFlexRight {
        margin-top: 0 !important;
    }

    .card4 .cardFlexLeft>h2 {
        text-wrap: pretty;
    }

    .card .cardFlexLeft>p {
        width: 100%;
        font-size: 0.9rem;
        line-height: 1.2rem;
    }

    .card .cardFlexLeft>h2 {
        margin-top: 0.5rem;
        font-size: 1.5rem;
        /* opacity: 0; */
        line-height: 1.8rem !important;
    }

    .card .cardFlexLeft>div {
        scale: 0.7;
    }

    .card1 .cardFlexLeft>a {
        scale: 0.8;
    }

    .card4 .cardFlexCon {
        transform: translateY(-5%);
        gap: 1rem !important;
    }

    .card2 .cardFlexLeft>p {
        text-wrap: balance;
    }

    .card2 .cardFlexCon {
        transform: translateY(-7%);
        gap: 0rem !important;
    }

    .cardHeadingCon {
        scale: 0.8;
    }

    .heroBackVidCon {
        justify-content: flex-start;
        padding-top: 0;
    }

    article>div {
        height: 35rem !important;
        width: 21rem !important;
        flex-shrink: 0;
        border-width: 2px;
        border-style: solid;
        border-color: #555555;
        /* border-image-source: linear-gradient(70deg, */
        /* rgba(179, 179, 179, 1) 0%, */
        /* rgba(102, 102, 102, 1) 100%); */
        border-image-slice: 1;
        border-radius: 22px;
    }

    article:last-child {
        padding-bottom: 0;
    }

    .heroBackVidCon>* {
        margin-top: 6rem;
    }

    .heroHeading {
        margin-top: 4rem;
        line-height: 4.2rem;
    }

    header {
        padding-inline: 0;
    }

    .heroBackVidCon>* {
        margin-top: 0rem;
    }

    .heroBackVidMob {
        display: block;
    }

    .heroBackVidDesk {
        display: none;
    }

    .heroBackVidCon>*::after {
        background-position-y: 80vh;
    }

    .heroBackVids {
        transform: translateY(-10%);
    }

    .cardFlexRight {
        width: 90% !important;
    }

    .footer>div {
        scale: 1;
        padding-inline: 1.5rem;
    }

    details {
        padding-block: 1.2rem !important;
    }

    summary {
        font-size: 1rem !important;
        line-height: 1.2rem !important;
    }


    /* summary::after {
        height: 23px;
        width: 23px;
        transform: translate(-25%, -50%) rotate(-90deg);
        scale: 0.6;
    }

    details[open]>summary::after {
        transform: translate(-25%, -50%) rotate(0deg);
        background: url("/minus.svg");
    } */

    .footerSection {
        padding-inline: 2rem;
    }

    .cardFlexCon {
        gap: 3rem;
    }

    .rightFooter>div {
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: 1fr 1fr;
    }

    .rightFooter * {
        width: fit-content !important;
        /* margin-inline: auto; */
    }

    .rightFooter>div>nav:nth-child(3) {
        margin-left: 0;
    }

    #heroText>h1 {
        font-size: 3rem;
        line-height: 3.3rem;
        margin-top: 3rem;
        text-align: center;
    }

    #heroText>p {
        font-size: 1.4rem;
        line-height: 1.6rem;
        text-align: center;
    }

    header {
        height: 94vh;
    }

    header>div {
        height: 90%;
    }

    .iphoneTempImg img {
        margin-inline: auto;
        /* margin-right: 8rem; */
        scale: 0.7;
        padding-top: 11rem;
    }

    #earlyAccess::after {
        content: "";
        position: absolute;
        left: 0;
    top: -70px;
        width: 100%;
        height: 100%;
        background: url("/elipseShadow.png");
        /* background: green; */
        background-repeat: no-repeat;
        background-size: contain;
        background-position-y: 0vh;
        /* transform: translateY(100%)!important; */
    }
}

@media (max-width: 650px) {
    .heroBackVidCon {
        padding-inline: 2rem;
    }

    #heroText {
        margin-inline: 0rem;
    }

    #heroText>p {
        text-align: center;
        font-size: 1.2rem;
    }

    .heroBackVids {
        transform: translateY(-5%);
    }

    .cardFlexLeft {
        margin-top: 0;
    }

    .cardFlexLeft>a {
        margin-top: 0.5rem;
    }
}