/* ============================================= */
/* CSS STYLES FOR AARADHYA PATHAK'S PORTFOLIO  */
/* AND ADMIN PANEL                               */
/* ============================================= */

/* --- 1. Basic Reset and Setup --- */
/* Applies to all elements */
* {
    margin: 0; /* Removes default outer space */
    padding: 0; /* Removes default inner space */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

/* Targets the root HTML element */
html {
    scroll-behavior: smooth; /* Enables smooth scrolling when clicking on anchor links */
}

/* Styles for the main body of the page */
body {
    font-family: 'Roboto', sans-serif; /* Sets the primary font for the body */
    line-height: 1.6; /* Adjusts line spacing for better readability */
    color: #bdc3c7; /* Sets a soft light grey color for default text */
    background-color: #121212; /* Sets a very dark background color as a fallback */
    overflow-x: hidden; /* Prevents horizontal scrollbars, often caused by animations like AOS */
}

/* Styles applied when the 'nav-open' class is added to the body (typically by JavaScript for mobile nav) */
body.nav-open {
    overflow: hidden; /* Prevents scrolling on the body when the mobile navigation menu is open */
}

/* --- 2. Typography and Global Elements --- */

/* Styles for all heading levels (h1, h2, h3, h4) */
h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif; /* Sets a different font for headings */
    font-weight: 700; /* Sets a bold font weight for headings */
    margin-bottom: 0.5em; /* Adds space below headings */
    color: #ecf0f1; /* Sets a light grey color for headings */
}

/* Specific styles for h2 headings */
h2 {
    text-align: center; /* Centers h2 text */
    margin-bottom: 2em; /* Adds more space below h2, especially before sections */
    font-size: 2.5em; /* Sets a large font size for main section titles */
    position: relative; /* Needed for positioning the pseudo-element (underline) */
    z-index: 2; /* Ensures headings are layered above any overlays or backgrounds */
}

/* Pseudo-element for the underline effect on h2 headings */
h2::after {
    content: ''; /* Required for pseudo-elements */
    display: block; /* Makes the pseudo-element a block box */
    width: 60px; /* Sets the width of the underline */
    height: 4px; /* Sets the height of the underline */
    background-color: #00bfff; /* Sets the bright accent color for the underline */
    margin: 10px auto 0; /* Centers the underline horizontally and adds space above it */
    border-radius: 2px; /* Slightly rounds the ends of the underline */
}

/* Styles for all anchor links */
a {
    text-decoration: none; /* Removes the default underline */
    color: #00bfff; /* Sets the bright accent color for links */
    transition: color 0.3s ease; /* Smooth transition for color changes on hover */
}

/* Hover state for anchor links */
a:hover {
    color: #3498db; /* Changes color to a slightly different accent on hover */
}

/* Styles for the container element, used to constrain content width and center it */
.container {
    max-width: 1200px; /* Sets the maximum width of the container */
    margin: 0 auto; /* Centers the container horizontally */
    padding: 0 20px; /* Adds horizontal padding inside the container */
    position: relative; /* Needed to establish a stacking context for children elements (like video overlay) */
    z-index: 2; /* Ensures container content is layered above backgrounds and overlays */
}

/* Styles for sections with vertical padding */
.section-padding {
    padding: 80px 0; /* Adds significant vertical padding to sections */
    position: relative; /* Enables absolute positioning of child elements like the video background */
    overflow: hidden; /* Hides any content that overflows the section boundaries */
    background-color: #121212; /* Provides a solid dark background as a fallback if the video doesn't load */
}

/* Styles for sections intended to have a transparent background (to show a video behind them) */
.section-alt {
    background-color: transparent; /* Makes the section background fully transparent */
}

/* --- 3. Background Video & Overlay for Sections --- */
/* These styles define how the video background behaves when it is displayed.
   Responsiveness (filling the container) is handled by object-fit: cover, width/height 100%. */

/* Container for the background video */
.section-bg-video {
    position: absolute; /* Positions the video relative to the nearest positioned ancestor (.section-padding) */
    top: 0; /* Aligns to the top edge of the container */
    left: 0; /* Aligns to the left edge of the container */
    width: 100%; /* Makes the container span the full width of its parent */
    height: 100%; /* Makes the container span the full height of its parent */
    z-index: 0; /* Places the video container at the lowest layer, behind content and overlay */
    overflow: hidden; /* Hides any part of the video that overflows this container */
    /* display: block; - This element is now displayed by default on all screen sizes */
}

/* Styles for the video element itself */
.background-video {
    width: 100%; /* Makes the video element fill the width of its container */
    height: 100%; /* Makes the video element fill the height of its container */
    object-fit: cover; /* **Key for Responsiveness:** Ensures the video covers the entire area of the container, cropping if necessary, without distorting aspect ratio */
    filter: brightness(0.7) grayscale(0.3); /* Applies a filter to slightly darken and desaturate the video, improving text readability */
    transform: scale(1.1); /* Slightly scales the video up to hide potential gaps or edges caused by object-fit */
    /* Ensure video is autoplaying, muted, and looping in your HTML markup */
}

/* Styles for the semi-transparent overlay placed above the video */
.section-overlay {
    position: absolute; /* Positions the overlay relative to the nearest positioned ancestor (.section-padding) */
    top: 0; /* Aligns to the top edge */
    left: 0; /* Aligns to the left edge */
    width: 100%; /* Makes the overlay span the full width */
    height: 100%; /* Makes the overlay span the full height */
    background-color: rgba(0, 0, 0, 0.5); /* Sets a semi-transparent dark background color */
    z-index: 1; /* Places the overlay layer between the background video (z-index 0) and the content (z-index 2) */
    /* Removed specific mobile opacity override - the global 0.5 opacity is now used on all screen sizes */
}


/* --- 4. Header/Navigation --- */

/* Styles for the fixed header */
header {
    background-color: rgba(26, 26, 26, 0.95); /* Dark background with slight transparency */
    color: #fff; /* Light text color */
    padding: 10px 0; /* Vertical padding, adjusted slightly for logo */
    position: fixed; /* Fixes the header to the top of the viewport */
    width: 100%; /* Makes the header span the full width */
    top: 0; /* Positions the header at the top edge */
    left: 0; /* Positions the header at the left edge */
    z-index: 1000; /* Ensures the header is on the very top layer */
    box-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Adds a shadow for depth */
    transition: background-color 0.3s ease, padding 0.3s ease; /* Smooth transition for background and padding changes (used for sticky effect) */
}

/* Styles applied to the header when the 'sticky' class is added (typically by JS on scroll) */
header.sticky {
    padding: 8px 0; /* Reduces vertical padding when sticky */
    background-color: rgba(26, 26, 26, 1); /* Makes the background fully opaque when sticky */
}

/* Layout for the content inside the header container */
header .container {
    display: flex; /* Uses flexbox for layout */
    justify-content: space-between; /* Distributes space between logo and navigation */
    align-items: center; /* Vertically aligns items (logo, hamburger, nav) */
}

/* Style for the Logo Link */
.site-logo-link {
    display: flex; /* Use flex to align the image within the link */
    align-items: center; /* Vertically centers the logo image */
    height: 60px; /* Sets the height of the logo link container */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    z-index: 1100; /* Ensures logo is above navigation elements, including hamburger */
}

/* Hover state for the logo link */
.site-logo-link:hover {
     opacity: 0.8; /* Subtle fade effect on hover */
}

/* Style for the Logo Image itself */
.site-logo {
    display: block; /* Ensures the image is a block element */
    height: 100%; /* Makes the image take the full height of its container (.site-logo-link) */
    width: auto; /* Allows the width to adjust automatically to maintain aspect ratio */
    filter: brightness(1.2) contrast(1.1); /* Optional: Enhances the logo's appearance */
}

/* Hamburger Icon Styles */
.hamburger {
    padding: 15px 10px; /* Adds padding around the icon area */
    display: none; /* Hidden by default on large screens (shown on mobile via media query) */
    cursor: pointer; /* Changes cursor to a hand */
    transition-property: opacity, filter; /* Smooth transition for opacity and filter */
    transition-duration: 0.15s; /* Short transition duration */
    transition-timing-function: linear; /* Linear transition timing */
    font: inherit; /* Inherits font styles */
    color: inherit; /* Inherits color */
    text-transform: none; /* Prevents text transformation */
    background-color: transparent; /* Transparent background */
    border: 0; /* Removes border */
    margin: 0; /* Removes margin */
    overflow: visible; /* Ensures icon is fully visible */
    z-index: 1100; /* Ensures icon is above the mobile navigation menu */
}

/* Container for the hamburger lines */
.hamburger-box {
    width: 30px; /* Width of the icon area */
    height: 24px; /* Height of the icon area */
    display: inline-block; /* Allows inline display with dimensions */
    position: relative; /* Needed for positioning the inner lines */
}

/* The middle line of the hamburger icon */
.hamburger-inner {
    display: block; /* Makes it a block element */
    top: 50%; /* Positions the top edge at 50% of the container height */
    margin-top: -2px; /* Moves it up by half its height to center it vertically */
}

/* Styles common to the inner line and its pseudo-elements (top and bottom lines) */
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px; /* Width of the lines */
    height: 4px; /* Height (thickness) of the lines */
    background-color: #ecf0f1; /* Color of the lines */
    border-radius: 4px; /* Rounds the ends of the lines */
    position: absolute; /* Positions the lines relative to the .hamburger-box */
    transition-property: transform; /* Smooth transition for transform (rotation) */
    transition-duration: 0.15s; /* Short transition duration */
    transition-timing-function: ease; /* Ease transition timing */
}

/* Required for pseudo-elements */
.hamburger-inner::before, .hamburger-inner::after {
    content: ""; /* Required */
    display: block; /* Makes them block elements */
}

/* Position of the top line */
.hamburger-inner::before {
    top: -10px; /* Positions it above the middle line */
}

/* Position of the bottom line */
.hamburger-inner::after {
    bottom: -10px; /* Positions it below the middle line */
}

/* 'X' State when menu is open (applied when 'hamburger--spin' class is added by JS) */
.hamburger--spin .hamburger-inner {
  transform: rotate(45deg); /* Rotates the middle line to form part of the 'X' */
}

.hamburger--spin .hamburger-inner::before {
  top: 0; /* Moves the top line to the center */
  opacity: 0; /* Fades out the top line */
}

.hamburger--spin .hamburger-inner::after {
  bottom: 0; /* Moves the bottom line to the center */
  transform: rotate(-90deg); /* Rotates the bottom line to complete the 'X' */
}


/* Navigation Styles (Desktop default) */
.navbar ul {
    list-style: none; /* Removes default list bullets */
    display: flex; /* Arranges list items in a row */
    margin: 0; /* Removes default list margin */
    padding: 0; /* Removes default list padding */
}

.navbar ul li {
    margin-left: 20px; /* Adds space between navigation links */
}

.navbar ul li a {
    color: #bdc3c7; /* Sets color for nav links */
    font-weight: 500; /* Sets a medium font weight */
    padding: 5px 0; /* Adds vertical padding (doesn't affect box size due to display: inline-block or similar default) */
    position: relative; /* Needed for the underline pseudo-element */
    transition: color 0.3s ease; /* Smooth color transition on hover */
    font-size: 1.1em; /* Slightly larger font size for nav links */
}

/* Specific style for the resume button within the nav */
.navbar ul li .nav-resume-btn {
    background-color: #f39c12; /* Orange background */
    color: #fff !important; /* Ensures white text color, overriding general link color */
    padding: 8px 15px; /* Adds padding around the button */
    border-radius: 5px; /* Rounds the button corners */
    margin-left: 30px; /* Adds more space to the left of the button */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for background and lift effect */
    border: none; /* Removes any default link border */
}

/* Hover state for the resume button */
.navbar ul li .nav-resume-btn:hover {
    background-color: #e67e22; /* Darker orange on hover */
    transform: translateY(-2px); /* Adds a slight lift effect */
    color: #fff !important; /* Ensures text remains white on hover */
}


/* Underline effect on hover for standard nav links (not the resume button) */
.navbar ul li a:not(.nav-resume-btn)::after {
    content: ''; /* Required for pseudo-element */
    position: absolute; /* Positions the underline relative to the link */
    bottom: 0; /* Aligns to the bottom of the link */
    left: 0; /* Aligns to the left of the link */
    width: 0; /* Starts with zero width (hidden) */
    height: 2px; /* Sets the height of the underline */
    background-color: #00bfff; /* Sets the accent color */
    transition: width 0.3s ease; /* Smooth transition for width change */
}

/* Hover state for standard nav links */
.navbar ul li a:not(.nav-resume-btn):hover {
    color: #ecf0f1; /* Changes text color to a lighter grey on hover */
    transform: none; /* Ensures no translateY is applied (in case inherited from elsewhere) */
}

/* Width change on hover for the underline */
.navbar ul li a:not(.nav-resume-btn):hover::after {
    width: 100%; /* Expands the underline to the full width of the link on hover */
}


/* --- 5. Mobile Navigation (Media Query) --- */
/* Styles applied when the screen width is 768px or less */
@media (max-width: 768px) {
    /* Show hamburger icon on small screens */
    .hamburger {
        display: block;
    }

    /* Style and position for the mobile navigation menu */
    .navbar {
        position: fixed; /* Fixed position relative to the viewport */
        top: 0; /* Starts at the top */
        right: -100%; /* Initially positioned off-screen to the right */
        width: 80%; /* Menu takes up 80% of the viewport width */
        max-width: 300px; /* Limits the maximum width for larger tablets */
        height: 100vh; /* Makes the menu fill the full viewport height */
        background-color: #1a1a1a; /* Dark background for the menu */
        box-shadow: -5px 0 15px rgba(0,0,0,0.5); /* Adds a shadow on the left edge */
        transition: right 0.3s ease-in-out; /* Smooth slide-in/out transition */
        padding-top: 80px; /* Adds space at the top to avoid being hidden by the fixed header */
        z-index: 999; /* Positions below the header but above main content */
        overflow-y: auto; /* Adds vertical scrolling if the menu content is too long */
    }

    /* State when menu is open (applied when 'is-active' class is added by JS) */
    .navbar.is-active {
        right: 0; /* Slides the menu into view */
    }

    /* Styles for the list within the mobile navigation */
    .navbar ul {
        flex-direction: column; /* Stacks list items vertically */
        align-items: center; /* Centers list items horizontally within the menu */
        padding: 20px 0; /* Adds vertical padding inside the menu */
    }

    /* Space between vertical links in the mobile menu */
    .navbar ul li {
        margin: 15px 0; /* Adds vertical margin between list items */
        margin-left: 0; /* Removes the desktop left margin */
    }

     /* Styles for nav links in the mobile menu */
     .navbar ul li a {
         font-size: 1.3em; /* Larger font size for better readability on mobile */
         color: #ecf0f1; /* Sets a lighter color for contrast against the dark menu background */
     }

      /* Remove underline effect from mobile menu links */
     .navbar ul li a::after {
         display: none; /* Hides the pseudo-element underline */
     }

      /* Specific style for resume button in mobile nav */
     .navbar ul li .nav-resume-btn {
         margin-left: 0; /* Removes desktop margin */
         margin-top: 15px; /* Adds space above the button */
         width: 80%; /* Makes the button take up 80% of the menu width */
         text-align: center; /* Centers the button text */
     }
     /* Removes the lift effect on hover for the resume button on mobile */
     .navbar ul li .nav-resume-btn:hover {
         transform: none;
     }
}


/* --- 6. Hero Section --- */

/* Styles for the Hero section */
#hero {
    height: 100vh; /* Makes the section fill the full viewport height */
    color: #fff; /* White text color */
    display: flex; /* Uses flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    text-align: center; /* Centers text within the flex item */
    position: relative; /* Needed for absolute positioning of background elements */
    overflow: hidden; /* Hides any overflowing content */
    padding-top: 80px; /* Adds padding at the top to account for the fixed header */
}

/* Specific adjustments for the video within the Hero section */
#hero .section-bg-video .background-video {
     filter: brightness(0.6) grayscale(0.2); /* Applies a slightly different filter to the hero video */
     transform: scale(1.05); /* Slightly different scale */
}

/* Container for the hero content (text and buttons) */
.hero-content {
    z-index: 10; /* Ensures content is layered above the overlay (z-index 1) */
    position: relative; /* Needed for z-index to work correctly */
    padding: 0 20px; /* Adds horizontal padding to prevent edge overflow on small screens */
}

/* Styles for the main heading (your name) in the Hero section */
#hero h1 {
    font-size: 4.5em; /* Sets a large font size */
    margin-bottom: 0.2em; /* Reduces space below the main heading */
    color: #fff; /* Ensures white text color */
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Adds a strong text shadow for readability */
}

/* Styles for the subtitle below the main heading */
.subtitle {
    font-size: 1.8em; /* Sets the font size */
    font-weight: 400; /* Sets a normal font weight */
    margin-bottom: 0.5em; /* Adds space below the subtitle */
    color: rgba(255, 255, 255, 0.9); /* Sets a slightly transparent white color */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3); /* Adds a subtle text shadow */
}

/* Typing Effect Styles for Subtitle */
.typing-effect {
  overflow: hidden; /* Ensures text is not visible before typing */
  white-space: nowrap; /* Keeps text on a single line */
  border-right: .15em solid #00bfff; /* Creates the blinking cursor effect */
  /* Initial state - width is managed by JS animation */
}

/* Class applied by JavaScript to trigger typing animation */
.typing {
    /* typing animation writes the text, blink-caret animation makes the cursor blink */
    animation: typing 3s steps(40, end) forwards, blink-caret .75s step-end infinite;
    /* width: 100%; - The 'forwards' fill mode in the animation takes care of the final width */
}

/* Keyframes for the typing animation */
@keyframes typing {
  from { width: 0 } /* Starts with zero width */
  to { width: 100% } /* Ends with full width */
}

/* Keyframes for the blinking cursor animation */
@keyframes blink-caret {
  from, to { border-color: transparent } /* Cursor is invisible at the start and end of the cycle */
  50% { border-color: #00bfff; } /* Cursor is visible (using accent color) halfway through the cycle */
}

/* Styles for the tagline text */
.tagline {
    font-size: 1.2em; /* Sets the font size */
    margin-bottom: 2em; /* Adds space below the tagline */
    color: rgba(255, 255, 255, 0.8); /* Slightly more transparent white */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3); /* Subtle text shadow */
}

/* --- 7. Hero Section Buttons --- */

/* Container for the hero buttons */
.hero-buttons {
    display: flex; /* Uses flexbox for layout */
    justify-content: center; /* Centers buttons horizontally */
    gap: 20px; /* Adds space between buttons */
    margin-top: 2em; /* Adds space above the buttons */
    z-index: 10; /* Ensures buttons are layered above the overlay */
    position: relative; /* Needed for z-index to work */
    flex-wrap: wrap; /* Allows buttons to wrap onto the next line if the screen is too narrow */
}

/* Base styles for buttons within the hero section */
.hero-buttons .btn {
    display: inline-block; /* Ensures button behaves like a block element but allows inline positioning */
    padding: 14px 35px; /* Increased padding for a more substantial feel */
    border-radius: 30px; /* Makes the buttons aggressively rounded (pill shape) */
    font-size: 1.1em; /* Sets the font size */
    font-weight: 600; /* Sets bold font weight */
    text-transform: uppercase; /* Converts text to uppercase */
    letter-spacing: 0.05em; /* Adds slight letter spacing */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Smooth transitions for multiple properties */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* Adds a shadow */
    backdrop-filter: blur(5px); /* Optional: Adds a subtle blur effect behind the button */
}

/* Primary Button Specific Styles */
.primary-btn {
    background: linear-gradient(45deg, #f39c12, #e67e22); /* Applies an orange gradient */
    color: #fff; /* White text color */
    border: none; /* Removes border */
}

/* Hover state for primary button */
.primary-btn:hover {
    background: linear-gradient(45deg, #e67e22, #f39c12); /* Reverses the gradient on hover */
    transform: translateY(-6px); /* Adds a more pronounced lift effect */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* Increases shadow size and intensity on hover */
}

/* Active (pressed) state for primary button */
.primary-btn:active {
     transform: translateY(-2px); /* Reduces the lift effect when pressed */
     box-shadow: 0 5px 10px rgba(0,0,0,0.3); /* Reduces shadow size when pressed */
}

/* Secondary Button Specific Styles */
.secondary-btn {
    background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white background */
    color: #ecf0f1; /* Light text color */
    border: 2px solid rgba(255, 255, 255, 0.5); /* Semi-transparent white border */
}

/* Hover state for secondary button */
.secondary-btn:hover {
    background-color: rgba(0, 191, 255, 0.2); /* Semi-transparent accent color background on hover */
    border-color: #00bfff; /* Changes border color to the accent color on hover */
    color: #00bfff; /* Changes text color to accent color on hover */
    transform: translateY(-6px); /* Adds a more pronounced lift effect */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* Increases shadow size and intensity on hover */
}

/* Active (pressed) state for secondary button */
.secondary-btn:active {
     transform: translateY(-2px); /* Reduces lift effect when pressed */
     box-shadow: 0 5px 10px rgba(0,0,0,0.3); /* Reduces shadow size when pressed */
     background-color: rgba(0, 191, 255, 0.1); /* Resets background on click */
     border-color: rgba(255, 255, 255, 0.5); /* Resets border on click */
     color: #ecf0f1; /* Resets text color on click */
}

/* --- 8. About Section --- */

/* Styles for the content area within the About section */
.about-content {
    display: flex; /* Uses flexbox for layout */
    align-items: center; /* Vertically aligns items (image and text) */
    gap: 40px; /* Adds space between the image and text */
    max-width: 900px; /* Limits the width of the content block */
    margin: 0 auto; /* Centers the content block horizontally */
    z-index: 2; /* Ensures content is above background layers */
    position: relative; /* Needed for z-index to work */
}

/* Styles for the paragraph text within the About section */
.about-content p {
    font-size: 1.1em; /* Sets the font size */
    line-height: 1.8; /* Increases line height for better readability */
    text-align: left; /* Aligns text to the left within the flex container */
    flex: 1; /* Allows the paragraph to grow and shrink, taking up available space */
}

/* Styles for the photo in the About section */
.about-img {
    display: block; /* Ensures the image is a block element */
    width: 250px; /* Sets the width */
    height: 250px; /* Sets the height */
    border-radius: 50%; /* Makes the image perfectly round */
    object-fit: cover; /* Ensures the image covers the circular area without distortion, cropping if needed */
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); /* Adds a shadow */
    border: 5px solid #00bfff; /* Adds an accent color border */
    transition: transform 0.5s ease-in-out, box-shadow 0.5s ease, border-color 0.5s ease; /* Smooth transitions for hover effects */
    flex-shrink: 0; /* Prevents the image from shrinking below its specified size */
}

/* Hover state for the About image */
.about-img:hover {
    transform: scale(1.05) rotate(3deg); /* Slightly zooms and rotates the image on hover */
    box-shadow: 0 12px 25px rgba(0,0,0,0.5); /* Increases shadow size on hover */
    border-color: #f39c12; /* Changes border color on hover */
}

/* --- 9. Projects Section --- */

/* Styles for the grid layout of project cards */
.project-grid {
    display: grid; /* Uses CSS Grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Creates responsive columns. Auto-fit fills space, minmax ensures items are at least 300px wide but can grow to 1fr (equal width) */
    gap: 30px; /* Adds space between grid items (cards) */
}

/* Styles for individual project cards */
.project-card {
    background-color: #2c3e50; /* Dark blue card background */
    border-radius: 8px; /* Rounds the card corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Adds a shadow */
    overflow: hidden; /* Ensures image zoom doesn't break card boundaries */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover effects */
    display: flex; /* Uses flexbox for content layout inside the card */
    flex-direction: column; /* Stacks content vertically */
    color: #bdc3c7; /* Light text color for card content */
    position: relative; /* Needed for z-index */
    z-index: 2; /* Ensures cards are above background layers */
}

/* Hover state for project cards */
.project-card:hover {
    transform: translateY(-10px); /* Adds a lift effect on hover */
    box-shadow: 0 8px 15px rgba(0,0,0,0.4); /* Increases shadow size on hover */
}

/* Styles for the project image within the card */
.project-img {
    width: 100%; /* Makes the image fill the card's width */
    height: 220px; /* Sets a fixed height for project images */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out; /* Smooth transitions for zoom and filter on hover */
    filter: brightness(0.8); /* Slightly dims images initially */
}

/* Styles for the project image when the parent card is hovered */
.project-card:hover .project-img {
    transform: scale(1.1); /* Zooms the image in on hover */
    filter: brightness(1); /* Restores full brightness on hover */
}

/* Styles for the project information area */
.project-info {
    padding: 20px; /* Adds padding inside the info area */
    flex-grow: 1; /* Allows the info area to grow to fill available space, pushing links down */
    display: flex; /* Uses flexbox */
    flex-direction: column; /* Stacks items vertically */
}

/* Styles for the project title (h3) */
.project-info h3 {
    margin-top: 0; /* Removes default top margin */
    font-size: 1.4em; /* Sets font size */
    color: #ecf0f1; /* Light heading color */
}

/* Styles for project description paragraph */
.project-info p {
    margin-bottom: 10px; /* Adds space below the paragraph */
    color: #bdc3c7; /* Matches text color */
    font-size: 0.95em; /* Slightly smaller font */
}

/* Styles for the tech stack text */
.tech-stack {
    font-size: 0.9em; /* Smaller font size */
    color: #95a5a6; /* Sets a slightly different grey color */
    font-style: italic; /* Sets text to italic */
}

/* Container for project links (Demo, GitHub) */
.project-links {
    margin-top: auto; /* Pushes this container to the bottom of the flex item (.project-info) */
    padding-top: 15px; /* Adds space above the links */
    border-top: 1px solid #34495e; /* Adds a separator line */
    display: flex; /* Uses flexbox */
    gap: 15px; /* Adds space between links */
}

/* Styles for individual link buttons */
.link-btn {
    display: inline-flex; /* Allows inline display and flex properties */
    align-items: center; /* Vertically aligns content (icon and text) */
    color: #00bfff; /* Accent color for links */
    font-weight: 500; /* Medium font weight */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Styles for icons within link buttons */
.link-btn i {
    margin-right: 5px; /* Adds space between icon and text */
}

/* Hover state for link buttons */
.link-btn:hover {
    color: #f39c12; /* Changes color to orange accent on hover */
}


/* --- 10. Reusable Card Styles (for Experience, Skills, Achievements, Volunteering) --- */
/* Defines common styles for various items displayed in card-like formats */

/* Apply these base styles to elements with these classes */
.experience-item,
.skill-category,
.ac-item {
     background-color: #2c3e50; /* Dark blue card background */
    border-radius: 8px; /* Rounds corners */
    padding: 25px; /* Adds internal padding */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Adds a shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover effects */
    color: #bdc3c7; /* Light text color */
     position: relative; /* Needed for z-index */
    z-index: 2; /* Ensures cards are above background layers */
}

/* Hover state for these card-like elements */
.experience-item:hover,
.skill-category:hover,
.ac-item:hover {
     transform: translateY(-8px); /* Adds a lift effect */
     box-shadow: 0 8px 15px rgba(0,0,0,0.4); /* Increases shadow size on hover */
}

/* Specific adjustments for layout within these card types */
.experience-item { margin-bottom: 25px; } /* Adds bottom margin to experience items */
.skill-category { text-align: center; } /* Centers content within skill categories */
.ac-item { display: flex; align-items: center; } /* Uses flexbox for achievement/volunteering items to align icon and text */


/* Specific Icon Colors within AC items (can override generic card icon color) */
.ac-item i { color: #00bfff; margin-right: 20px; font-size: 2em;} /* Default icon style for AC items */
#volunteering .ac-item i { color: #f39c12; } /* Overrides icon color for volunteering items to orange */


/* --- 11. Skills List Layout --- */

/* Styles for the grid layout of skill categories */
.skills-list {
    display: grid; /* Uses CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive columns, min width 220px */
    gap: 25px; /* Adds space between grid items */
    text-align: center; /* Centers text within the grid items */
}

/* Style for the Icons within Skill Categories */
.skill-icon {
    font-size: 2.5em; /* Sets the size of the icon */
    color: #00bfff; /* Sets the accent color for icons */
    margin-bottom: 15px; /* Adds space below the icon */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover effects */
}

/* Style for Skill Category Heading */
.skill-category h3 {
     color: #ecf0f1; /* Light heading color */
     margin-top: 0; /* Removes default top margin */
     margin-bottom: 10px; /* Adds space below the heading */
     font-size: 1.3em; /* Slightly larger heading */
}

/* Style for Skill Category Paragraph (listing skills) */
.skill-category p {
     color: #bdc3c7; /* Matches text color */
     font-size: 1em; /* Standard font size */
     line-height: 1.5; /* Adjusts line height */
}

/* Enhanced Hover Effect for Skill Cards (overrides base .skill-category:hover if more specific) */
.skill-category:hover {
     transform: translateY(-10px); /* More pronounced lift */
     box-shadow: 0 12px 25px rgba(0,0,0,0.5); /* Larger shadow */
     border: 1px solid #00bfff; /* Example: Adds an accent border on hover */
}

/* Animation/Color change on Icon when Card is Hovered */
.skill-category:hover .skill-icon {
    color: #f39c12; /* Changes icon color to orange on card hover */
    transform: scale(1.1); /* Slightly scales the icon on card hover */
}


/* --- 12. Contact Section --- */

/* Styles for the paragraph text in the Contact section */
#contact p {
    text-align: center; /* Centers text */
    font-size: 1.1em; /* Sets font size */
    margin-bottom: 30px; /* Adds space below the paragraph */
    color: #bdc3c7; /* Matches text color */
    z-index: 2; /* Ensures text is above background overlay if applicable */
    position: relative; /* Needed for z-index */
}

/* Contact Form Styling */
.contact-form {
    max-width: 600px; /* Limits the maximum width of the form */
    margin: 20px auto 40px; /* Adds space above, centers horizontally, and adds space below */
    padding: 40px; /* Adds internal padding */
    background-color: #1a1a1a; /* Darker background for the form */
    border-radius: 10px; /* Rounds the form corners */
    box-shadow: 0 8px 20px rgba(0,0,0,0.5); /* Adds a prominent shadow */
    z-index: 2; /* Ensures form is above background */
    position: relative; /* Needed for z-index */
    border: 1px solid #34495e; /* Adds a subtle border */
}

/* Styles for each form group (label + input/textarea) */
.form-group {
    margin-bottom: 25px; /* Adds space between form groups */
}

/* Styles for form labels */
.form-group label {
    display: block; /* Makes label a block element */
    margin-bottom: 10px; /* Adds space below the label */
    font-weight: 500; /* Medium font weight */
    color: #ecf0f1; /* Light label color */
    font-size: 1em; /* Standard font size */
}

/* Styles for text, email, url, number inputs and textareas */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"], /* Added for admin form fields */
.form-group input[type="number"], /* Added for admin form fields */
.form-group textarea {
    width: 100%; /* Makes the input field fill its container width */
    padding: 14px; /* Adds internal padding */
    background-color: #2c3e50; /* Dark blue input background */
    border: 1px solid #34495e; /* Border color matches the form background */
    border-radius: 6px; /* Rounds input field corners */
    color: #ecf0f1; /* Light input text color */
    font-size: 1em; /* Standard font size */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transitions for focus states */
    resize: vertical; /* Allows textarea to be resized vertically */
}

/* Placeholder text style for inputs/textareas */
.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group input[type="url"]::placeholder,
.form-group input[type="number"]::placeholder,
.form-group textarea::placeholder {
    color: #bdc3c7; /* Sets a softer placeholder text color */
    opacity: 0.8; /* Makes placeholder text slightly transparent */
}

/* Focus state for input fields (when they are selected) */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus {
    outline: none; /* Removes the default browser outline */
    border-color: #00bfff; /* Changes border color to bright accent on focus */
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.6); /* Adds a glow effect on focus */
    background-color: #34495e; /* Slightly changes background color on focus */
}

/* Style for the Submit Button in Contact and Admin Forms */
.contact-form button[type="submit"],
.admin-form button[type="submit"], /* Applies to submit buttons in admin forms */
.login-form button[type="submit"] { /* Applies to the login form button */
    display: block; /* Makes the button a block element, taking full width */
    width: 100%; /* Sets button width to 100% of its container */
    text-align: center; /* Centers text horizontally */
    margin-top: 30px; /* Adds space above the button */
    padding: 14px 20px; /* Adds internal padding */
    font-size: 1.1em; /* Sets font size */
    font-weight: 600; /* Sets bold font weight */
    color: #fff; /* White text color */
    background-color: #f39c12; /* Orange accent background */
    border: none; /* Removes border */
    border-radius: 25px; /* Rounds button corners aggressively */
    cursor: pointer; /* Changes cursor to hand */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover/active */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Adds a shadow */
}

/* Hover state for submit buttons */
.contact-form button[type="submit"]:hover,
.admin-form button[type="submit"]:hover,
.login-form button[type="submit"]:hover {
    background-color: #e67e22; /* Darker orange on hover */
    transform: translateY(-5px); /* Adds a lift effect */
    box-shadow: 0 8px 15px rgba(0,0,0,0.4); /* Increases shadow on hover */
}

/* Active (pressed) state for submit buttons */
.contact-form button[type="submit"]:active,
.admin-form button[type="submit"]:active,
.login-form button[type="submit"]:active {
     transform: translateY(0); /* Removes lift effect when pressed */
     box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Reduces shadow when pressed */
}


/* Style for form status messages (success/error) */
.form-status {
    margin-top: 25px; /* Adds space above */
    padding: 12px; /* Adds internal padding */
    border-radius: 4px; /* Rounds corners */
    text-align: center; /* Centers text */
    font-weight: 500; /* Medium font weight */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease, background-color 0.3s ease; /* Smooth transition for visibility and color */
    font-size: 0.95em; /* Sets font size */
}

/* Styles for success messages */
.form-status.success {
    background-color: #2ecc71; /* Green background */
    color: #fff; /* White text */
    opacity: 1; /* Makes the message visible */
}

/* Styles for error messages */
.form-status.error {
    background-color: #e74c3c; /* Red background */
    color: #fff; /* White text */
    opacity: 1; /* Makes the message visible */
}


/* Contact Info Styling (below the form) */
.contact-info {
    display: flex; /* Uses flexbox */
    flex-direction: row; /* Arranges items in a row on larger screens */
    justify-content: center; /* Centers items horizontally */
    flex-wrap: wrap; /* Allows items to wrap onto the next line if needed */
    gap: 30px; /* Adds space between contact items */
    margin-top: 40px; /* Adds space above the contact info block */
    z-index: 2; /* Ensures info is above background */
     position: relative; /* Needed for z-index */
}

/* Styles for individual contact items (e.g., email, phone) */
.contact-item {
    display: flex; /* Uses flexbox to align icon and text */
    align-items: center; /* Vertically aligns content */
    font-size: 1.1em; /* Sets font size */
    color: #bdc3c7; /* Matches text color */
}

/* Styles for icons within contact items */
.contact-item i {
    margin-right: 10px; /* Adds space between icon and text */
    color: #00bfff; /* Sets accent color for icons */
    font-size: 1.3em; /* Slightly larger icon size */
}

/* Styles for links within contact items */
.contact-item a {
     color: #bdc3c7; /* Sets link color to match surrounding text */
     transition: color 0.3s ease; /* Smooth color transition */
     font-weight: normal; /* Ensures link text is not bold */
     text-decoration: none; /* Removes default underline */
}

/* Hover state for links within contact items */
.contact-item a:hover {
     color: #00bfff; /* Changes color to accent on hover */
     text-decoration: underline; /* Adds an underline on hover */
}


/* --- 13. Footer --- */

/* Styles for the footer */
footer {
    background-color: #1a1a1a; /* Dark background */
    color: #bdc3c7; /* Light text color */
    text-align: center; /* Centers text horizontally */
    padding: 30px 0; /* Adds vertical padding */
    font-size: 0.9em; /* Slightly smaller font size */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5); /* Adds a top shadow */
}

/* Layout for content within the footer container */
footer .container {
    display: flex; /* Uses flexbox */
    flex-direction: column; /* Stacks content vertically */
    align-items: center; /* Centers content horizontally */
    gap: 15px; /* Adds space between stacked items */
}

/* Styles for links (icons) within the footer */
.footer-links a {
    color: #bdc3c7; /* Sets icon color */
    margin: 0 10px; /* Adds horizontal space between icons */
    font-size: 1.3em; /* Slightly larger icons */
     transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover state for footer links */
.footer-links a:hover {
    color: #00bfff; /* Changes color to accent on hover */
}

/* --- 14. Responsive Adjustments (General) --- */

/* Styles applied when screen width is 992px or less */
@media (max-width: 992px) {
     h1 { font-size: 3.5em; } /* Reduces H1 size */
     .subtitle { font-size: 1.6em; } /* Reduces subtitle size */
     .tagline { font-size: 1.1em; } /* Reduces tagline size */
     h2 { font-size: 2em; margin-bottom: 1.5em; } /* Reduces H2 size and bottom margin */
     .section-padding { padding: 60px 0; } /* Reduces vertical section padding */
     .about-img { width: 200px; height: 200px; } /* Reduces About image size */

     /* Adjust grid gaps */
     .project-grid { gap: 20px; } /* Reduces project grid gap */
     .skills-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;} /* Adjusts skills grid columns and gap */
     .ac-list { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } /* Adjusts AC grid columns and gap */
}

/* Styles applied when screen width is 768px or less */
/* NOTE: VIDEO BACKGROUND REMAINS VISIBLE IN THIS BREAKPOINT */
@media (max-width: 768px) {
    h1 { font-size: 2.8em; } /* Further reduces H1 size */
     .subtitle { font-size: 1.4em; } /* Further reduces subtitle size */
     .tagline { font-size: 1em; } /* Further reduces tagline size */
    h2 { font-size: 1.8em; margin-bottom: 1.5em; } /* Further reduces H2 size */
    .section-padding { padding: 60px 0; } /* Maintains reduced section padding */

    /*
      --- Background Video & Overlay (Video is NOT hidden here) ---
      The global .section-bg-video and .section-overlay styles apply.
      Removed: display: none; from .section-bg-video
      Removed: darker background-color from .section-overlay
      Removed: fallback background-colors for .section-alt and .section-padding
    */


    /* Header/Nav specific mobile adjustments (defined in section 4/5) */
    /* Hamburger icon is displayed */
    .hamburger { display: block; }
    /* Navbar is positioned off-screen and slides in */
    .navbar {
        position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px;
        height: 100vh; background-color: #1a1a1a; box-shadow: -5px 0 15px rgba(0,0,0,0.5);
        transition: right 0.3s ease-in-out; padding-top: 80px; z-index: 999; overflow-y: auto;
    }
    .navbar.is-active { right: 0; }
    /* Mobile nav links are stacked vertically and centered */
    .navbar ul { flex-direction: column; align-items: center; padding: 20px 0; }
    .navbar ul li { margin: 15px 0; margin-left: 0; }
    .navbar ul li a { font-size: 1.3em; color: #ecf0f1; }
    .navbar ul li a::after { display: none; } /* Remove underline */
    .navbar ul li .nav-resume-btn { margin-left: 0; margin-top: 15px; width: 80%; text-align: center; }
    .navbar ul li .nav-resume-btn:hover { transform: none; }


    /* Hero Section - Mobile Adjustments */
    #hero {
         height: auto; /* Allows height to adapt to content */
         min-height: 80vh; /* Ensures a minimum height */
         padding: 120px 20px 60px; /* Adjusts padding, increased top padding for fixed header */
    }
     /* Hero Buttons - Stack vertically on mobile */
    .hero-buttons {
        flex-direction: column; /* Stacks buttons vertically */
        align-items: center; /* Centers buttons horizontally within the column */
        gap: 15px; /* Space between stacked buttons */
    }
     /* Adjustments for hero buttons when stacked */
     .hero-buttons .btn {
        width: 100%; /* Makes buttons take full width of the flex item */
        max-width: 250px; /* Limits max width for larger mobile screens */
        margin: 0; /* Removes any residual horizontal margin */
        /* Remove hover/active transforms and extra shadows on mobile */
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
        padding: 12px 25px; /* Slightly reduce padding */
        font-size: 1em; /* Slightly smaller font */
     }
    /* Ensure hover styles are less aggressive or disabled on mobile */
     .hero-buttons .btn:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        /* Keep primary gradient on hover */
        background: linear-gradient(45deg, #f39c12, #e67e22);
        color: #fff;
        border: none;
     }
     .secondary-btn:hover {
        /* Keep base secondary styles on hover */
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
        color: #ecf0f1;
     }


    /* About Section - Stack image and text vertically */
    .about-content {
        flex-direction: column;
        gap: 30px; /* Reduces gap */
        text-align: center; /* Centers text when stacked */
    }
     .about-content p {
         text-align: center; /* Ensures paragraph text is centered */
     }
    .about-img {
         width: 180px; /* Smaller size on mobile */
         height: 180px;
    }

    /* Experience - Stack header items */
    .exp-header {
        flex-direction: column;
        align-items: flex-start; /* Aligns items to the start */
    }
    .exp-date { margin-top: 5px; } /* Adds space above date */

    /* Grids become single column on small screens */
    .project-grid, .skills-list, .ac-list {
        grid-template-columns: 1fr; /* Stacks items vertically */
    }

    .project-card { flex-direction: column; } /* Ensures project card content stacks */

    /* Achievements & Volunteering - Stack content vertically */
    .ac-item {
        flex-direction: column;
        text-align: center;
    }
    .ac-item i {
        margin: 0 0 15px 0; /* Adjusts icon margin */
        font-size: 1.8em; /* Slightly smaller icon size */
    }

     /* Contact Info - Stack items vertically */
    .contact-info {
        flex-direction: column; /* Stacks contact items */
        align-items: center; /* Centers items */
        gap: 15px; /* Reduces gap */
    }
     .contact-item {
         flex-direction: row; /* Keeps icon and text in a row within each item */
         justify-content: center; /* Centers item content */
     }

    /* Contact Form Button mobile adjustments */
    .contact-form button[type="submit"],
    .admin-form button[type="submit"],
    .login-form button[type="submit"] {
        /* Remove lift effect on hover for mobile */
        transform: none !important;
        /* Keep default shadow */
        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
     }

    /* Footer - Stack content vertically */
    footer .container {
         flex-direction: column;
    }
     footer .footer-links {
        margin-top: 15px;
    }

    /* Admin Form Adjustments - Also remove lift effect on mobile */
    .admin-main {
        padding-top: 100px; /* Add space for fixed header */
    }
     .admin-form {
         padding: 25px;
     }
     .admin-form button[type="submit"] {
        transform: none !important;
         box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
     }
     .login-form button[type="submit"] { /* Apply to login form too */
         transform: none !important;
         box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
     }

     /* Responsive adjustments for admin lists and buttons */
      .admin-item-list div {
          flex-direction: column; /* Stack item content and buttons */
          align-items: flex-start; /* Align content to the left */
          gap: 10px;
          padding: 12px; /* Reduce padding */
     }
     .admin-item-actions { /* Container for buttons */
         flex-direction: row; /* Keep buttons in a row by default */
         flex-wrap: wrap; /* Allow buttons to wrap */
         gap: 8px;
         justify-content: space-around; /* Distribute space among buttons */
         width: 100%; /* Take full width */
         margin-left: 0; /* Remove auto margin */
         margin-top: 10px; /* Add space above buttons when stacked */
     }
     .admin-item-actions button { /* Buttons themselves */
         flex-grow: 1; /* Allow buttons to take equal width */
         text-align: center;
          padding: 8px 10px; /* Adjust padding */
         font-size: 0.9em;
         /* Remove desktop hover/active effects that might be awkward on mobile */
         transform: none !important;
         box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
          border-color: transparent !important;
          background-color: #556270 !important;
          color: #ecf0f1 !important;
     }
      /* Re-add simple hover/active effects for clarity on mobile */
     .admin-item-actions button:hover {
         background-color: #6c7a89 !important;
         box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
     }
      .admin-item-actions button:active {
          background-color: #44505c !important;
          box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
     }

      /* Ensure icon colors stay correct on mobile hover/active */
      .admin-item-actions .edit-item-btn i { color: #00bfff !important; }
      .admin-item-actions .delete-item-btn i { color: #e74c3c !important; }

     .delete-all-btn { transform: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; }
     .delete-all-btn:hover { transform: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; }

}

/* --- 15. Further adjustments for even smaller screens --- */
/* Styles applied when screen width is 480px or less */
/* NOTE: VIDEO BACKGROUND REMAINS VISIBLE IN THIS BREAKPOINT */
@media (max-width: 480px) {
    h1 { font-size: 2.2em; } /* Further reduce H1 size */
     .subtitle { font-size: 1.2em; } /* Further reduce subtitle size */
     h2 { font-size: 1.6em; } /* Further reduce H2 size */
     /* Nav styles handled by mobile nav block (Section 5) */
     .project-img { height: 180px; } /* Adjust project image height */
     .ac-item { padding: 20px; } /* Reduce padding on AC items */
     .about-img { width: 150px; height: 150px; } /* Smaller About photo */

     /* Contact Form */
     .contact-form { padding: 20px; } /* Reduce form padding */
     .admin-form { padding: 20px; } /* Reduce admin form padding */
     #loginArea { padding: 20px; } /* Adjust login area padding */


      /* Hero Buttons */
     .hero-buttons .btn {
        max-width: 200px; /* Further limit width on very small screens */
     }
      /* Optional: force buttons to stack vertically on tiny screens */
      /* .hero-buttons { flex-direction: column; align-items: center; } */
      /* .hero-buttons .btn { width: 100%; } */


       /* Optional: force admin item buttons to stack vertically on tiny screens */
     /* @media (max-width: 480px) {
        .admin-item-actions {
            flex-direction: column;
            align-items: flex-start;
        }
        .admin-item-actions button {
            width: 100%;
            max-width: none;
        }
    } */
}


/* --- 16. Admin Page Specific Styles --- */
/* These styles are specifically for the admin panel.
   They use solid backgrounds defined here and are NOT affected by the
   video background setup or the media query changes related to the video. */
.admin-main {
    padding-top: 100px; /* Adds space for the fixed header */
    background-color: #1a1a1a; /* Sets a solid dark background for the main admin content area */
    color: #bdc3c7; /* Ensures text color consistency */
    min-height: 100vh; /* Ensures the main content area covers at least the full viewport height */
}

.admin-main .container {
    /* Container styling is inherited from the general .container rule */
}

/* Styles for individual sections within the admin panel */
.admin-section {
    background-color: #2c3e50; /* Dark blue background for admin section "cards" */
    border-radius: 8px; /* Rounds corners */
    padding: 30px; /* Adds internal padding */
    margin-bottom: 30px; /* Adds space between sections */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Adds a shadow */
    position: relative; /* Needed for z-index */
    z-index: 2; /* Ensures section content is above any potential background layers (though none are active here) */
}

/* Styles for headings within admin sections */
.admin-section h3 {
    color: #ecf0f1; /* Light heading color */
    margin-top: 0; /* Removes default top margin */
    margin-bottom: 20px; /* Adds space below heading */
    font-size: 1.5em; /* Sets font size */
    border-bottom: 1px solid #34495e; /* Adds a subtle separator line */
    padding-bottom: 10px; /* Adds space between heading text and the separator */
}

/* Styles for forms within admin sections */
.admin-form {
    /* Inherits general form-group, input, textarea styles from .contact-form */
    max-width: none; /* Removes the max-width constraint from the contact form style */
    margin: 0 auto; /* Centers the form within its section if needed */
    padding: 0; /* Removes padding, as padding is on the parent .admin-section */
    background-color: transparent; /* Transparent background, background is on .admin-section */
    box-shadow: none; /* Removes shadow */
    border: none; /* Removes border */
}

/* Specific form group margin within admin forms */
.admin-form .form-group {
    margin-bottom: 15px; /* Slightly reduced space between form groups in admin */
}

/* Style for the logout button in the header */
header .btn.logout-btn { /* Targets the logout button specifically */
    background-color: rgba(231, 76, 60, 0.8); /* Reddish background with slight transparency */
    color: #fff !important; /* Ensures white text color, overriding general link/btn styles */
    padding: 8px 15px; /* Adds padding */
    border-radius: 5px; /* Rounds corners */
    border: none; /* Removes border */
    transition: background-color 0.3s ease; /* Smooth background transition */
    box-shadow: none; /* No shadow in the header */
    margin-left: auto; /* Pushes the button to the right in the header flex container */
     font-size: 1em; /* Sets font size */
     font-weight: normal; /* Normal font weight */
     text-transform: none; /* No uppercase */
     letter-spacing: normal; /* No letter spacing */
}

/* Hover state for the logout button */
header .btn.logout-btn:hover {
     background-color: #c0392b; /* Darker red on hover */
     transform: none; /* Removes any potential lift effect from general button styles */
     box-shadow: none; /* Ensures no shadow on hover */
}


/* Style for the login area */
#loginArea {
    max-width: 400px; /* Limits width */
    margin: 50px auto; /* Centers horizontally and adds top/bottom margin */
    padding: 40px; /* Adds internal padding */
    background-color: #1a1a1a; /* Darker background */
    border-radius: 10px; /* Rounds corners */
    box-shadow: 0 8px 20px rgba(0,0,0,0.5); /* Adds a prominent shadow */
    text-align: center; /* Centers text inside */
    position: relative; /* Needed for z-index */
    z-index: 2; /* Ensures login area is above background */
}
/* Styles for the heading in the login area */
#loginArea h2 {
    margin-bottom: 1em; /* Adds space below */
    font-size: 2em; /* Sets font size */
    text-align: center; /* Centers text */
}
/* Removes the underline pseudo-element from the login title */
#loginArea h2::after {
    display: none;
}
/* Styles for the form specifically within the login area */
#loginArea .login-form {
    /* Apply minimal form styles */
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: none;
}
/* Styles for form groups within the login form */
#loginArea .form-group {
    margin-bottom: 20px; /* Adds space between groups */
    text-align: left; /* Aligns content (label, input) to the left */
}
/* Styles for labels within the login form */
#loginArea .form-group label {
     color: #bdc3c7; /* Softer label color */
}


/* Admin specific titles in header (e.g., "Admin Panel") */
.admin-title {
    font-family: 'Poppins', sans-serif; /* Heading font */
    font-size: 1.3em; /* Font size */
    font-weight: 700; /* Bold */
    color: #ecf0f1; /* Light color */
    margin-left: 20px; /* Space between logo and title */
    z-index: 1100; /* Ensures title is on top */
}


/* Style for the containers that hold the dynamically loaded items in admin sections */
.admin-item-list {
    margin-top: 20px; /* Adds space above the list */
    padding-top: 20px; /* Adds space below the border */
    border-top: 1px solid #34495e; /* Adds a separator line */
}

/* Style for individual list items within admin sections */
.admin-item-list div {
    background-color: #34495e; /* Slightly lighter dark blue background for items */
    border-radius: 5px; /* Rounds corners */
    padding: 15px; /* Adds internal padding */
    margin-bottom: 15px; /* Adds space between items */
    display: flex; /* Uses flexbox */
    justify-content: space-between; /* Distributes space between item content and buttons */
    align-items: center; /* Vertically aligns content */
    flex-wrap: wrap; /* Allows content and buttons to wrap if needed */
    gap: 10px; /* Adds space between flex items (content and buttons) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds a subtle shadow */
    color: #ecf0f1; /* Light text color */
    font-size: 0.95em; /* Slightly smaller font size */
}

/* Styles for strong text (often used for titles) within list items */
.admin-item-list div strong {
    color: #00bfff; /* Sets accent color for emphasis */
}


/* --- Styles for Admin Panel List Item Buttons (Edit/Delete) --- */

/* Container for the action buttons (Edit, Delete) within each list item */
.admin-item-actions { /* Renamed from .item-actions to be more specific to admin lists */
    display: flex; /* Uses flexbox */
    gap: 8px; /* Adds space between the buttons */
    flex-shrink: 0; /* Prevents the action buttons container from shrinking */
    align-items: center; /* Vertically centers buttons within the container */
    margin-left: auto; /* Pushes the action buttons container to the right within the list item flexbox */
}

/* Base style for all buttons within the admin item actions container (Edit/Delete buttons) */
.admin-item-actions button {
    padding: 6px 12px; /* Adds internal padding */
    border-radius: 5px; /* Rounds corners */
    cursor: pointer; /* Changes cursor to a hand */
    font-size: 0.9em; /* Sets font size */
    border: 1px solid transparent; /* Adds a subtle transparent border */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; /* Smooth transitions */
    font-weight: 500; /* Medium font weight */
    text-transform: none; /* No uppercase */
    display: inline-flex; /* Allows inline display and flex properties */
    align-items: center; /* Vertically aligns content (icon and text) */
    justify-content: center; /* Horizontally centers content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds a subtle shadow */
    background-color: #556270; /* Sets a neutral dark grey background as a fallback */
    color: #ecf0f1; /* Light text color */
}


/* Specific styles for the Edit button */
.admin-item-actions .edit-item-btn {
    background-color: #f39c12; /* Your primary orange accent color */
    border-color: #f39c12; /* Border matches background */
    color: #fff; /* White text */
}

/* Hover state for the Edit button */
.admin-item-actions .edit-item-btn:hover {
    background-color: #e67e22; /* Darker orange */
    border-color: #e67e22;
    color: #fff;
    transform: translateY(-1px); /* Subtle lift effect */
    box-shadow: 0 4px 8px rgba(243, 156, 18, 0.4); /* Subtle orange glow */
}

/* Active (pressed) state for the Edit button */
.admin-item-actions .edit-item-btn:active {
    background-color: #d35400; /* Even darker orange */
    border-color: #d35400;
    transform: translateY(0); /* Remove lift when pressed */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Inner shadow */
}


/* Specific styles for the Delete button */
.admin-item-actions .delete-item-btn {
    background-color: #e74c3c; /* A clear red for destructive actions */
    border-color: #e74c3c;
    color: #fff; /* White text */
}

/* Hover state for the Delete button */
.admin-item-actions .delete-item-btn:hover {
    background-color: #c0392b; /* Darker red */
    border-color: #c0392b;
     color: #fff;
    transform: translateY(-1px); /* Subtle lift effect */
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4); /* Subtle red glow */
}

/* Active (pressed) state for the Delete button */
.admin-item-actions .delete-item-btn:active {
    background-color: #a93226; /* Even darker red */
    border-color: #a93226;
    transform: translateY(0); /* Remove lift when pressed */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Inner shadow */
}

/* Style for icons within admin buttons (Edit/Delete) */
.admin-item-actions button .fas {
    margin-right: 5px; /* Space between icon and text */
    font-size: 1em; /* Icon size relative to button text */
    color: inherit; /* Icon color inherits from button text color by default */
}


/* "Delete All" Button Styles */
.delete-all-btn {
    display: block; /* Makes the button a block element */
    margin: 20px auto 30px auto; /* Centers horizontally and adds vertical space */
    background-color: #c0392b; /* Darker Red */
    color: #fff !important; /* Ensures text is white */
    border: none; /* Removes border */
    padding: 10px 20px; /* Adds internal padding */
    border-radius: 5px; /* Rounds corners */
    cursor: pointer; /* Changes cursor to hand */
    font-size: 1em; /* Sets font size */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Subtle initial shadow */
    font-weight: 600; /* Makes text bold */
}

/* Hover state for "Delete All" button */
.delete-all-btn:hover {
    background-color: #e74c3c; /* Lighter Red on hover */
    transform: none; /* Ensures no lift effect from general button styles */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* More prominent shadow on hover */
}

/* Active (pressed) state for "Delete All" button */
.delete-all-btn:active {
     background-color: #a93226; /* Even darker red on active */
     box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Smaller shadow on press */
}


/* Ensure containers for dynamic content lists (on the *portfolio* page) exist and are visible */
#experience-list-container,
#project-grid-container,
#skills-list-container,
#achievements-list-container,
#volunteering-list-container {
     min-height: 50px; /* Adds a minimum height to prevent layout collapse before content loads */
}

/* Style for the admin lists containers where items are rendered (on the *admin* page) */
#projects-list-admin,
#experience-list-admin,
#skills-list-admin,
#achievements-list-admin,
#volunteering-list-admin {
    /* These inherit styles from .admin-item-list */
    /* Can add specific overrides here if needed for individual lists */
}


/* --- 17. Responsive Adjustments for Admin Lists and Buttons --- */

/* Styles applied when screen width is 768px or less */
@media (max-width: 768px) {
     /* Adjust general padding/margins for smaller screens */
     .admin-section {
         padding: 20px; /* Reduces padding */
     }
      /* Adjust layout for individual list items */
      .admin-item-list div {
          flex-direction: column; /* Stacks item content and buttons vertically */
          align-items: flex-start; /* Aligns content to the left */
          gap: 10px; /* Space between content and buttons */
          padding: 12px; /* Reduce padding */
     }
     /* Adjust layout for the container holding Edit/Delete buttons */
     .admin-item-actions {
         flex-direction: row; /* Keeps buttons in a row by default */
         flex-wrap: wrap; /* Allows buttons to wrap */
         gap: 8px; /* Space between buttons */
         justify-content: space-around; /* Distributes space among buttons */
         width: 100%; /* Takes full width below item content */
         margin-left: 0; /* Removes auto margin */
         margin-top: 10px; /* Adds space above buttons when stacked */
     }
     /* Adjust specific button styles within admin item actions on mobile */
     .admin-item-actions button {
         flex-grow: 1; /* Allows buttons to take equal width */
         text-align: center; /* Centers button text */
          padding: 8px 10px; /* Adjust padding */
         font-size: 0.9em;
         /* Remove desktop hover/active effects that might be awkward on mobile touch */
         transform: none !important;
         box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; /* Keep subtle shadow */
          border-color: transparent !important; /* Remove hover border if it was added */
          background-color: #556270 !important; /* Keep base background */
          color: #ecf0f1 !important; /* Keep base color */
     }
      /* Re-add simple hover/active effects for clarity on mobile */
     .admin-item-actions button:hover {
         background-color: #6c7a89 !important; /* Slightly darker on hover */
         box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
     }
      .admin-item-actions button:active {
          background-color: #44505c !important; /* Darker on active */
          box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
     }

      /* Ensure icon colors stay correct on mobile hover/active */
      .admin-item-actions .edit-item-btn i { color: #00bfff !important; }
      .admin-item-actions .delete-item-btn i { color: #e74c3c !important; }

     /* Delete All Button mobile adjustment */
     .delete-all-btn {
         transform: none !important; /* Remove lift effect */
         box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; /* Keep shadow */
     }
     .delete-all-btn:hover {
         transform: none !important;
         box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
     }
}

/* Further adjustments for even smaller screens if needed (480px and below) */
/* NOTE: VIDEO BACKGROUND REMAINS VISIBLE IN THIS BREAKPOINT */
@media (max-width: 480px) {
    .admin-section { padding: 15px; } /* Further reduce section padding */
    .admin-item-list div { padding: 10px; } /* Further reduce item padding */
     /* Optional: force admin item buttons to stack vertically on tiny screens */
     /* .admin-item-actions {
         flex-direction: column;
         align-items: flex-start;
     }
     .admin-item-actions button {
         width: 100%;
         max-width: none;
     } */
}

/* Applies to the outer div */
.form-group {
    margin-bottom: 25px; /* Increased space between groups */
}

/* Applies to the label */
.form-group label {
    display: block; /* Makes label a block element */
    margin-bottom: 10px; /* Increased space below label */
    font-weight: 500; /* Medium font weight */
    color: #ecf0f1; /* Light label color */
    font-size: 1em; /* Standard font size */
}

/* Applies to the input element (including type="password") */
/* Note: This rule targets text, email, url, number, *and* password inputs */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="password"], /* <-- This includes your password input */
.form-group textarea {
    width: 100%; /* Make input take full width */
    padding: 15px; /* Increased padding inside the input */
    background-color: #34495e; /* Slightly lighter solid dark input background */
    border: 1px solid #34495e; /* Border matches input background */
    border-radius: 6px; /* Slightly rounded input fields */
    color: #ecf0f1; /* Light input text color */
    font-size: 1em; /* Standard font size */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transitions */
    resize: vertical; /* Allow textarea resizing vertically (doesn't affect password input) */
}

/* Applies to placeholder text within the input */
.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group input[type="url"]::placeholder,
.form-group input[type="number"]::placeholder,
.form-group input[type="password"]::placeholder, /* <-- Applies to password placeholder */
.form-group textarea::placeholder {
    color: #bdc3c7; /* Softer placeholder text */
    opacity: 0.8; /* Slightly transparent */
}

/* Applies to the input when it's focused */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="password"]:focus, /* <-- Applies to password input when focused */
.form-group textarea:focus {
    outline: none; /* Remove default outline */
    border-color: #00bfff; /* Bright accent color on focus */
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.7); /* More pronounced glow */
    background-color: #455a64; /* Even lighter background on focus */
}

/* Specific styles for the admin login form container */
#loginArea .login-form {
    /* Inherits base .admin-form styles */
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: none;
    text-align: left; /* Align login form fields left */
}

/* Specific form group margin within the login form */
#loginArea .login-form .form-group {
    margin-bottom: 20px; /* Slightly less margin in login form */
}
.admin-main {
    padding-top: 100px; /* Adds space for the fixed header */
    background-color: #1a1a1a; /* Sets a solid dark background for the main admin content area */
    color: #bdc3c7; /* Ensures text color consistency */
    min-height: 100vh; /* Ensures the main content area covers at least the full viewport height */
}

.admin-main .container {
    /* Container styling is inherited from the general .container rule */
}

/* Styles for individual sections within the admin panel */
.admin-section {
    background-color: #2c3e50; /* Dark blue background for admin section "cards" */
    border-radius: 8px; /* Rounds corners */
    padding: 30px; /* Adds internal padding */
    margin-bottom: 30px; /* Adds space between sections */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Adds a shadow */
    position: relative; /* Needed for z-index */
    z-index: 2; /* Ensures section content is above any potential background layers (though none are active here) */
}

/* Styles for headings within admin sections */
.admin-section h3 {
    color: #ecf0f1; /* Light heading color */
    margin-top: 0; /* Removes default top margin */
    margin-bottom: 20px; /* Adds space below heading */
    font-size: 1.5em; /* Sets font size */
    border-bottom: 1px solid #34495e; /* Adds a subtle separator line */
    padding-bottom: 10px; /* Adds space between heading text and the separator */
}

/* Styles for forms within admin sections */
.admin-form {
    /* Inherits general form-group, input, textarea styles from .contact-form */
    max-width: none; /* Removes the max-width constraint from the contact form style */
    margin: 0 auto; /* Centers the form within its section if needed */
    padding: 0; /* Removes padding, as padding is on the parent .admin-section */
    background-color: transparent; /* Transparent background, background is on .admin-section */
    box-shadow: none; /* Removes shadow */
    border: none; /* Removes border */
}

/* Specific form group margin within admin forms */
.admin-form .form-group {
    margin-bottom: 15px; /* Slightly reduced space between form groups in admin */
}

/* Style for the logout button in the header */
header .btn.logout-btn { /* Targets the logout button specifically */
    background-color: rgba(231, 76, 60, 0.8); /* Reddish background with slight transparency */
    color: #fff !important; /* Ensures white text color, overriding general link/btn styles */
    padding: 8px 15px; /* Adds padding */
    border-radius: 5px; /* Rounds corners */
    border: none; /* Removes border */
    transition: background-color 0.3s ease; /* Smooth background transition */
    box-shadow: none; /* No shadow in the header */
    margin-left: auto; /* Pushes the button to the right in the header flex container */
     font-size: 1em; /* Sets font size */
     font-weight: normal; /* Normal font weight */
     text-transform: none; /* No uppercase */
     letter-spacing: normal; /* No letter spacing */
}

/* Hover state for the logout button */
header .btn.logout-btn:hover {
     background-color: #c0392b; /* Darker red on hover */
     transform: none; /* Removes any potential lift effect from general button styles */
     box-shadow: none; /* Ensures no shadow on hover */
}


/* Style for the login area */
#loginArea {
    max-width: 400px; /* Limits width */
    margin: 50px auto; /* Centers horizontally and adds top/bottom margin */
    padding: 40px; /* Adds internal padding */
    background-color: #1a1a1a; /* Darker background */
    border-radius: 10px; /* Rounds corners */
    box-shadow: 0 8px 20px rgba(0,0,0,0.5); /* Adds a prominent shadow */
    text-align: center; /* Centers text inside */
    position: relative; /* Needed for z-index */
    z-index: 2; /* Ensures login area is above background */
}
/* Styles for the heading in the login area */
#loginArea h2 {
    margin-bottom: 1em; /* Adds space below */
    font-size: 2em; /* Sets font size */
    text-align: center; /* Centers text */
}
/* Removes the underline pseudo-element from the login title */
#loginArea h2::after {
    display: none;
}
/* Styles for the form specifically within the login area */
#loginArea .login-form {
    /* Apply minimal form styles */
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: none;
    text-align: left; /* Align login form fields left */
}
/* Styles for form groups within the login form */
#loginArea .login-form .form-group {
    margin-bottom: 20px; /* Slightly less margin in login form */
}


/* Admin specific titles in header (e.g., "Admin Panel") */
.admin-title {
    font-family: 'Poppins', sans-serif; /* Heading font */
    font-size: 1.3em; /* Font size */
    font-weight: 700; /* Bold */
    color: #ecf0f1; /* Light color */
    margin-left: 20px; /* Space between logo and title */
    z-index: 1100; /* Ensures title is on top */
}


/* Style for the containers that hold the dynamically loaded items in admin sections */
.admin-item-list {
    margin-top: 20px; /* Adds space above the list */
    padding-top: 20px; /* Adds space below the border */
    border-top: 1px solid #34495e; /* Adds a separator line */
}

/* Style for individual list items within admin sections */
.admin-item-list div {
    background-color: #34495e; /* Slightly lighter dark blue background for items */
    border-radius: 5px; /* Rounds corners */
    padding: 15px; /* Adds internal padding */
    margin-bottom: 15px; /* Adds space between items */
    display: flex; /* Uses flexbox */
    justify-content: space-between; /* Distributes space between item content and buttons */
    align-items: center; /* Vertically aligns content */
    flex-wrap: wrap; /* Allows content and buttons to wrap if needed */
    gap: 10px; /* Adds space between flex items (content and buttons) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds a subtle shadow */
    color: #ecf0f1; /* Light text color */
    font-size: 0.95em; /* Slightly smaller font size */
}

/* Styles for strong text (often used for titles) within list items */
.admin-item-list div strong {
    color: #00bfff; /* Sets accent color for emphasis */
}


/* --- Styles for Admin Panel List Item Buttons (Edit/Delete) --- */

/* Container for the action buttons (Edit, Delete) within each list item */
.admin-item-actions { /* Renamed from .item-actions to be more specific to admin lists */
    display: flex; /* Uses flexbox */
    gap: 8px; /* Adds space between the buttons */
    flex-shrink: 0; /* Prevents the action buttons container from shrinking */
    align-items: center; /* Vertically centers buttons within the container */
    margin-left: auto; /* Pushes the action buttons container to the right within the list item flexbox */
}

/* Base style for all buttons within the admin item actions container (Edit/Delete buttons) */
.admin-item-actions button {
    padding: 6px 12px; /* Adds internal padding */
    border-radius: 5px; /* Rounds corners */
    cursor: pointer; /* Changes cursor to a hand */
    font-size: 0.9em; /* Sets font size */
    border: 1px solid transparent; /* Adds a subtle transparent border */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; /* Smooth transitions */
    font-weight: 500; /* Medium font weight */
    text-transform: none; /* No uppercase */
    display: inline-flex; /* Allows inline display and flex properties */
    align-items: center; /* Vertically aligns content (icon and text) */
    justify-content: center; /* Horizontally centers content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds a subtle shadow */
    background-color: #556270; /* Sets a neutral dark grey background as a fallback */
    color: #ecf0f1; /* Light text color */
}


/* Specific styles for the Edit button */
.admin-item-actions .edit-item-btn {
    background-color: #f39c12; /* Your primary orange accent color */
    border-color: #f39c12; /* Border matches background */
    color: #fff; /* White text */
}

/* Hover state for the Edit button */
.admin-item-actions .edit-item-btn:hover {
    background-color: #e67e22; /* Darker orange */
    border-color: #e67e22;
    color: #fff;
    transform: translateY(-1px); /* Subtle lift effect */
    box-shadow: 0 4px 8px rgba(243, 156, 18, 0.4); /* Subtle orange glow */
}

/* Active (pressed) state for the Edit button */
.admin-item-actions .edit-item-btn:active {
    background-color: #d35400; /* Even darker orange */
    border-color: #d35400;
    transform: translateY(0); /* Remove lift when pressed */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Inner shadow */
}


/* Specific styles for the Delete button */
.admin-item-actions .delete-item-btn {
    background-color: #e74c3c; /* A clear red for destructive actions */
    border-color: #e74c3c;
    color: #fff; /* White text */
}

/* Hover state for the Delete button */
.admin-item-actions .delete-item-btn:hover {
    background-color: #c0392b; /* Darker red */
    border-color: #c0392b;
     color: #fff;
    transform: translateY(-1px); /* Subtle lift effect */
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4); /* Subtle red glow */
}

/* Active (pressed) state for the Delete button */
.admin-item-actions .delete-item-btn:active {
    background-color: #a93226; /* Even darker red */
    border-color: #a93226;
    transform: translateY(0); /* Remove lift when pressed */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); /* Inner shadow */
}

/* Style for icons within admin buttons (Edit/Delete) */
.admin-item-actions button .fas {
    margin-right: 5px; /* Space between icon and text */
    font-size: 1em; /* Icon size relative to button text */
    color: inherit; /* Icon color inherits from button text color by default */
}


/* "Delete All" Button Styles */
.delete-all-btn {
    display: block; /* Makes the button a block element */
    margin: 20px auto 30px auto; /* Centers horizontally and adds vertical space */
    background-color: #c0392b; /* Darker Red */
    color: #fff !important; /* Ensures text is white */
    border: none; /* Removes border */
    padding: 10px 20px; /* Adds internal padding */
    border-radius: 5px; /* Rounds corners */
    cursor: pointer; /* Changes cursor to hand */
    font-size: 1em; /* Sets font size */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Subtle initial shadow */
    font-weight: 600; /* Makes text bold */
}

/* Hover state for "Delete All" button */
.delete-all-btn:hover {
    background-color: #e74c3c; /* Lighter Red on hover */
    transform: none; /* Ensures no lift effect from general button styles */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* More prominent shadow on hover */
}

/* Active (pressed) state for "Delete All" button */
.delete-all-btn:active {
     background-color: #a93226; /* Even darker red on active */
     box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Smaller shadow on press */
}


/* Ensure containers for dynamic content lists (on the *portfolio* page) exist and are visible */
#experience-list-container,
#project-grid-container,
#skills-list-container,
#achievements-list-container,
#volunteering-list-container {
     min-height: 50px; /* Adds a minimum height to prevent layout collapse before content loads */
}

/* Style for the admin lists containers where items are rendered (on the *admin* page) */
#projects-list-admin,
#experience-list-admin,
#skills-list-admin,
#achievements-list-admin,
#volunteering-list-admin {
    /* These inherit styles from .admin-item-list */
    /* Can add specific overrides here if needed for individual lists */
}


/* --- 17. Responsive Adjustments for Admin Lists and Buttons --- */

/* Styles applied when screen width is 768px or less */
@media (max-width: 768px) {
     /* Adjust general padding/margins for smaller screens */
     .admin-section {
         padding: 20px; /* Reduces padding */
     }
      /* Adjust layout for individual list items */
      .admin-item-list div {
          flex-direction: column; /* Stacks item content and buttons vertically */
          align-items: flex-start; /* Aligns content to the left */
          gap: 10px; /* Space between content and buttons */
          padding: 12px; /* Reduce padding */
     }
     /* Adjust layout for the container holding Edit/Delete buttons */
     .admin-item-actions {
         flex-direction: row; /* Keeps buttons in a row by default */
         flex-wrap: wrap; /* Allows buttons to wrap */
         gap: 8px; /* Space between buttons */
         justify-content: space-around; /* Distributes space among buttons */
         width: 100%; /* Takes full width below item content */
         margin-left: 0; /* Removes auto margin */
         margin-top: 10px; /* Adds space above buttons when stacked */
     }
     /* Adjust specific button styles within admin item actions on mobile */
     .admin-item-actions button {
         flex-grow: 1; /* Allows buttons to take equal width */
         text-align: center; /* Centers button text */
          padding: 8px 10px; /* Adjust padding */
         font-size: 0.9em;
         /* Remove desktop hover/active effects that might be awkward on mobile touch */
         transform: none !important;
         box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; /* Keep subtle shadow */
          border-color: transparent !important; /* Remove hover border if it was added */
          background-color: #556270 !important; /* Keep base background */
          color: #ecf0f1 !important; /* Keep base color */
     }
      /* Re-add simple hover/active effects for clarity on mobile */
     .admin-item-actions button:hover {
         background-color: #6c7a89 !important; /* Slightly darker on hover */
         box-shadow: 0 3px 6px rgba(0,0,0,0.3) !important;
     }
      .admin-item-actions button:active {
          background-color: #44505c !important; /* Darker on active */
          box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
     }

      /* Ensure icon colors stay correct on mobile hover/active */
      .admin-item-actions .edit-item-btn i { color: #00bfff !important; }
      .admin-item-actions .delete-item-btn i { color: #e74c3c !important; }

     /* Delete All Button mobile adjustment */
     .delete-all-btn {
         transform: none !important; /* Remove lift effect */
         box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; /* Keep shadow */
     }
     .delete-all-btn:hover {
         transform: none !important;
         box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
     }
}

/* Further adjustments for even smaller screens if needed (480px and below) */
/* NOTE: VIDEO BACKGROUND REMAINS VISIBLE IN THIS BREAKPOINT */
@media (max-width: 480px) {
    .admin-section { padding: 15px; } /* Further reduce section padding */
    .admin-item-list div { padding: 10px; } /* Further reduce item padding */
     /* Optional: force admin item buttons to stack vertically on tiny screens */
     /* .admin-item-actions {
         flex-direction: column;
         align-items: flex-start;
     }
     .admin-item-actions button {
         width: 100%;
         max-width: none;
     } */
}

/* Applies to the outer div */
.form-group {
    margin-bottom: 25px; /* Increased space between groups */
}

/* Applies to the label */
.form-group label {
    display: block; /* Makes label a block element */
    margin-bottom: 10px; /* Increased space below label */
    font-weight: 500; /* Medium font weight */
    color: #ecf0f1; /* Light label color */
    font-size: 1em; /* Standard font size */
}

/* Applies to text, email, url, number inputs and textareas */
/* Note: This rule targets text, email, url, number, *and* password inputs */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group input[type="password"], /* <-- This includes your password input */
.form-group textarea {
    width: 100%; /* Make input take full width */
    padding: 15px; /* Increased padding inside the input */
    background-color: #34495e; /* Slightly lighter solid dark input background */
    border: 1px solid #34495e; /* Border matches input background */
    border-radius: 6px; /* Slightly rounded input fields */
    color: #ecf0f1; /* Light input text color */
    font-size: 1em; /* Standard font size */
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transitions */
    resize: vertical; /* Allow textarea resizing vertically (doesn't affect password input) */
}

/* Applies to placeholder text within the input */
.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group input[type="url"]::placeholder,
.form-group input[type="number"]::placeholder,
.form-group input[type="password"]::placeholder, /* <-- Applies to password placeholder */
.form-group textarea::placeholder {
    color: #bdc3c7; /* Softer placeholder text */
    opacity: 0.8; /* Slightly transparent */
}

/* Applies to the input when it's focused */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="password"]:focus, /* <-- Applies to password input when focused */
.form-group textarea:focus {
    outline: none; /* Remove default outline */
    border-color: #00bfff; /* Bright accent color on focus */
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.7); /* More pronounced glow */
    background-color: #455a64; /* Even lighter background on focus */
}

/* Specific styles for the admin login form container */
#loginArea .login-form {
    /* Inherits base .admin-form styles */
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: none;
    text-align: left; /* Align login form fields left */
}

/* Specific form group margin within the login form */
#loginArea .login-form .form-group {
    margin-bottom: 20px; /* Slightly less margin in login form */
}
/* --- 10. Reusable Card Styles (for Experience, Skills, Achievements, Volunteering) --- */
/* Defines common styles for various items displayed in card-like formats */

/* Apply these base styles to elements with these classes */
.experience-item,
.skill-category,
.ac-item {
     background-color: #2c3e50; /* Dark blue card background */
    border-radius: 8px; /* Rounds corners */
    padding: 25px; /* Adds internal padding */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Adds a shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for hover effects */
    color: #bdc3c7; /* Light text color */
     position: relative; /* Needed for z-index */
    z-index: 2; /* Ensures cards are above background layers */
}

/* Hover state for these card-like elements */
.experience-item:hover,
.skill-category:hover,
.ac-item:hover {
     transform: translateY(-8px); /* Adds a lift effect */
     box-shadow: 0 8px 15px rgba(0,0,0,0.4); /* Increases shadow size on hover */
}

/* Specific adjustments for layout within these card types */
.experience-item { margin-bottom: 25px; } /* Adds bottom margin to experience items */
.skill-category { text-align: center; } /* Centers content within skill categories */

/* Style for the list containers for Achievements and Volunteering */
/* --- ADD OR UPDATE THIS BLOCK --- */
.ac-list {
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    gap: 30px; /* Add vertical space between items */
    /* Existing media queries will override display and gap for grid layouts */
}
/* --- END OF BLOCK TO ADD/UPDATE --- */


/* Specific Icon Colors within AC items (can override generic card icon color) */
.ac-item { display: flex; align-items: center; } /* Uses flexbox for achievement/volunteering items to align icon and text */
.ac-item i { color: #00bfff; margin-right: 20px; font-size: 2em;} /* Default icon style for AC items */
#volunteering .ac-item i { color: #f39c12; } /* Overrides icon color for volunteering items to orange */


/* ... Keep all your existing media queries for .ac-list as they are ... */
/* Example (don't change these, just verify they exist): */

@media (max-width: 992px) {
    /* ... other rules ... */
     .ac-list {
         display: grid; /* Overrides to grid */
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 20px; /* Adjusts gap for grid */
     }
     /* ... other rules ... */
}

@media (max-width: 768px) {
    /* ... other rules ... */
     .ac-list {
         grid-template-columns: 1fr; /* Overrides to single column grid */
         gap: 20px; /* Keeps or adjusts gap for single column */
     }
     /* ... other rules ... */
}

@media (max-width: 480px) {
    /* ... other rules ... */
     .ac-list {
         gap: 15px; /* Further adjusts gap for smaller screens */
     }
     /* ... other rules ... */
}