/* ===============================
   GLOBAL MOBILE TEXT CONTROL
================================ */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* ===============================
   Large screens (1440px and below)
================================ */
@media (max-width: 1440px) {
    .skills {
        padding: 30px 10px;
    }

    .skills .skill-cards {
        margin: 40px 10px;
        gap: 20px;
    }

    .skills .skill-card {
        width: 300px;
        padding: 15px 25px;
    }

    .skills .skill-card .icon {
        width: 45px;
        height: 45px;
    }
}

/* ===============================
   Laptops (1024px and below)
================================ */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 4rem;
    }

    .hero p {
        font-size: 1.2rem;
    }

    .hero .view-btn {
        font-size: 1rem;
    }

    .skills {
        padding: 30px 0;
    }

    .skills h2,
    .projects h2,
    .contact h2 {
        font-size: 2.6rem;
    }

    .skills .skill-cards {
        margin: 40px 0;
        gap: 10px;
    }

    .skills .skill-card {
        width: 260px;
        padding: 15px;
    }

    .skills .skill-card .icon {
        width: 40px;
        height: 40px;
    }

    .skills .skill-card h4 {
        font-size: 1.1rem;
    }

    .project-cards {
        margin: 40px 0;
    }

    .project-content h4 {
        font-size: 1.1rem;
    }

    footer p {
        font-size: 1rem;
    }
}

/* ===============================
   Small laptops (880px and below)
================================ */
@media (max-width: 880px) {
    .skills .skill-card {
        width: 240px;
    }
}

/* ===============================
   Tablets (768px and below)
================================ */
@media (max-width: 768px) {
    nav {
        padding: 10px 30px;
    }

    nav .logo h2 {
        font-size: 1.3rem;
        font-weight: 400;
    }

    nav .links a {
        font-size: 1rem;
    }

    .skills {
        padding: 30px 15px;
    }

    .skills .skill-cards {
        gap: 15px;
    }

    .skills .skill-card {
        width: 95%;
    }

    .projects {
        padding: 30px 40px;
    }

    .projects .project-cards {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   Large phones (640px and below)
================================ */
@media (max-width: 640px) {
    html {
        font-size: 15px;
    }

    nav {
        padding: 10px;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .hero .btn,
    .hero .view-btn {
        font-size: 0.9rem;
        padding: 6px 16px;
    }
}

/* ===============================
   Small phones (480px and below)
================================ */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    nav .links a {
        font-size: 0.9rem;
        margin-right: 10px;
    }

    .hero {
        padding: 2rem 1.5rem 50px;
    }

    .hero h1 {
        font-size: 2.3rem;
    }

    .skills h2,
    .projects h2,
    .contact h2 {
        font-size: 1.8rem;
    }

    .skills p,
    .projects p,
    .contact p {
        font-size: 1rem;
    }

    .skills .skill-card .icon {
        width: 32px;
        height: 32px;
    }

    .project-content span {
        font-size: 0.75rem;
    }

    .section-divider {
        margin: 30px auto;
    }
}