/* =========================================================
   MPR LISTING PROCESS
   ========================================================= */

.mpr-process-section {
  margin: 14px 0;
  padding: 14px;
  background: var(--light-background-color5);
  border-top: 3px solid var(--mp-blue);
  border-bottom: 1px solid #d8e4ec;
}

.mpr-process-section h2.mpr-section-heading {
  margin-top: 0;
}

.mpr-process-wrapper {
  max-width: 1180px;
  margin: 0 auto;
}


/* =========================================================
   PROCESS GRID
   ========================================================= */

.mpr-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 2rem;
}


/* =========================================================
   PROCESS STEP
   ========================================================= */

.mpr-process-step {
  position: relative;
  text-align: center;
  padding: 4px 10px;
}

.mpr-process-step h3 {
  margin: 12px 0 8px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0b3f5c;
}

.mpr-process-step p {
  margin: 0;
  color: #000;
  font-size: 1.5rem;
  line-height: 1.5;
}


/* =========================================================
   PROCESS ICONS
   ========================================================= */

.mpr-process-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 60px;
  height: 60px;
  margin: 0 auto;

  border-radius: 50%;
  background: #00aeef;
  color: #ffffff;
  font-size: 0;
}

.mpr-process-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
}

/* =========================================================
List With Us / Seller Process Icons
========================================================= */

/* Prepare & Price */
.mpr-process-icon--prepare::before {
  content: "\f201";
}


/* Market & Show */
.mpr-process-icon--market::before {
  content: "\f0a1";
}


/* Review & Negotiate */
.mpr-process-icon--negotiate::before {
  content: "\f2b5";
}


/* Contract & Close */
.mpr-process-icon--close::before {
  content: "\f56f";
}

/* =========================================================
Property Valuation Process Icons
========================================================= */

/* Submit Property Information */
.mpr-process-icon--submit::before {
    content: "\f15c"; /* fa-file-lines */
}


/* Review Property & Market */
.mpr-process-icon--review::before {
    content: "\f201"; /* fa-chart-line */
}


/* Additional Information */
.mpr-process-icon--follow-up::before {
    content: "\f086"; /* fa-comments */
}


/* Receive Your Valuation */
.mpr-process-icon--valuation::before {
    content: "\f058"; /* fa-circle-check */
}


/* =========================================================
   CONNECTING LINE - DESKTOP
   ========================================================= */

@media (min-width: 901px) {

  .mpr-process-step:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 34px;
    left: calc(50% + 50px);

    width: calc(100% - 76px);
    height: 1px;

    background: #b9cedc;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .mpr-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 520px) {

  .mpr-process-section {
    padding: 22px 14px;
  }

  .mpr-process-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mpr-process-step {
    padding: 0;
  }
}