.soil-bg {
  background: radial-gradient(
      circle at top left,
      rgba(255, 219, 14, 0.9) 11%,
      rgba(255, 255, 255, 0) 14%
    ),
    radial-gradient(
      ellipse 1200px 400px at top 70px right 12%,
      rgba(255, 255, 255, 1) 5%,
      rgba(216, 246, 255, 0) 6%
    ),
    radial-gradient(
      ellipse 1200px 400px at top 70px right 23%,
      rgba(255, 255, 255, 1) 5%,
      rgba(216, 246, 255, 0) 6%
    ),
    radial-gradient(
      ellipse 1000px 400px at top 80px right 17%,
      rgba(255, 255, 255, 1) 5%,
      rgba(216, 246, 255, 0) 6%
    ),
    radial-gradient(
      ellipse 1200px 400px at top 50px right 15%,
      rgba(255, 255, 255, 1) 5%,
      rgba(216, 246, 255, 0) 6%
    ),
    linear-gradient(
      180deg,
      rgba(216, 236, 255, 0.8) 0 65%,
      rgba(193, 155, 107, 0.8),
      rgba(89, 39, 32, 0.8) 70% 100%
    );
  width: 100%;
  height: 400px;
}

.text-red {
  background-image: linear-gradient(
    90deg,
    rgba(72, 6, 7, 0.8),
    rgba(255, 0, 0, 0.8)
  );
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.text-green {
  background-image: linear-gradient(
    90deg,
    rgba(0, 66, 37, 0.8),
    rgba(0, 255, 0, 0.8)
  );
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.text-blue {
  background-image: linear-gradient(
    90deg,
    rgba(150, 0, 109, 0.8),
    rgba(0, 0, 255, 0.8)
  );
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.text-yellow {
  background-image: linear-gradient(
    90deg,
    rgba(204, 85, 0, 0.8),
    rgba(215, 215, 0, 0.8)
  );
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.font-api {
  font-size: 60px;
  font-weight: bold;
  font-family: "MuseoModerno", sans-serif;
}

.div-api {
  margin-top: 90px;
  padding-right: 0px;
  text-align: right;
}

.font-customizations {
  font-size: 40px;
  font-family: "Workbench", sans-serif;
  font-optical-sizing: auto;
  font-weight: 550;
}

.div-customizations {
  margin-top: 140px;
  margin-left: -40px;
  text-align: left;
}

.font-apps {
  font-family: "Caveat", cursive;
  font-size: 56px;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.div-apps {
  margin-top: -35px;
  padding-right: 25px;
  text-align: right;
}

.font-integrations {
  font-size: 40px;
  font-weight: bold;
  font-style: normal;
  font-family: "Sansita Swashed", system-ui;
}

.div-integrations {
  margin-top: 0px;
  margin-left: -50px;
  text-align: left;
}