/* =============================== */
/*        Steps Section            */
/* =============================== */

.steps-section {
    background: var(--bg-color);
    text-align: center;
    padding: calc(var(--padding-white-h) * var(--cfactor)) 20px;
  }

  .steps-section .content-wrapper {
    max-width: calc(var(--cw-full) * var(--cfactor));
    margin: 0 auto;
  }

  .steps-section h1 {
    font-size: calc(var(--headline) * var(--cfactor-f));
    color: var(--primary-color);
    font-weight: normal;
    margin: 0;
  }
  
 .step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    justify-items: center;
    gap: calc(var(--element-gap) * var(--cfactor));
    margin-top: calc(var(--text-gap) * var(--cfactor));
    margin-bottom: calc(var(--button-gap) * var(--cfactor));
  }

  .step-card {
    position: relative;
    width: calc(var(--card-w) * var(--cfactor));
    height: calc(var(--card-h) * var(--cfactor));
    box-sizing: border-box;
    padding: calc(var(--steps-card-padding) * var(--cfactor));
    background-color: var(--primary-color);
    border-radius: var(--element-bora);
    box-shadow: 0 12px 24px var(--shadow-color), 0 6px 10px rgba(0, 0, 0, 0.15);
    text-align: left;
    color: white;
  }

  .step-card h1 {
    color: var(--bg-color);
  }

  .step-card h2 {
    color: var(--bg-color);
    font-size: calc(var(--headline2) * var(--cfactor-f));
  }

  .step-card-icon {
    position: absolute;
    top: 0;
    right: 0;
  }
  
  .step-card img {
    position: absolute;
    top: 2.5%;
    right: 2.5%;
    width: calc(200px *  var(--cfactor));
    height: auto;
  }
  
  .step-card p {
    margin-top: 0;
    color: var(--bg-color);
    font-weight: normal;
    font-size: calc(var(--text2) * var(--cfactor-f));
    line-height: 1.8;
  }

  @media screen and (max-width: 1050px) {
    .steps-section .content-wrapper {
      max-width: 100%;
      padding: 0;
    }
  
    .step-grid {
      grid-template-columns: 1fr;
      gap: calc(var(--element-gap) * var(--cfactor));
    }
  }

  @media screen and (max-width: 430px) {
    .step-card {
      width: calc(260px);
      height: calc(210px);
      padding: calc(var(--steps-card-padding) * var(--cfactor));
    }

    .step-card h2 {
      margin: 5px 0;
    }

    .step-card p {
      line-height: 1.3;
      font-size: 12pt;
      margin: 0;
    }

    .step-card img {
      width: 125px;
    }
  }