/* --- General Styles & Variables --- */
:root {
    --primary-color: #4A90E2;
    --secondary-color: #50E3C2;
    --background-color: #121212;
    --surface-color: #1E1E1E;
    --text-color: #E0E0E0;
    --heading-color: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.6; }
h1, h2, h3 { color: var(--heading-color); margin-bottom: 1rem; font-weight: 600; }
h2 { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; position: relative; }
h2::after { content: ''; display: block; width: 60px; height: 4px; background: var(--primary-color); margin: 0.5rem auto 0; border-radius: 2px; }
section { padding: 6rem 5%; }

/* --- Header & Navigation --- */
header { background: rgba(18, 18, 18, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid #2a2a2a; width: 100%; position: fixed; top: 0; z-index: 1000; }
nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; }
nav .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); border: 2px solid var(--primary-color); padding: 0.2rem 0.6rem; border-radius: 5px; }
nav ul { list-style: none; display: flex; gap: 1.5rem; }
nav ul li a { text-decoration: none; color: var(--text-color); font-weight: 400; transition: color 0.3s ease; }
nav ul li a:hover { color: var(--primary-color); }

/* --- Home Section --- */
#home { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 100vh; }
.profile-photo { width: 150px; height: 150px; border-radius: 50%; border: 4px solid var(--primary-color); object-fit: cover; margin-bottom: 1.5rem; }
#home h1 { font-size: 3.5rem; }
.subtitle { font-size: 1.2rem; color: var(--secondary-color); margin-bottom: 1rem; }
.intro { max-width: 600px; margin-bottom: 2rem; }
.social-links a { text-decoration: none; color: var(--text-color); border: 1px solid var(--text-color); padding: 0.5rem 1.5rem; border-radius: 20px; margin: 0 0.5rem; transition: all 0.3s ease; }
.social-links a:hover { background-color: var(--primary-color); color: var(--heading-color); border-color: var(--primary-color); }

/* --- About, Skills, Projects, Certifications Sections --- */
#about p { max-width: 800px; margin: 0 auto; text-align: center; }
.skills-container { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.skill-category { background: var(--surface-color); padding: 2rem; border-radius: 10px; text-align: center; flex: 1; min-width: 250px; }
.skill { display: inline-block; background: #333; color: var(--text-color); padding: 0.5rem 1rem; margin: 0.3rem; border-radius: 5px; font-size: 0.9rem; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.project-card { background: var(--surface-color); padding: 2rem; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3s ease; border-left: 4px solid var(--secondary-color); }
.project-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
.project-card h3 { color: var(--secondary-color); }
.table-container { max-width: 1000px; margin: 0 auto; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface-color); }
th, td { padding: 1rem; text-align: left; border-bottom: 1px solid #333; }
th { background: #2a2a2a; color: var(--heading-color); }
tbody tr:hover { background-color: #252525; }
.view-btn { text-decoration: none; color: white; background-color: var(--primary-color); padding: 0.4rem 0.8rem; border-radius: 5px; transition: background-color 0.3s; }
.view-btn:hover { background-color: #357ABD; }

/* --- Secure Drop Section --- */
.dropbox-container { max-width: 600px; margin: 0 auto; background: var(--surface-color); padding: 2rem; border-radius: 10px; text-align: center; }
#password-form label { display: block; margin-bottom: 0.5rem; margin-top: 1rem; text-align: left; }
#password-form input { width: 100%; padding: 0.7rem; border-radius: 5px; border: 1px solid #555; background: #333; color: var(--text-color); font-size: 1rem; }
#password-form button { width: 100%; padding: 0.8rem; margin-top: 1.5rem; border: none; border-radius: 5px; background: var(--primary-color); color: white; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; }
#password-form button:hover { background: #357ABD; }
.hidden { display: none; }
.error-message { color: #E57373; margin-top: 1rem; font-size: 0.9rem; min-height: 1.2rem; }
.uploader-container { margin-top: 1rem; display: flex; justify-content: center; }
.upload-status { margin-top: 1rem; font-size: 0.9rem; font-weight: 500; min-height: 1.2rem; }

/* --- Footer --- */
footer { background: var(--surface-color); text-align: center; padding: 3rem 2rem; }
footer h2 { margin-bottom: 1.5rem; }
.footer-social-links { margin: 1.5rem 0; }
.footer-social-links a { text-decoration: none; color: var(--primary-color); font-size: 1.1rem; margin: 0 1rem; transition: color 0.3s; }
.footer-social-links a:hover { color: var(--secondary-color); }
.copyright { font-size: 0.9rem; color: #888; }

/* --- Responsiveness --- */
@media (max-width: 768px) {
    nav ul { display: none; }
    #home h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    .projects-grid { grid-template-columns: 1fr; }
    section { padding: 4rem 5%; }
}