@media (max-width: 600px) {
    #nav {
        padding: 0px 15px;
        height: 60px;
    }

    #nav>h3 {
        font-size: 16px;
    }

    #nav>button {
        padding: 8px 15px;
        font-size: 14px;
    }

    #loop {
        top: 25%;
        font-size: 40px;
    }

    #page>h3 {
        font-size: 18px;
        top: 50%;
        left: 5%;
        width: 90%;
    }

    #page>h4 {
        top: 65%;
        left: 5%;
        font-size: 14px;
    }

    #page1>#right-text {
        top: 15%;
        left: 5%;
        width: 90%;
    }

    #page1>#right-text>h1 {
        font-size: 30px;
    }

    #page1>#left-text {
        top: 55%;
        right: 5%;
        width: 90%;
        text-align: right;
    }

    #page1>#left-text>h1 {
        font-size: 30px;
    }

    #page2>#text1 {
        top: 15%;
        left: 5%;
        width: 90%;
    }

    #page2>#text1>h1 {
        font-size: 35px;
    }

    #page2>#text2 {
        top: 25%;
        right: 5%;
        width: 90%;
        text-align: right;
    }

    #page2>#text2>p {
        font-size: 14px;
    }

    #page3>#text3 {
        top: 30%;
        right: 5%;
        width: 90%;
    }

    #page3>#text3>h1 {
        font-size: 40px;
    }

    canvas {
        object-fit: cover;
    }
}

@media (max-width: 600px) {
    .exp-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        width: 90%;
    }
    
    .impact-content h1, .achievement-text h1 {
        font-size: 35px;
    }
    
    .exp-card img {
        height: 60px;
        width: 60px;
    }
}

@media (max-width: 600px) {
    #footer-text h1 {
        font-size: 40px;
    }
    
    .cta-link {
        padding: 12px 30px;
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    .experience-section, .project-section {
        flex-direction: column;
        padding: 10% 5%;
        justify-content: center;
    }

    .left-cards, .right-cards {
        width: 95vw;
    }

    .exp-card, .project-card {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        width: 100%;
        margin: 15px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .exp-card img {
        margin-bottom: 10px;
    }

    #explore-btn-container {
        margin-left: 0 !important;
        justify-content: center !important;
    }

    .center-dummy {
        display: none;
    }
}

@media (max-width: 600px) {
    #menu-links a, #menu-links div {
        font-size: 50px;
    }
}

@media (max-width: 768px) {
    #projects-overlay {
        padding: 30px 20px;
    }
    #projects-timeline {
        padding-left: 40px;
    }
    .timeline-dot {
        left: -28px;
    }
    .timeline-line {
        left: 10px;
    }
}