/* 13-14 inch MacBook optimization (roughly 1280-1440px) */
@media screen and (max-width: 1440px) {
    #experience, #projects, #education, #skills, #about {
        height: auto;
        padding-bottom: 3vh;
    }
    
    section {
        padding-top: 3vh;
        padding-bottom: 3vh;
        margin: 0 3rem;
        min-height: 100vh; /* Maintain full-height sections */
    }
    
    #profile {
        min-height: 100vh;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
    }
    
    .section_pic-container {
        height: 300px;
        width: 300px;
    }
    
    .arrow-container {
        padding: 1rem 2rem 1rem 0;
    }
}

@media screen and (max-width: 1200px) { 
    #desktop-nav {
        display: none;
    }
    #hamburger-nav {
        display: flex;
    }
    
    .experience-company-container {
        padding: 1.25rem;
    }
    
    .company-details h2 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    section {
        margin: 0 2.5rem;
    }
    
    .project-card {
        flex-direction: column;
    }
    
    .project-image {
        width: 100%;
        padding: 1rem;
    }
    
    .project-content {
        padding: 1.25rem;
    }
    
    .about-containers {
        gap: 1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .details-container {
        padding: 0.75rem;
    }
    
    nav {
        height: 12vh;
        position: fixed; /* Keep navigation fixed on tablets */
        top: 0;
        left: 0;
        right: 0;
        background: white;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .title {
        font-size: 2.25rem;
        margin-bottom: 1rem;
    }
    
    #skills .about-containers {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .profile-content {
        gap: 2rem;
    }
    
    /* Center the profile title on tablet and mobile screens */
    #profile .title {
        text-align: center;
    }
    
    .tech-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    .project-title {
        font-size: 1.25rem;
    }
    
    .title {
        font-size: 2rem;
    }
    
    .skills-sub-title {
        font-size: 1.25rem;
    }
    
    section {
        margin: 0 1.5rem;
    }
    
    #skills .about-containers {
        gap: 1rem;
    }
    
    .experience-company-container,
    .project-card {
        border-radius: 1rem;
    }
    
    .project-image {
        padding: 0.75rem;
    }
    
    .project-img {
        max-height: 200px;
    }
    
    /* Match home page button styling for tablet screens */
    .project-btn {
        font-weight: 600;
        transition: all 300ms ease;
        border-radius: 2rem;
        margin: 0.25rem;
    }
    
    .project-btn.btn-color-1 {
        background: rgb(53, 53, 53) !important;
        color: white !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
    }
    
    .project-btn.btn-color-1:hover {
        background: rgb(85, 85, 85) !important;
        color: white !important;
        cursor: pointer;
    }
    
    .project-btn.btn-color-2 {
        background: none !important;
        color: rgb(53, 53, 53) !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
    }
    
    .project-btn.btn-color-2:hover {
        background: rgb(53, 53, 53) !important;
        color: white !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
        cursor: pointer;
    }
}

@media screen and (max-width: 600px) {
    body {
        padding-top: 10vh; /* Adjust padding for smaller fixed nav height */
    }
    
    section {
        margin: 0 1rem;
        padding-top: 3vh;
        padding-bottom: 3vh;
    }
    
    #profile {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
        min-height: 100vh;
    }
    
    .profile-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        width: 100%;
        max-width: 100%;
    }
    
    .section_pic-container {
        height: 250px;
        width: 250px;
        margin: 0 auto;
        flex-shrink: 0;
    }
    
    .section_pic-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2rem;
        display: block;
    }
    
    .section_text {
        text-align: center;
        width: 100%;
    }
    
    /* Center the profile title on mobile screens */
    #profile .title {
        text-align: center;
    }
    
    .btn-container {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .socials-container {
        justify-content: center;
    }
    
    #about .section_text_p1 {
        margin-bottom: 0.05rem;
    }
    
    .section-container {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
    
    #about .section_pic-container {
        height: 200px;
        width: 200px;
        flex: none;
    }
    
    #about .section_pic-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2rem;
        display: block;
    }
    
    #experience, #projects, #education, #skills, #about {
        margin: 0 1rem;
    }
    
    .title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
        margin-top: 0.25rem;
    }
    
    nav {
        height: 10vh;
        padding: 0 1rem;
        position: fixed; /* Keep navigation fixed on mobile */
        top: 0;
        left: 0;
        right: 0;
        background: white;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .hamburger-menu {
        z-index: 1000;
    }
    
    .menu-links {
        border-radius: 0 0 1rem 1rem;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        min-width: 200px;
    }
    
    .experience-company-container {
        padding: 0.8rem;
    }
    
    /* PROJECT CARD MOBILE LAYOUT - SIMPLE APPROACH */
    .project-card {
        padding: 0.75rem;
        border-radius: 1rem;
        display: block; /* Change to block to avoid flex ordering conflicts */
        position: relative;
    }
    
    /* Image at the top */
    .project-image {
        width: 100%;
        padding: 0.5rem;
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }
    
    .project-image img {
        max-width: 100%;
        max-height: 200px;
        object-fit: cover;
        border-radius: 0.75rem;
    }
    
    /* Project content */
    .project-content {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .project-header {
        margin-bottom: 0.75rem;
    }
    
    .project-tech {
        display: flex;
        justify-content: center;
        gap: 0.25rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }
    
    /* Buttons section - positioned between content and description */
    .project-buttons {
        display: flex !important;
        visibility: visible !important;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        margin: 1.5rem 0;
        width: 100%;
        padding: 1rem 0;
        border-top: 1px solid rgba(163, 163, 163, 0.2);
        border-bottom: 1px solid rgba(163, 163, 163, 0.2);
        background: rgba(250, 250, 250, 0.5);
        position: relative;
        z-index: 1;
    }
    
    .project-btn {
        display: block !important;
        visibility: visible !important;
        width: 85%;
        max-width: 180px;
        text-align: center;
        font-weight: 600;
        transition: all 300ms ease;
        padding: 0.9rem 1.3rem;
        border-radius: 2rem;
        font-size: 0.9rem;
    }
    
    /* Match home page button styling */
    .project-btn.btn-color-1 {
        background: rgb(53, 53, 53) !important;
        color: white !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
    }
    
    .project-btn.btn-color-1:hover {
        background: rgb(85, 85, 85) !important;
        color: white !important;
        cursor: pointer;
    }
    
    .project-btn.btn-color-2 {
        background: none !important;
        color: rgb(53, 53, 53) !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
    }
    
    .project-btn.btn-color-2:hover {
        background: rgb(53, 53, 53) !important;
        color: white !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
        cursor: pointer;
    }
    
    /* Remove the top-row flexbox structure on mobile */
    .project-top-row {
        display: block;
    }
    
    /* Bullet points at the bottom */
    .project-description {
        display: block !important;
        visibility: visible !important;
        padding: 1rem 0.5rem 0.5rem 0.5rem;
        margin-top: 1rem;
        border-top: 1px solid rgba(163, 163, 163, 0.3);
        width: 100%;
        position: relative;
        z-index: 1;
        background: inherit;
    }
    
    .project-description ul {
        display: block !important;
        visibility: visible !important;
        margin: 0.5rem 0 0.5rem 1rem;
        padding: 0;
        list-style-position: inside;
        list-style-type: disc;
    }
    
    .project-description li {
        display: list-item !important;
        visibility: visible !important;
        margin-bottom: 0.5rem;
        line-height: 1.4;
        font-size: 0.85rem;
        text-indent: -1rem;
        padding-left: 1rem;
        list-style: disc inside;
    }
    
    .project-header {
        margin-bottom: 0.4rem;
    }
    
    .exp-responsibilities ul {
        margin-left: 1rem;
        margin-top: 0.3rem;
    }
    
    .exp-responsibilities li {
        margin-bottom: 0.2rem;
        padding-right: 0.25rem;
        line-height: 1.3;
    }
    
    .company-details h2 {
        font-size: 1.25rem;
    }
    
    .education-institute-container {
        padding: 1rem;
    }
    
    .education-item, .experience-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .edu-logo, .company-logo {
        padding: 0.25rem;
        flex: none;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .edu-details {
        width: 100%;
        text-align: center;
    }
    
    .edu-logo img, .company-logo img {
        height: 5rem;
    }
    
    .edu-details p .icon {
        height: 1.5rem;
        margin: 0 0.3rem 0 0;
    }
    
    .edu-summary {
        margin-left: 0;
        padding-left: 0;
        text-align: left;
    }
    
    .edu-summary ul,
    .project-description ul {
        margin-left: 1rem;
        padding-left: 0;
    }
    
    .edu-summary li,
    .project-description li {
        margin-bottom: 0.3rem;
        line-height: 1.4;
        font-size: 0.85rem;
    }
    
    .btn {
        padding: 0.6rem 1rem;
        margin-bottom: 1rem;
        width: 6rem;
        font-size: 0.85rem;
    }
    
    p {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
    
    #skills .about-containers {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    
    #skills .article-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .details-container {
        padding: 0.75rem;
    }
    
    article {
        width: auto;
        gap: 0.15rem;
        justify-content: center;
    }
    
    article h3 {
        font-size: 0.85rem;
        text-align: center;
    }
    
    .arrow-container {
        margin-top: 1.5rem;
        padding: 0.75rem 1.5rem 0.75rem 0;
    }
    
    .arrow {
        height: 2rem;
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    .nav-links {
        gap: 1rem;
        font-size: 1.25rem;
    }
}

/* Extra small screens (phones in portrait mode) */
@media screen and (max-width: 480px) {
    section {
        margin: 0 0.5rem;
        padding-top: 2vh;
        padding-bottom: 2vh;
    }
    
    .section_pic-container {
        height: 200px;
        width: 200px;
        flex-shrink: 0;
    }
    
    .section_pic-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2rem;
        display: block;
    }
    
    #about .section_pic-container {
        height: 150px;
        width: 150px;
    }
    
    #about .section_pic-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2rem;
        display: block;
    }
    
    .title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .logo {
        font-size: 1.25rem;
    }
    
    .btn {
        padding: 0.5rem 0.8rem;
        width: 5.5rem;
        font-size: 0.8rem;
    }
    
    .project-card {
        padding: 0.4rem;
        display: flex;
        flex-direction: column;
    }
    
    .project-content {
        padding: 0.4rem;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .project-description {
        padding: 0.4rem;
        width: 100%;
        margin-top: 1rem;
    }
    
    .project-description ul {
        margin-bottom: 1rem;
    }
    
    .project-description li {
        margin-bottom: 0.3rem;
        line-height: 1.3;
        font-size: 0.8rem;
    }
    
    .tech-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.35rem;
    }
    
    .education-institute-container,
    .experience-company-container {
        padding: 0.6rem;
    }
    
    .edu-logo img,
    .company-logo img {
        height: 4rem;
    }
    
    p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .arrow {
        height: 1.5rem;
    }
    
    .arrow-container {
        padding: 0.5rem 1rem 0.5rem 0;
    }
    
    /* Match home page button styling for extra small screens */
    .project-btn.btn-color-1 {
        background: rgb(53, 53, 53) !important;
        color: white !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
    }
    
    .project-btn.btn-color-1:hover {
        background: rgb(85, 85, 85) !important;
        color: white !important;
        cursor: pointer;
    }
    
    .project-btn.btn-color-2 {
        background: none !important;
        color: rgb(53, 53, 53) !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
    }
    
    .project-btn.btn-color-2:hover {
        background: rgb(53, 53, 53) !important;
        color: white !important;
        border: rgb(53, 53, 53) 0.1rem solid !important;
        cursor: pointer;
    }
}

/* Landscape orientation on small screens */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #profile {
        min-height: auto;
        padding: 2vh 0;
    }
    
    .profile-content {
        flex-direction: row;
        gap: 2rem;
    }
    
    .section_pic-container {
        height: 150px;
        width: 150px;
        flex-shrink: 0;
    }
    
    .section_pic-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2rem;
        display: block;
    }
    
    section {
        min-height: auto;
        padding: 2vh 0;
    }
}

/* Additional mobile fix for project layout */
@media screen and (max-width: 600px) {
    /* Remove conflicting rules - handled in main 600px media query above */
}