/* --- Responsive Styles --- */

/* General Mobile Styles (e.g., screens below 768px) */
@media (max-width: 768px) {

    /* --- Base & Components --- */
    body {
        /* Prevent background shapes from showing through */
        background-color: var(--dark-blue);
    }

    .background-shapes {
        display: none; /* Hide background shapes on mobile */
    }

    section {
        padding: 4rem 1rem; /* Adjust padding for smaller screens */
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    /* --- Header & Navigation --- */
    header {
        /* Ensure header adapts */
        height: var(--header-height); /* Uses the variable already defined for 768px */
    }

    nav {
        padding: 0 1rem; /* Reduce padding */
    }

    .nav-links {
        position: fixed;
        top: var(--header-height); /* Position below header */
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: rgba(13, 27, 42, 0.98); /* Slightly more opaque */
        backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem; /* Space out links vertically */
        list-style: none;
        margin: 0;
        padding: 0;
        transform: translateX(-100%); /* Hide off-screen */
        transition: transform 0.3s ease-in-out;
        z-index: 99; /* Below header but above content */
    }

    .nav-links.active {
        transform: translateX(0); /* Slide in */
    }

    .nav-links li {
        margin: 0; /* Remove horizontal margin */
        opacity: 0; /* Start hidden for transition */
        transform: translateY(10px);
    }

    .nav-links.active li {
       opacity: 1;
       transform: translateY(0);
       transition: opacity 0.3s ease-in-out 0.2s, transform 0.3s ease-in-out 0.2s; /* Staggered fade-in */
    }
    .nav-links.active li:nth-child(2) { transition-delay: 0.25s; }
    .nav-links.active li:nth-child(3) { transition-delay: 0.3s; }
    .nav-links.active li:nth-child(4) { transition-delay: 0.35s; }
    .nav-links.active li:nth-child(5) { transition-delay: 0.4s; }
    .nav-links.active li:nth-child(6) { transition-delay: 0.45s; }


    .nav-links a {
        font-size: 1.5rem; /* Make links larger */
        font-weight: 600;
    }
     .nav-links a::after {
        display: none; /* Hide underline effect on mobile menu */
    }


    .hamburger-menu {
        display: block; /* Show hamburger */
        background: none;
        border: none;
        color: var(--text-white);
        font-size: 1.8rem; /* Adjust size */
        cursor: pointer;
        z-index: 101; /* Above mobile nav */
        padding: 0.5rem; /* Easier to tap */
        margin-left: 1rem; /* Space from logo */
    }

    .hamburger-menu:hover {
        color: var(--accent-color);
    }

    /* Hide desktop nav links (already done by moving .nav-links off-screen) */

    /* --- Hero Section --- */
    /* Adjust hero styles if needed, though existing media queries seem reasonable */
    .hero {
        margin-top: var(--header-height);
        height: auto; /* Adjust height */
        min-height: calc(80vh - var(--header-height)); /* Example height */
        padding: 3rem 1rem;
        background: none; /* Removes the linear gradient */
        border-radius: 0; /* Removes rounded corners */
        box-shadow: none; /* Removes the shadow */
        overflow: visible; /* Reset overflow if hidden was only for radius */
    }


    .hero h1 {
        font-size: 2.5rem; /* Adjust font size */
    }

    .hero p {
        font-size: 1.1rem; /* Adjust font size */
    }

    /* --- About Section --- */
    .about {
        flex-direction: column; /* Stack text and image */
        gap: 2rem;
    }

    .profile-pic {
        order: -1; /* Show image above text */
        max-width: 250px; /* Control image size */
        margin: 0 auto; /* Center image */
    }

    .profile-pic .desktop-profile-pic {
        display: none; /* Hide desktop image */
    }

    .profile-pic .mobile-profile-pic {
        display: block; /* Show mobile image */
        width: 100%;
        max-width: 300px; /* Or your desired max size */
        /* Add any specific mobile image styling here */
    }

    /* If no mobile image is used, uncomment this to just hide the desktop one */

    .profile-pic img {
        display: none;
    }

      /* .timeline::before and .timeline::after styles remain the same as previous step */
      .timeline::before {
        content: '';
        position: absolute;
        left: 15px; /* Position line 15px from the left edge */
        transform: translateX(0);
        top: 40px;
        width: 4px;
        height: calc(100% - 80px);
        background: var(--medium-blue);
        z-index: 0;
        border-radius: 2px;
    }
    .timeline::after {
        content: '';
        position: absolute;
        left: 15px; /* Align with the line */
        transform: translate(-50%, -50%);
        top: calc(40px + (100% - 80px));
        width: 16px;
        height: 16px;
        background: var(--medium-blue);
        border: 3px solid var(--accent-color);
        border-radius: 50%;
        z-index: 1;
    }


    /* UPDATED Style for the individual timeline item boxes */
    .timeline-item {
        position: relative;
        /* REMOVE margin-left: auto; */
        margin-left: 60px; /* Fixed left margin - ADJUST VALUE AS NEEDED */
        margin-right: 1rem; /* Keep space from right edge */
        width: auto; /* Let content determine width towards the right */
        max-width: calc(100% - 60px - 1rem); /* Adjust max-width based on new margin-left */
        margin-bottom: 1.5rem; /* Vertical space */
        padding: 1rem;
        border-left: none;
        border-right: none;
        /* Base background, shadow, etc., are inherited */
    }

    .timeline-item:nth-of-type(even) {
        /* Explicitly override properties from the desktop even-item rule */
        margin-left: 60px; /* Re-apply the margin to be sure (or rely on inheritance) */
        margin-right: 1rem; /* Ensure right margin matches odd items */
        border-right: none; /* Ensure right border is removed */
    }
    .timeline-item:nth-of-type(odd) {
        /* Explicitly override properties from the desktop even-item rule */
        margin-left: 60px; /* Re-apply the margin to be sure (or rely on inheritance) */
        margin-right: 1rem; /* Ensure right margin matches odd items */
        border-right: none; /* Ensure right border is removed */
    }

    .timeline-item:nth-of-type(even)::before {
        right: 100%;
        margin-right: calc(36px - 5px);
    }
    .timeline-item:nth-of-type(odd)::before {
        right: 100%;
        margin-right: calc(36px - 5px);
    }


    /* Dot positioning should still work */
    .timeline-item::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 100%; /* Position dot left of the item */
        transform: translateY(-50%);
        margin-right: 10px; /* Space between dot and item */
        width: 16px;
        height: 16px;
        background: var(--accent-color);
        border: 4px solid var(--dark-blue);
        border-radius: 50%;
        z-index: 1;
        left: auto !important; /* Ensure no conflicting left value */
    }

    /* Hover effects remain disabled */
    .timeline-item:hover,
    .timeline-item:nth-of-type(even):hover {
        transform: none;
    }
     .timeline-item:hover::before {
         transform: translateY(-50%);
     }

    /* --- End of Career Section Rules --- */


    /* --- Skills Section --- */
    .skills-container {
        display: block; /* Override grid */
        position: relative;
        overflow: hidden; /* Hide non-active cards */
        /* Define a height or let it be determined by the card */
        min-height: 300px; /* Example: Adjust as needed */
    }

    .skill-card {
        width: 100%; /* Full width for pagination */
        position: absolute; /* Position for overlap */
        top: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        border-left-width: 3px; /* Slightly thinner border */
        padding: 1.5rem;
        /* Ensure consistent height if needed */
        min-height: 250px; /* Example: Adjust to fit content */
        display: flex; /* Keep flex for vertical alignment */
        flex-direction: column; /* Stack icon/text */
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Less intense shadow */
    }

    .skill-card.active {
        opacity: 1;
        visibility: visible;
        position: relative; /* Take up space when active */
    }
     .skill-card:hover {
         transform: none; /* Disable hover transform */
         box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Consistent shadow */
     }

    .skill-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .skill-card h3 {
        font-size: 1.2rem;
    }


    /* --- Skills Pagination Controls --- */
    .skills-pagination.mobile-only {
        display: flex; /* Show pagination on mobile */
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem; /* Space above controls */
    }

    .skills-pagination .pagination-button {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    .skills-pagination .pagination-button.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: transparent; /* Keep background consistent */
        color: var(--accent-color); /* Keep color consistent */
        border-color: var(--accent-color);
    }
     #skills-page-indicator {
         font-size: 0.9rem;
         color: var(--text-light);
     }

    /* --- Footer --- */
    /* Adjust footer if needed */
    .social-icon {
        height: 35px;
        width: 35px;
        font-size: 1rem;
    }
    .back-to-top-button { /* Make sure it's usable on mobile */
        padding: 0.6rem 0.8rem;
        bottom: 15px;
        right: 15px;
    }

} /* End of @media (max-width: 768px) */


/* Hide elements meant only for mobile on larger screens */
@media (min-width: 769px) {
    .hamburger-menu {
        display: none;
    }

    .profile-pic .mobile-profile-pic {
        display: none;
    }

     .skills-pagination.mobile-only {
        display: none;
    }

    /* Ensure skills container is grid on desktop */
     .skills-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 2rem;
        position: static;
        overflow: visible;
        min-height: auto;
    }
    /* Ensure skill cards are visible and styled for desktop */
     .skill-card {
        display: flex; /* Back to flex if overridden */
        position: static;
        opacity: 1;
        visibility: visible;
        width: auto;
        min-height: auto;
         /* Restore hover effect if needed */
         transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
     .skill-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    }

}