/* Responsive Design Improvements for Baton Engineering */

/* Mobile-first approach - Base styles for mobile */
@media (max-width: 767px) {
    /* Navigation improvements */
    .menu {
        width: 100%;
        background: rgba(0, 0, 0, 0.9);
        padding: 10px 0;
    }
    
    .menu li {
        display: block;
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
    
    .menu li a {
        padding: 10px 15px;
        display: block;
        font-size: 16px;
    }
    
    /* Hero section mobile optimization */
    .main-banner {
        padding: 20px 10px;
    }
    
    .style-banner h4 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    .style-banner h5 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    
    /* Company statistics mobile layout */
    .about-abt-grid {
        margin-bottom: 30px;
    }
    
    .about-oil-w3layouts {
        padding: 20px 15px;
    }
    
    .about-icon {
        margin-bottom: 15px;
    }
    
    .about-icon span {
        font-size: 2rem;
    }
    
    /* Contact form mobile optimization */
    .newsletter form {
        flex-direction: column;
    }
    
    .newsletter input {
        margin-bottom: 10px;
        width: 100%;
    }
    
    .newsletter button {
        width: 100%;
        padding: 12px;
    }
}/* T
ablet improvements */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Admin interface tablet optimization */
    .admin-container {
        padding: 15px;
    }
    
    .admin-sidebar {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .admin-content {
        width: 100%;
    }
    
    /* Table responsiveness */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        min-width: 600px;
    }
    
    /* Form improvements */
    .form-group {
        margin-bottom: 20px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Desktop and large screen improvements */
@media (min-width: 1024px) {
    /* Enhanced hover effects */
    .service-grid-wthree:hover {
        transform: translateY(-5px);
        transition: transform 0.3s ease;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .gallery-grids:hover img {
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }
    
    /* Better spacing for large screens */
    .container {
        max-width: 1200px;
    }
}

/* Print styles */
@media print {
    .header-outs,
    .footer,
    .admin-sidebar,
    .btn,
    .newsletter {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .container {
        width: 100% !important;
        max-width: none !important;
    }
}