/*=========================================================
  IBA PROCESS STEPS
=========================================================*/

.iba-process-steps {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 70px 0;

    background: #f8fbfa;
}


/*=========================================================
  CONTAINER
=========================================================*/

.iba-process-container {
    width: 90%;
    max-width: 1200px;

    margin: 0 auto;
}


/*=========================================================
  HEADING
=========================================================*/

.iba-process-heading {
    max-width: 820px;

    margin: 0 auto 42px;

    text-align: center;
}


.iba-process-heading h2 {
    margin: 0 0 10px 0;
}


.iba-process-heading p {
    margin: 0;

    color: #56626b;
}


/*=========================================================
  PROCESS LIST
=========================================================*/

.iba-process-list {
    position: relative;
}


/*=========================================================
  INDIVIDUAL PROCESS ITEM
=========================================================*/

.iba-process-item {
    position: relative;

    display: grid;

    grid-template-columns: 84px minmax(0, 1fr);

    gap: 22px;

    align-items: start;

    margin-bottom: 34px;
}


/*=========================================================
  CONNECTING VERTICAL LINE
=========================================================*/

.iba-process-item::before {
    content: "";

    position: absolute;

    left: 41px;
    top: 52px;
    bottom: -34px;

    width: 2px;

    background: #28c95a;

    z-index: 0;
}


.iba-process-item:last-child::before {
    display: none;
}


/*=========================================================
  STEP NUMBER MARKER
=========================================================*/

.iba-process-marker {
    position: relative;

    z-index: 2;

    display: flex;
    justify-content: center;

    padding-top: 16px;
}


/*=========================================================
  ROUNDED STEP CIRCLE
=========================================================*/

.iba-process-marker span {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #18d85f 0%,
        #74ca3b 100%
    );

    border: 2px solid #ffffff;

    color: #ffffff;

    font-size: 17px;
    line-height: 1;

    font-weight: 700;

    box-shadow:
        0 0 0 1px rgba(40, 200, 90, 0.20),
        0 8px 22px rgba(40, 200, 90, 0.25);
}


/*=========================================================
  CONTENT CARD
=========================================================*/

.iba-process-card {
    padding: 28px 32px;

    background: #ffffff;

    border: 1px solid #dfe7e4;

    border-radius: 17px;

    box-shadow:
        0 4px 16px
        rgba(20, 35, 50, 0.035);
}


/*=========================================================
  CARD HEADER
=========================================================*/

.iba-process-card-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;
}


.iba-process-card h3 {
    margin: 0 0 14px 0;

    color: #162432;
}


/*=========================================================
  BADGE
=========================================================*/

.iba-process-badge {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 14px;

    border-radius: 999px;

    background: #effcf4;

    border: 1px solid #abe9bf;

    color: #0caf43;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 700;
}


/*=========================================================
  BODY TEXT
=========================================================*/

.iba-process-text {
    margin: 0 0 18px 0;

    color: #4a5863;
}


/*=========================================================
  TAGS
=========================================================*/

.iba-process-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.iba-process-tags span {
    display: inline-flex;

    align-items: center;

    padding: 7px 12px;

    border-radius: 6px;

    background: #effcf4;

    border: 1px solid #b9ecc9;

    color: #0cac42;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 600;
}


/*=========================================================
  HOVER
=========================================================*/

.iba-process-card {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.iba-process-card:hover {
    transform: translateY(-2px);

    border-color: #cadbd4;

    box-shadow:
        0 10px 26px
        rgba(20, 35, 50, 0.07);
}


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

@media (max-width: 900px) {

    .iba-process-steps {
        padding: 60px 0;
    }


    .iba-process-item {
        grid-template-columns: 74px minmax(0, 1fr);

        gap: 18px;
    }


    .iba-process-item::before {
        left: 36px;
    }


    .iba-process-card {
        padding: 25px 26px;
    }

}


/*=========================================================
  MOBILE
=========================================================*/

@media (max-width: 700px) {

    .iba-process-steps {
        padding: 48px 0;
    }


    .iba-process-container {
        width: 90%;
    }


    .iba-process-heading {
        margin-bottom: 32px;

        text-align: left;
    }


    .iba-process-item {
        grid-template-columns: 54px minmax(0, 1fr);

        gap: 14px;

        margin-bottom: 26px;
    }


    .iba-process-item::before {
        left: 26px;

        top: 48px;

        bottom: -26px;
    }


    .iba-process-marker {
        padding-top: 12px;
    }


    .iba-process-marker span {
        width: 42px;
        height: 42px;

        font-size: 15px;
    }


    .iba-process-card {
        padding: 22px 20px;

        border-radius: 14px;
    }


    .iba-process-card-top {
        display: block;
    }


    .iba-process-badge {
        margin-bottom: 14px;
    }


    .iba-process-card h3 {
        margin-bottom: 10px;
    }

}


/*=========================================================
  SMALL MOBILE
=========================================================*/

@media (max-width: 420px) {

    .iba-process-item {
        grid-template-columns: 48px minmax(0, 1fr);

        gap: 10px;
    }


    .iba-process-item::before {
        left: 23px;
    }


    .iba-process-marker span {
        width: 38px;
        height: 38px;

        font-size: 14px;
    }


    .iba-process-card {
        padding: 20px 17px;
    }


    .iba-process-tags span {
        font-size: 12px;
    }

}