/* ============================================================
   RESPONSIVE CSS
   Breakpoints:
     xs  : ≤ 480px   — small phones
     sm  : ≤ 768px   — phones / large phones
     md  : ≤ 1024px  — tablets / small laptops
     lg  : ≥ 1440px  — large & ultrawide monitors
============================================================ */

/* ─── BASE ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    .description {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .description {
        font-size: 20px;
    }
}

/* ─── HEADER ─────────────────────────────────────────────── */

@media (max-width: 900px) {
    header {
        flex-direction: column;
        padding: 16px 20px;
        gap: 14px;
        text-align: center;
    }

    .header-right-side {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
}

/* ─── INTRODUCTION ───────────────────────────────────────── */

@media (max-width: 768px) {
    .introduction {
        margin-bottom: 60px;
    }

    .introduction-text h1 {
        font-size: 22px;
        padding: 0 16px;
    }

    .introduction-text p {
        font-size: 15px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .introduction-text h1 {
        font-size: 18px;
        padding: 0 12px;
    }

    .introduction-text p {
        font-size: 13px;
        padding: 0 12px;
    }
}

/* ─── PROJECTS / SERVICES GRID ───────────────────────────── */

@media (max-width: 768px) {
    .grid-template {
        padding: 20px 20px 40px;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .grid-template {
        padding: 14px 14px 28px;
        gap: 14px;
    }
}

/* ─── ABOUT ──────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .about-container {
        padding: 40px 30px;
    }

    .about-section {
        grid-template-columns: 1fr;
    }

    .image-container {
        text-align: center;
    }

    .profile-image {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    .about-container {
        padding: 30px 20px;
    }

    .about-container button {
        font-size: 16px !important;
    }

    .about-section > div > p,
    .technical-skills-container > p {
        font-size: 15px !important;
    }

    .web-skills-grid {
        grid-template-columns: repeat(2, auto);
        justify-content: center;
    }

    .wide {
        width: 220px;
    }
}

@media (max-width: 480px) {
    .web-skills-grid {
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 8px;
    }

    .circle {
        width: 80px;
        height: 80px;
    }

    .wide {
        width: 160px;
        height: 60px;
    }
}

/* ─── CONTACT ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .contact-container {
        padding: 0 20px;
    }

    .contact-container > p {
        font-size: 15px !important;
    }
}

/* ─── FOOTER ─────────────────────────────────────────────── */

@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-left-side h2 {
        padding: 24px 20px 10px;
        text-align: center;
    }

    .footer-right-side {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
        margin: 10px 0 24px;
    }

    .footer-middle-nav {
        border-left: none;
        border-right: none;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        padding: 12px 0;
    }
}

/* ─── LARGE / ULTRAWIDE MONITORS ─────────────────────────── */

@media (min-width: 1440px) {
    header {
        padding: 20px 120px;
    }

    .projects-container {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }

    .about-container {
        padding: 80px 160px;
    }

    .contact-container {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 160px;
    }
}