.hero {
    margin-top: 50px;
}

.hero img {
    width: 100%;
    max-width: 100%;
    border: 3px solid var(--text-color);
}

#hero-banner-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    transform: translateY(-40px);
}

.hero-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
    cursor: pointer;
}

.hero-dot.active {
    transform: scale(1.6);
}

#see-more-blog {
    margin-top: 30px;
    margin-left: 50%;
    transform: translateX(-50%);
}