/* Mobile Optimization CSS */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* General adjustments */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    p {
        font-size: 1rem;
    }
    
    /* Header and Navigation */
    header {
        padding: 10px 0;
    }
    
    .logo h1 {
        font-size: 1.5rem;
    }
    
    .logo p {
        font-size: 0.9rem;
    }
    
    /* Hero Section */
    .hero {
        min-height: 400px;
        padding: 60px 0;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    /* Service Grid */
    .service-grid {
        grid-template-columns: 1fr;
    }
    
    /* Areas Section */
    .area-list {
        grid-template-columns: 1fr;
    }
    
    /* Process Steps */
    .process-steps {
        gap: 20px;
    }
    
    /* Testimonials */
    .testimonial {
        padding: 30px 20px;
    }
    
    /* Contact Grid */
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-logo, .footer-links, .footer-contact {
        text-align: center;
    }
    
    /* Service Pages */
    .service-description .container {
        display: block;
    }
    
    .service-content, .service-sidebar {
        width: 100%;
    }
    
    .service-sidebar {
        margin-top: 40px;
    }
    
    /* Campaign Page */
    .campaign-grid {
        grid-template-columns: 1fr;
    }
    
    /* Areas Page */
    .area-districts {
        grid-template-columns: 1fr 1fr;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    .area-districts {
        grid-template-columns: 1fr;
    }
    
    .breadcrumbs {
        display: none;
    }
    
    .page-hero {
        padding: 40px 0;
    }
    
    .page-hero h1 {
        font-size: 1.8rem;
    }
    
    .service-features li, .benefits-list li {
        padding-left: 25px;
    }
    
    .service-features li i, .benefits-list li i {
        font-size: 1rem;
    }
    
    .keyword-list {
        gap: 5px;
    }
    
    .keyword {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

/* Tablet Devices */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Adjustments for tablet screens */
    .service-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .campaign-grid {
        grid-template-columns: 3fr 2fr;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) {
    /* Make buttons and interactive elements larger for touch */
    .btn, button, select, input[type="submit"] {
        min-height: 44px;
        padding: 12px 20px;
    }
    
    /* Increase spacing between clickable items */
    nav ul li {
        margin: 0 10px;
    }
    
    .footer-links ul li {
        margin-bottom: 12px;
    }
    
    /* Make form elements more touch-friendly */
    input, select, textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 12px 15px;
    }
}

/* Print styles */
@media print {
    header, footer, .cta-section, .breadcrumbs, .page-hero {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        text-decoration: none;
        color: #000;
    }
    
    .container {
        width: 100%;
        max-width: none;
        padding: 0;
        margin: 0;
    }
    
    h1, h2, h3, h4 {
        page-break-after: avoid;
    }
    
    p, li {
        orphans: 3;
        widows: 3;
    }
    
    img {
        max-width: 100% !important;
    }
    
    .service-content, .campaign-content {
        width: 100%;
    }
    
    .service-sidebar, .campaign-sidebar {
        display: none;
    }
}