:root {
  /* Layouts */
  --full-width: 1440px;
  --boxed-width: 1000px;

  /* Colors */
  --white: #ffffff;
  --black: #000000;
  --primary-green: #6a9576;
  --primary-teal: #4f797f;
  --primary-coral: #d17775;
  --default-text: #434343;
  --light: #f2f1e3;
  --light-shade-1: #eae4d9;
  --sec-green-shade-1: #8eb894;
  --sec-green-shade-2: #c0d5bc;
  --sec-teal-shade-1: #bd5858;
  --back-green: #d3e0d6;
  --back-red: #f2d7d6;

  /* Gradients */
  --bg-gradient1: linear-gradient(
    270deg,
    #fff4c7 0%,
    #fff8dc 50%,
    #fff4c7 100%
  );

  /* Breakpoints */
  --mobile: 440px;
  --tablet: 1100px;

  --clip: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
}

html {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
a,
li {
  color: var(--white);
  margin: 0;
}

.fade-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
/* when element is visible */
.fade-element.show {
  opacity: 1;
  transform: translateY(0);
}