/* =====================================================================
   Header Nav
   ===================================================================== */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  color: #1c2b1d;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.875rem;
  right: 0.875rem;
  height: 2px;
  background: #3D5A3E;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover {
  color: #3D5A3E;
}
.nav-link:hover::after {
  transform: scaleX(1);
}
.nav-link.active {
  color: #fff;
  font-weight: 600;
  background: #3D5A3E;
}
.nav-link.active::after {
  display: none;
}

/* =====================================================================
   Mobile Bottom Nav
   ===================================================================== */

/* =====================================================================
   Footer
   ===================================================================== */
.footer-nav-link:hover { color: #7bbf8a !important; }
.footer-social:hover   { background: rgba(61,90,62,0.4) !important; color: #fff !important; border-color: #3D5A3E !important; }

/* =====================================================================
   Portfolio Lightbox
   ===================================================================== */
.portfolio-lightbox-overlay { display: none; }

#lb-main-img { transition: opacity 0.2s ease; }

.lb-thumb:hover { border-color: rgba(61,90,62,0.5) !important; }

#lb-thumbs,
#lb-thumbs-mob {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
#lb-thumbs::-webkit-scrollbar,
#lb-thumbs-mob::-webkit-scrollbar { height: 4px; }
#lb-thumbs::-webkit-scrollbar-thumb,
#lb-thumbs-mob::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

/* =====================================================================
   Contact Form
   ===================================================================== */
.cf-input {
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.cf-input:focus {
  border-color: #3D5A3E;
  box-shadow: 0 0 0 2px rgba(61,90,62,0.08);
  outline: none;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}
.animate-spin { animation: cf-spin 1s linear infinite; }