/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {
    .navbar {
        gap: 18px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .social-links {
        justify-content: center;
    }

    .hero-image {
        min-height: 450px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-content {
        text-align: center;
    }

    .about-info {
        text-align: left;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-box {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 700px) {
    .container {
        width: min(100% - 28px, 1150px);
    }

    .section {
        padding: 80px 0;
    }

    /* MOBILE NAV */
    .navbar {
        position: fixed;
        top: var(--header-height);
        left: 14px;
        right: 14px;
        height: auto;
        padding: 15px;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        background: rgba(8,18,34,.96);
        backdrop-filter: blur(20px);
        border: 1px solid var(--border);
        border-radius: 15px;
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }

    body.light .navbar {
        background: rgba(255,255,255,.96);
    }

    .navbar.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        height: 45px;
        padding: 0 15px;
        border-radius: 8px;
    }

    .nav-link::after {
        display: none;
    }

    .nav-link.active {
        background: rgba(79,140,255,.1);
    }

    .menu-toggle {
        display: grid;
    }

    /* HERO */
    .hero {
        padding-top: 120px;
    }

    .hero h1 {
        font-size: 55px;
        letter-spacing: -3px;
    }

    .hero h2 {
        font-size: 18px;
    }

    .hero-description {
        font-size: 13px;
    }

    .portrait-card {
        height: 400px;
    }

    .floating-card-one {
        left: 5px;
    }

    .floating-card-two {
        right: 5px;
    }

    /* ABOUT */
    .about-info {
        grid-template-columns: 1fr;
    }

    /* SKILLS */
    .skills-grid {
        grid-template-columns: 1fr;
    }

    /* PROJECTS */
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-image {
        height: 210px;
    }

    /* CONTACT */
    .contact-box {
        padding: 30px 22px;
    }

    /* FOOTER */
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}

/* SMALL PHONE */
@media (max-width: 400px) {
    .hero h1 {
        font-size: 48px;
    }

    .portrait-card {
        height: 350px;
    }

    .floating-card {
        transform: scale(.85);
    }
}