::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--gold-color);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--gold-color);
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-moz-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

:root {
  --main-bg-color: #111;
  --ligth-bg-color: #f0f6f6;
  --ligth-text-color: #eff5f5;
  --dark-text-color: #5d6b6b;
  --border-radius: 12px;
  --pink-color: #f7cbca;
  --gold-color: #bda000;
}

body {
  font-family: "Nunito", sans-serif;
  letter-spacing: 0.01em;
  font-size: 16px;
  line-height: 1.2;
  background-color: var(--ligth-bg-color);
  color: var(--dark-text-color);
}
h1,
h2,
h3,
h4,
h5 {
  font-family: "Montserrat", sans-serif;
}

#container {
  max-width: 1650px;
  padding: 0 20px;
  margin-inline: auto;
}

.main-button {
  text-decoration: none;
  padding: 15px 20px;
  width: fit-content;
  background-color: var(--ligth-bg-color);
  border-radius: var(--border-radius);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
  color: var(--dark-text-color);
  cursor: pointer;
  transition: 0.2s all linear;
  -webkit-transition: 0.2s all linear;
  -moz-transition: 0.2s all linear;
  -ms-transition: 0.2s all linear;
  -o-transition: 0.2s all linear;
  &&:hover {
    transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
  }
}

/*   НАСТРОЙКА SCROLL-BAR   */
::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--gold-color);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--gold-color);
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger children delay */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.5s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 0.6s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 0.7s; }

/*   стили для темной темы   */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--ligth-bg-color);
  }
}

/*  убрать hover-еффект для мобильной версии  */
/* -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);  */