:root {
	--swiper-theme-color: oklch(70.5% 0.213 47.604);
	--swiper-pagination-color: oklch(70.5% 0.213 47.604);
	--swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-size: .5rem;
  --swiper-pagination-bullet-width: .5rem;
  --swiper-pagination-bullet-height: .5rem;
  --swiper-pagination-bullet-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: .25rem;
  --swiper-pagination-bullet-vertical-gap: .375rem;
	--swiper-pagination-left: auto;
  --swiper-pagination-right: 0px;
  --swiper-pagination-bottom: 0px;
  --swiper-pagination-top: auto;

	--color-brown: oklch(71.2% 0.042 43.6);
}

.custom-swiper::part(pagination) {
  right: -1.25rem !important;
  bottom: 1px !important;
  left: auto !important;
  top: auto !important;
  position: absolute !important;
	transform: translateX(0%) !important;
	height: 1rem !important;
	padding-top: 1rem !important;
	padding-bottom: 0.5rem !important;
	clip-path: rect(auto 5.75rem auto 1.25rem) !important;
	cursor: default !important;
}

.fade-bottom {
	padding-bottom: 3rem;
  mask-image: linear-gradient(to bottom, black 70%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 98%);
}

@property --bggradientcolor {
  syntax: '<color>';
  inherits: false;
  initial-value: oklch(70.5% 0.213 47.604);
}

@keyframes bggradientcoloranimation {
	0% {
		--bggradientcolor: oklch(70.5% 0.213 47.604);
	}
	5% {
		--bggradientcolor: oklch(70.5% 0.213 47.604);
	}
	25% {
		--bggradientcolor: oklch(90.5% 0.182 98.111);
	}
	30% {
		--bggradientcolor: oklch(90.5% 0.182 98.111);
	}
  50% {
		--bggradientcolor: oklch(82.3% 0.12 346.018);
	}
	55% {
		--bggradientcolor: oklch(82.3% 0.12 346.018);
	}
	75% {
		--bggradientcolor: oklch(87% 0.065 274.039);
	}
	80% {
		--bggradientcolor: oklch(87% 0.065 274.039);
	}
	100% {
		--bggradientcolor: oklch(70.5% 0.213 47.604);
	}
}

.font-inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}