/* General Styles */
body {
  font-family: 'Poppins', sans-serif; /* Override Roboto to match index.html */
  background-color: #f3f4f6;
  color: white;
  margin: 0;
  padding: 0;
}

/* Navigation Bar */
nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  gap: 10px; /* Use smaller gap for small screens */
  justify-content: center; /* Center nav links for small screens */
}

@media (min-width: 768px) {
  nav ul {
    justify-content: flex-end; /* On larger screens, push to the right */
    gap: 20px; /* Restore original gap */
  }
}

nav a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease;
  font-size: 0.9rem; /* Smaller font on small screens */
}

@media (min-width: 768px) {
  nav a {
    font-size: 1rem; /* Restore size on larger screens */
  }
}

/* Sections */
section {
  padding: 60px 15px; /* Reduced default padding */
}

@media (min-width: 768px) {
  section {
    padding: 80px 20px; /* Larger padding on bigger screens */
  }
}

/* Cards */
.shadow-md {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.rounded-lg {
  border-radius: 10px;
}

/* Project Cards */
.project-card {
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
}

/* Contact Form */
input, textarea {
  background: white;
  color: black;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

button {
  background-color: #2563eb;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #1e40af;
}

/* GitHub icon inline with title */
.project-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.875rem; /* equivalent of text-3xl */
  font-weight: 700;
  color: #1f2937; /* adjust if needed for visibility against background */
}

.github-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  color: inherit;
}

.github-link svg {
  fill: currentColor;
  flex-shrink: 0;
  transition: opacity .2s;
}

.github-link:hover svg {
  opacity: .8;
}

/* Floating back-to-projects button */
.floating-back {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #2563eb;
  color: white;
  padding: 12px 18px;
  border-radius: 9999px; /* pill */
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
  transition: transform .2s, background-color .2s;
  z-index: 60;
}
.floating-back:hover {
  background-color: #1e40af;
  transform: translateY(-2px);
}


/* /* ===== Easter Egg Emoji ===== */
/* 
/* .easter-container {
/*   position: relative;
/*   display: inline-block;
/* }
/* 
/* /* IMAGE stays on top */
/* .easter-container img {
/*   position: relative;
/*   z-index: 10;
/* }
/* 
/* /* Emoji */
/* .easter-egg {
/*   position: absolute;
/*   top: 45%;
/*   right: -20px;              /* hidden halfway */
/*   font-size: 30px;
/*   z-index: 1;
/*   cursor: pointer;
/*   opacity: 0.85;
/* 
/*   /* rotation animation ONLY */
/*   animation: wiggle 2.5s infinite ease-in-out;
/*   transition: right 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
/* }
/* 
/* /* Hover = slide out */
/* .easter-egg:hover {
/*   right: -6px;               /* slides outward */
/*   opacity: 1;
/*   transform: scale(1.25);    /* NO rotation here */
/* }
/* 
/* /* Wiggle animation */
/* @keyframes wiggle {
/*   0%   { transform: rotate(-18deg); }
/*   50%  { transform: rotate(-22deg); }
/*   100% { transform: rotate(-18deg); }
/* }