.hero-logo {
    max-width: 220px;
    margin: 0 auto 16px auto;
    display: block;
    filter: drop-shadow(0 2px 8px #0002);
}

.hero {
    background: linear-gradient(135deg, #36c1e1, #5cccad);
    color: white;
    padding: 2rem 2rem 5rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.hero-book {
    background: url('../code-kingdom/assets/hero.png') center center/cover no-repeat;
    background-color: #eaf6ff;
    min-height: 340px;
    box-shadow: 0 4px 24px #0001;
    position: relative;
}


.hero h1 {
    position: relative;
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 10px;
    animation: fadeInUp 1s ease-out forwards;
    z-index: 2;
}

.hero .tagline {
    position: relative;
    font-size: 1.25rem;
    margin-bottom: 2rem;
    line-height: 1.8;
    max-width: 600px;
    margin-inline: auto;
    animation: fadeInUp 1.3s ease-out forwards;
    z-index: 2;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    /* Try 0.3 to 0.6 */
    z-index: 1;
}

.hero-logo-bar {
    width: 100%;
    text-align: right;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}


@media (max-width: 900px) {
    .hero-logo {
        max-width: 180px;
    }
     .hero h1 {
        font-size: 2em;
    }

    .hero .tagline {
        font-size: 1em;
        /* margin-bottom: 0; */
    }
     header.hero {
        padding-bottom: 2rem;
     }
}