/* Mobile responsive styles */
@media (max-width: 768px) {
    /* General styles */
    body {
        padding: 5px;
    }

    main {
        margin-top: -10px;
        padding: 0 10px;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Portfolio page adjustments */
    .portfolio-layout {
        height: auto;
        padding: 20px 10px;
    }

    .slideshow-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .slideshow-wrapper {
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .nature-slide,
    .people-slide,
    .places-slide {
        grid-area: auto;
        justify-self: auto;
        align-self: auto;
    }

    /* Hide quotes on mobile */
    .quote-grid {
        display: none;
    }

    /* Layout adjustments */
    .hexagon-container {
        top: 10px;
        right: 10px;
        transform: scale(0.8);
    }

    :root {
        --signature-offset: 10px;
        --nav-spacing: 15px;
    }

    .nav-section {
        padding: 0 5px;
        margin: 10px 0;
    }

    nav {
        margin: 15px 0;
        padding: 5px;
        width: 100%;
    }

    nav ul {
        gap: 5px;
        justify-content: center;
    }

    nav a {
        padding: 5px 8px;
        font-size: 0.85em;
        letter-spacing: 0;
    }

    .signature-img {
        height: 60px;
    }

    /* Home page adjustments */
    .slideshow-container {
        height: 400px;
        margin: 10px auto 20px;
        width: 100%;
    }

    .tagline h1 {
        font-size: 2.2em;
    }

    .quote p {
        font-size: 1.1em;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    /* Home page adjustments */
    .tagline h1 {
        font-size: 1.8em;
    }

    .tagline h2 {
        font-size: 1.1em;
    }

    .slideshow-container {
        height: 300px;
    }

    nav a {
        padding: 4px 6px;
        font-size: 0.8em;
    }
    
    /* Portfolio page adjustments for very small screens */
    .portfolio-layout {
        padding: 10px 5px;
    }
    
    .slideshow-grid {
        gap: 20px;
    }
    
    .slideshow-wrapper {
        height: 300px;
        max-width: 100%;
        padding: 0 5px;
    }
    
    .slideshow-container {
        height: 250px;
        width: 100%;
    }
    
    .portfolio-description {
        margin-bottom: 20px;
        font-size: 0.95em;
    }

    /* About page adjustments */
    .about-container {
        padding: 10px;
    }

    .profile-section {
        width: 150px;
        height: 150px;
    }

    .profile-section::before {
        font-size: 2em;
    }

    .categories {
        gap: 10px;
    }

    .category {
        padding: 8px 15px;
        font-size: 0.8em;
    }

    .content-section {
        padding: 15px;
    }

    /* Timeline adjustments */
    .timeline::before {
        left: 0;
    }

    .timeline-item {
        width: 100%;
        left: 0;
        padding-left: 30px;
    }

    .timeline-item:nth-child(even) {
        left: 0;
    }

    .timeline-item:nth-child(even)::before {
        left: -6px;
    }

    /* Contact page adjustments */
    .contact-form {
        padding: 15px;
    }

    .social-links {
        gap: 15px;
    }

    .social-link {
        width: 35px;
        height: 35px;
    }

    input,
    textarea {
        padding: 8px;
    }

    button {
        padding: 10px 20px;
        font-size: 1em;
    }

    /* Gallery page adjustments */
    .gallery-placeholder {
        margin: 20px;
        padding: 30px 15px;
    }

    .gallery-placeholder h2 {
        font-size: 1.6em;
    }

    .gallery-placeholder p {
        font-size: 1em;
    }

    .enter-gallery-btn {
        padding: 12px 24px;
        font-size: 1.1em;
    }
}