/* Define color variables for easy reuse */
:root {
    --primary: #1E1E1E;    /* Dark Charcoal for text on light backgrounds */
    --secondary: #D4AF37;  /* Gold for accents and highlights */
    --accent: #8A9A5B;     /* Sage Green for secondary accents */
    --light: #F5F5F5;      /* Off White for light backgrounds and text */
    --dark: #121212;       /* Near Black for dark backgrounds */
}

/* Reset default browser styles */
* {
    margin: 0;             /* Remove default margin */
    padding: 0;            /* Remove default padding */
    box-sizing: border-box; /* Include padding and border in element's total width/height */
    font-family: 'Lora', serif; /* Set default font */
}

/* Body styling */
body {
    background: var(--light); /* Light background for the entire page */
    color: var(--primary);    /* Dark text color for readability */
    line-height: 1.6;         /* Improve readability with more space between lines */
}

/* Headings styling */
h1, h2, h3 {
    font-family: 'Playfair Display', serif; /* Use a serif font for headings */
    color: var(--primary);                  /* Dark text color for headings */
}

/* Navigation bar */
.navbar {
    background: var(--dark); /* Dark background for the navbar */
    padding: 1rem 5%;        /* Add padding inside the navbar */
    display: flex;           /* Use flexbox for layout */
    justify-content: space-between; /* Space out navbar content */
    align-items: center;     /* Vertically center navbar content */
    position: fixed;         /* Fix navbar at the top of the page */
    width: 100%;             /* Full width navbar */
    z-index: 1000;           /* Ensure navbar stays on top of other elements */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Add a subtle shadow */
}

/* Brand name in navbar */
.nav-brand {
    font-size: 1.5rem;       /* Larger font size for brand name */
    color: var(--secondary); /* Gold color for brand name */
    font-weight: 700;        /* Bold font weight */
}

/* Navigation links */
.nav-links {
    list-style: none;        /* Remove bullet points from list */
    display: flex;           /* Use flexbox for layout */
    gap: 2rem;               /* Add space between links */
}

/* Individual navigation links */
.nav-links a {
    color: var(--light);     /* Light text color for links */
    text-decoration: none;   /* Remove underline from links */
    font-size: 1.1rem;      /* Slightly larger font size */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Hover effect for navigation links */
.nav-links a:hover {
    color: var(--secondary); /* Change link color to gold on hover */
}

/* Hero section */
.hero {
    height: 100vh;           /* Full viewport height */
    background: linear-gradient(rgba(18,18,18,0.9), rgba(18,18,18,0.7)),
                url('assets/images/hero-bg.png') center/cover; /* Dark overlay with background image */
    display: flex;           /* Use flexbox for layout */
    align-items: center;     /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    text-align: center;      /* Center-align text */
    color: var(--light);     /* Light text color */
    padding: 0 5%;          /* Add padding to sides */
}

/* Hero heading */
.hero-content h1 {
    font-size: 4.5rem;       /* Large font size for main heading */
    margin-bottom: 1rem;     /* Add space below heading */
    animation: fadeInUp 1s ease-out; /* Apply fade-in animation */
    color: var(--secondary); /* Gold color for heading */
}

/* Hero subheading */
.hero-content h2 {
    font-size: 2rem;         /* Medium font size for subheading */
    margin-bottom: 1.5rem;   /* Add space below subheading */
    color: var(--light);     /* Light text color */
    font-weight: 400;        /* Normal font weight */
}

/* Hero tagline */
.tagline {
    font-size: 1.2rem;       /* Small font size for tagline */
    max-width: 800px;        /* Limit width for better readability */
    margin: 0 auto 2rem;     /* Center-align and add space below */
    color: var(--light);     /* Light text color */
}

/* Hero button */
.btn-explore {
    padding: 0.8rem 1.5rem;  /* Add padding to button */
    background: var(--secondary); /* Gold background */
    color: var(--dark);      /* Dark text color */
    text-decoration: none;   /* Remove underline */
    border-radius: 5px;      /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover effect for hero button */
.btn-explore:hover {
    background: var(--accent); /* Change background to sage green */
    transform: translateY(-2px); /* Move button up slightly */
}

/* Projects section */
.projects {
    padding: 5rem 5%;        /* Add padding to section */
    background: var(--light); /* Light background */
}

/* Section title */
.section-title {
    text-align: center;      /* Center-align title */
    margin-bottom: 3rem;     /* Add space below title */
    font-size: 2.5rem;      /* Large font size */
    color: var(--primary);   /* Dark text color */
}

/* Project grid layout */
.project-grid {
    display: grid;           /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 2rem;               /* Add space between grid items */
    max-width: 1200px;       /* Limit maximum width */
    margin: 0 auto;          /* Center-align grid */
}

/* Individual project card */
.project-card {
    background: white;       /* White background */
    border-radius: 10px;     /* Rounded corners */
    overflow: hidden;        /* Hide overflowing content */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Add shadow for depth */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for project card */
.project-card:hover {
    transform: translateY(-10px); /* Move card up slightly */
}

/* Project card image */
.project-card img {
    width: 100%;             /* Full width */
    height: 200px;           /* Fixed height */
    object-fit: cover;       /* Ensure image covers the area */
}

/* Project card content */
.project-info {
    padding: 1.5rem;         /* Add padding inside card */
}

/* Project card heading */
.project-info h3 {
    margin-bottom: 1rem;     /* Add space below heading */
    color: var(--primary);   /* Dark text color */
}

/* Project card description */
.project-info p {
    margin-bottom: 1.5rem;   /* Add space below description */
    color: var(--dark);      /* Dark text color */
}

/* General button styling */
.btn {
    display: inline-block;   /* Make button inline */
    padding: 0.8rem 1.5rem;  /* Add padding */
    background: var(--secondary); /* Gold background */
    color: var(--dark);      /* Dark text color */
    text-decoration: none;   /* Remove underline */
    border-radius: 5px;      /* Rounded corners */
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for buttons */
.btn:hover {
    background: var(--accent); /* Change background to sage green */
    transform: translateY(-2px); /* Move button up slightly */
}

/* Publications section */
.publications {
    padding: 5rem 5%;        /* Add padding */
    background: var(--dark); /* Dark background */
    color: var(--light);     /* Light text color */
}

/* Publications Section Heading */
.publications h2 {
    font-family: 'Playfair Display', serif; /* Use serif font for elegance */
    color: var(--light); /* White for contrast on dark background */
}

/* Publication list */
.publication-list {
    max-width: 800px;        /* Limit width */
    margin: 0 auto;          /* Center-align */
}

/* Individual publication item */
.publication-item {
    background: rgba(255,255,255,0.1); /* Semi-transparent white background */
    padding: 1.5rem;         /* Add padding */
    margin-bottom: 1rem;     /* Add space below item */
    border-radius: 5px;      /* Rounded corners */
}

/* Publication heading */
.publication-item h3 {
    margin-bottom: 0.5rem;   /* Add space below heading */
    color: var(--secondary); /* Gold text color */
}

/* Publication description */
.publication-item p {
    color: var(--light);     /* Light text color */
}

/* Blogs section */
.blogs {
    padding: 5rem 5%;        /* Add padding */
    background: var(--light); /* Light background */
    text-align: center;      /* Center-align content */
}

/* Blog call-to-action */
.blog-cta {
    max-width: 600px;        /* Limit width */
    margin: 0 auto;          /* Center-align */
}

/* Blog description */
.blog-cta p {
    margin-bottom: 2rem;     /* Add space below text */
    font-size: 1.1rem;       /* Medium font size */
    color: var(--primary);   /* Dark text color */
}

/* Contact section */
.contact {
    padding: 5rem 5%;        /* Add padding */
    background: var(--dark); /* Dark background */
    color: var(--light);     /* Light text color */
    text-align: center;      /* Center-align content */
}

/* Contact Section Heading */
.contact h2 {
    font-family: 'Playfair Display', serif; /* Use serif font for elegance */
    color: var(--light); /* White for contrast on dark background */
}

/* Contact info */
.contact-info {
    max-width: 600px;        /* Limit width */
    margin: 0 auto;          /* Center-align */
}

/* Contact text */
.contact-info p {
    margin-bottom: 1.5rem;   /* Add space below text */
    font-size: 1.1rem;       /* Medium font size */
}

/* Contact links */
.contact-info a {
    color: var(--secondary); /* Gold text color */
    text-decoration: none;   /* Remove underline */
    transition: color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for contact links */
.contact-info a:hover {
    color: var(--accent);    /* Change color to sage green */
}

/* Social media links */
.social-links {
    margin-top: 1.5rem;      /* Add space above links */
}

/* Individual social media link */
.social-links a {
    color: var(--secondary); /* Gold text color */
    margin: 0 1rem;         /* Add space between links */
    font-size: 1.5rem;      /* Larger font size */
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for social media links */
.social-links a:hover {
    color: var(--accent);    /* Change color to sage green */
    transform: translateY(-2px); /* Move link up slightly */
}

/* Footer */
footer {
    background: var(--dark); /* Dark background */
    color: var(--light);     /* Light text color */
    text-align: center;      /* Center-align text */
    padding: 1rem;           /* Add padding */
}

/* Fade-in animation */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Animation class for scroll effects */
.animate {
    opacity: 0;              /* Start invisible */
    transform: translateY(20px); /* Start slightly below */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition */
}

/* Active state for animations */
.animate.active {
    opacity: 1;              /* Make visible */
    transform: translateY(0); /* Move to original position */
}