.unividya-journey {
    --navy: #071b36;
    --orange: #ff7000;
    --yellow: #ffb51b;
    --muted: #77869a;

    position: relative;
    overflow: hidden;

    width: 100%;

    padding: 50px 30px 84px;

    background: #ffffff;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


.unividya-journey * {
    box-sizing: border-box;
}


.uj-container {
    position: relative;

    z-index: 2;

    max-width: 1510px;

    margin: auto;
}


/* HEADING */

.uj-heading {
    text-align: center;

    margin-bottom: 47px;
}


.uj-eyebrow {
    color: var(--orange);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .24em;

    margin-bottom: 12px;
}


.uj-heading h2 {
    margin: 0;

    color: var(--navy);

    font-size: 58px;

    line-height: 1.04;

    letter-spacing: -.04em;

    font-weight: 800;
}


.uj-heading h2 span {
    color: var(--orange);
}


.uj-heading p {
    margin: 17px 0 0;

    color: #7d899a;

    font-size: 18px;

    line-height: 1.45;
}


/* JOURNEY */

.uj-journey {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 20px;

    position: relative;
}


.uj-step {
    position: relative;

    text-align: center;

    min-width: 0;
}


/* ICON AREA */

.uj-visual {
    width: 170px;

    height: 170px;

    margin: 0 auto 17px;

    position: relative;

    display: grid;

    place-items: center;
}


/* DOTTED CIRCLE */

.uj-dashed {
    position: absolute;

    inset: 6px;

    border:
        1.5px dashed
        #dce5ef;

    border-radius: 50%;
}


/* ICON */

.uj-icon {
    position: relative;

    z-index: 2;

    width: 84px;

    height: 84px;

    display: grid;

    place-items: center;
}


.uj-icon svg {
    width: 72px;

    height: 72px;

    fill: none;

    stroke: #1768bd;

    stroke-width: 3.2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.uj-step:nth-child(even)
.uj-icon svg {
    stroke: var(--orange);
}


/* NUMBER */

.uj-number {
    position: absolute;

    z-index: 5;

    right: 4px;

    top: -2px;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: var(--orange);

    color: #fff;

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 6px 16px
        rgba(255,113,0,.16);
}


/* ARC */

.uj-arc {
    position: absolute;

    z-index: 1;

    left: 14px;

    bottom: 0;

    width: 142px;

    height: 68px;

    border:
        7px solid transparent;

    border-bottom-color:
        #ff7610;

    border-radius: 50%;
}


.uj-step:nth-child(even)
.uj-arc {
    border-bottom-color:
        var(--yellow);
}


/* TITLES */

.uj-step h3 {
    color: var(--navy);

    font-size: 20px;

    line-height: 1.27;

    font-weight: 800;

    margin:
        0 auto 14px;

    min-height: 52px;
}


/* DESCRIPTION */

.uj-step p {
    color: var(--muted);

    font-size: 15.5px;

    line-height: 1.48;

    margin: 0 auto;

    max-width: 215px;
}


/* ARROW */

.uj-arrow {
    position: absolute;

    z-index: 10;

    right: -31px;

    top: 79px;

    width: 50px;

    height: 50px;

    border:
        1px solid
        #e1e7ef;

    background: #fff;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: var(--orange);

    font-size: 26px;

    box-shadow:
        0 5px 17px
        rgba(20,50,90,.07);
}


/* SUCCESS */

.uj-success {
    position: absolute;

    right: -4px;

    bottom: 0;

    display: flex;

    gap: 2px;

    align-items: flex-start;

    color: #7e8999;

    transform: rotate(-6deg);

    font-family:
        "Segoe Print",
        "Bradley Hand",
        cursive;

    font-size: 17px;

    line-height: 1.02;
}


.uj-success-arrow {
    font-size: 28px;

    line-height: 1;
}


/* BACKGROUND ORBS */

.uj-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.uj-orb-top {
    width: 220px;

    height: 220px;

    right: -105px;

    top: -108px;

    background: #edf5ff;
}


.uj-orb-bottom {
    width: 180px;

    height: 180px;

    left: -90px;

    bottom: -100px;

    background: #fff0e2;
}


/* TABLET */

@media (max-width: 1150px) {

    .uj-heading h2 {
        font-size: 48px;
    }

    .uj-journey {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 55px;
    }

    .uj-arrow,
    .uj-success {
        display: none;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .unividya-journey {
        padding:
            45px 16px 60px;
    }


    .uj-eyebrow {
        font-size: 11px;
    }


    .uj-heading h2 {
        font-size: 35px;
    }


    .uj-heading p {
        font-size: 15px;
    }


    .uj-journey {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            42px 8px;
    }


    .uj-visual {
        width: 130px;

        height: 130px;
    }


    .uj-icon {
        width: 70px;

        height: 70px;
    }


    .uj-icon svg {
        width: 54px;

        height: 54px;
    }


    .uj-arc {
        width: 108px;

        height: 52px;

        left: 11px;

        border-width: 6px;
    }


    .uj-number {
        width: 42px;

        height: 42px;

        font-size: 13px;
    }


    .uj-step h3 {
        font-size: 17px;

        min-height: auto;
    }


    .uj-step p {
        font-size: 13.5px;
    }

}


/* SMALL MOBILE */

@media (max-width: 430px) {

    .uj-journey {
        grid-template-columns: 1fr;
    }

}