/* Global Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #020024 0%, #03001C 60%, #0b0030 100%); /* Subtle gradient background */
    color: #C0C8D8; /* Softer light grey for general text */
    overflow-x: hidden;
    padding-top: 80px; /* Adjusted for new header height */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.65; /* Improved default line height */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    color: #E0E8FF; /* Brighter base for headings */
    letter-spacing: 1px;
    margin-bottom: 0.75em;
}

h1 { /* Typically for site title if used, or main hero title */
    font-size: clamp(2.5rem, 5vw, 4rem);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.3);
}

h2 { /* Section Titles */
    font-size: clamp(2rem, 4vw, 3rem);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 60px; /* Consistent margin */
    position: relative;
    padding-bottom: 20px;
    color: #00E5FF; /* Bright Cyan for section titles */
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.7), 
                 0 0 15px rgba(0, 229, 255, 0.5),
                 0 0 25px rgba(0, 120, 255, 0.3);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

h2:hover {
    color: #99FFFF; /* Slightly lighter cyan on hover */
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.9), 
                 0 0 22px rgba(0, 229, 255, 0.7),
                 0 0 35px rgba(0, 120, 255, 0.5);
}

h2::before, h2::after { /* More dynamic underline/accent for section titles */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #00A9FF;
    box-shadow: 0 0 8px #00A9FF, 0 0 12px #00DFFF;
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

h2::before { /* Main underline bar */
    width: 100px;
    height: 4px;
}

h2::after { /* Smaller accent dot below */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    bottom: -15px; /* Positioned below the main line */
    background-color: #00E5FF;
    box-shadow: 0 0 10px #00E5FF, 0 0 15px #00E5FF;
    animation: pulseDot 2s infinite ease-in-out;
}

h2:hover::before {
    width: 150px;
    background-color: #00E5FF;
    box-shadow: 0 0 12px #00E5FF, 0 0 18px #00FFFF;
}
h2:hover::after {
    transform: translateX(-50%) scale(1.3);
    box-shadow: 0 0 15px #00E5FF, 0 0 25px #00E5FF;
}

@keyframes pulseDot {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; }
}


h3 { font-size: clamp(1.5rem, 3vw, 2rem); color: #87CEFA; /* Light Sky Blue */ }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); color: #ADD8E6; /* Light Blue */ }

p {
    margin-bottom: 1.5em;
    color: #B0C4DE; /* Lighter Steel Blue for paragraphs */
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    line-height: 1.75;
}

a {
    color: #00A9FF; /* Standard link color */
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    position: relative;
}

a:hover, a:focus {
    color: #00E5FF; /* Brighter cyan on hover */
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

/* Animated underline for general links */
a.animated-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: #00E5FF;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}
a.animated-underline:hover::after {
    width: 100%;
    left: 0;
    background: #00E5FF;
}

/* General class for scroll-triggered visibility and animations */
.visible {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1); /* Resets transforms and scale */
}

/* Project Section Styling */
.projects {
    background: linear-gradient(135deg, #020024 0%, #03001C 60%, #0b0030 100%), 
                url('../images/project-background-overlay.png') no-repeat center center / cover; /* Base gradient + overlay image */
    /* The overlay image will be on top of the consistent gradient */
    padding-top: 100px; /* Extra padding if needed */
    padding-bottom: 100px;
}

.projects h2 {
    margin-bottom: 60px; /* This matches global h2, can be kept or removed if desired */
}

/* Filter Buttons */
.filter-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    gap: 15px;
}

.filter-buttons button {
    font-family: 'Orbitron', sans-serif;
    background-color: transparent;
    color: #A0B0D0;
    border: 1px solid #304060;
    padding: 10px 25px;
    border-radius: 25px; /* Pill shape */
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.filter-buttons button:hover,
.filter-buttons button.active {
    background-color: #00A9FF;
    color: #020024;
    border-color: #00A9FF;
    box-shadow: 0 0 15px rgba(0,169,255,0.5);
    transform: translateY(-2px);
}

/* Project Grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Responsive grid */
    gap: 40px;
}

/* Individual Project Card */
.project-card {
    background: rgba(15, 25, 45, 0.7); /* Slightly transparent dark blue */
    border: 1px solid #203050; /* Subtle border */
    border-radius: 12px; /* More rounded corners */
    padding: 25px;
    text-align: left;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease,
                border-color 0.4s ease,
                opacity 0.5s ease-out, 
                transform 0.5s ease-out; /* Added opacity and transform for scroll animation */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 
                inset 0 0 5px rgba(0,169,255,0.1); /* Inner glow */
    overflow: hidden; /* Ensure image corners are clipped */
    position: relative; /* For pseudo-elements if needed */

    /* Initial state for scroll animation */
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    animation-delay: calc(var(--animation-order, 0) * 150ms); /* Staggered animation */
}

.project-card.visible { /* State when scrolled into view */
    opacity: 1;
    transform: translateY(0) scale(1);
}


.project-card::before { /* Corner accent - top-left */
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    border-top: 3px solid #00E5FF;
    border-left: 3px solid #00E5FF;
    border-top-left-radius: 12px;
    opacity: 0.7;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

.project-card::after { /* Corner accent - bottom-right */
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #00E5FF;
    border-right: 3px solid #00E5FF;
    border-bottom-right-radius: 12px;
    opacity: 0.7;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0,169,255,0.3), 
                0 5px 15px rgba(0, 0, 0, 0.4),
                inset 0 0 10px rgba(0, 169, 255, 0.2);
    border-color: #00A9FF;
}

.project-card:hover::before,
.project-card:hover::after {
    width: 40px; /* Expand accents on hover */
    height: 40px;
    opacity: 1;
}

.project-card img {
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area, might crop */
    border-radius: 8px; /* Slightly rounded corners for the image */
    margin-bottom: 20px;
    border: 1px solid #2a3f6a; /* Subtle border for image */
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: grayscale(30%) brightness(90%); /* Subtle desaturation and dimming */
}

.project-card:hover img {
    transform: scale(1.05);
    filter: grayscale(0%) brightness(100%);
}

.project-card h3 {
    font-family: 'Orbitron', sans-serif;
    color: #E0E8FF;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    margin-bottom: 10px;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.3);
}

.project-card p {
    color: #B0C4DE;
    font-size: clamp(0.9rem, 1.5vw, 0.95rem);
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 60px; /* Ensure roughly same space for text */
}

/* Tags Styling */
.project-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto; /* Push tags to the bottom if card is flex column */
}

.project-card .tags span {
    background-color: rgba(0, 169, 255, 0.15);
    color: #87CEFA; /* Light Sky Blue */
    padding: 6px 12px;
    border-radius: 15px; /* Pill shape */
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: 1px solid rgba(0, 169, 255, 0.3);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.project-card .tags span:hover {
    background-color: #00A9FF;
    color: #020024;
    box-shadow: 0 0 8px rgba(0, 169, 255, 0.4);
}

/* Leadership & Community (Experience) Section Styling */
.experience {
    background: linear-gradient(135deg, #020024 0%, #03001C 60%, #0b0030 100%); /* Consistent gradient */
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative; /* For positioning slideshow buttons */
}

.experience h2 {
    margin-bottom: 60px;
}

.experience-slideshow-container {
    position: relative;
    max-width: 1000px; /* Increased from 800px to make columns wider */
    margin: 0 auto;
    padding: 0 50px; /* Space for prev/next buttons */
    /* Initial state for scroll animation */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out 0.2s; /* Added delay */
}

.experience-slideshow-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.slideshow-wrapper {
    overflow: hidden; /* Crucial for slideshow effect */
    width: 100%;
}

.experience-grid {
    display: flex; /* Key for horizontal layout of items */
    gap: 20px; /* Gap between items, managed by flexbox */
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smooth slide transition */
}

.experience-item {
    background: rgba(20, 30, 55, 0.6);
    border-left: 4px solid #00A9FF;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    box-sizing: border-box; /* Ensure padding/border are within the width/height */

    flex: 0 0 calc(50% - 10px); /* Each item is 50% of parent minus half the gap (20px / 2 = 10px) */
    /* margin-right: 20px; Removed, gap property on parent handles spacing */

    /* Initial state for slide-in animation */
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    /* transition-delay will be set by JS for active slides */
}

/* .experience-item:last-child { */ /* No longer needed with gap */
    /* margin-right: 0; */
/* } */

/* Styles for items that are part of the active slide - JS will add/remove this class */
.experience-item.slide-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}


.experience-item::before { /* Subtle top glow element */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #00E5FF, transparent);
    transition: width 0.4s ease-in-out;
}

.experience-item:hover {
    background-color: rgba(25, 35, 65, 0.8);
    transform: translateY(-8px) scale(1.01); /* Keep existing hover */
    box-shadow: 0 10px 25px rgba(0, 169, 255, 0.25), 0 5px 15px rgba(0,0,0,0.3);
}

.experience-item:hover::before {
    width: 100%;
}

.experience-item h3 {
    font-family: 'Orbitron', sans-serif;
    color: #E0E8FF;
    font-size: clamp(1.4rem, 2.2vw, 1.7rem);
    margin-bottom: 8px;
    text-shadow: 0 0 4px rgba(135, 206, 250, 0.4);
}

.experience-item .date {
    font-family: 'Roboto', sans-serif;
    color: #87A0C0;
    font-size: clamp(0.85rem, 1.2vw, 0.9rem);
    margin-bottom: 15px;
    font-style: italic;
}

.experience-item p:not(.date) {
    color: #B8C8E8;
    font-size: clamp(0.95rem, 1.5vw, 1rem);
    line-height: 1.7;
    overflow-wrap: break-word; /* Help prevent overflow from long words */
    word-wrap: break-word; /* Fallback for older browsers */
}

/* Slideshow Navigation Buttons */
.slideshow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 169, 255, 0.3); /* Semi-transparent cyan */
    color: #E0E8FF;
    border: 1px solid rgba(0, 229, 255, 0.5);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0 10px rgba(0, 169, 255, 0.2);
}

.slideshow-btn:hover {
    background-color: rgba(0, 229, 255, 0.5);
    border-color: #00E5FF;
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 0px; /* Position outside the padding of slideshow-container */
}

.next-btn {
    right: 0px; /* Position outside the padding of slideshow-container */
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    .experience-slideshow-container {
        padding: 0 40px; /* Existing padding for button area */
    }

    .experience-item {
        flex: 0 0 100%; /* Each item takes full width */
        padding: 25px 15px; /* Reduced L/R padding for more content space, T/B 25px */
    }

    .slideshow-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .prev-btn {
        left: 5px; /* Adjust button position */
    }

    .next-btn {
        right: 5px; /* Adjust button position */
    }
}


/* Header Refinement for Elegance */
.site-header {
    background: rgba(10, 20, 45, 0.8); /* Slightly adjusted, deeper blue */
    backdrop-filter: blur(15px) saturate(180%);
    color: #E0E8FF;
    padding: 12px 0; /* Adjusted padding */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 25px rgba(0, 120, 200, 0.2); /* Softer, wider shadow */
    border-bottom: 1px solid rgba(0, 169, 255, 0.1); /* Very subtle border */
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.header-container { /* Replaces header .container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 92%; /* Slightly more width */
    max-width: 1350px; /* Wider max for larger screens */
    margin: 0 auto;
}

.site-branding {
    display: flex;
    align-items: center; /* Vertically align items if tagline wraps */
    gap: 15px; /* Space between logo and tagline */
}

.logo-link { /* Class added to <a> wrapping logo text */
    text-decoration: none;
    display: flex; /* Aligns main and subtle text if they were separate block elements */
    align-items: baseline; /* Aligns text along their baseline */
    gap: 8px; /* Space between Mayom and Kon */
}

.logo-text-main {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.7rem, 2.8vw, 2.1rem); /* Slightly adjusted */
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.logo-text-subtle {
    font-family: 'Orbitron', sans-serif; /* Consistent font */
    font-size: clamp(1.6rem, 2.7vw, 2rem); /* Slightly smaller than main */
    color: #A8B8D0; /* Softer color */
    font-weight: 400; /* Lighter weight */
    letter-spacing: 0.5px;
    margin-top: 2px; /* Align baseline better */
    transition: color 0.3s ease;
}

.logo-link:hover .logo-text-main {
    color: #00E5FF;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
}
.logo-link:hover .logo-text-subtle {
    color: #C0D0E8;
}

.tagline {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(0.7rem, 1.1vw, 0.8rem);
    color: #87A0C0; /* Subtler color for tagline */
    letter-spacing: 0.5px;
    margin: 0; /* Remove default p margin */
    padding-top: 4px; /* Align with logo text */
    font-style: italic;
    opacity: 0.8;
    transition: color 0.3s ease, opacity 0.3s ease;
}
.site-branding:hover .tagline {
    color: #A0B8D8;
    opacity: 1;
}


.main-navigation .nav-link { /* Replaces nav a */
    color: #B8C8E8; /* Slightly brighter default */
    text-decoration: none;
    padding: 10px 18px; /* Fine-tuned padding */
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(0.85rem, 1.5vw, 0.95rem); /* Responsive font size */
    text-transform: uppercase;
    letter-spacing: 1.2px; /* Slightly increased spacing */
    border-radius: 6px; /* Softer radius */
    transition: color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease;
    position: relative;
    margin-left: 5px; /* Spacing between nav items */
}
.main-navigation .nav-link:first-child {
    margin-left: 0;
}

.main-navigation .nav-link::before { /* Underline/highlight effect */
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -2px; /* Position slightly below text */
    left: 50%;
    transform: translateX(-50%);
    background-color: #00E5FF;
    opacity: 0;
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}

.main-navigation .nav-link:hover,
.main-navigation .nav-link.active {
    color: #FFFFFF;
    background-color: rgba(0, 169, 255, 0.1); /* More subtle active/hover background */
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.main-navigation .nav-link:hover::before,
.main-navigation .nav-link.active::before {
    width: 60%; /* Adjust width of underline */
    opacity: 1;
}

/* Refined Hamburger Menu Icon */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1005; /* Ensure it's above other header elements */
}

.menu-toggle-icon {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    background-color: #00E5FF;
    border-radius: 1px;
    transition: all 0.3s ease-in-out;
}
.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00E5FF;
    border-radius: 1px;
    transition: all 0.3s ease-in-out;
}
.menu-toggle-icon::before {
    top: -7px; /* Spacing for hamburger lines */
}
.menu-toggle-icon::after {
    bottom: -7px;
}

/* Hamburger animation to X */
.menu-toggle.active .menu-toggle-icon {
    background-color: transparent; /* Middle line disappears */
}
.menu-toggle.active .menu-toggle-icon::before {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active .menu-toggle-icon::after {
    transform: translateY(-7px) rotate(-45deg);
}


/* Ensure old header styles are overridden or removed if conflicting */
header h1, header p { /* Assuming old h1 and p in header are removed from HTML */
    display: none; 
}


/* Container */
.container {
    width: 90%;
    max-width: 1200px; /* Consistent max-width */
    margin: 0 auto; /* Centering */
    padding: 0 15px; /* Horizontal padding */
}

/* Sections */
section {
    padding: 80px 0; /* Increased vertical padding */
    position: relative;
    overflow: hidden; /* For pseudo-elements that might go outside bounds */
}
/* Futuristic Section Dividers */
section:not(#hero):not(:last-of-type)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 169, 255, 0.3), transparent);
    animation: scanLine 10s linear infinite;
}
@keyframes scanLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}


/* Hero Section */
.hero {
    min-height: 100vh; /* Ensure it takes full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 80px 20px; /* Adjusted padding */
    text-align: left;
    overflow: hidden; /* Prevent canvas overflow issues */
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-text {
    flex: 1;
    padding-right: 40px;
    animation: fadeInFromLeft 1s 0.5s ease-out forwards;
    opacity: 0;
}

.hero-text h2 {
    font-size: clamp(3rem, 7vw, 5.5rem);
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.6), 0 0 25px rgba(0, 229, 255, 0.4), 0 0 35px rgba(0, 120, 255, 0.3);
    margin-bottom: 0.25em;
    text-align: left;
}

.hero-text h2::before, .hero-text h2::after {
    display: none; /* Remove global h2 underlines for hero title */
}

.hero-text p {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem); /* Larger subtitle */
    color: #A0B0D0;
    margin-bottom: 40px;
    font-weight: 300;
    text-align: left;
}

.hero-image-container {
    flex-shrink: 0;
    position: relative;
    animation: fadeInFromRight 1s 0.5s ease-out forwards;
    opacity: 0;
}

.profile-picture {
    width: clamp(280px, 30vw, 380px);
    height: clamp(280px, 30vw, 380px);
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.4), 
                0 0 40px rgba(0, 229, 255, 0.2), 
                inset 0 0 15px rgba(0, 229, 255, 0.2);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.profile-picture:hover {
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.6), 
                0 0 50px rgba(0, 229, 255, 0.4), 
                inset 0 0 20px rgba(0, 229, 255, 0.3);
}

#hero-particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind hero content */
}

/* Keyframe animations for hero text and image */
@keyframes fadeInFromLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInFromRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}


.hero-cta-buttons {
    display: flex;
    gap: 20px; /* Space between buttons */
    margin-top: 30px; /* Add some margin above the buttons */
}

.hero-cta-btn {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1rem, 2vw, 1.25rem); /* Increased base and max font size */
    padding: 18px 40px; /* Increased padding for larger buttons */
    border: 2px solid #00A9FF;
    background-color: transparent;
    color: #00E5FF;
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Increased letter spacing */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Smoother, more impactful transition */
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Slightly more rounded corners */
    font-weight: 700; /* Bolder font */
    box-shadow: 0 0 12px rgba(0, 169, 255, 0.4), 
                inset 0 0 8px rgba(0, 169, 255, 0.3);
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
}

.hero-cta-btn:hover, .hero-cta-btn:focus {
    background-color: #00A9FF;
    color: #020024; /* Dark background color for contrast */
    box-shadow: 0 0 25px rgba(0, 169, 255, 0.8), 
                0 0 40px rgba(0, 229, 255, 0.6), 
                inset 0 0 10px rgba(0, 80, 150, 0.5); /* Inner shadow for depth */
    transform: translateY(-5px) scale(1.05); /* More noticeable hover effect */
}

.hero-cta-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease-out, height 0.4s ease-out;
    opacity: 0;
    z-index: 0;
}

.hero-cta-btn:hover::before {
    width: 250%; /* Large ripple effect */
    height: 250%;
    opacity: 1;
    transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1), height 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
}

/* Ensure text stays above the ::before pseudo-element */
.hero-cta-btn span { /* If button text is wrapped in span, or apply to button directly if not */
    position: relative;
    z-index: 1;
}

/* Timeline / Journey Section Styling */
.journey {
    background: linear-gradient(135deg, #020024 0%, #03001C 60%, #0b0030 100%); /* Consistent gradient */
    padding-top: 100px;
    padding-bottom: 100px;
}

.journey h2 {
    /* Inherits global h2 styles for color and text-shadow */
    margin-bottom: 70px; /* Slightly more margin for visual separation */
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}

.timeline::before { /* Central timeline bar */
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, rgba(0, 169, 255, 0) 0%, rgba(0, 169, 255, 0.6) 20%, rgba(0, 169, 255, 0.6) 80%, rgba(0, 169, 255, 0) 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 169, 255, 0.5);
}

.timeline-item {
    padding: 20px 40px;
    position: relative;
    background: rgba(20, 35, 60, 0.65); /* Card background */
    border: 1px solid #253858;
    border-radius: 10px;
    margin-bottom: 30px;
    width: calc(50% - 40px); /* Adjust width for spacing from center line */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.5s ease-out, transform 0.5s ease-out;
    opacity: 0; /* Initial state for animation */
    animation-delay: calc(var(--animation-order, 0) * 200ms);
}

.timeline-item.visible {
    opacity: 1;
}

/* Positioning timeline items on either side */
.timeline-item:nth-child(odd) {
    left: 0;
    transform: translateX(-20px); /* Initial offset for animation */
}

.timeline-item:nth-child(even) {
    left: 50%;
    transform: translateX(20px); /* Initial offset for animation */
}

.timeline-item.visible:nth-child(odd) {
    transform: translateX(0); 
}
.timeline-item.visible:nth-child(even) {
    transform: translateX(0);
}


.timeline-item::after { /* Connector dot to the timeline bar */
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: #00304a; /* Darker core for depth */
    border: 3px solid #00E5FF; /* Bright cyan border */
    top: 28px; /* Align with text */
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.timeline-item:nth-child(odd)::after {
    right: -49px; /* (40px padding / 2) + (4px bar / 2) + 20px space + 9px dot radius */
}

.timeline-item:nth-child(even)::after {
    left: -49px;
}

.timeline-item:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #00A9FF;
    box-shadow: 0 10px 25px rgba(0, 169, 255, 0.25), 0 5px 15px rgba(0,0,0,0.4);
}

.timeline-item:hover::after {
    transform: scale(1.2);
    background-color: #00E5FF;
}

.timeline-item h3 {
    font-family: 'Orbitron', sans-serif;
    color: #E0E8FF;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    margin-bottom: 8px;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.4);
}

.timeline-item .date {
    font-family: 'Roboto', sans-serif;
    color: #87A0C0;
    font-size: clamp(0.8rem, 1.2vw, 0.85rem);
    margin-bottom: 12px;
    font-style: italic;
}

.timeline-item p:not(.date) {
    color: #B8C8E8;
    font-size: clamp(0.9rem, 1.4vw, 0.95rem);
    line-height: 1.65;
}

/* Decorative elements for timeline items */
.timeline-item::before { 
    content: '';
    position: absolute;
    top: -1px; 
    left: -1px;
    width: 15px;
    height: 15px;
    border-top: 2px solid #00A9FF;
    border-left: 2px solid #00A9FF;
    border-top-left-radius: 10px;
    opacity: 0.6;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

.timeline-item:hover::before {
    width: 25px;
    height: 25px;
    opacity: 0.9;
}


/* About Me Section - Skills Summary Styling */
.about-me {
    /* Consistent gradient, can be added if not already on body/section default */
    /* background: linear-gradient(135deg, #020024 0%, #03001C 60%, #0b0030 100%); */
    padding-top: 100px;
    padding-bottom: 100px;
}

.about-me .skills-summary h3 { /* Sub-heading for Skills Summary */
    font-family: 'Orbitron', sans-serif;
    color: #C0D8FF; /* Lighter blue, less prominent than section H2 */
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    text-align: center;
    margin-top: 40px; /* Space from main about content if any */
    margin-bottom: 50px;
    text-shadow: 0 0 6px rgba(0, 180, 255, 0.4);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.skill-category {
    background: rgba(18, 30, 50, 0.75); /* Darker, techy background */
    border: 1px solid #283858;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(0, 169, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease,
                opacity 0.5s ease-out, 
                transform 0.5s ease-out; /* For scroll animation */
    position: relative;

    /* Initial state for scroll animation */
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    animation-delay: calc(var(--animation-order, 0) * 150ms); /* Staggered animation */
}

.skill-category.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.skill-category::before { /* Top-left corner accent */
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 15px;
    height: 15px;
    border-top: 2px solid #00A9FF;
    border-left: 2px solid #00A9FF;
    border-top-left-radius: 10px;
    opacity: 0.6;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

.skill-category:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 169, 255, 0.25), 
                0 4px 10px rgba(0, 0, 0, 0.35),
                inset 0 0 8px rgba(0, 169, 255, 0.2);
    border-color: #00A9FF;
}

.skill-category:hover::before {
    width: 25px;
    height: 25px;
    opacity: 1;
}

.skill-category .skill-icon { /* Assuming an icon element */
    font-size: 2.8rem; /* Adjust as needed */
    color: #00E5FF;
    margin-bottom: 15px;
    display: block; /* Or inline-block if preferred */
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
    transition: transform 0.3s ease, color 0.3s ease;
}

.skill-category:hover .skill-icon {
    transform: scale(1.1);
    color: #66FFFF;
}

.skill-category h4 { /* Skill category title */
    font-family: 'Orbitron', sans-serif;
    color: #D0E0FF;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    margin-bottom: 12px;
}

.skill-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.skill-category ul li {
    color: #A8B8D0;
    font-size: clamp(0.85rem, 1.3vw, 0.9rem);
    margin-bottom: 6px;
    padding-left: 18px;
    position: relative;
    text-align: left;
}

.skill-category ul li::before { /* Custom bullet point */
    content: '\272A'; /* Star-like symbol or use SVG */
    color: #00A9FF;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 0.8em;
    transition: transform 0.3s ease, color 0.3s ease;
}

.skill-category:hover ul li::before {
    transform: rotate(360deg);
    color: #00E5FF;
}


/* Honors & Awards Section Styling */
.honors-awards {
    /* background: linear-gradient(135deg, #020024 0%, #03001C 60%, #0b0030 100%); */
    padding-top: 100px;
    padding-bottom: 100px;
}

.honors-awards h2 {
    margin-bottom: 70px;
}

.awards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
    max-width: 1100px;
    margin: 0 auto;
}

.award-item {
    background: rgba(22, 35, 60, 0.7); /* Slightly different shade for variety */
    border: 1px solid #2A3C5E;
    border-left: 3px solid #00A9FF; /* Accent border */
    border-radius: 8px;
    padding: 25px 30px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.5s ease-out, transform 0.5s ease-out;
    position: relative;
    overflow: hidden;

    /* Initial state for scroll animation */
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    animation-delay: calc(var(--animation-order, 0) * 180ms); /* Staggered animation */
}

.award-item.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.award-item::after { /* Subtle glow effect from the bottom */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, rgba(0, 169, 255, 0.15) 0%, transparent 70%);
    transition: height 0.4s ease-in-out;
    z-index: 0;
}

.award-item:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #00A9FF;
    border-left-color: #00E5FF;
    box-shadow: 0 12px 30px rgba(0, 169, 255, 0.2), 0 6px 15px rgba(0,0,0,0.3);
}

.award-item:hover::after {
    height: 100%;
}

.award-item h3 {
    font-family: 'Orbitron', sans-serif;
    color: #E8F0FF;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 4px rgba(173, 216, 230, 0.5); /* Light blue glow */
}

.award-item .award-issuer, 
.award-item .award-date {
    font-family: 'Roboto', sans-serif;
    color: #9EB0D0;
    font-size: clamp(0.8rem, 1.1vw, 0.85rem);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    font-style: italic;
}
.award-item .award-issuer {
    font-weight: 500;
    margin-bottom: 4px;
}

.award-item p:not(.award-issuer):not(.award-date) { /* Description */
    color: #B8C8E8;
    font-size: clamp(0.9rem, 1.4vw, 0.95rem);
    line-height: 1.6;
}

/* Let's Connect Section Styling */
.connect {
    /* background: linear-gradient(135deg, #020024 0%, #03001C 60%, #0b0030 100%),
                url('../images/connect-background-overlay.png') no-repeat center center / cover; */
    /* Overlay image can be added if desired */
    padding-top: 100px;
    padding-bottom: 100px;
}

.connect h2 {
    margin-bottom: 70px;
}

.connect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; /* Increased gap */
    align-items: start; /* Align items to the start of their grid area */
    max-width: 1100px;
    margin: 0 auto;
}

/* Styling for form elements and social icons container for scroll animation */
.connect .form-group,
.connect button[type="submit"],
.connect .social-icons-container {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Staggering will be handled by JS if it adds .visible with delay, or by CSS if --animation-order is applied in HTML */
}

.connect .form-group { animation-delay: calc(var(--animation-order, 1) * 100ms); }
.connect button[type="submit"] { animation-delay: calc(var(--animation-order, 3) * 100ms); } /* Assuming form groups are 1 and 2 */
.connect .social-icons-container { animation-delay: calc(var(--animation-order, 1) * 100ms); } /* If in a different column */


.connect .form-group.visible,
.connect button[type="submit"].visible,
.connect .social-icons-container.visible {
    opacity: 1;
    transform: translateY(0);
}


.contact-form {
    background: rgba(15, 25, 45, 0.8);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid #253858;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.contact-form h3 {
    font-family: 'Orbitron', sans-serif;
    color: #E0E8FF;
    font-size: clamp(1.5rem, 2.5vw, 1.8rem);
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.3);
}

.form-group {
    margin-bottom: 25px;
    position: relative;
}

.form-group label {
    display: block;
    color: #A0B8D8;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    opacity: 0; /* Initially hidden for animation */
    transform: translateY(-10px);
    transition: opacity 0.4s 0.2s ease, transform 0.4s 0.2s ease; /* Delayed appearance */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 15px;
    background-color: rgba(10, 20, 40, 0.9);
    border: 1px solid #304060;
    border-radius: 6px;
    color: #D0E0FF;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00A9FF;
    background-color: rgba(12, 25, 45, 0.95);
    box-shadow: 0 0 10px rgba(0, 169, 255, 0.3), inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Floating label effect - show label when input is focused or has content */
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    opacity: 1;
    transform: translateY(0);
}
/* For this to work best, labels might need to be positioned absolutely or inputs need padding-top */
/* Alternative: Keep labels static and just animate them in with the group */
.form-group.visible label { /* Animate label with the group */
    opacity: 1;
    transform: translateY(0);
}


.connect button[type="submit"] {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    padding: 15px 35px;
    border: 2px solid #00A9FF;
    background-color: transparent;
    color: #00E5FF;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(0, 169, 255, 0.3), inset 0 0 6px rgba(0, 169, 255, 0.2);
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.4);
    display: block; /* Make it block to center if needed or fill width */
    width: 100%; /* Full width button */
    margin-top: 10px;
}

.connect button[type="submit"]:hover,
.connect button[type="submit"]:focus {
    background-color: #00A9FF;
    color: #020024;
    box-shadow: 0 0 20px rgba(0, 169, 255, 0.7), 0 0 30px rgba(0, 229, 255, 0.5), inset 0 0 8px rgba(0, 80, 150, 0.4);
    transform: translateY(-3px) scale(1.02);
    border-color: #00E5FF;
}

.social-connection-info {
    /* Container for the "Or connect with me via" text and social icons */
    text-align: center;
}

.social-connection-info h3 {
    font-family: 'Orbitron', sans-serif;
    color: #E0E8FF;
    font-size: clamp(1.5rem, 2.5vw, 1.8rem);
    margin-bottom: 30px; /* Space before icons */
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.3);
}

.social-icons-container {
    /* This is the direct parent of social-icon-group-wrapper */
    /* It will be targeted by JS for the .visible class */
    /* No specific background needed if connect-grid handles it or if it's transparent */
    padding: 20px; /* Add some padding if it looks too cramped */
}

.social-icon-groups-wrapper {
    display: flex;
    justify-content: center; /* Center the groups */
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 25px; /* Space between icon groups */
}

.social-icon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Space between icon and its text */
}

.social-icon {
    display: inline-block;
    width: 55px; /* Slightly larger icons */
    height: 55px;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.5));
}

.social-icon svg {
    width: 100%;
    height: 100%;
    fill: #A0B8D8; /* Default icon color */
    transition: fill 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.15) translateY(-3px);
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.8));
}

.social-icon:hover svg {
    fill: #00E5FF; /* Bright cyan on hover */
}

.social-icon-text {
    font-family: 'Roboto', sans-serif;
    color: #A0B8D8;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.social-icon-group:hover .social-icon-text {
    color: #00E5FF;
}

/* Social Web Canvas Styling (if not already fully covered) */
#social-web-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind social icons but above section background */
    opacity: 0.3; /* Make it subtle */
}


/* Ensure consistent section backgrounds if not using body background */
/* .about-me, .honors-awards, .connect {
    background: linear-gradient(135deg, #020024 0%, #03001C 60%, #0b0030 100%);
} */

/* My Journey & Education Section Styling */
/* ...existing code... */
.timeline-item:hover::before {
    width: 25px;
    height: 25px;
    opacity: 0.9;
}

/* Add this if it's missing for the timeline item text content */
.timeline-content h3 { /* Renamed from .timeline-item h3 for clarity if needed, or ensure .timeline-item h3 is styled */
    font-family: 'Orbitron', sans-serif;
    color: #E0E8FF;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    margin-bottom: 8px;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.4);
}

.timeline-content .date { /* Renamed from .timeline-item .date */
    font-family: 'Roboto', sans-serif;
    color: #87A0C0;
    font-size: clamp(0.8rem, 1.2vw, 0.85rem);
    margin-bottom: 12px;
    font-style: italic;
}

.timeline-content p:not(.date) { /* Renamed from .timeline-item p:not(.date) */
    color: #B8C8E8;
    font-size: clamp(0.9rem, 1.4vw, 0.95rem);
    line-height: 1.65;
}


/* Footer Styling */
/* ...existing code... */

/* -------------------- MEDIA QUERIES FOR RESPONSIVENESS -------------------- */

/* Medium Devices (Tablets, smaller desktops - e.g., up to 1024px) */
@media (max-width: 1024px) {
    body {
        padding-top: 70px; /* Adjust if header height changes */
    }

    .container, .header-container {
        width: 90%;
    }

    h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); }
    h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: 50px; }
    h3 { font-size: clamp(1.4rem, 2.8vw, 1.8rem); }

    section {
        padding: 60px 0;
    }

    .hero-text {
        padding-right: 20px;
    }

    .hero-text h2 {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
    }

    .hero-text p {
        font-size: clamp(1rem, 2vw, 1.3rem);
    }

    .profile-picture {
        width: clamp(240px, 28vw, 320px);
        height: clamp(240px, 28vw, 320px);
    }

    .project-grid {
        gap: 30px;
    }
    .project-card {
        padding: 20px;
    }

    .timeline {
        max-width: 700px;
    }
    
    .connect-grid {
        gap: 30px;
    }
}


/* Small Devices (Portrait Tablets, Large Phones - e.g., up to 768px) */
@media (max-width: 768px) {
    body {
        padding-top: 60px; /* Header height for mobile */
        line-height: 1.6;
    }
    
    .site-header {
        padding: 10px 0;
    }

    .header-container {
        width: 95%;
        padding: 0 10px; /* Ensure some padding */
    }
    
    .main-navigation {
        position: absolute;
        top: 60px; /* Match header height */
        left: 0;
        width: 100%;
        background: rgba(10, 20, 45, 0.95); /* Slightly more opaque for readability */
        backdrop-filter: blur(10px) saturate(150%);
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
        display: none; /* Hidden by default */
        box-shadow: 0 10px 15px rgba(0,0,0,0.2);
    }

    .main-navigation.active { /* This class will be toggled by JS */
        display: flex; 
    }

    .main-navigation .nav-link {
        padding: 12px 20px;
        width: 100%;
        text-align: center;
        margin-left: 0;
        border-bottom: 1px solid rgba(0, 169, 255, 0.1);
    }
    .main-navigation .nav-link:last-child {
        border-bottom: none;
    }
    .main-navigation .nav-link:hover,
    .main-navigation .nav-link.active {
        background-color: rgba(0, 169, 255, 0.2);
    }
    .main-navigation .nav-link:hover::before,
    .main-navigation .nav-link.active::before {
        width: 40%; /* Underline for mobile nav */
    }


    .menu-toggle {
        display: block; /* Show hamburger icon */
    }

    .logo-text-main { font-size: clamp(1.5rem, 2.5vw, 1.8rem); }
    .logo-text-subtle { font-size: clamp(1.4rem, 2.4vw, 1.7rem); }
    .tagline { display: none; } /* Hide tagline on smaller screens to save space */


    .hero {
        min-height: auto; /* Allow hero to shrink if needed */
        padding: 60px 15px;
        text-align: center;
    }

    .hero-content {
        flex-direction: column;
        gap: 40px;
    }

    .hero-text {
        padding-right: 0;
        text-align: center;
        order: 2; /* Text below image */
    }
    .hero-text h2 {
        text-align: center;
    }
    .hero-text p {
        text-align: center;
        margin-bottom: 30px;
    }
    .hero-image-container {
        order: 1; /* Image above text */
        margin-bottom: 20px; /* Space below image */
    }
    .profile-picture {
        width: clamp(200px, 45vw, 280px);
        height: clamp(200px, 45vw, 280px);
        margin: 0 auto; /* Center profile picture */
    }
    .hero-cta-buttons {
        justify-content: center; /* Center buttons */
        flex-direction: column; /* Stack buttons */
        align-items: center;
        gap: 15px;
    }
    .hero-cta-btn {
        width: 100%;
        max-width: 300px; /* Max width for stacked buttons */
        padding: 15px 30px;
        font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    }

    h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: 40px; }
    h2::before { width: 80px; height: 3px; }
    h2::after { width: 8px; height: 8px; bottom: -12px; }
    h2:hover::before { width: 120px; }

    p { font-size: clamp(0.9rem, 2.5vw, 1rem); }

    .project-grid {
        grid-template-columns: 1fr; /* Single column for projects */
        gap: 25px;
    }
    .project-card img {
        height: 180px;
    }

    .filter-buttons {
        flex-wrap: wrap; /* Allow filter buttons to wrap */
        gap: 10px;
    }
    .filter-buttons button {
        padding: 8px 20px;
        font-size: 0.8rem;
    }

    .timeline {
        padding: 0 10px; /* Add some horizontal padding */
    }
    .timeline::before { /* Central bar */
        left: 20px; /* Move bar to the left */
        transform: translateX(0);
    }
    .timeline-item {
        width: calc(100% - 40px); /* Full width minus some padding */
        left: 0 !important; /* Override inline left for even items */
        transform: translateX(0) !important; /* Reset transform */
        margin-left: 40px; /* Space from the timeline bar */
        padding: 15px 20px;
    }
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0; /* Align all to the new bar position */
        transform: translateX(0); /* Reset animation offset */
    }
    .timeline-item::after { /* Connector dot */
        left: -29px; /* Adjust to new bar position: - (margin-left/2 + bar_left_position - dot_width/2) approx */
        /* Recalculate: - ( (40px - 20px_item_padding_left_effectively) / 2 + 4px_bar/2 + 18px_dot/2 ) = -(10+2+9) = -21px. Let's try -29px to align with bar */
    }
     .timeline-item:nth-child(odd)::after,
     .timeline-item:nth-child(even)::after {
        left: -29px; /* (item_margin_left - bar_left_position - dot_width/2) = (40 - 20 - 9) = 11. This is wrong.
                        It's relative to the item. Bar is at 20px. Item starts at 40px.
                        Dot center needs to be at 20px absolute. Item left border is 40px absolute.
                        Dot center relative to item: 20 - 40 = -20px.
                        Dot left edge: -20px - (dot_width/2) = -20px - 9px = -29px.
                      */
    }


    .skills-grid, .awards-list {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px;
    }
    .skill-category, .award-item {
        padding: 20px;
    }

    .connect-grid {
        grid-template-columns: 1fr; /* Stack form and social info */
    }
    .contact-form {
        padding: 25px;
    }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        padding: 12px;
    }
    .connect button[type="submit"] {
        padding: 12px 25px;
    }
    .social-icon-groups-wrapper {
        gap: 20px;
    }
    .social-icon {
        width: 50px;
        height: 50px;
    }
}

/* Extra Small Devices (Phones - e.g., up to 576px) */
@media (max-width: 576px) {
    body {
        padding-top: 55px; /* Slightly smaller header */
    }
    .site-header {
        padding: 8px 0;
    }
    .main-navigation {
        top: 55px; /* Match new header height */
    }
    .logo-text-main { font-size: 1.3rem; }
    .logo-text-subtle { font-size: 1.2rem; }
    .menu-toggle-icon { width: 22px; }
    .menu-toggle-icon::before { top: -6px; }
    .menu-toggle-icon::after { bottom: -6px; }


    .hero { padding: 40px 10px; }
    .hero-text h2 { font-size: clamp(2rem, 8vw, 3rem); }
    .hero-text p { font-size: clamp(0.9rem, 4vw, 1.1rem); }
    .profile-picture {
        width: clamp(160px, 40vw, 220px);
        height: clamp(160px, 40vw, 220px);
        border-width: 4px;
    }

    h2 { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 30px; }
    h2::before { width: 70px; }
    h2::after { bottom: -10px; }
    h2:hover::before { width: 100px; }

    section { padding: 40px 0; }

    .container { padding: 0 10px; } /* Reduce horizontal padding for container */

    .project-card h3 { font-size: clamp(1.1rem, 4vw, 1.4rem); }
    .project-card p { font-size: clamp(0.85rem, 3.5vw, 0.9rem); min-height: auto; }
    .project-card .tags span { font-size: 0.7rem; padding: 5px 10px; }

    .timeline::before { left: 15px; } /* Bar further left */
    .timeline-item {
        margin-left: 30px; /* Space from the timeline bar */
        padding: 15px;
    }
    .timeline-item::after {
        left: -24px; /* (30 - 15 - 9) = 6. No. -15px - 9px = -24px */
    }
    .timeline-item:nth-child(odd)::after,
    .timeline-item:nth-child(even)::after {
        left: -24px;
    }
    .timeline-item h3 { font-size: clamp(1.1rem, 4vw, 1.4rem); }
    .timeline-item .date { font-size: clamp(0.75rem, 3vw, 0.8rem); }
    .timeline-item p:not(.date) { font-size: clamp(0.85rem, 3.5vw, 0.9rem); }


    .skill-category h4 { font-size: clamp(1.1rem, 4vw, 1.3rem); }
    .skill-category ul li { font-size: clamp(0.8rem, 3vw, 0.85rem); }
    .skill-category .skill-icon { font-size: 2.2rem; }

    .award-item h3 { font-size: clamp(1.1rem, 4vw, 1.3rem); }
    .award-item .award-issuer, .award-item .award-date { font-size: clamp(0.75rem, 3vw, 0.8rem); }
    .award-item p:not(.award-issuer):not(.award-date) { font-size: clamp(0.85rem, 3.5vw, 0.9rem); }

    .contact-form { padding: 20px; }
    .contact-form h3 { font-size: clamp(1.3rem, 5vw, 1.6rem); }
    .form-group label { font-size: 0.85rem; }
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea { font-size: 0.9rem; padding: 10px; }
    .connect button[type="submit"] { font-size: clamp(0.9rem, 3.5vw, 1rem); padding:  10px 20px; }

    .social-connection-info h3 { font-size: clamp(1.3rem, 5vw, 1.6rem); }
    .social-icon { width: 45px; height: 45px; }
    .social-icon-text { font-size: 0.8rem; }

}

/* Adjustments for landscape on small devices if necessary */
@media (max-height: 450px) and (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto; /* Prevent excessive height */
        padding: 40px 15px;
    }
    .hero-content {
        flex-direction: row; /* Keep side-by-side if enough width */
        align-items: center;
    }
    .hero-text {
        order: 1; /* Text left */
        text-align: left;
        flex-basis: 50%;
    }
     .hero-text h2, .hero-text p {
        text-align: left;
    }
    .hero-image-container {
        order: 2; /* Image right */
        flex-basis: 40%;
    }
    .profile-picture {
        width: clamp(150px, 25vh, 200px); /* Base size on viewport height */
        height: clamp(150px, 25vh, 200px);
    }
    .hero-cta-buttons {
        flex-direction: row; /* Buttons side-by-side */
        justify-content: flex-start;
        gap: 15px;
    }
    .hero-cta-btn {
        width: auto; /* Auto width for buttons */
        max-width: none;
    }

    .main-navigation {
        max-height: calc(100vh - 60px); /* Prevent nav from being too tall */
        overflow-y: auto;
    }
}