/* Responsive Styles */

/* Large Devices (Desktops & Laptops) */
@media (max-width: 1200px) {
    .container { max-width: 960px; }
    .section { padding: 70px 0; }
    .content-area { padding: 30px; }
}

/* Medium Devices (Tablets) */
@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    .sidebar { display: none; }
    .bottom-nav { display: flex; }
    /* Header actions: icons only on tablet/phone */
    .header-actions .desktop { display: none; }
    .header-actions .mobile { display: inline-flex; }
    
    .content-area {
        margin-left: 0;
        width: 100%;
        padding: 24px 20px 96px; /* extra bottom space for bottom nav */
    }
    /* Home: remove padding so slider touches fixed header/bars */
    .content-area.content-home { padding: 0; }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
    .main-footer { margin-left: 0; }
    /* Home slider full width when sidebar hidden */
    .content-home { margin-left: 0; width: 100%; }
    /* Remove top/bottom gap for home hero on small screens */
    .content-home .hero-section { padding: 0; }
    .hero-content.centered h1 { font-size: 2.4rem; }
    .service-detail { flex-direction: column; }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    /* Project modal: stack on tablet */
    #projectModal .project-detail { grid-template-columns: 1fr; }
    #projectModal .project-gallery .main-image img { height: 320px; }
    /* Service modal uses shared .modal selectors */
    .modal .project-detail { grid-template-columns: 1fr; padding: 16px; }
    .modal-content { width: 94%; max-width: 860px; }
}


/* Small Devices (Landscape Phones) */
@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .section {
        padding: 60px 0;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    .content-area { padding: 20px 16px 96px; }
    .hero-content.centered h1 { font-size: 2rem; }
    .why-grid { grid-template-columns: 1fr; gap: 18px; }
    .values-grid { gap: 16px; }
    .projects-grid { grid-template-columns: 1fr; }
    .projects-filter { justify-content: center; flex-wrap: wrap; }

    /* Project modal: mobile-friendly */
    #projectModal .project-detail { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
    #projectModal .project-gallery .main-image img { height: 220px; border-radius: 10px; }
    #projectModal .thumbnail-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    #projectModal .thumbnail-grid img { height: 56px; border-radius: 6px; }
    #projectModal .project-cta .btn { width: 100%; margin-top: 8px; }
    /* Service modal: tighten padding and reduce image height */
    .modal .project-detail { padding: 16px; }
    .modal .project-gallery .main-image img { max-height: 50vh; }
    .offer-container { flex-direction: column; }
    .offer-details { min-width: 100%; }
    .offer-details { padding: 30px 20px; }
    .footer-links a { margin: 0 10px; }
    .chatbot-container { bottom: 125px; right: 20px; }
}

/* Extra Small Devices (Portrait Phones) */
@media (max-width: 576px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .section {
        padding: 50px 0;
    }
    
    .section-title h2 {
        font-size: 1.75rem;
    }
    
    .logo img {
        height: 40px;
    }
    
    .main-header {
        padding: 10px 0;
    }
    
    .main-container { margin-top: 64px; }
    .sidebar { display: none; }
    .bottom-nav { display: flex; }
    
    .chatbot-window {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 32px);
        max-width: 420px;
        height: 70vh;
        bottom: 70px;
    }
    /* Service modal: full-width feel and comfortable image cap */
    .modal-content { width: 96%; max-width: 520px; }
    .modal .project-detail { padding: 14px; }
    .modal .project-gallery .main-image img { max-height: 42vh; }
}