/* Additional responsive design styles */
@media (max-width: 992px) {
    .contact-content {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        text-align: center;
    }
    
    nav {
        margin-top: 20px;
        display: none;
    }
    
    nav.active {
        display: block;
    }
    
    nav ul {
        flex-direction: column;
        text-align: center;
    }
    
    nav ul li {
        margin: 10px 0;
    }
    
    .mobile-menu-btn {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .service-item {
        flex-direction: column;
    }
    
    .service-icon {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .hero-content h1 {
        font-size: 24px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 12px;
    }
    
    .intro, 
    .services-preview,
    .testimonial,
    .about-content,
    .services-content,
    .contact-content {
        padding: 40px 0;
    }
    
    .page-header {
        padding: 40px 0;
    }
    
    .page-header h1 {
        font-size: 32px;
    }
    
    blockquote {
        padding: 10px;
    }
    
    blockquote::before {
        font-size: 60px;
    }
}

/* Touch-friendly improvements for mobile */
@media (hover: none) {
    .btn:hover {
        transform: none;
    }
    
    .service-card:hover {
        transform: none;
    }
    
    nav ul li a,
    .social-icons a {
        padding: 12px;  /* Larger touch target */
    }
    
    input, 
    textarea, 
    button {
        font-size: 16px; /* Prevent zoom on focus in iOS */
    }
}