.hero {
    position: relative;
    width: 100%;
    height: 60vh; /* Adjust height to 60% of viewport height */
    background: url('images/heroimages/tech.jpg') no-repeat center center;
    background-size: cover;
    padding: 40px 20px;
}

/* Adjust for tablets */
@media (max-width: 1200px) {
    .hero {
        height: 50vh;
    }
}

/* Adjust for mobile */
@media (max-width: 768px) {
    .hero {
        height: 40vh;
    }
}