:root {
  --primary-color-light: #FF9933;
  --primary-color: #FF6600;
  --primary-color-dark: #CC4B00;

  --background-grey: #f2f2f2;
  --text-grey: #333;
  --text-light-grey: #808080;

  --text-brown: #3C322A;

  --background-beige: #F4F2EE;

  --error-color: hsl(0, 95%, 45%);
  --error-color-background: hsl(0, 95%, 97%);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-grey)
}

.highlighted {
  color: var(--primary-color);
}

p {
  font-size: 21px;
  line-height: 32px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

h1 {
  font-size: 72px;
  line-height: 80px;
  letter-spacing: -1%;
  font-weight: bold;
}

h2 {
  font-size: 48px;
  line-height: 53px;
  font-weight: bold;
}

h3 {
  font-size: 36px;
  line-height: 40px;
  font-weight: bold;
}

h4 {
  font-size: 28px;
  line-height: 31px;
  font-weight: bold;
}

.standard-section {
  padding-top: 160px;
  padding-bottom: 160px;
  padding-left: 96px;
  padding-right: 96px;
}

@media (max-width: 1024px) {
  .standard-section {
    padding-top: 96px;
    padding-bottom: 96px;
    padding-left: 48px;
    padding-right: 48px;
  }
}

@media (max-width: 768px) {
  .standard-section {
    padding-top: 48px;
    padding-bottom: 48px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

button {
  border: none;
  border-radius: 8px;
  background-color: var(--primary-color);
  color: white;
  cursor: pointer;

  font-family: 'Poppins', sans-serif;
  font-weight: bold;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button:hover {
  background-color: var(--primary-color-dark);
}

button:active {
  box-shadow: none;
}

.fade-animation {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-animation.visible {
  opacity: 1;
  transform: translateY(0);
}