:root {
  /* Solid Colors */
  --color-primary-1: #a2d686;
  --color-primary-2: #779a64;
  --color-primary-3: #506d40;

  --color-light-1: #f8fcff;
  --color-light-2: #fffff6;
  --color-light-3: #efedd2;

  /* Gradient Colors */
  --color-primary-gradient: linear-gradient(to left, #4f6c40, #89b573);
  --color-primary-gradient-up: linear-gradient(to top, #4f6c40, #89b573);
  --color-background-gradient-down: linear-gradient(
    to bottom,
    #f8fcff,
    #fafeffd6 63%,
    #d9d9d900 100%
  );

  --color-background-gradient-up: linear-gradient(
    to top,
    #313c2fc9 8%,
    #656d6485 30%,
    #c9c9c900 55%
  );

  --color-background-gradient-up-mobile: linear-gradient(
    to top,
    #313c2fc9 5%,
    #656d646a 20%,
    #c9c9c900 35%
  );

  /* Typography */
  font-size: 100%;
  --font-family: 'Assistant', sans-serif;

  /* Shapes and Borders */
  --border-radius: 0.75rem;

  /* Layout */
  --wrapper-max: 75rem;
  --wrapper-pad: clamp(2rem, 5vw, 12rem);

  /* Animations */
  --animation-duration: 600ms;
  --animation-delay: 200ms;
  --animation-timing-funtion: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-fade-in: fade-in var(--animation-duration) ease-in-out backwards;
}

@font-face {
  font-family: 'Assistant';
  font-weight: 400; /* Regular */
  font-style: normal;
  src: url('../fonts/Assistant-Regular.woff2') format('woff2'),
    url('../fonts/Assistant-Regular.woff') format('woff'),
    url('../fonts/Assistant-Regular.eot') format('eot');
}

@font-face {
  font-family: 'Assistant';
  font-weight: 600; /* Semi Bold */
  font-style: normal;
  src: url('../fonts/Assistant-SemiBold.woff2') format('woff2'),
    url('../fonts/Assistant-SemiBold.woff') format('woff'),
    url('../fonts/Assistant-SemiBold.eot') format('eot');
}

@font-face {
  font-family: 'Assistant';
  font-weight: 800; /* Extra Bold */
  font-style: normal;
  src: url('../fonts/Assistant-ExtraBold.woff2') format('woff2'),
    url('../fonts/Assistant-ExtraBold.woff') format('woff'),
    url('../fonts/Assistant-ExtraBold.eot') format('eot');
}

/* ========== */
/* Components */
/* ========== */

.btn {
  display: flex;
  justify-content: center;
  gap: 0.5em;

  text-align: center;
  text-decoration: none;

  padding: clamp(0.6em, 2vw, 1rem) clamp(2em, 2vw, 3rem);
  border-radius: var(--border-radius);
  border: none;
}

.btn-icon {
  width: 1em;
  display: inline-block;
  vertical-align: -0.15em;
}

.btn-primary,
.btn-secondary {
  font-size: 1.15em;
  font-weight: 800;
}

.btn-primary {
  color: var(--color-light-1);
  background-image: var(--color-primary-gradient);

  box-shadow: 0 0 clamp(1rem, 2vw, 3rem) var(--color-primary-2);
}

.btn-secondary {
  color: var(--color-light-1);
  background-color: var(--color-primary-2);
}

/* ====== */
/* Global */
/* ====== */

body {
  font-family: var(--font-family);
}

h1 {
  text-align: center;

  background-image: var(--color-primary-gradient-up);
  background-size: 100%;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.wrapper {
  width: min(100% - (2 * var(--wrapper-pad)), var(--wrapper-max));
  margin-inline: auto;
}

/* ============ */
/* Hero Section */
/* ============ */

.hero {
  height: 100svh;

  background-image: var(--color-background-gradient-down),
    url('../images/hero-main-desktop.avif');

  background-size: cover;
  background-position: center;
}

.hero-logo {
  width: 100%;

  display: flex;
  justify-content: center;

  padding: clamp(2rem, 5%, 4rem) 0 clamp(1rem, 5%, 1.5rem);
}

.hero-logo__img {
  width: clamp(5rem, 10%, 6.5rem);
}

.hero-heading {
  font-size: clamp(2rem, 10vw, 8.5rem);
  text-wrap: nowrap;
  line-height: 1.1;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-image: var(--color-background-gradient-up),
    url('../images/hero-main-cut-desktop.webp');

  background-size: cover;
  background-position: center;

  pointer-events: none;
}

.hero-btn-features-group {
  width: min(100% - (2 * var(--wrapper-pad)), var(--wrapper-max));
  margin-inline: auto;

  position: absolute;
  bottom: clamp(2rem, 5vw, 12rem);

  display: flex;
  flex-direction: column;
  gap: 2.25rem;

  font-size: clamp(1rem, 2vw, 1.25rem);
}

.hero-btn-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.hero-btn-group--mobile {
  display: none;
}

.hero-btn-group--mobile .btn {
  width: 100%;
}

.hero-features-group {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.5rem, 2vw, 3.5em);

  color: var(--color-light-3);
}

.hero-feature {
  display: flex;
  flex-basis: 33%;
  justify-content: center;
  gap: clamp(0.75em, 1.5vw, 1.75em);

  text-wrap: nowrap;
  padding: clamp(0.5rem, 2vw, 2rem);
}

.hero-feature--mobile {
  display: none;
}

.hero-feature-heading {
  font-size: clamp(0.85em, 2vw, 1.25em);
  margin-bottom: 0.35rem;
}

.hero-feature-description {
  font-size: clamp(0.9em, 2vw, 1em);
  opacity: 0.75;
}

.hero-feature-icon {
  width: clamp(1em, 2vw, 1.25em);
}

#hero-feature-icon-check-tag {
  width: clamp(1.25em, 2vw, 1.75em);
}

#hero-feature-icon-israel-ministry-of-environment {
  width: clamp(2.65em, 2vw, 3.5em);
}

.hero-feature-separator {
  width: 1em;
  opacity: 0.65;
}

/* Hero Section Animations */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero,
.hero-logo,
.hero-heading,
.hero-btn-group,
.hero-features-group {
  animation: var(--animation-fade-in);
}

.hero-logo {
  animation-delay: calc(var(--animation-delay) * 1);
}
.hero-heading {
  animation-delay: calc(var(--animation-delay) * 2);
}
.hero-btn-group {
  animation-delay: calc(var(--animation-delay) * 3);
}
.hero-features-group {
  animation-delay: calc(var(--animation-delay) * 4);
}

/* Hero Section Responsiveness */

@media screen and (max-width: 1280px) {
  .hero-feature {
    flex-direction: column;
    align-items: center;

    text-align: center;
    text-wrap: balance;
  }
}

@media screen and (max-width: 768px) {
  .hero {
    background-image: var(--color-background-gradient-down),
      url('../images/hero-main-mobile.avif');

    background-position-y: bottom;
  }

  .hero-heading {
    margin-bottom: 0.8em;
  }

  .hero-background {
    background-image: var(--color-background-gradient-up),
      url('../images/hero-main-cut-mobile.webp');

    background-position-y: bottom;
  }

  .hero-feature--desktop {
    display: none;
  }

  .hero-feature--mobile {
    display: flex;
  }
}

@media screen and (max-width: 600px) {
  .hero-btn-group--desktop {
    display: none;
  }
  .hero-btn-group--mobile {
    display: flex;
  }

  .hero-background {
    background-image: var(--color-background-gradient-up-mobile),
      url('../images/hero-main-cut-mobile.webp');

    background-position-y: bottom;
  }
}

@media screen and (max-width: 460px) {
  .hero-feature-description {
    display: none;
  }
}