/* Global Styles */
body {
  margin: 0;
  padding: 0;
  background-color: #000531;
  color: #0f0;
  font-family: "Courier New", Courier, monospace;
  line-height: 1.6;
}

/* Navigation Styles */
nav {
  background-color: #111;
  border-bottom: 2px solid #0f0;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

/* Logo */
.logo a {
  color: #0f0;
  text-decoration: none;
  font-size: 24px;
}

/* Navigation Menu */
.nav-menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0 15px;
}

.nav-link {
  color: #0f0;
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #fff;
}

/* Hamburger Menu (hidden on desktop) */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle .bar {
  height: 3px;
  width: 25px;
  background-color: #0f0;
  margin: 4px 0;
  transition: 0.3s;
}

/* Hero Section with Background Image */
.container.hero {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: url('./Pictures/Overlay.jpg') no-repeat center center/cover;
}

/* Overlay for hero section */
.container.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(53, 53, 53, 0.37); /* semi-transparent dark overlay */
  z-index: 0;
}

/* Ensure text appears above overlay */
.container.hero * {
  position: relative;
  z-index: 1;
}

/* Text Styles for Hero Section */
.hero-greeting {
  font-size: 48px;
  margin-bottom: 20px;
  color: #fff; /* Greeting text in white */
}

.container.hero h2 {
  font-size: 42px;
  margin-bottom: 20px;
  color: #0f0; /* Name text remains green */
}

.container.hero p {
  font-size: 24px;
  margin: 0;
  color: #0f0; /* Titles remain green */
  font-weight: 900;
}

/* Footer Styles */
footer {
  background-color: #00095c;
  color: #0f0;
  text-align: center;
  padding: 20px 10px;
  border-top: 2px solid #0f0;
  margin-top: 50px;
}

.footer-container p {
  margin: 10px 0;
}

.social-links a {
  color: #0f0;
  text-decoration: none;
  margin: 0 10px;
  font-size: 16px;
  transition: color 0.3s;
}

.social-links a:hover {
  color: #fff;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  /* Navigation adjustments */
  .nav-menu {
      flex-direction: column;
      width: 100%;
      display: none;
  }
  
  .nav-menu.active {
      display: flex;
  }
  
  .nav-item {
      margin: 10px 0;
      text-align: center;
  }
  
  .menu-toggle {
      display: flex;
  }
  
  /* Adjust hero section text sizes for mobile */
  .hero-greeting {
      font-size: 32px;
      margin-bottom: 15px;
  }
  
  .container.hero h2 {
      font-size: 28px;
      margin-bottom: 15px;
  }
  
  .container.hero p {
      font-size: 18px;
  }
  
  /* Optionally adjust logo size */
  .logo a {
      font-size: 20px;
  }
}

html, body {
  overflow-x: hidden;
}

/* About Me Section */
.description {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 20px;
  text-align: left;
}

.description .profile-image {
  display: block;
  margin: 20px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid #00ff00;
  background: url('Pictures/IMG_8999.jpeg') no-repeat center/cover;
}

.description h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
}

.description p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #fff;
  font-weight: lighter;
}

.description .highlight {
  color: #0f0; /* green highlight for key words */
  font-weight: bold;
}

/* New: Contact Button in Footer on About Page */
.contact-button {
  display: inline-block;
  background-color: #0f0;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.contact-button:hover {
  background-color: #fff;
}
/* Enable smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Learn More Arrow Section */
.learn-more {
  text-align: center;
  margin: 20px 0;
}

.learn-more a {
  color: #ffffff; /* White text */
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s;
  display: inline-block;
  font-weight: 900;
}

.learn-more a:hover {
  color: #0f0;
}

.learn-more .arrow {
  display: block;
  font-size: 36px;
  margin-bottom: 5px;
}
/* About Buttons Section */
.about-buttons {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.about-buttons .button {
  background-color: #00008B; /* Dark blue background */
  color: #fff;              /* White text */
  padding: 10px 20px;
  text-decoration: none;
  font-size: 18px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.about-buttons .button:hover {
  background-color: #0000CD; /* Lighter blue on hover */
}
/* ============================== */
/* Resume Page Specific Styles    */
/* ============================== */

/* Container for Resume Page */
.container.resume {
  max-width: 1000px;
  margin: 50px auto;
  padding: 20px;
  color: #0f0;
}

/* Main Heading on Resume Page */
.container.resume h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
}

/* General paragraph styling within resume */
.container.resume p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Section Headings (Experience, Education, etc.) */
.container.resume section h2 {
  font-size: 32px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #0f0;
}

/* ---------------------- */
/* Professional Experience */
/* ---------------------- */
.experience .job {
  margin-bottom: 25px;
}

.experience .job h3 {
  font-size: 24px;
  margin-bottom: 5px;
}

.experience .job .date {
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;  /* Use white for dates to contrast if needed */
}

.experience .job ul {
  margin: 0;
  padding-left: 20px;
}

.experience .job ul li {
  margin-bottom: 5px;
  font-size: 16px;
}

/* ------------- */
/* Education     */
/* ------------- */
.education .edu-item {
  margin-bottom: 25px;
}

.education .edu-item h3 {
  font-size: 24px;
  margin-bottom: 5px;
}

.education .edu-item p {
  margin: 5px 0;
  font-size: 16px;
}

/* ------------------ */
/* Certifications     */
/* ------------------ */
.certifications ul {
  list-style: disc inside;
  margin: 0;
  padding-left: 20px;
}

.certifications ul li {
  margin-bottom: 5px;
  font-size: 16px;
}

/* ------------- */
/* Skills & Tools */
/* ------------- */
.skills p {
  font-size: 16px;
  margin-bottom: 10px;
}
/* Projects Section*/
.project h2 {
  font-size: 32px ;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #0f0;
}

.project p {
  font-size: 18px;
  margin-bottom: 15px;
}

/* ------------- */
/* Contact Section */
/* ------------- */
.contact h2 {
  font-size: 32px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #0f0;
}

.contact p {
  font-size: 18px;
  margin-bottom: 15px;
}

/* Contact Button (reuse styling from your global .contact-button if desired) */
.contact .contact-button {
  display: inline-block;
  background-color: #0f0;
  color: #000;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.contact .contact-button:hover {
  background-color: #fff;
}

/* ----------------------------- */
/* Resume Page Specific Styles   */
/* ----------------------------- */

/* Container for Resume Page */
.container.resume {
  max-width: 1000px;
  margin: 50px auto;
  padding: 20px;
  background-color: #ffffff; /* Light grey background */
  color: #000;             /* Dark text for readability */
}

/* Headings in the Resume Page */
.container.resume h1,
.container.resume h2,
.experience .job h3,
.education .edu-item h3 {
  color: #013968; /* Black for headings */
  font-weight: bold;
}

/* Paragraphs, dates, and list items */
.container.resume p,
.experience .job .date,
.education .edu-item p,
.skills p,
.contact p {
  color: #333; /* Dark grey for body text */
}

/* You can keep your other resume styles (like borders, spacing, etc.) as is */

/* ----------------------------- */
/* Responsive adjustments for resume page */
@media screen and (max-width: 768px) {
  .container.resume {
    padding: 10px;
  }
  
  .container.resume h1 {
    font-size: 11px;
  }
  
  /* Target paragraphs and other text elements */
  .container.resume p,
  .experience .job p,
  .experience .job .date,
  .experience .job ul li,
  .education .edu-item p,
  .skills p,
  .contact p {
    font-size: 12px;
  }
  
  .container.resume section h2 {
    font-size: 11px;
  }
  
  .experience .job h3,
  .education .edu-item h3 {
    font-size: 12px;
  }
}
/* Projects Page Styles */
.projects-container {
  max-width: 1000px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f5f5f5; /* Light background for clarity */
  color: #000;
  border-radius: 4px;
}

/* Ensure all images within the projects container scale responsively */
.projects-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Project Card Styles */
.project-card {
  background-color: #fff;
  border: 2px solid #0f0;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.project-card h2 {
  margin-top: 0;
  font-size: 24px;
  color: #000;
}

.project-card p {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.view-more {
  background-color: #00008B;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.view-more:hover {
  background-color: #0000CD;
}

.show-less {
  background-color: #00008B; /* Dark blue background */
  color: #fff;             /* White text */
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.show-less:hover {
  background-color: #0000CD; /* Lighter blue on hover */
}

/* Project Details */
.project-details {
  background-color: #fff;
  border: 2px solid #0f0;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.project-details img {
  max-width: 100%;
  display: block;
  margin-bottom: 20px; /* Adjust this value as needed */
}

.project-details.hidden {
  display: none;
}

/* Tabs for Database Project */
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tab-link {
  background-color: #00008B;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.tab-link.active,
.tab-link:hover {
  background-color: #0000CD;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Carousel Styles */
.carousel {
  position: relative;
  overflow: hidden;
  height: 300px; /* fixed height for the carousel */
}

.carousel-images {
  display: flex;
  gap: 10px;
  transition: transform 0.3s ease-in-out;
  height: 100%;
}

/* Each image takes up 100% of the carousel's width */
.carousel-images img {
  flex: 0 0 100%; /* each image occupies full width */
  width: 120%;
  height: 100%;
  object-fit: contain;  /* Show entire image without cropping */
  display: block;
  background-color: #000; /* Optional: sets background behind image if aspect ratio differs */
}


.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #00008B;
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}

.carousel-button:hover {
  background-color: #0000CD;
}

/* Responsive adjustments for Projects Page */
@media screen and (max-width: 768px) {
  .projects-container {
    padding: 10px;
  }
  
  .projects-container h1 {
    font-size: 28px;
  }
  
  .project-card h2 {
    font-size: 20px;
  }
  
  .project-card p,
  .view-more {
    font-size: 14px;
  }
  
  .tab-link {
    font-size: 14px;
  }
}
/* ----------------------------- */
/* Contact Page Specific Styles  */
/* ----------------------------- */

.contact-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f5f5f5; /* light background for clarity */
  color: #000;             /* dark text for readability */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-container h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 20px;
  color: #000;
}

.contact-container p {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

/* Contact Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form label {
  font-size: 16px;
  color: #000;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #000;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #0f0; /* green border on focus */
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

/* Contact Button */
.contact-form button.contact-button {
  align-self: center;
  background-color: #00008B; /* dark blue */
  color: #fff;             /* white text */
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-form button.contact-button:hover {
  background-color: #0000CD; /* lighter blue on hover */
}

/* Responsive Adjustments for Contact Page */
@media screen and (max-width: 768px) {
  .contact-container {
    padding: 10px;
  }
  
  .contact-container h1 {
    font-size: 28px;
  }
  
  .contact-container p,
  .contact-form label,
  .contact-form input,
  .contact-form textarea,
  .contact-form button.contact-button {
    font-size: 16px;
  }
}