/* COLORS */
/* TYPOGRAPHY */
/* ---- MEDIA QUERIES ----- */
.proccess .proccess-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7rem;
  margin: 9rem 0 0;
  border-top: 1px solid #808080;
}
.proccess .proccess-item {
  position: relative;
  margin-top: -3rem;
}
.proccess .proccess-item:nth-child(1) .icon {
  background-color: #CBDFB2;
}
.proccess .proccess-item:nth-child(2) .icon {
  background-color: #B7D294;
}
.proccess .proccess-item:nth-child(3) .icon {
  background-color: #99BF68;
}
.proccess .proccess-item:nth-child(4) .icon {
  background-color: #8AAC5E;
}
.proccess .proccess-item .icon {
  font-size: 2.5rem;
  font-weight: 600;
  color: #fff;
  background-color: #8FC15A;
  width: 6rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 8px solid #fff;
  text-align: center;
  margin: 0 0 2.5rem -0.8rem;
}
.proccess .proccess-item .proccess-heading {
  line-height: 3rem;
}
.proccess .proccess-item .proccess-text {
  margin: 0.8rem 0 0;
}
.proccess .button-container {
  margin: 5rem 0 0;
  display: flex;
  justify-content: center;
}

@media (max-width: 1270px) {
  .proccess .proccess-list {
    border-top: none;
    border-left: 1px solid #808080;
    grid-template-columns: repeat(1, 1fr);
    padding: 0 0 0 2.8rem;
    margin: 3rem 0 0 3rem;
    gap: 3rem;
  }
  .proccess .proccess-heading {
    width: 80%;
  }
  .proccess .proccess-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.3rem;
    margin: 0 0 0 -4.5rem;
  }
  .proccess .proccess-item .icon {
    font-size: 1.5rem;
    width: 3.4rem;
    height: 3.4rem;
    border: 3px solid #fff;
    margin: 0;
  }
  .proccess .proccess-item .proccess-text {
    width: 100%;
    padding: 0 0 0 4.5rem;
  }
}