style.css

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

body {
  background-image: url("freepik-cute-earth-day-nature-general-infographic-202406241559546FRq.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.progress-text {
  font-size: 24px;
  font-weight: 500;
}

.button-section {
  position: relative;
}

.button-section .btn-box {
  position: absolute;
  top: 40%;
  left: 20%;
}

.three-dot {
  margin-top: -38px;
}

.three-dot span {
  font-size: 50px;
  cursor: pointer;
}

.ideal-text {
  font-weight: 600;
  font-size: 30px;
  color: white;
}

.ideal-tree {
  margin-left: 20px;
  background: #79c959;
  padding: 9px 35px;
  border-radius: 5px;
  color: white;
  font-size: 25px;
  font-weight: 500;
}

.form-box {
  position: absolute;
  top: 22%;
  left: 18%;
}

.soil-percentage {
  position: absolute;
  top: 90%;
  left: 27%;
}

.test-text {
  font-size: 22px;
  font-weight: 400;
  max-width: 650px;
}


.big-title {
  position: absolute;
  top: 30%;
  left: 17%;
  font-size: 60px;
}