@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}

/* The SVG takes up the full window */
#animated-svg {
    width: 57.9%;
    height: 30%;
    margin-left: 24.3%;
    margin-left: 3.2%;
    display: block;

    background: transparent;
}

/* common styles */
.hero {
    width: 100%;
    background-position-y: bottom;
    background-size: auto 100%;
}


.btn-scroll-top::before {
    background: rgba(0, 0, 0, .2) !important;
}

.hero-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* style the <img> itself */
.hero-img img,
.hero-img svg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
    /* base fallback: full‑width, auto height */
    width: 100%;
    height: auto;
}

#made-by-manifold {
    height: 300px;
    width: 300px;
    min-width: 300px;
    object-fit: contain;
    position: absolute;
    left: 60.5%;
    top: -13%;
}

@media (max-width: 1327px) {
    .hero {
        /* 1) below 1328px: height such that width:height = 1328:420 */
        /* 420 / 1328 ≃ 0.316265;  height = vw * ratio */
        height: calc(100vw * 420 / 1328);
        background-position-x: center;
        min-height: 150px;
    }

    .hero-img {
        /* 1) below 1328px: auto height = correct ratio */
        /* height follows image’s natural aspect at 100% width */
        height: calc(100vw * (840/3840));
    }
}

/* 2) 1328–1919px: fix height to 420, crop left/right */
@media (min-width:1328px) and (max-width:1919px) {
    .hero {
        height: 420px;
        background-position-x: center;
    }

    .hero-img {
        height: 420px;
    }

    .hero-img img {
        /* force it to fill vertically, crop horizontally */
        height: 100%;
        width: auto;
        min-width: 100%;
    }

    #animated-svg {
        width: 47.9%;
        width: 1112px;
        height: 30%;
        margin-left: 63px;
        display: block;
    }
}

/* 3) ≥1920px: scale to 100% width, height auto again (same ratio as original), 
such that width:height = 1920:420 */
@media (min-width:1920px) {
    .hero {
        /* 420 / 1920 = 0.21875; height scales with viewport width */
        /* height: calc(100vw * 420 / 1920);
        height: calc((100vw / 1920) * 420); */
        height: auto;
        background-position-x: center;
        min-width: 100%;
    }

    #animated-svg {
        width: 57.9%;
        height: 30%;
        margin-left: 3.2%;
        /* margin-left: 3.2%; */
        display: block;
    }

    .hero-img {
        aspect-ratio: 1920 / 420;
        height: auto;
    }

    .hero-img img,
    .hero-img svg {
        width: 100%;
        height: auto;
    }
}


#prepaidCard {
    font-family: 'Space Mono', monospace;
    letter-spacing: 1.6px;
}

#prepaidCard .slotTxt,
#prepaidCard .logoTxt {
    font-family: 'Inter';
}