/* --- Existing Styles --- */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    /* Slightly lighter background for softer look */
    background-color: #fdfdff; /* Changed from #f8f9fa */
    color: #343a40; /* Darker grey for better contrast */
    padding-top: 70px; /* Adjusted for navbar height */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    color: #2c3e50; /* A darker, muted blue/grey */
}

/* --- Color Variables (Optional but recommended) --- */
:root {
    --primary-color: #16a085; /* Teal */
    --secondary-color: #2c3e50; /* Dark Slate Blue */
    --accent-color: #f39c12; /* Orange/Gold */
    --light-bg: #f8f9fa;
    --text-color: #343a40;
    --light-text: #fdfdff;
    --card-bg: #ffffff;
}

/* Navbar */
.navbar {
    position: fixed;  /* This makes it stay at the top */
    top: 0;           /* Positions it at the very top */
    left: 0;          /* Positions it at the left edge */
    width: 100%;      /* Makes it span the full width */
    z-index: 1050;    /* Ensures it stays above other content */
    /* Add your background, shadow, padding etc. here */
    background-color: rgba(255, 255, 255, 0.95); /* Example from previous suggestion */
    backdrop-filter: blur(5px);              /* Example from previous suggestion */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);/* Example from previous suggestion */
    padding: 12px 0;                         /* Example from previous suggestion */
}
.navbar-brand {
    font-size: 1.6rem; /* Slightly larger */
    font-weight: bold;
    color: var(--primary-color) !important; /* Use variable */
}

.navbar-nav .nav-link {
    color: var(--secondary-color) !important; /* Use variable */
    font-weight: 500;
    margin-left: 18px; /* More spacing */
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { /* Style active link */
    color: var(--primary-color) !important; /* Use variable */
}

/* --- Updated Hero Section --- */
.hero {
    /* New gradient or background image */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--light-text); /* Use light text variable */
    padding: 100px 0; /* More padding */
    min-height: calc(80vh - 70px); /* Adjusted height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero h1 {
    font-size: 3rem; /* Larger */
    font-weight: 700; /* Bolder */
    color: var(--light-text); /* Ensure heading is light */
    margin-bottom: 10px;
}

.hero h2.lead { /* Style the subtitle */
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85); /* Slightly transparent white */
    margin-bottom: 25px;
}


.hero p.lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
    max-width: 600px; /* Limit width for readability */
    margin: 0 auto 30px auto; /* Center the paragraph */
}

/* Style buttons */
.hero .btn-primary {
    background-color: var(--accent-color); /* Use accent color */
    border-color: var(--accent-color);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 25px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.hero .btn-primary:hover {
     background-color: darken(var(--accent-color), 10%); /* Darken on hover */
     border-color: darken(var(--accent-color), 10%);
}

.hero .btn-outline-light {
     border-color: var(--light-text);
     color: var(--light-text);
     font-size: 1rem;
     font-weight: 600;
     padding: 12px 25px;
     transition: background-color 0.3s ease, color 0.3s ease;
}
.hero .btn-outline-light:hover {
    background-color: var(--light-text);
    color: var(--secondary-color); /* Change text color on hover */
}

.profile-pic { /* Style for optional profile picture */
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-color);
}


/* --- Section Styling --- */
.about, .projects, .certifications, .contact, .featured {
    padding: 80px 0; /* Consistent padding */
    flex: 1; /* Ensure sections fill space */
}
.featured {
    background-color: var(--light-bg); /* Use light background */
}
.section-title { /* Consistent title styling */
    font-size: 2.5rem;
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: 15px;
}
.section-subtitle { /* Consistent subtitle styling */
    font-size: 1.1rem;
    color: #6c757d; /* Bootstrap muted color */
    margin-bottom: 40px;
    text-align: center;
}

/* --- Card Styling Improvements --- */
.project-card, .cert-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 25px; /* More padding */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #eee; /* Subtle border */
    border-left: 4px solid var(--primary-color); /* Use primary color */
    margin-bottom: 30px; /* Ensure spacing */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Default subtle shadow */
}

.project-card:hover, .cert-card:hover {
    transform: translateY(-8px); /* More lift */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Stronger shadow */
}

.project-card h4, .cert-card h4 {
    color: var(--secondary-color);
    font-size: 1.3rem;
    font-weight: 700; /* Bolder headings */
    margin-bottom: 10px;
}

.project-card p, .cert-card p {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 15px; /* More spacing */
    line-height: 1.6;
}

.project-card p strong, .cert-card p strong {
    color: var(--secondary-color); /* Darker text for labels */
}

.btn-outline-primary { /* Update outline buttons */
    color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 600;
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--light-text);
}

/* --- Contact Form --- */
.contact-form, .contact-info {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 30px; /* More padding */
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 30px; /* Spacing on mobile */
}

.contact-form h4, .contact-info h4 {
    color: var(--secondary-color);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.contact-form label {
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 5px;
}
.contact-form .form-control {
    border-radius: 5px;
    border: 1px solid #ced4da;
    padding: 10px 12px;
}
.contact-form .form-control:focus { /* Style focus state */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(22, 160, 133, 0.25); /* Use primary color */
}

.contact-form button[type="submit"] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--light-text);
    font-weight: bold;
    padding: 12px 20px; /* More padding */
    width: 100%; /* Full width */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* .contact-form button[type="submit"]:hover {
    background-color: darken(var(--primary-color), 100%);
    border-color: darken(var(--primary-color), 10%);
} */

/* --- Contact Info Section --- */
.contact-info p {
    font-size: 1rem;
    margin-bottom: 15px; /* Spacing between lines */
    color: var(--text-color);
}
.contact-info i {
    color: var(--primary-color);
    margin-right: 10px; /* More space */
    width: 20px; /* Align icons */
    text-align: center;
}
.contact-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500; /* Slightly less bold */
    transition: color 0.3s ease;
}
.contact-info a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}


/* Add this rule specifically for index.html content */
.hero, .featured { /* Target sections on index.html */
    flex-grow: 1; /* Allows these sections to expand vertically */
}

/* Ensure other pages' main content also grows (already suggested previously) */
.about, .projects, .certifications, .contact {
    flex: 1; /* This shorthand includes flex-grow: 1 */
}



/* --- Footer --- */
footer {
    background: var(--secondary-color); /* Use dark slate */
    color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
    text-align: center;
    padding: 25px 0; /* More padding */
    width: 100%;
    margin-top: auto; /* Pushes footer down */
}

.footer-icons a {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 12px; /* More spacing */
    font-size: 1.4rem; /* Larger icons */
    transition: color 0.3s ease;
}

.footer-icons a:hover {
    color: var(--accent-color); /* Use accent color on hover */
}

footer p {
    margin-bottom: 8px; /* Adjust spacing */
    font-size: 0.9rem;
}

footer .text-white { /* Ensure footer links are light */
     color: rgba(255, 255, 255, 0.9) !important;
     text-decoration: underline;
     font-weight: 500;
}
footer .text-white:hover {
     color: var(--accent-color) !important; /* Use accent color */
}


/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .hero h1 { font-size: 2.8rem; }
    .hero h2.lead { font-size: 1.3rem; }
    .section-title { font-size: 2.2rem; }
}

@media (max-width: 768px) {
    body { padding-top: 65px; } /* Adjust for smaller navbar */
    .hero { padding: 80px 0; min-height: calc(70vh - 65px); }
    .hero h1 { font-size: 2.4rem; }
    .hero h2.lead { font-size: 1.2rem; }
    .hero p.lead { font-size: 1rem; }
    .navbar-nav .nav-link { margin-left: 10px; }
    .project-card, .cert-card, .contact-form, .contact-info { margin-bottom: 25px; }
    .section-title { font-size: 2rem; }
    .section-subtitle { font-size: 1rem; margin-bottom: 30px; }
    footer { padding: 20px 0; }
    .footer-icons a { font-size: 1.3rem; margin: 0 10px; }
}

@media (max-width: 576px) {
    body { padding-top: 60px; }
    .hero { padding: 60px 0; min-height: calc(60vh - 60px); }
    .hero h1 { font-size: 2rem; }
    .hero h2.lead { font-size: 1.1rem; }
    .hero p.lead { font-size: 0.9rem; }
    .hero .btn { font-size: 0.9rem; padding: 10px 20px; margin-bottom: 10px; }
    .hero .btn-lg.me-2 { margin-right: 0 !important; } /* Stack buttons */
    .navbar-brand { font-size: 1.4rem; }
    .section-title { font-size: 1.8rem; }
    footer p { font-size: 0.85rem; }
}


/* --- Project Thumbnail Expansion Effect --- */
/* This CSS will create a hover effect for the project thumbnails */
/* Adjust the thumbnail size and border color as needed */
/* Style for the container of the image */
.project-image-container {
    width: 100%; /* Container takes the full width of its parent */
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    /* You might want to set a min-height here if you want a consistent area for the thumbnail */
    /* min-height: 100px; */
}

.project-thumbnail {
    width: 80px; /* Initial thumbnail size */
    height: auto; /* Maintain aspect ratio */
    border: 2px solid green; /* Green border */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out; /* Smooth transition for size */
    cursor: pointer; /* Indicate it's interactive */
    object-fit: contain; /* Ensure the entire image is visible within its bounds */
}

.project-image-container:hover .project-thumbnail {
    width: 70%; /* Expand to 70% of the container width on hover */
    /* Height will adjust automatically due to height: auto and object-fit: contain */
}

/* Ensure the card hides overflowing content */
.project-card {
    overflow: hidden;
}