/* ===================================================
   MAHFUJ ALOM PORTFOLIO — responsive.css
   Responsive Layout Breakpoints & Mobile Adaptations
   =================================================== */

@media (max-width: 1200px) {
    :root {
        --section-pad: 100px;
    }
    .container { padding: 0 4vw; }
}

@media (max-width: 1080px) {
    .nav-groups { display: none; }
    .hamburger { display: flex; }
    .nav-groups.mobile-active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        background: rgba(0,0,0,0.95);
        backdrop-filter: blur(24px);
        padding: 24px;
        border-radius: 24px;
        border: 1px solid var(--border-subtle);
    }
    .nav-sector-group { flex-direction: column; align-items: flex-start; background: transparent; border: none; padding: 0; }
    .nav-links { flex-direction: column; width: 100%; }
    .nav-divider { width: 100%; height: 1px; margin: 6px 0; }
}

@media (max-width: 768px) {
    :root {
        --section-pad: 80px;
        --radius-card: 20px;
    }
    .section-title { font-size: 2.2rem; }
    .section-sub { font-size: 1rem; }
    .footer-inner { flex-direction: column; text-align: center; gap: 14px; }
}

@media (max-width: 480px) {
    :root {
        --section-pad: 60px;
    }
    .btn { padding: 12px 22px; font-size: 0.88rem; width: 100%; justify-content: center; }
}