/* css/media.css */

@media (max-width: 1024px) {
    .services-grid, .product-grid, .area-grid, .why-us-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .liquor-grid { grid-template-columns: repeat(2, 1fr); }
    .process-steps { grid-template-columns: repeat(2, 1fr); }
    .hero-section h1 { font-size: 34px; }
}

@media (max-width: 768px) {
    .section { padding: 50px 0; }
    .section-title { font-size: 24px; }
    
    .services-grid, .product-grid, .area-grid, .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .liquor-grid, .process-steps { grid-template-columns: 1fr; }
    
    .contact-list { flex-direction: column; gap: 15px; align-items: center; }
    .contact-list li a { width: 100%; max-width: 400px; justify-content: center; }
    
    .company-info-grid { flex-direction: column; gap: 20px; align-items: flex-start; }
    
    .hero-section h1 { font-size: 28px; }
    .hero-section .lead { font-size: 14px; }
}

@media (max-width: 480px) {
    .services-grid, .product-grid, .area-grid, .why-us-grid {
        grid-template-columns: 1fr;
    }
    .hero-section h1 { font-size: 22px; }
    .btn { display: block; width: 100%; margin: 10px 0; }
}