/* responsive.css - Keep this file for additional responsive styles only */
/* Most responsive styles are now in style.css */

/* Additional mobile-specific adjustments if needed */
@media (max-width: 480px) {
    .container {
        width: 95%;
        padding: 0 10px;
    }
    
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    .hero .subtitle {
        font-size: 0.9rem;
        padding: 0 10px;
    }
    
    .section-title {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }
    
    .section-subtitle {
        font-size: 1rem;
        margin-bottom: 40px;
        padding: 0 10px;
    }
    
    .btn {
        padding: 8px 20px;
        font-size: 0.85rem;
    }
    
    .about-grid {
        gap: 20px;
        margin-top: 30px;
    }
    
    .activities-grid {
        gap: 20px;
    }
    
    .contact-wrapper {
        gap: 30px;
    }
    
    .footer {
        padding: 40px 0 15px;
    }
    
    .footer-content {
        gap: 25px;
    }
}