#sec-1 {
    min-height: calc(100svh - var(--navbar-height));
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#sec-1 .bg-overlay {
    background: linear-gradient(var(--prim-col) 80%, rgb(36, 36, 36) 100%);
}

#sec-1-content {
    position: relative;
    max-width: 50svw;
}

#sec-1 h1 {
    font-size: 2.5rem;
}

.hero-subtitle {
    margin: 0.45svh auto 1svh;
    font-size: 1.06rem;
    line-height: 1.6;
    max-width: 56ch;
}

#sec-1-content > p {
    margin: 0.8svh auto;
    font-size: 1.06rem;
    line-height: 1.6;
    max-width: 50ch;
}

.sec-1-btn {
    font-size: 1.3rem;
    min-width: 15rem;
    padding: .5em 1em;
}

#sec-1 #btns {
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

@media (width <=1100px) {
    #sec-1 h1 {
        font-size: 2rem;
    }

    #sec-1-content {
        max-width: 70svw;
    }

    .hero-subtitle {
        font-size: 1.02rem;
        max-width: 56ch;
    }

    #sec-1-content > p {
        font-size: 1.02rem;
        max-width: 56ch;
    }
}

/* Large screens - scale up text for better presence */
@media (min-width: 1400px) {
    #sec-1 h1 {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 1.4rem;
    }

    #sec-1-content > p {
        font-size: 1.2rem;
    }
}

/* Extra large screens - scale up more but keep it reasonable */
@media (min-width: 1800px) {
    #sec-1 h1 {
        font-size: 4rem;
    }

    .hero-subtitle {
        font-size: 1.6rem;
    }

    #sec-1-content > p {
        font-size: 1.3rem;
    }
}