.step-circle {
  background: white;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 10px solid red;
  font-size: 45px;
  font-weight: bold;
}

.border-step-1 {
  border-color: #64bbab;
}

.border-step-2 {
  border-color: #c9b0ff;
}

.border-step-3 {
  border-color: #64bbab;
}

.border-step-4 {
  border-color: #9d5b4c;
}

.border-step-5 {
  border-color: #92331f;
}

.text-step-color {
  color: #c87a60;
}

@media only screen and (min-width: 960px) {
  /* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
  /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
  /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
  /* styles for mobile browsers smaller than 480px; (iPhone) */
  .step-main-div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section-main-title-div {
    padding-top: 50px;
  }
  .section-main-title-div > h1 {
    font-size: 25px !important;
  }
  .step-circle {
    max-width: 20%;
    height: 70px;
    width: 70px;
    font-size: 25px;
    border-width: 5px;
    margin-bottom: 0px !important;
  }
  .step-content-div {
    max-width: 80%;
  }
  .step-title {
    font-size: 25px !important;
    margin-bottom: 5px !important;
  }
  .step-description {
    font-size: 9px !important;
  }
}
@media only screen and (device-width: 768px) {
  /* default iPad screens */
  .step-main-div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section-main-title-div {
    padding-top: 50px;
  }
  .step-circle {
    max-width: 30%;
    height: 100px;
    width: 100px;
    font-size: 30px;
    border-width: 5px;
    margin-bottom: 0px !important;
  }
  .step-content-div {
    max-width: 70%;
  }
  .step-title {
    font-size: 25px !important;
    margin-bottom: 5px !important;
  }
  .step-description {
    font-size: 11px !important;
  }
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* For portrait layouts only */
  .step-main-div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .section-main-title-div {
    padding-top: 50px;
  }
  .step-circle {
    max-width: 30%;
    height: 100px;
    width: 100px;
    font-size: 30px;
    border-width: 5px;
    margin-bottom: 0px !important;
  }
  .step-content-div {
    max-width: 70%;
  }
  .step-title {
    font-size: 25px !important;
    margin-bottom: 5px !important;
  }
  .step-description {
    font-size: 11px !important;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* For landscape layouts only */
}