*,
*::before,
*::after {
  box-sizing: border-box;
}

/* General Body Styles */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Modern, clean font */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #0a0a1a; /* Dark background for futuristic feel */
  color: #e0e0e0; /* Light text for contrast */
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Header Styles */
header {
  background-color: rgba(
    10,
    10,
    26,
    0.8
  ); /* Slightly transparent dark header */
  padding: 1rem 0;
  position: fixed; /* Keep header visible on scroll */
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  backdrop-filter: blur(5px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(5px); /* For Safari */
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: #4caf50; /* A techy green for the logo */
  letter-spacing: 1.5px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  margin-left: 2rem;
}

nav ul li a {
  color: #e0e0e0;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease-in-out;
}

nav ul li a:hover {
  color: #66ccff; /* A futuristic blue on hover */
}

/* Hero Section Styles */
#hero {
  height: 100vh; /* Full viewport height */
  position: relative; /* For absolutely positioning layers */
  overflow: hidden; /* Hide anything outside the hero area */
}

.hero-background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0; /* Hidden by default */
  transition: opacity 1s ease-in-out; /* Smooth transition for images */
  z-index: 1; /* Below content */
  filter: brightness(0.6) contrast(1.1); /* Slightly darken and enhance images */
}

.hero-background-layer.active {
  opacity: 1; /* Active layer is visible */
}

.hero-content {
  position: relative; /* Above background layers */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%; /* Take full height of #hero */
  color: #ffffff;
  padding: 0 2rem;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 26, 0.4) 0%,
    rgba(26, 10, 42, 0.4) 100%
  ); /* Subtle overlay for text readability */
}

#hero h1 {
  font-size: 3.8rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  background: linear-gradient(
    90deg,
    #66ccff,
    #4caf50
  ); /* Gradient text for headline */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-emphasis-color: transparent;
  font-weight: 800;
  letter-spacing: -1px;
}

#hero p {
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
  max-width: 800px;
  opacity: 0.9;
  color: #b0b0b0; /* Slightly muted white for paragraph */
}

.button {
  display: inline-block;
  background: linear-gradient(45deg, #4caf50, #66ccff); /* Gradient button */
  color: #ffffff;
  padding: 1rem 2.5rem;
  text-decoration: none;
  border-radius: 50px; /* Pill shape */
  font-size: 1.1rem;
  font-weight: bold;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4); /* Subtle shadow */
}

.button:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 8px 20px rgba(102, 204, 255, 0.6); /* Enhanced shadow */
}

/* --- General Section Styles --- */
.section-padding {
  padding: 6rem 2rem; /* Consistent padding for sections */
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section-padding h2 {
  font-size: 2.8rem;
  margin-bottom: 0.8rem;
  background: linear-gradient(90deg, #66ccff, #4caf50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-emphasis-color: transparent;
  font-weight: 700;
}

.section-padding .section-subtitle {
  font-size: 1.2rem;
  color: #b0b0b0;
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.background-alt {
  background-color: #1a0a2a; /* Slightly different dark background for contrast */
}

/* --- Project Grid Styles --- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Responsive grid */
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.project-card {
  background-color: #1a1a30; /* Darker card background */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  text-align: left;
}

.project-card:hover {
  transform: translateY(-10px); /* Lift effect on hover */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4); /* Enhanced shadow */
}

.project-card img {
  width: 100%;
  height: 200px; /* Fixed height for image */
  object-fit: cover; /* Cover the area, cropping if necessary */
  display: block;
}

.project-card h3 {
  font-size: 1.6rem;
  color: #66ccff; /* Blue for project titles */
  margin: 1.5rem 1.5rem 0.5rem;
}

.project-card p {
  font-size: 1rem;
  color: #b0b0b0;
  margin: 0 1.5rem 1.5rem;
}

.project-card .button-small {
  display: inline-block;
  background-color: #4caf50; /* Green for internal buttons */
  color: #ffffff;
  padding: 0.7rem 1.5rem;
  text-decoration: none;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 1.5rem 1.5rem;
  transition: background-color 0.3s ease-in-out;
}

.project-card .button-small:hover {
  background-color: #66ccff;
}

/* --- Service Grid Styles --- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.service-card {
  background-color: #0a0a1a; /* Darker background for service cards */
  border-radius: 10px;
  padding: 2.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.service-card i {
  /* Placeholder for icons */
  font-size: 3.5rem;
  color: #4caf50;
  margin-bottom: 1.5rem;
  display: block;
}

.service-card h3 {
  font-size: 1.8rem;
  color: #66ccff;
  margin-bottom: 0.8rem;
}

.service-card p {
  font-size: 1.05rem;
  color: #b0b0b0;
}

/* --- View All Button (common for both sections) --- */
.view-all-button {
  margin-top: 2rem;
}
/* --- Page Hero (Common for About, Projects, Services, Contact) --- */
.page-hero {
  height: 60vh; /* Shorter hero for inner pages */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(
    135deg,
    #1a0a2a 0%,
    #0a0a1a 100%
  ); /* Similar gradient to home hero */
  color: #ffffff;
  padding: 0 2rem;
  position: relative;
  overflow: hidden;
  margin-top: 5rem; /* Space below fixed header */
  border-bottom: 1px solid #2a1a3a;
}

.page-hero-content h1 {
  font-size: 3.2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(
    90deg,
    #4caf50,
    #66ccff
  ); /* Reversed gradient for a change */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-emphasis-color: transparent;
  font-weight: 800;
}

.page-hero-content p {
  font-size: 1.3rem;
  color: #b0b0b0;
  max-width: 700px;
}

/* --- Story & Skills Content Sections Layout --- */
.story-content,
.skills-content {
  display: flex;
  flex-wrap: wrap; /* Allows stacking on smaller screens (e.g., mobile) */
  align-items: center; /* Vertically aligns items in the middle */
  gap: 3rem; /* Provides consistent spacing between text and image */
  text-align: left; /* Ensures text inside aligns left */
  margin-bottom: 4rem; /* Adds some spacing below each content block */
}

.story-content p,
.skills-content p {
  margin-bottom: 1rem; /* Ensure consistent spacing for paragraphs within these sections */
  font-size: 1.1rem;
  color: #b0b0b0;
}

/* Specific styling for the image and text containers */
.story-text,
.skills-text {
  flex: 2; /* Allows text to take up more space by default */
  min-width: 300px; /* Prevents text block from becoming too narrow */
  text-align: justify;
}

.story-image,
.skills-image {
  flex: 1; /* Allows image to take up less space by default */
  min-width: 250px; /* Prevents image block from becoming too narrow */
  text-align: center; /* Centers the image within its flex item */
}

/* --- Responsive Adjustments for Juxtaposition (Desktop/Larger Screens) --- */
@media (min-width: 992px) {
  /* This breakpoint ensures the layout works well on desktops and larger tablets */
  .story-content,
  .skills-content {
    justify-content: space-between; /* Distributes space between items */
  }

  .story-content .story-text,
  .skills-content .skills-text {
    flex: 0 0 calc(55% - 1.5rem); /* Text takes approx 55% width, accounting for half of gap */
    max-width: calc(55% - 1.5rem);
  }

  .story-content .story-image,
  .skills-content .skills-image {
    flex: 0 0 calc(45% - 1.5rem); /* Image takes approx 45% width, accounting for half of gap */
    max-width: calc(45% - 1.5rem);
  }

  /* --- Optional: Alternate image/text order for visual rhythm --- */
  #our-story .story-content {
    flex-direction: row-reverse; /* Puts image on left, text on right for the first section */
  }
  /* You can add another rule like:
    #skills-creative .skills-content {
        flex-direction: row; // Keeps image on right, text on left (default behavior)
    }
    to explicitly set the order for the second section
    */
}

.story-image img,
.skills-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out;
}

.story-image img:hover,
.skills-image img:hover {
  transform: scale(1.02);
}

.story-text p,
.skills-text p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #b0b0b0;
}

.skills-text ul {
  list-style: none; /* Remove default bullets */
  padding: 0;
  margin-top: 1.5rem;
}

.skills-text ul li {
  font-size: 1.1rem;
  color: #e0e0e0;
  margin-bottom: 0.8rem;
  position: relative;
  padding-left: 1.5rem; /* Space for custom bullet */
}

.skills-text ul li::before {
  content: "•"; /* Custom bullet point */
  color: #4caf50; /* Techy green bullet */
  font-size: 1.5rem;
  position: absolute;
  left: 0;
  top: -0.2rem;
}

/* --- Mission & Values Section --- */
.mission-vision {
  background-color: #0a0a1a;
  border-radius: 10px;
  padding: 2.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 3rem;
}

.mission-vision h3 {
  font-size: 2.2rem;
  color: #66ccff;
  margin-bottom: 1rem;
}

.mission-vision p {
  font-size: 1.15rem;
  color: #b0b0b0;
  max-width: 900px;
  margin: 0 auto;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.value-card {
  background-color: #1a1a30;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.value-card i {
  /* Placeholder for icons */
  font-size: 3rem;
  color: #4caf50;
  margin-bottom: 1rem;
}

.value-card h4 {
  font-size: 1.5rem;
  color: #e0e0e0;
  margin-bottom: 0.5rem;
}

.value-card p {
  font-size: 0.95rem;
  color: #b0b0b0;
}

/* --- Service Detail Section Styles --- */
.service-detail-section {
  padding: 6rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  /* Initial state for animation */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.service-detail-section.animate {
  opacity: 1;
  transform: translateY(0);
}

.service-detail-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
  text-align: left;
}

.service-detail-text {
  flex: 2;
  min-width: 300px;
}

.service-detail-image {
  flex: 1;
  min-width: 250px;
  text-align: center;
}

.service-detail-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out;
}

.service-detail-image img:hover {
  transform: scale(1.02);
}

.service-detail-text h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(
    90deg,
    #4caf50,
    #66ccff
  ); /* Reversed gradient for headings */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-emphasis-color: transparent;
  font-weight: 700;
  text-align: justify; /* Justify heading text */
}

.service-detail-text p {
  font-size: 1.1rem;
  color: #b0b0b0;
  margin-bottom: 1.5rem;
  text-align: justify; /* Justify paragraph text */
}

.service-detail-text ul {
  list-style: none; /* Remove default bullets */
  padding: 0;
  margin-top: 1.5rem;
}

.service-detail-text ul li {
  font-size: 1.05rem;
  color: #e0e0e0;
  margin-bottom: 0.8rem;
  position: relative;
  padding-left: 1.5rem; /* Space for custom bullet */
  text-align: justify; /* Justify list item text */
}

.service-detail-text ul li::before {
  content: "•"; /* Custom bullet point */
  color: #66ccff; /* Futuristic blue bullet */
  font-size: 1.5rem;
  position: absolute;
  left: 0;
  top: -0.2rem;
}

/* Alternate image/text order for visual rhythm */
#full-stack-development .service-detail-content,
#tech-consulting .service-detail-content {
  flex-direction: row-reverse; /* Image on left, text on right for these sections */
}

/* Responsive adjustments for service detail sections */
@media (min-width: 992px) {
  .service-detail-content {
    justify-content: space-between;
  }

  .service-detail-text {
    flex: 0 0 calc(55% - 1.5rem);
    max-width: calc(55% - 1.5rem);
  }

  .service-detail-image {
    flex: 0 0 calc(45% - 1.5rem);
    max-width: calc(45% - 1.5rem);
  }
}

/* --- Contact Page Specific Styles --- */
/* Base for the flipping container */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center; /* Center cards when they wrap */
  max-width: 1000px;
  margin: 0 auto 3rem auto; /* Add bottom margin for spacing */
  perspective: 1000px; /* For 3D flip effect */
}

/* Styling for the trigger cards (front face) */
.contact-card {
  background-color: #1a1a30; /* Darker card background */
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer; /* Indicate it's clickable */
  width: 450px; /* Adjust card width as needed */
  height: 600px; /* Adjust card height as needed */
  display: flex; /* Flexbox for centering content */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box; /* Include padding in element's total width and height */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.contact-card:hover {
  transform: translateY(-10px); /* Lift effect on hover */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4); /* Enhanced shadow */
}

.contact-card i {
  font-size: 4rem;
  color: #4caf50;
  margin-bottom: 1.5rem;
}

.contact-card h3 {
  font-size: 2.2rem;
  color: #66ccff;
  margin-bottom: 1rem;
}

.contact-card p {
  font-size: 1.1rem;
  color: #b0b0b0;
  margin-bottom: 2rem;
  text-align: center;
}

.contact-card .open-modal-button {
  /* Uses existing .button style */
  margin-top: 1.5rem;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  /* Ensure button is visible above text */
  position: relative;
  z-index: 1;
}

/* --- Modal Styles (the popup forms) --- */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1001; /* Sit on top, higher than header */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(
    0,
    0,
    0,
    0.8
  ); /* Black w/ opacity - background blend */
  backdrop-filter: blur(8px); /* Blur effect for sophistication */
  -webkit-backdrop-filter: blur(8px); /* For Safari */
  justify-content: center; /* Center modal content */
  align-items: center; /* Center modal content */
  opacity: 0; /* Initial state for fade-in */
  transition: opacity 0.3s ease-in-out;
}

.modal.active {
  display: flex; /* Show the modal */
  opacity: 1; /* Fade in */
}

.modal-content {
  background-color: #1a1a30;
  margin: auto; /* Centers the modal vertically and horizontally if not using flex */
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  position: relative;
  max-width: 500px; /* Max width for the form container */
  width: 90%; /* Responsive width */
  transform: translateY(50px); /* Initial state for slide-up */
  transition: transform 0.3s ease-in-out;
}

.modal.active .modal-content {
  transform: translateY(0); /* Slide up into view */
}

.modal-content h3 {
  font-size: 2rem;
  color: #66ccff;
  margin-bottom: 1.5rem;
  text-align: center;
}

.modal-content .close-button {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  color: #b0b0b0;
  cursor: pointer;
  z-index: 10;
  transition: color 0.3s ease-in-out;
}

.modal-content .close-button:hover {
  color: #ff6666;
}

.modal-form .form-group {
  margin-bottom: 1.2rem;
  text-align: left;
}

.modal-form label {
  display: block;
  font-size: 0.95rem;
  color: #e0e0e0;
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form textarea,
.modal-form select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #2a1a3a;
  border-radius: 5px;
  background-color: #0a0a1a;
  color: #e0e0e0;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s ease-in-out;
}

.modal-form input[type="text"]:focus,
.modal-form input[type="email"]:focus,
.modal-form textarea:focus,
.modal-form select:focus {
  border-color: #66ccff;
  box-shadow: 0 0 0 3px rgba(102, 204, 255, 0.2);
}

.modal-form textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-form .button {
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  margin-top: 1.5rem;
}

/* --- Direct Contact Info Below Cards (Optional) --- */
.contact-info-below-cards {
  margin-top: 6rem; /* Space from flipping cards */
  padding-top: 3rem;
  border-top: 1px solid #1a1a2a; /* Separator */
  text-align: center; /* Center content in this section */
}

.contact-info-below-cards h2 {
  font-size: 2.2rem;
  margin-bottom: 2rem;
}

.contact-info-below-cards .info-item {
  display: flex;
  align-items: center;
  justify-content: center; /* Center items for this section */
  margin-bottom: 0.8rem;
  font-size: 1.05rem;
  color: #e0e0e0;
}

.contact-info-below-cards .info-item i {
  font-size: 1.4rem;
  color: #4caf50;
  margin-right: 0.8rem;
  width: auto; /* Allow icons to size naturally here */
}

.contact-info-below-cards .social-links h3 {
  font-size: 1.8rem;
  margin-top: 2rem;
}

/* Responsive adjustments for contact cards and modals */
@media (max-width: 991px) {
  /* On tablets/mobiles, stack cards */
  .contact-container {
    flex-direction: column;
    align-items: center; /* Center stacked cards */
  }
  .contact-card {
    width: 100%; /* Take full width on smaller screens */
    max-width: 450px; /* Cap max width */
  }
  .modal-content {
    width: 95%; /* Make modal a bit wider on small screens */
    padding: 1.5rem;
  }
}

/* --- Project Grid Section (reuse from index.html if similar, but ensure these are here) --- */
#project-grid-section .project-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(300px, 1fr)
  ); /* Responsive grid */
  gap: 2.5rem;
  margin-bottom: 3rem;
}

#project-grid-section .project-card {
  background-color: #1a1a30; /* Darker card background */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  text-align: left;
  cursor: pointer; /* Indicate it's clickable */
}

#project-grid-section .project-card:hover {
  transform: translateY(-10px); /* Lift effect on hover */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4); /* Enhanced shadow */
}

#project-grid-section .project-card img {
  width: 100%;
  height: 200px; /* Fixed height for image */
  object-fit: cover; /* Cover the area, cropping if necessary */
  display: block;
}

#project-grid-section .project-card h3 {
  font-size: 1.6rem;
  color: #66ccff; /* Blue for project titles */
  margin: 1.5rem 1.5rem 0.5rem;
}

#project-grid-section .project-card p {
  font-size: 1rem;
  color: #b0b0b0;
  margin: 0 1.5rem 1.5rem;
}

#project-grid-section .project-card .button-small {
  /* Uses existing .button-small style for consistency */
  margin-top: 1rem; /* Space below paragraph */
  margin-bottom: 1.5rem; /* Space before bottom of card */
}

/* --- Project Modal Specific Styles (reusing .modal from contact page) --- */
.project-modal-content {
  max-width: 900px; /* Wider modal for project details */
  height: 90vh; /* Make it nearly full height */
  overflow-y: auto; /* Enable scrolling within the modal if content overflows */
  display: flex;
  flex-direction: column;
  text-align: left; /* Align text within modal left */
}

.modal-project-media {
  width: 100%;
  max-height: 400px; /* Max height for media (image/video) */
  overflow: hidden;
  margin-bottom: 1.5rem;
  border-radius: 8px; /* Slightly smaller radius for internal elements */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-project-media img,
.modal-project-media video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.modal-project-details h3 {
  font-size: 1.8rem;
  color: #4caf50; /* Green for subheadings */
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  text-align: left; /* Ensure alignment */
}

.modal-project-details p {
  font-size: 1.05rem;
  color: #b0b0b0;
  margin-bottom: 1rem;
  text-align: justify; /* Justify paragraphs */
}

.modal-project-details ul {
  list-style: none;
  padding: 0;
  margin-top: 0.8rem;
  margin-bottom: 1rem;
}

.modal-project-details ul li {
  font-size: 1rem;
  color: #e0e0e0;
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.2rem;
  text-align: justify; /* Justify list items */
}

.modal-project-details ul li::before {
  content: "•";
  color: #66ccff; /* Blue bullet */
  font-size: 1.3rem;
  position: absolute;
  left: 0;
  top: -0.1rem;
}

.modal-project-details .tech-stack {
  font-size: 0.95rem;
  color: #888888;
  font-style: italic;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.modal-project-links {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap; /* Allow buttons to wrap */
  justify-content: center; /* Center buttons within their div */
}

.modal-project-links .button-small {
  padding: 0.8rem 1.8rem;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments for project modals */
@media (max-width: 768px) {
  .project-modal-content {
    max-width: 95%;
    height: 95vh; /* Closer to full screen on small devices */
    padding: 1.5rem;
  }
  .modal-project-media {
    max-height: 250px;
  }
  .modal-project-details h3 {
    font-size: 1.6rem;
  }
  .modal-project-details p,
  .modal-project-details ul li {
    font-size: 0.95rem;
  }
  .modal-project-links .button-small {
    width: 100%;
    text-align: center;
    padding: 0.7rem;
  }
}

/* Footer Styles */
footer {
  background-color: #0a0a1a;
  color: #888888;
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  border-top: 1px solid #1a1a2a;
}

footer p {
  margin: 0;
}

/* --- Projects Page Specific Styles --- */

/* --- Current Projects (AI) Section Styling --- */
#current-projects {
  padding-top: 4rem; /* Reduced top padding for this section */
  padding-bottom: 4rem; /* Reduced bottom padding */
}

.current-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

.current-project-card {
  background-color: #1a1a30;
  padding: 2.5rem;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.current-project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.current-project-card i {
  font-size: 3rem;
  background: linear-gradient(90deg, #66ccff, #4caf50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-emphasis-color: transparent;
  margin-bottom: 1rem;
}

.current-project-card h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.current-project-card p {
  font-size: 1rem;
  color: #b0b0b0;
  margin-bottom: 0;
  text-align: justify;
}

.watch-out-message {
  text-align: center;
  font-size: 1.2rem;
  color: #66ccff;
  font-weight: 600;
  margin-top: 3rem;
}

/* --- Portfolio Sub-section Headings --- */
.project-subsection {
  margin-top: 5rem;
}

.project-subsection h3 {
  font-size: 2.2rem;
  color: #e0e0e0;
  margin-bottom: 2rem;
  text-align: center;
}

.project-placeholder {
  font-size: 1.2rem;
  font-style: italic;
  color: #b0b0b0;
  text-align: center;
}

/* --- Project Grid (Live & UI/UX Projects) --- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
  justify-items: center;
}

/* Base card styling (front face) */
.project-card {
  background-color: #1a1a30;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  text-align: center;
  cursor: pointer;
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 400px;
  box-sizing: border-box;
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.project-card h3 {
  font-size: 1.6rem;
  color: #66ccff;
  margin: 1.5rem 1rem 0.5rem;
}

.project-card p {
  font-size: 1rem;
  color: #b0b0b0;
  margin: 0 1rem 1.5rem;
  text-decoration: none; /* Remove underline from text in cards */
  text-align: justify;
}

.project-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 2rem auto 0;
  border-radius: 50%;
}

.project-card .tap-prompt {
  font-size: 0.9rem;
  color: #4caf50;
  font-style: italic;
  margin-top: auto;
  margin-bottom: 1rem;
  text-decoration: none;
}

/* --- Flip Card Specific Styles for Live Projects --- */
.project-card-container {
  perspective: 1000px; /* Enable 3D space for flipping */
  position: relative;
  height: 400px;
  width: 100%;
  max-width: 400px;
}

.project-flip-card {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  background-color: #1a1a30;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}

.project-flip-card.is-flipping {
  transform: rotateY(-180deg);
}

/* UI/UX card-specific image container */
.card-image-content {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.card-image-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}

/* --- Project Modal Specific Styles (UI/UX) --- */
.project-modal-content {
  max-width: 900px;
  width: 95%;
  height: 90vh;
  overflow-y: auto;
  text-align: center;
}

.modal-project-media-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- General CTA styles --- */
#cta-projects {
  padding-top: 4rem;
  padding-bottom: 6rem;
}

/* --- Case Study Modal Styles --- */
.case-study-content h3 {
  text-align: left;
  color: #1a1a2e;
  border-bottom: 2px solid #1877f2;
  padding-bottom: 0.5em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.case-study-content p {
  line-height: 1.6;
}

.case-study-content ul {
  list-style: none;
  padding-left: 0;
}

.case-study-content ul li {
  padding-left: 1.5em;
  position: relative;
  margin-bottom: 0.5em;
}

.case-study-content ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #31a24c;
  font-weight: bold;
}

.tech-stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1em;
}

.tech-stack-list span {
  background-color: #e7f3ff;
  color: #1877f2;
  padding: 0.4em 0.8em;
  border-radius: 5px;
  font-size: 0.9em;
}

.case-study-button {
  display: inline-block;
  margin-top: 2em;
  width: 100%;
  text-align: center;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .page-hero-content h1 {
    font-size: 2.5rem;
  }
  .page-hero-content p {
    font-size: 1.2rem;
  }
  .project-grid {
    grid-template-columns: 1fr;
  }
  .project-card,
  .project-flip-card {
    width: 100%;
    max-width: none;
  }
  .project-card-container {
    width: 100%;
    max-width: none;
  }
  .modal-content {
    padding: 1.5rem;
  }
}

/* --- JOURNAL PAGE STYLES (FINAL & WORKING) --- */
body.journal-page header {
  position: static;
}

.journal-main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 160px);
  padding: 2em 1em;
}

.notebook {
  width: 90vw;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  position: relative;
  perspective: 2500px;
}

.notebook .page {
  position: absolute;
  width: 50%;
  height: 100%;
  transition: transform 1.2s cubic-bezier(0.6, 0, 0.4, 1);
  transform-style: preserve-3d;
}

/* The Cover, initially centered on the page */
.cover {
  z-index: 100;
  left: 50%;
  transform: translateX(-50%); /* This centers the closed book */
  transform-origin: left center;
}
.page-front,
.page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0 10px 10px 0;
}
.page-front {
  background-color: #1a1a2e;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page-back {
  background-color: #f0f0f0;
  transform: rotateY(180deg);
}
.cover-design {
  text-align: center;
}
.tap-to-open {
  margin-top: 2em;
  border: 2px solid white;
  padding: 0.5em 1em;
  cursor: pointer;
  border-radius: 5px;
}

/* The Inside Pages, hidden by default */
.page-left,
.page-right {
  top: 0;
  background: #fdfdfd;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s ease-in-out;
  z-index: 15;
}
.page-left {
  left: 0;
  border-radius: 10px 0 0 10px;
}
.page-right {
  left: 50%;
  border-radius: 0 10px 10px 0;
}

/* The Spine */
.notebook::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  bottom: -5px;
  width: 30px;
  background: #555;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

/* --- THE OPEN BOOK STATE (THIS IS THE FIX) --- */
.notebook.is-open .cover {
  /* This tells the cover to flip and go behind the other pages */
  transform: rotateY(-180deg);
  z-index: 5; /* <-- THIS IS THE KEY FIX */
}

.notebook.is-open .page-left,
.notebook.is-open .page-right,
.notebook.is-open::before {
  /* Show the pages and spine */
  visibility: visible;
  opacity: 1;
}

/* Content inside the pages */
.page-content {
  padding: 2em 3em;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #333;
  font-size: 1.1em;
}
.page-content h2 {
  text-align: left;
}
.page-buttons {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
}
.page-turn-button {
  font-size: 1em;
  cursor: pointer;
  background: none;
  border: none;
  color: #1877f2;
  font-weight: bold;
}

/* --- Responsive Header & Hamburger Menu --- */
.menu-toggle {
  display: none; /* Hidden on desktop */
  flex-direction: column;
  cursor: pointer;
}

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

/* This is the media query that activates on mobile screens */
@media (max-width: 768px) {
  nav ul {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 60%;
    max-width: 300px;
    background-color: #1a1a30;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(100%); /* Start off-screen */
    transition: transform 0.5s ease-in-out;
  }

  nav ul.nav-open {
    transform: translateX(0); /* Slide into view */
  }

  nav ul li {
    margin: 1.5rem 0;
  }

  .menu-toggle {
    display: flex; /* Show the hamburger button */
  }
}

/* --- DEFINITIVE RESPONSIVE FIXES (MOBILE) --- */
@media (max-width: 768px) {
  /* --- GLOBAL FIXES --- */
  /* G1: Make sticky header smaller */
  header {
    padding: 0.5rem 0;
  }
  .logo {
    font-size: 1.5rem;
  }

  /* G2: Fix stacked logo and hamburger button */
  header nav {
    flex-direction: row; /* Ensure they are side-by-side */
    width: 100%;
  }

  /* J3: Fix journal book appearing on top of mobile menu */
  .journal-main .notebook {
    z-index: 1;
  }
  nav ul.nav-open {
    z-index: 2000; /* Ensure menu is on top of everything */
  }

  /* --- HOME PAGE FIXES --- */
  /* H1: Fix hero text being too wide */
  #hero h1 {
    font-size: 2.8rem;
  }
  #hero p {
    font-size: 1.2rem;
  }

  /* --- PROJECTS PAGE FIXES --- */
  /* P1: Fix AI cards being too small */
  #portfolio-projects .project-card {
    height: auto; /* Allow card height to adjust to content */
    min-height: 380px;
  }
  #portfolio-projects .project-card-container {
    height: auto;
  }

  /* --- JOURNAL PAGE FIXES --- */
  /* J1 & J2: Fix tiny book and overflowing words */
  .journal-main {
    padding: 1em;
    min-height: calc(100vh - 120px); /* Adjust for smaller header */
  }
  .notebook {
    aspect-ratio: 3 / 4; /* Make it more portrait-oriented */
    width: 100%;
  }
  .page-content {
    padding: 1.5em; /* Reduce padding */
    font-size: 0.9em; /* Reduce font size */
  }
  .cover-design h2 {
    font-size: 1.8em;
  }
  .tap-to-open {
    margin-top: 1em;
    font-size: 1em;
  }

  .menu-toggle {
    display: flex; /* Show the hamburger button */
  }
}

/* --- Journal Entry Content Styles --- */
.page-content pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
    padding: 1em;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    white-space: pre-wrap; /* Allows code to wrap */
}
.page-content code {
    font-family: 'Courier New', Courier, monospace;
}
.journal-list-entry h3 {
    font-size: 1.2rem;
    color: #333;
}

/* --- CSS FIX FOR STACKING ISSUE --- */
@media (max-width: 768px) {
    .project-card-container {
        height: auto; /* Allow height to be determined by content */
        min-height: 400px; /* Set a minimum height to maintain visual consistency */
    }
}