/* ===============================
   RESPONSIVE DESIGN
================================= */
@media screen and (max-width: 1024px) {
    .feature-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .about-us-section, .contact-us-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .about-content, .about-image,
    .contact-content, .contact-form-container {
        width: 100%;
    }
    
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
}

@media screen and (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .nav-brand img {
        max-height: 30px;
    }
    
    .hero h1 {
        font-size: 24px;
    }
    
    .form-group input {
        font-size: 14px;
    }
}