/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and border are included in the width */
}

/* Flexbox layout for the entire page */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the page container takes the full viewport height */
}

/* General Styles */
html, body {
    height: 100%;
    margin: 0; 
    display: flex; 
    flex-direction: column;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #1a1a1a; /* Dark background */
    color: #E5E5E5; /* Light grey for text */
}

/* Header Class */
.header {
    padding: 20px;
    flex-shrink: 0; /* Prevent header from shrinking */
}

/* Navbar Styles */
.navbar {
    position: fixed; /* Fixes the navbar to the top */
    top: 0; /* Position at the top */
    left: 0; /* Align to the left */
    right: 0; /* Align to the right */
    background-color: #2a2a2a; /* Dark background for the navbar */
    padding: 15px; /* Spacing around the navbar */
    text-align: center; /* Center the items */
    z-index: 1000; /* Ensure it is above other content */
    width: 100%;
    overflow: hidden;
}

/* Navigation Links */
.nav-links {
    list-style: none; /* Remove bullets from list */
    padding: 0; /* Remove default padding */
    margin: 0;
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: center; /* Center items */
    align-items: center; /* Align items vertically */
    flex-wrap: wrap;
}

/* Navigation Link Styles */
.nav-links li {
    margin: 0 10px; /* Space between items */
}

.nav-links a {
    color: #4CAF50; /* Color for links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold text */
    transition: color 0.3s ease; /* Smooth color transition */
}

.nav-links a:hover {
    color: #76c7c0; /* Change color on hover */
}

/* Separator Styles */
.nav-links li:not(:last-child) {
    position: relative; /* Required for proper placement of separator */
    padding-right: 10px; /* Space between link and separator */
}

.nav-links li:last-child {
    padding-left: 10px; /* Space before the last item */
}

/* Main Content Container */
.parent-container {
    flex: 1; /* Allow parent container to grow and fill space */
    margin-top: 75px;
}

/* Container for the content */
.container {
    background-color: #2a2a2a; /* Dark grey background */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    width: 100%; /* Ensure it stretches across */
    margin: 20px auto; /* Center container with margin */
}

/* Hover effect */
.container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Heading and Subheading Styles */
h1 {
    font-size: 36px;
    color: #4CAF50; /* Dark green for main heading */
    letter-spacing: 1px;
}

h2 {
    font-size: 26px;
    color: #4CAF50; /* Dark green */
}

h3 {
    font-size: 20px;
    color: #4CAF50; /* Dark green */
}

/* Paragraph Styles */
p {
    font-size: 18px;
    color: #27b35d; /* Lighter greenish color */
    line-height: 1.7;
}

/* Link Styles */
a {
    color: #4CAF50; /* Teal for links */
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    text-decoration: underline;
    color: #76c7c0; /* Dark green on hover */
}

/* Button-like link for the resume */
.button-link {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 30px;
    background-color: #4CAF50; /* Dark background for button */
    color: #3c3c3c; /* Teal for button text */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.button-link:hover {
    background-color: #76c7c0; /* Dark green hover effect */
    color: #1a1a1a; /* Dark text color */
}

/* Social Media Icons */
.social-links a {
    margin: 0 15px;
    font-size: 24px;
    color: #4CAF50; /* Teal for social links */
}

.social-links a:hover {
    color: #76c7c0; /* Dark green on hover */
}

/* Media Queries for responsiveness */
@media (max-width: 600px) {
    .navbar {
        padding: 10px; /* Less padding for mobile */
    }

    .nav-links li {
        margin: 0 5px; /* Adjust spacing on mobile */
    }

    .nav-links a {
        font-size: 14px; /* Adjust font size for mobile */
    }
    
    body {
        padding: 15px;
    }

    .container {
        padding: 30px;
    }

    h1 {
        font-size: 28px;
    }
    
    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    p {
        font-size: 16px;
        margin: 0;
        padding: 0;
    }

    .button-link {
        padding: 10px 20px;
    }

    .image-container {
        border: 1em solid black; /* Scale down the border for smaller screens */
        max-width: 100%; /* Adjust the container width */
    }
}

/* Footer Styles */
.footer {
    /* background-color: #2a2a2a;  */
    padding: 5px; 
    text-align: center; 
    width: 100%; /* Ensure the footer spans the full width */
    flex-shrink: 0; /* Prevent footer from shrinking */
}

.footer-container {
    width: 100%; /* Max width for the footer content */
    margin: 0 auto; 
    padding: 0 20px;
}

.footer-container p {
    margin: 0; 
    font-size: 14px;
    color: #5b5b5b;
}

/* Footer Links */
.footer a {
    color: #4CAF50; /* Teal for footer links */
    text-decoration: none; /* Remove underline */
    margin: 0 10px; 
    font-size: 14px;
}

.footer a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #76c7c0; /* Dark green on hover */
}

.custom-hr {
    border: 1px solid #2a2a2a;
}

.image-container {
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    border: 5vw solid black; /* 5px black border */
    margin: 20px auto; /* Center the container and add vertical spacing */
    max-width: 50%; /* Optional: Limit the container width */
}

img {
    max-width: 100%; /* Ensure the image is responsive within its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures no extra space below the image */
}