@media (max-width: 992px) {
    .hero-image {
        opacity: 0.3;
        right: -10%;
    }
    
    .hero-content {
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    header {
        padding: 1rem 5%;
    }
    
    .hero h2 {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .hero-image {
        display: none;
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    nav ul {
        display: none;
    }
}