.hero-banner {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
}

/* Image */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoomInOnce 6s ease-out forwards;
}

/* Zoom animation */
@keyframes zoomInOnce {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.15);
    }
}

/* Container must be positioning reference */
.hero-banner .container {
    height: 100%;
}

/* Caption */
.hero-caption {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    text-align: start;
    color: #fff;
    background: linear-gradient( to left, rgba(9, 85, 141, 0.5), rgba(9, 85, 141, 0.99) );
    padding: 10px 20px;
    border-radius: 6px;
    max-width: 800px;
}

    .hero-caption h3 {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }

    .hero-caption p {
        font-size: 1.1rem;
    }

    .hero-caption .navigate-bar {
    }

        .hero-caption .navigate-bar a {
            font-size: 25px;
            font-weight: 600;
            text-decoration: none;
            color: white;
        }

.about-us {
}


@media (max-width: 768px) {
    .hero-caption h3 {
        font-size: 1.9rem;
        margin-bottom: 10px;
    }

    .hero-caption .navigate-bar a {
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        color: white;
    }
}