@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
	--white: #fff;
	--light-grey: #f2f8f8;
	--medium-light-grey: #d6e1e6;
	--medium-grey: #c2cfd6;
	--dark-grey: #5c6a70;
	--dark: #192023;
	--accent-green: #1bf08c;
	--accent-yellow: #ffc847;
	--light-teal: #d8fffc;
	--light-green: #b9ffcd;
	--medium-light-green: #8be4ae;
	--medium-green: #309d70;
	--medium-dark-green: #015e49;
	--dark-green: #02372b;
}

:root {
	--font-family: "Figtree", sans-serif;
}
html {
  scroll-behavior: smooth;
}
.animate {
	opacity: 0;         
  transform: translate(0, 0);
  visibility: hidden;
}

.from-right {
	transform: translateX(50px);
}

.from-left {
	transform: translateX(-50px);
}

.from-top {
	transform: translateY(-50px);
}

.from-bottom {
	transform: translateY(50px);
}

.fade-in {
	transform: none;
}
#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.7s ease; /* плавний перехід */
}

/* Коли сторінка готова */
#preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Щоб контент не мигав */
body {
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.loaded {
  opacity: 1;
}