body {
  font-family: Arial, sans-serif;
  background: url("assets/Background.png") no-repeat center center;
  background-size: 120%; /* zoomed in slightly for depth */
  background-attachment: fixed;
  color: #000000;
  margin: 0;
}

/* Navigation bar */
nav {
  background: silver;   /* solid silver background */
  padding: 10px;
  text-align: center;
}

nav a {
  color: #1E3A8A;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #0d1f5c;
  text-decoration: underline;
}

/* Header layout */
.logo-block {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 40px 0;
  gap: 40px;
}

/* Tech stack image */
.logo-left {
  justify-self: end;
}

.tech-logos {
  max-width: 240px;
  filter: drop-shadow(0 0 10px #3b82f6);
  animation: pulseGlow 3s infinite ease-in-out;
}

@keyframes pulseGlow {
  0% { filter: drop-shadow(0 0 6px #3b82f6); }
  50% { filter: drop-shadow(0 0 14px #60a5fa); }
  100% { filter: drop-shadow(0 0 6px #3b82f6); }
}

/* Center logo */
.logo-area {
  text-align: center;
  justify-self: center;
}

.logo {
  max-width: 700px;
}

/* Tagline under logo */
.logo-area p {
  color: #000;
  text-shadow: 0 0 6px #3b82f6, 0 0 12px #3b82f6;
  font-family: 'Audiowide', sans-serif;
  font-size: 1.1em;
  margin-top: 10px;
}

/* Buttons on the right */
.logo-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-self: start;
}

.logo-buttons button {
  background: #1E3A8A;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 1em;
  font-family: 'Audiowide', sans-serif;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 0 8px #3b82f6;
  transition: transform 0.2s, box-shadow 0.2s;
}

.logo-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px #60a5fa;
}

/* Hero section (index page) */
.hero-header {
  text-align: center;
  margin: 0;
  padding: 20px 20px;
  min-height: 30vh;
  background: rgba(0,0,0,0.6); /* subtle overlay for contrast */
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-header h1 {
  font-family: 'Audiowide', sans-serif;
  font-size: 2.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 0 8px #3b82f6, 0 0 16px #3b82f6;
  margin-bottom: 10px;
}

.hero-header h1::after {
  content: "";
  display: block;
  width: 100px;
  height: 3px;
  background: #1E3A8A;
  margin: 12px auto;
}

.hero-header .subline {
  font-size: 1.2em;
  color: #ccc;
  text-shadow: 0 0 6px #000000, 0 0 12px #000000;
  margin-top: auto;
}

/* 📱 Mobile responsiveness */
@media (max-width: 768px) {
  .logo-block {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }

  .logo-left,
  .logo-buttons,
  .logo-area {
    justify-self: center;
  }

  .logo-buttons {
    flex-direction: row;
    gap: 10px;
  }

  .logo-buttons button {
    padding: 10px 14px;
    font-size: 0.9em;
  }

  .tech-logos {
    max-width: 180px;
  }

  .logo {
    max-width: 250px;
  }

  .hero-header {
    padding: 30px 10px;
  }

  .screenshot-row {
    flex-direction: column;
    text-align: center;
  }

  .screenshot-description {
    text-align: center;
  }
}

/* ========================= */
/* Portfolio page only styles */
/* ========================= */
.portfolio-page .portfolio {
  text-align: center;
  padding: 40px 20px;
  background: url("assets/Background.png") no-repeat center center;
  background-size: 120%;   /* zoomed in slightly */
  background-attachment: fixed;
  color: #fff;
}

/* Black text with blue glow for headings/subline */
.portfolio-page .portfolio h1,
.portfolio-page .portfolio p {
  color: #000;
  text-shadow: 
    0 0 6px #3b82f6,
    0 0 12px #3b82f6,
    0 0 18px #1E3A8A;
  font-family: 'Audiowide', sans-serif;
}

/* Card styling */
.portfolio-page .showcase-card {
  background: rgba(0,0,0,0.6);
  border-radius: 8px;
  padding: 20px;
  margin: 20px auto;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  max-width: 600px;
}

.portfolio-page .showcase-card h2,
.portfolio-page .showcase-card h3 {
  font-family: 'Audiowide', sans-serif;
  margin-bottom: 15px;
  color: #fff;
}

.portfolio-page .showcase-card video,
.portfolio-page .showcase-card img {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
}

/* Two-column layout for screenshots */
.portfolio-page .screenshot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin: 40px 0;
  background: rgba(0,0,0,0.6);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

.portfolio-page .screenshot-media {
  flex: 1;
}

.portfolio-page .screenshot-description {
  flex: 1;
  text-align: left;
}

.portfolio-page .screenshot-description h3 {
  font-family: 'Audiowide', sans-serif;
  margin-bottom: 10px;
  color: #fff;
}

.portfolio-page .screenshot-description p {
  font-size: 1em;
  line-height: 1.5;
  color: #ddd;
}

.portfolio-page .screenshot-media img,
.portfolio-page .screenshot-media video {
  width: 100%;
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
}

/* Footer styling */
footer {
  text-align: center;
  padding: 20px;
  background: #1E3A8A;
  color: #fff;
  margin-top: 40px;
}

footer a {
  color: #fff;
  text-decoration: underline;
}
/* Contact form inputs */
.showcase-card form {
  text-align: left; /* keeps labels aligned to the left */
}

.showcase-card label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #fff;
}

.showcase-card input,
.showcase-card textarea {
  width: 100%;              /* makes all fields the same width */
  box-sizing: border-box;   /* includes padding in width calculation */
  padding: 10px;
  margin-bottom: 15px;      /* consistent spacing between fields */
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  font-size: 1em;
}

.showcase-card button {
  display: inline-block;
  background: #1E3A8A;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 1em;
  font-family: 'Audiowide', sans-serif;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 0 8px #3b82f6;
  transition: transform 0.2s, box-shadow 0.2s;
}

.showcase-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px #60a5fa;
}

/* WhatsApp button */
.showcase-card .btn {
  display: inline-block;
  background: #25D366; /* WhatsApp green */
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-family: 'Audiowide', sans-serif;
  box-shadow: 0 0 8px #3b82f6;
  transition: transform 0.2s, box-shadow 0.2s;
}

.showcase-card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px #60a5fa;
}

/* About page styling */
.portfolio h1 {
  font-size: 2.2em;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 0 6px #3b82f6;
}

.portfolio p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #e5e5e5;
  margin-bottom: 20px;
}

/* Showcase cards */
.showcase-card {
  background: rgba(255, 255, 255, 0.85); /* lighter semi-transparent background */
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
  max-width: 800px;
  box-shadow: 0 0 12px rgba(0,0,0,0.2); /* softer shadow */
}

/* Headings inside cards */
.showcase-card h2,
.showcase-card h3 {
  font-family: 'Audiowide', sans-serif;
  margin-bottom: 15px;
  color: #000; /* black headings */
  text-shadow: none; /* remove glow */
}

/* Paragraphs and list items inside cards */
.showcase-card p,
.showcase-card ul li {
  font-size: 1em;
  line-height: 1.6;
  color: #333; /* dark grey text */
  text-shadow: none; /* no glow */
}

/* Values list bullets */
.showcase-card ul li::before {
  content: "•";
  color: #1E3A8A; /* deep blue bullet */
  position: absolute;
  left: 0;
  font-size: 1.2em;
}