@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;900&family=Karla&display=swap");

.text-7xl {
  font-size: 5rem;
}
.text-8xl {
  font-size: 6rem;
}
.text-9xl {
  font-size: 7rem;
}
.text-10xl {
  font-size: 8rem;
}
.text-11xl {
  font-size: 9rem;
}
.text-12xl {
  font-size: 10rem;
}

.h-96 {
  height: 48rem;
}

.w-96 {
  width: 48rem;
}

.bg-color1 {
  background-color: hsl(137, 53.5%, 80.6%);
}
.bg-color1b {
  background-color: hsl(137, 53.5%, 94.4%);
}
.bg-color1b2 {
  background-color: hsl(137, 53.5%, 97.9%);
}
.bg-color1c {
  background-color: hsl(137, 53.5%, 10%);
}
.color1 {
  color: hsl(137, 53.5%, 80.6%);
}
.color1b {
  color: hsl(137, 53.5%, 94.4%);
}
.color1c {
  color: hsl(137, 53.5%, 10%);
}
.border-color1c {
  border-color: hsl(137, 53.5%, 10%);
}

.bg-color2 {
  background-color: hsl(19.3, 100%, 50%);
}
.bg-color2b {
  background-color: hsl(19.3, 100%, 90%);
}
.bg-color2c {
  background-color: hsl(19.3, 100%, 8%);
}
.color2 {
  color: hsl(19.3, 100%, 50%);
}
.color2b {
  color: hsl(19.3, 100%, 90%);
}
.color2c {
  color: hsl(19.3, 100%, 8%);
}

.bg-color3 {
  background-color: hsl(240.3, 100%, 50%);
}
.bg-color3b {
  background-color: hsl(240.3, 100%, 90%);
}
.bg-color3c {
  background-color: hsl(240.3, 100%, 8%);
}
.color3 {
  color: hsl(240.3, 100%, 50%);
}
.color3b {
  color: hsl(240.3, 100%, 90%);
}
.color3c {
  color: hsl(240.3, 100%, 8%);
}

.card-shadow {
  -webkit-box-shadow: 10px 10px 0px 0px hsl(19.3, 100%, 8%);
  -moz-box-shadow: 10px 10px 0px 0px hsl(19.3, 100%, 8%);
  box-shadow: 10px 10px 0px 0px hsl(19.3, 100%, 8%);
}

body {
  background-color: hsl(137, 53.5%, 97.9%);
  font-family: "Karla", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.inter {
  font-family: "Inter", sans-serif;
  /* line-height: 1.2; */
}

.karla {
  font-family: "Karla", sans-serif;
}

.margin-0-auto {
  margin: 0 auto;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-8-1 15:29:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(-150vh);
    transform: translateX(-150vh);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(-150vh);
    transform: translateX(-150vh);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slide-left {
  -webkit-animation: slide-left 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  animation: slide-left 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.animation-delay-1 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.animation-delay-2 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.animation-delay-3 {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.smart-scroll{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.scrolled-down{
   transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
   transform:translateY(0); transition: all 0.3s ease-in-out;
}

@media (min-width: 1024px) {
  .lg\:p-128 {
    padding: 32rem;
  }
}

.top-separator-polygon {
  background-size: cover;
  clip-path: polygon(100% 0, 0 0, 0 32%);
}

.top-separator-polygon-2 {
  background-size: cover;
  clip-path: polygon(100% 32%, 0 0, 100% 0);
}

.initial-letter-homepage::first-letter {
   -webkit-initial-letter: 4;
          initial-letter: 4;
  font-weight: bold;
  /* margin-right: .75em; */
  font-family: "Inter";
  color: hsl(19.3, 100%, 50%);
  font-size: 2em;
}