/* ─── Base Styles ───────────────────────────────────────── */
body {
  background-color: #F8F5F1;
  color: #1A1A1A;
}

/* ─── Global Grid Lines ─────────────────────────────────── */
.grid-lines {
  opacity: 0.15;
}
.grid-line {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ─── Keyframe Animations ───────────────────────────────── */
.marquee-wrapper:hover .marquee-content { animation-play-state: paused; }

@keyframes shimmerMove {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(200%) skewX(-20deg); }
}
.animate-shimmer-effect {
  animation: shimmerMove 3s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-rtl {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* ─── Before/After Slider ───────────────────────────────── */
.before-after-slider { position: relative; overflow: hidden; cursor: ew-resize; user-select: none; touch-action: none; }
.before-img, .after-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.resize-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: white; z-index: 10; pointer-events: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.resize-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #333; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }

/* ─── Portfolio HTML Extracted Styles ───────────────────── */
html {
  scroll-behavior: smooth;
}

.radial-pattern-bg {
  background-image: radial-gradient(#000 1px, transparent 1px);
  background-size: 32px 32px;
}

#colSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #3f3f46;
  border-radius: 4px;
  outline: none;
}

#colSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #881337;
  cursor: pointer;
  box-shadow: 0 0 0 2px #f5f5f5;
  transition: all 0.2s ease;
}

#colSlider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(136, 19, 55, 0.2);
}

#colSlider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #881337;
  cursor: pointer;
  border: none;
}