* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html {
  /*   *****   Storing Colors In Variables   *****  */
  --body-clr: #f6f9fe;
  --primary-clr: black;
  --primary-light-clr: #eaf3fa;
  --links-clr: black;
  --text-clr: black;
}
body {
  width: 100%;
  min-height: 100vh;
}
.portfolio {
  width: 100%;
  padding: 30px 8%;
  background-color: var(--body-clr);
}
.portfolio .section-head {
  max-width: 700px;
  margin: 0px auto 25px;
  text-align: center;
}
.section-head h1 {
  position: relative;
  font-size: 32px;
  margin: 10px 0px 30px;
  color: var(--primary-clr);
}
/* --- 1. THE CONTAINER (Sticky Bar) --- */
.button-group {
  /* Make it stick below the navbar */
  position: sticky;
  top: 70px; /* Adjust this number to match your Navbar height */
  z-index: 900; /* Stays on top of images */

  /* Glassmorphism Effect (Modern Blur) */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #eaeaea;

  /* Layout & Spacing */
  padding: 12px 15px;
  margin-bottom: 20px;

  /* HORIZONTAL SCROLLING LOGIC */
  display: flex;
  flex-wrap: nowrap; /* Forces one single line */
  gap: 10px; /* Space between buttons */
  overflow-x: auto; /* Allows swiping on mobile */
  -webkit-overflow-scrolling: touch; /* Smooth swipe on iPhone */

  /* Center buttons on Desktop, Start on Mobile */
  justify-content: flex-start;
}

/* Desktop Adjustment: Center the buttons if screen is wide */
@media (min-width: 768px) {
  .button-group {
    justify-content: center;
  }
}

/* --- 1. THE CONTAINER (Liquid Glass Sticky Bar) --- */
.button-group {
  /* STICKY POSITIONING */
  position: sticky;
  /* Adjust this value to match your exact Navbar height */
  top: 56px;
  z-index: 900;

  /* LIQUID GLASS EFFECT */
  /* 1. Very see-through white background */
  background: rgba(255, 255, 255, 0.25);

  /* 2. Strong blur to distort the images passing underneath */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* For Safari/iPhone */

  /* 3. Subtle white border to define the edges like glass */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft shadow to lift it off the page */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  /* LAYOUT & SPACING */
  padding: 15px 10px;
  margin-bottom: 50px;

  /* HORIZONTAL SCROLL (Mobile Swipe) */
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* ALIGNMENT */
  justify-content: flex-start; /* Start on mobile */
}

/* Desktop: Center the buttons */
@media (min-width: 768px) {
  .button-group {
    justify-content: center;
  }
}

/* Hide scrollbar */
.button-group::-webkit-scrollbar {
  display: none;
}
.button-group {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- 2. THE BUTTONS (Pill Design) --- */
.button {
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.6); /* Semi-transparent border */
  padding: 8px 24px;
  flex: 0 0 auto;

  /* Slight transparency on buttons too for the 'liquid' feel */
  background: rgba(255, 255, 255, 0.7);
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.button:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Active State */
.button.active {
  background-color: #198754; /* Success Green */
  color: white;
  border-color: #198754;
  box-shadow: 0 4px 15px rgba(25, 135, 84, 0.4); /* Green Glow */
  opacity: 1; /* Fully solid when active */
}

div.gallery-page {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
div.gallery-page .item {
  position: relative;
  margin: 4px;
  width: calc(33.33% - 8px);
  overflow: hidden;
  cursor: pointer;
}
.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.3s;
  aspect-ratio: 4/3;
}

/* div.gallery .item:hover img {
  transform: scale(1.15);
} */
/* .item .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(5, 85, 92, 0.7);
  color: var(--body-clr);
  padding: 15px;
  overflow: hidden;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
} */
/* .item:hover .overlay {
  opacity: 1;
} */
.item .overlay a {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid var(--body-clr);
  color: var(--body-clr);
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}
.item .overlay a:hover {
  background-color: var(--body-clr);
  color: var(--primary-clr);
}

@media (max-width: 1024px) {
  div.gallery-page .item {
    width: calc(50% - 8px);
  }
}

@media (max-width: 600px) {
  div.gallery-page .item {
    width: 100%;
    margin: 4px 0px;
  }
}

/* LIGHTBOX FIX */
/* Makes sure the link fills the entire grid item area */
.item a.glightbox {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ensures the image inside fits perfectly */
.item a.glightbox img {
  width: 100%;
  height: auto;
  display: block; /* Removes tiny gap at bottom of images */
}