@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


:root {

  /* font family */
  --ff-heading: "Inter", serif;
  --ff-extra: "Afacad", sans-serif;
  --ff-cursive: "Playfair Display", serif;
  --ff-body: "Manrope", sans-serif;

  /* font weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-semi-extra-bold: 800;
  --fw-extra-bold: 900;

  /* color */
  --clr-gray-lighter: #888680;
  --clr-gray-dark: #302f2c;
  --clr-gray-light: #3f4816;
  --clr-dark: #0D0D0D;
  --clr-text: #1a1c1b;
  --clr-text-light: rgba(255, 255, 255, .8);
  --clr-muted: #d3d3d3;
  --clr-white: #fff;
  --clr-accent-500: #ff5e1f;
  --clr-accent-400: #ff7737;
  --clr-accent-300: #ffa870;

  --clr-dark-rgb: 18, 18, 18;

  /* font size */
  --fs-1: clamp(0.95rem, 0.9324rem + 0.0751vw, 1rem);
  --fs-2: clamp(1.1rem, 1.0718rem + 0.1202vw, 1.18rem);
  --fs-3: clamp(1.25rem, 1.1796rem + 0.3005vw, 1.45rem);
  --fs-4: clamp(1.4rem, 1.2768rem + 0.5258vw, 1.75rem);
  --fs-5: clamp(1.65rem, 1.5268rem + 0.5258vw, 2rem);


  /* Padding */
  --pd-s: 1rem;
  --pd-1: 1.5rem;
  --pd-2: 2rem;
  --pd-3: 2.5rem;
  --pd-4: 3rem;
  --pd-5: 3.5rem;
  --pd-6: 4rem;
  --pd-7: 4.5rem;


  /* border radius */
  --br-s: .5rem;
  --br-1: 1rem;
  --br-2: 1.5rem;
  --br-3: 2rem;
  --br-4: 2.5rem;
  --br-5: 3rem;


  /* gap */
  --gap-s: .5rem;
  --gap-1: 1rem;
  --gap-2: 1.5rem;
  --gap-3: 2rem;
  --gap-4: 2.5rem;
  --gap-5: 3rem;
  --gap-6: 3.5rem;
  --gap-7: 4rem;


  /* Transition */
  --transition-1: all .35s ease;
  --transition-2: all .45s ease;
  --transition-3: all .55s ease;
}



/* ### LAZY LOADING ### */

/* Image Container Styles */
.image-wrapper {
  position: relative;
  overflow: hidden;
  background-color: #f8f9fa;
  width: 100%;
  height: 100%;
}

/* Instagram-style Shimmer Placeholder */
.image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 40%, #e0e0e0 50%, #f0f0f0 60%, #f0f0f0 100%);
  background-size: 200% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 1;
  transition: opacity .4s ease;
}

/* Shimmer overlay effect */
.shimmer-overlay {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .7) 50%,
      transparent 100%);
  animation: shimmer 1.8s infinite ease-in-out;
  transform: skewX(-15deg);
}

/* Shimmer animation */
@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* Lazy Image Styles */
.lazy-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease-in-out, transform .3s ease-out;
  position: relative;
  z-index: 1;
  transform: scale(1.05);
}

/* Image Loaded State */
.lazy-image.loaded {
  opacity: 1;
  transform: scale(1);
}

/* Hide placeholder when image is loaded */
.image-wrapper.loaded .image-placeholder {
  opacity: 0;
  pointer-events: none;
}

/* Fade-in animation for images coming into view */
.lazy-image.fade-in {
  animation: fadeInUp .6s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(1.02);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Error state */
.lazy-image.error {
  opacity: 1;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 14px;
  transform: scale(1);
}

.lazy-image.error::after {
  content: "Image not loaded";
}



/* Global Styles */

body {
  color: var(--clr-text);
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: .95rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.heading-highlight {
  color: rgba(255, 255, 255, .9);
  font-family: var(--ff-cursive);
  font-style: italic;
}

.heading-highlight-dark {
  color: var(--clr-text);
  font-family: var(--ff-cursive);
  font-style: italic;
}

/* Button Styles */
.btn-primary-light {
  background: var(--clr-white);
  /* border: 1px solid var(--clr-white); */
  border-radius: var(--br-s);
  color: var(--clr-text);
  padding: .7rem 1.2rem;
  /* font-size: clamp(0.8rem, 0.7648rem + 0.1502vw, 0.9rem); */
  font-weight: var(--fw-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  transition: var(--transition-1);
}

.btn-primary-light:is(:hover, :focus, :active) {
  background: rgba(255 255 255 / .9);
  color: var(--clr-text);
}

.btn-primary-light i {
  color: var(--clr-text);
  transition: var(--transition-1);
}

.btn-primary-light:is(:hover, :focus, :active) i {
  color: var(--clr-text);
  transform: translate(5px);
}

.btn-secondary-light {
  background-color: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255 255 255 / .25);
  border-radius: var(--br-s);
  color: var(--clr-white);
  padding: .7rem 1.2rem;
  /* font-size: clamp(0.8rem, 0.7648rem + 0.1502vw, 0.9rem); */
  font-weight: var(--fw-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  transition: var(--transition-1);
}

.btn-secondary-light:is(:hover, :focus, :active) {
  background-color: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255 255 255 / .3);
}

.scroll-up-btn {
  position: fixed;
  bottom: 12rem;
  right: 1rem;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background-color: #141414;
  border: 1px solid rgba(255 255 255 / .02);
  box-shadow: 0 .5rem 1rem rgba(0 0 0 / .3);
  color: var(--clr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
  z-index: 10;
}

.scroll-up-btn:is(:hover, :focus, :active) {
  background-color: var(--clr-dark);
}

.scroll-up-btn.show-scroll {
  opacity: 1;
  visibility: visible;
}

.scroll-up-btn i {
  color: var(--clr-white);
  font-size: 1.3rem;
  animation: scroll-up 1.8s infinite;
}

@keyframes scroll-up {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  50% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-.7rem);
    opacity: 0;
  }
}