@media (max-width: 1024px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    
    .container {
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    nav {
        flex-direction: column;
        height: auto;
        padding: 15px 0;
    }

    .nav-links {
        margin-top: 15px;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero-content {
        text-align: center;
        padding-top: 100px;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    /* Grid Adjustments */
    .grid-2-cols, .grid-3-cols {
        grid-template-columns: 1fr;
    }
    
    /* Timeline adjustments for mobile */
    .timeline::after {
        left: 31px;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
        margin-bottom: 20px; /* Add spacing between items */
    }
    
    /* Fix cut-off text in timeline cards */
    .timeline-item .card {
        padding: 20px; /* Adjust padding */
        word-wrap: break-word; /* Ensure text wraps */
        hyphens: auto;
    }

    .timeline-item h3 {
        font-size: 1.2rem; /* Slightly smaller title */
        white-space: normal; /* Allow title wrapping */
        line-height: 1.4;
    }
    
    .timeline-item::after {
        left: 21px;
    }
    
    .timeline-item:nth-child(even) {
        left: 0%;
        text-align: left; /* Force left alignment for even items too */
    }
    
    .timeline-item:nth-child(odd) {
        text-align: left;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .nav-links {
        font-size: 0.9rem;
    }

    /* Stranger Things Image Mobile Adjustment */
    #life .card img[alt*="Stranger Things"] {
        object-position: 80% center !important; /* Shift focus more to the right on small screens */
    }
}