/* TABLETS AND SMALLER DESKTOPS */
@media screen and (max-width: 992px) { /* Breakpoint where hamburger menu appears */
    #desktop-nav {
        display: none;
    }
    #hamburger-nav {
        display: flex; /* SHOW HAMBURGER NAV */
    }
    main {
         padding-top: 15vh; /* Adjust if hamburger nav height is different */
    }
    .logo {
        font-size: 1.5rem;
    }

    .title {
        font-size: 2.2rem;
    }
    .main-title {
        font-size: 2.5rem;
    }

    #profile {
        flex-direction: column; /* Stack profile items */
        gap: 2rem;
        padding-top: 2rem; /* Additional padding when stacked under sticky nav */
    }
    #profile1 {
        width: 250px;
        height: 250px;
    }
    .section__pic-container {
        margin-bottom: 1rem;
    }

    .about-cards-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .details-container.about-card {
        width: 100%;
        max-width: 450px;
    }
    .achievements-languages {
        flex-direction: column;
        gap: 1.5rem;
    }

    .skills-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    .experience-sub-title { /* This is skill category title */
        font-size: 1.2rem;
    }

    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }
}


/* MOBILE DEVICES */
@media screen and (max-width: 768px) {
    main {
         padding-top: 12vh; /* Adjust for potentially smaller mobile nav */
    }
    #desktop-nav, #hamburger-nav { /* Ensure mobile nav height consistency */
        height: 12vh;
    }
    section {
        padding: 40px 5%;
    }
    .logo {
        font-size: 1.3rem;
    }

    .title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    .main-title {
        font-size: 2.2rem;
    }
    .section__text__p1 {
        font-size: 1rem;
    }
    .section__text__p2 {
        font-size: 1.2rem;
    }

    #profile1 {
        width: 200px;
        height: 200px;
        border-width: 4px;
        box-shadow: 0 0 0 6px var(--card-border-color), var(--box-shadow);
    }
    .social-icon {
        height: 2rem;
        width: 2rem;
    }
    .btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }

    .text-container ul {
        padding-left: 20px;
    }
    .text-container ul li, .details-container.about-card p, .experience-card ul li {
        font-size: 0.9rem;
    }

    .skills-card .article-container {
        gap: 1rem;
    }
    .skills-card article {
        padding: 0.4rem 0.8rem;
    }
    .skills-card article h3 {
        font-size: 0.9rem;
    }
    .skills-card article p {
        font-size: 0.75rem;
    }

    .experience-card h3 {
        font-size: 1.15rem;
    }
    .experience-card .date {
        font-size: 0.85rem;
    }

    .projects-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 1.5rem;
    }
    .project-img-container {
        height: 200px;
    }
    .project-title-card {
        font-size: 1.25rem;
    }
    .project-tech {
        font-size: 0.8rem;
    }
    .project-description {
        font-size: 0.85rem;
    }

    .contact-info-upper-container {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .contact-info-container p {
        font-size: 1rem;
    }

    footer .nav-links {
        flex-direction: column;
        gap: 1rem;
    }
    footer .nav-links a {
        font-size: 0.95rem;
    }
    footer p {
        font-size: 0.85rem;
    }
}

@media screen and (max-width: 480px) { /* Smaller Mobiles */
    main {
        padding-top: 12vh;
    }
    #hamburger-nav .mobile-menu-links {
        width: 260px; /* Adjust width as needed */
        max-width: calc(100vw - 10% - 2px); /* Ensure it respects nav padding */
        right: 5%; /* Align with the right padding of the nav bar itself */
        left: auto; /* Ensure left is not fixed */
        top: calc(100% + 8px); /* Position below the .hamburger-menu parent */
    }
    .logo {
        font-size: 1.2rem;
    }
    .title {
        font-size: 1.8rem;
    }
    .main-title {
        font-size: 2rem;
    }
    #profile1 {
        width: 160px;
        height: 160px;
    }
    .section__text__p2 {
        font-size: 1.1rem;
    }
}