/* Basic styling for the entire page */
html {
    font-size: 100%; /* Default browser font size (usually 16px). This acts as the 1rem base. */
    /* You could increase this to, e.g., 18px if you want a generally larger base for all rem units */
}

body {
    font-family: Arial, sans-serif; /* Sets a common, readable font */
    line-height: 1.6; /* Improves readability by spacing lines of text */
    margin: 0; /* Removes default margin around the body */
    padding: 0; /* Removes default padding */
    background-color: #1a1a1a; /* Dark background for the main body (near black) */
    color: #f4f4f4; /* Light text color for contrast */
    overflow-x: hidden; /* Prevents horizontal scrollbar if elements accidentally overflow */
    scroll-behavior: smooth; /* Makes scrolling to sections smooth */
    font-size: 1.2rem;
}

/* Header styling */
header {
    background-color: #0d0d0d; /* Even darker black for the header */
    color: #fff; /* White text color for header */
    padding: 1rem 20px; /* Added horizontal padding for spacing */
    text-align: left; /* Aligns content to the left */
    display: flex; /* Enables flexbox for easy alignment of child elements */
    align-items: center; /* Vertically aligns items in the center */
    justify-content: flex-start; /* Aligns items to the start (left) by default */
    gap: 20px; /* Adds space between the H1 and the image, and other flex items */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    position: fixed; /* Keep header visible on scroll */
    width: 100%; /* Make header full width */
    top: 0; /* Position at the top */
    left: 0;
    z-index: 1000; /* Ensure header is above other content */
    box-sizing: border-box; /* Include padding in width calculation */
}

header h1 {
    margin: 0; /* Removes default margin from the heading */
    font-size: 2.5rem; /* Larger font size for the main name */
}

/* Logo styling */
header .logo {
    max-width: 80px; /* Adjust this value to control your logo's size */
    height: auto; /* Maintains the aspect ratio */
    margin-top: 0; /* No need for top margin with flexbox alignment */
    border-radius: 50%; /* Optional: Makes circular logos if yours is square/rectangular */
}

/* Navigation Styling */
nav {
    margin-left: auto; /* Pushes the navigation to the right, taking available space */
    display: flex; /* Enables flexbox for navigation links */
    gap: 15px; /* Space between navigation links */
    flex-wrap: wrap; /* Allows nav items to wrap if screen is too small */
}

nav a {
    color: #fff; /* White text for navigation links */
    text-decoration: none; /* Removes underline from links */
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

nav a:hover {
    background-color: #007bff; /* Blue background on hover */
}

/* Main content area styling */
main {
    padding-top: 100px; /* Add padding to push content below fixed header. Adjust if header height changes */
    max-width: none; /* REMOVED: Remove max-width to allow sections to be full width */
    margin: 0; /* REMOVED: Remove auto margin */
    background-color: transparent; /* Main itself doesn't need a background if sections do */
    box-shadow: none; /* No shadow on main */
    border-radius: 0; /* No border-radius on main */
}

/* Section styling */
section {
    min-height: 100vh; /* Make each section at least 100% of the viewport height */
    width: 100vw; /* Make each section 100% of the viewport width */
    padding: 20px; /* Keep your internal padding */
    display: flex; /* Use flexbox to center content easily */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Vertically center content */
    align-items: center; /* Horizontally center content */
    text-align: center; /* Center text within the section */
    box-sizing: border-box; /* Include padding in the width/height calculation */
    border-bottom: 1px solid #555; /* Keep border for separation */
    scroll-snap-align: start; /* Optional: Helps "snap" to sections when scrolling */
}

section:last-child {
     border-bottom: none;
}

section h2 {
    color: #00bcd4; 
    border-bottom: 2px solid #00bcd4;
    padding-bottom: 5px;
    margin-bottom: 15px;

    background: linear-gradient(to right, #fff7ad, #ffa9f9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
    display: inline-block; 
    border-bottom: 2px solid #555; 

    font-size: 5rem; /* Make section headers massive! Adjust as needed. */
    margin-bottom: 30px; /* Add more space below massive headers */
}


ul {
    list-style: none; /* Removes default bullet points */
    padding: 0; /* Removes default padding from the list */
}

ul li {
    background-color: #444; /* Slightly lighter gray for list items */
    color: #eee; /* Lighter text for list items */
    margin-bottom: 8px; /* Space between list items */
    padding: 10px 15px; /* Padding inside list items */
    border-radius: 5px; /* Rounded corners for list items */
    display: inline-block; /* Allows list items to sit next to each other if space permits */
    margin-right: 10px; /* Space between inline list items */
}

/* Projects Container - NEW RULE */
.projects-container {
    display: flex; /* Makes project items arrange side-by-side */
    flex-wrap: wrap; /* Allows items to wrap to the next line if space runs out */
    justify-content: center; /* Centers project items horizontally in the container */
    gap: 30px; /* Adds space between project items (both horizontally and vertically) */
    width: 100%; /* Ensures the container takes full available width within the section */
    max-width: 1000px; /* Optional: Limit the overall width of the project grid for better readability */
    margin-top: 30px; /* Space between the intro text and the project grid */
}


/* Project Item Styling - ADJUSTMENTS */
.project-item {
    background-color: #444;
    padding: 20px;
    margin-bottom: 0; /* Remove bottom margin here as 'gap' on container handles spacing */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* width: 80%; - REMOVE this fixed width */
    /* max-width: 600px; - REMOVE this max-width */

    /* NEW: Set flex-basis for flexible width for side-by-side */
    flex: 1 1 calc(50% - 30px); /* Allows two items per row with gap. Adjust 50% for different columns */
    min-width: 300px; /* Ensure items don't get too small on smaller screens */

    /* Keep these for internal centering */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Ensure the image and other elements inside project-item still have correct margins */
.project-item .project-image {
    max-width: 90%;
    height: auto;
    margin: 0 auto 20px auto; /* Still center image and add space below */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Add or ensure this rule for project links to keep them in a row */
.project-item a {
    color: #00bcd4;
    text-decoration: none;
    margin-right: 15px; /* Space between links */
    display: inline-block; /* Helps with spacing if on different lines */
    margin-top: 10px; /* Space above links */
}

/* Also, if you have a lot of content in your 'p' tag, and flex-basis pushes it,
   you might want to ensure 'p' grows if needed */
.project-item p {
    flex-grow: 1; /* Allows paragraph to take up available vertical space if project items have varying heights */
    margin-bottom: 15px;
}


.project-item a:hover {
    text-decoration: underline;
}

/* Form Styling for Contact Section */
form label {
    display: block; /* Makes labels appear on their own line */
    margin-bottom: 5px;
    font-weight: bold;
}

form input[type="text"],
form input[type="email"],
form textarea {
    width: calc(100% - 20px); /* Full width minus padding for input fields */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #666; /* Darker border for inputs */
    border-radius: 5px;
    background-color: #555; /* Darker background for inputs */
    color: #f4f4f4; /* Light text color in inputs */
}

form textarea {
    resize: vertical; /* Allows vertical resizing of the textarea */
}

form button {
    background-color: #00bcd4; /* Teal button */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease; /* Smooth hover effect for button */
}

form button:hover {
    background-color: #00a4b9; /* Slightly darker teal on hover */
}

/* Footer styling */
footer {
    text-align: center; /* Centers text in the footer */
    padding: 1rem 0; /* Padding above and below */
    background-color: #0d0d0d; /* Matching the header's dark black */
    color: #fff; /* White text */
    font-size: 0.9rem; /* Smaller font size */
    margin-top: 20px; /* Space above the footer */
}

html, body {
    height: 100%; /* Ensures html and body are at least 100% of the viewport */
    margin: 0;
    padding: 0;
}

.project-item .project-image {
    max-width: 90%;
    height: auto;
    /* display: block; - Already default for img if no other display is set */
    margin: 0 auto 20px auto; /* Center image and add space below */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}