/* HOW EXCHANGE WORK SECTION */

    .main-timeline:after {
        content: '';
        display: block;
        clear: both;
    }

    .main-timeline .timeline {
        width: 50%;
        padding: 0 0 0 45px;
        margin: 0 0 0 5px;
        float: right;
    }

    .main-timeline .timeline-content {
        color: #777;
        background: linear-gradient(#fff 50%, rgba(235, 103, 83, 0.05) 50%);
        padding: 15px 15px 15px 70px;
        border: 10px solid #fff;
        border-radius: 50px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
        display: block;
        position: relative;
    }

        .main-timeline .timeline-content:hover {
            text-decoration: none;
        }

        .main-timeline .timeline-content:before {
            content: "";
            background: linear-gradient(to right bottom, rgba(235, 103, 83, 0.1) 50%, rgba(235, 103, 83, 0.2) 50%);
            width: 100px;
            height: 100px;
            border-radius: 0 0 0 100px;
            transform: translateY(-50%) rotate(45deg);
            position: absolute;
            top: 50%;
            left: -75px;
        }

    .main-timeline .timeline-icon {
        color: #ffffff;
        font-size: 45px;
        font-weight: 600;
        line-height: 35px;
        transform: translateY(-50%);
        position: absolute;
        left: -35px;
        top: 50%;
    }



    .main-timeline .timeline:nth-child(even) {
        padding: 0 45px 0 0;
        margin: 0 5px 0 0;
        float: left;
    }

        .main-timeline .timeline:nth-child(even) .timeline-content {
            padding: 20px 70px 20px 20px;
        }

            .main-timeline .timeline:nth-child(even) .timeline-content:before {
                transform: translateY(-50%) rotate(225deg);
                left: auto;
                right: -75px;
            }

        .main-timeline .timeline:nth-child(even) .timeline-icon {
            left: auto;
            right: -35px;
        }

    .main-timeline .timeline:nth-child(4n+2) .timeline-content:before {
        background: linear-gradient(to right bottom,rgba(235, 103, 83, 0.2) 50%, rgba(235, 103, 83, 0.1) 50%);
    }

    .main-timeline .timeline:nth-child(4n+2) .title {
        color: #fec134;
    }

    .main-timeline .timeline:nth-child(4n+3) .timeline-content:before {
        background: linear-gradient(to right bottom, rgba(235, 103, 83, 0.1) 50%, rgba(235, 103, 83, 0.2) 50%);
    }

    .main-timeline .timeline:nth-child(4n+3) .title {
        color: #00b39b;
    }

    .main-timeline .timeline:nth-child(4n+4) .timeline-content:before {
        background: linear-gradient(to right bottom, rgba(235, 103, 83, 0.2) 50%, rgba(235, 103, 83, 0.1) 50%);
    }

    .main-timeline .timeline:nth-child(4n+4) .title {
        color: #ff914d;
    }

@media screen and (max-width:767px) {
    .main-timeline .timeline,
    .main-timeline .timeline:nth-child(even) {
        width: 100%;
        padding: 45px 0 0 0;
        margin: 0 0 30px;
    }

        .main-timeline .timeline-content,
        .main-timeline .timeline:nth-child(even) .timeline-content {
            text-align: center;
            padding: 60px 20px 20px;
        }

            .main-timeline .timeline-content:before,
            .main-timeline .timeline:nth-child(even) .timeline-content:before {
                transform: translateY(0) translateX(-50%) rotate(135deg);
                top: -75px;
                left: 50%;
                right: 0;
            }

        .main-timeline .timeline-icon,
        .main-timeline .timeline:nth-child(even) .timeline-icon {
            transform: translateY(0) translateX(-50%);
            left: 50%;
            right: auto;
            top: -35px;
        }
}

:root {
    --level-1: #07afc5;
    --level-2: #fec134;
    --black: black;
}

ol {
    list-style: none;
}

.rectangle {
    position: relative;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    margin: 50px 0 100px;
    text-align: center;
    font-family: "Inter", sans-serif;
}


/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
    width: 50%;
    margin: 0 auto 40px;
    background: var(--level-1);
}

    .level-1::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 20px;
        background: #07afc5;
    }


/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

    .level-2-wrapper::before {
        content: "";
        position: absolute;
        top: -20px;
        left: 25%;
        width: 50%;
        height: 2px;
        background: #07afc5;
    }

    .level-2-wrapper::after {
        display: none;
        content: "";
        position: absolute;
        left: -20px;
        bottom: -20px;
        width: calc(100% + 20px);
        height: 2px;
        background: #07afc5;
    }

    .level-2-wrapper li {
        position: relative;
    }

    .level-2-wrapper > li::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 20px;
        background: #07afc5;
    }

.level-2 {
    width: 70%;
    margin: 0 auto 40px;
    background: var(--level-2);
}

    .level-2::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 20px;
        background: #07afc5;
    }

    .level-2::after {
        display: none;
        content: "";
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translate(-100%, -50%);
        width: 20px;
        height: 2px;
        background: #07afc5;
    }


@media screen and (max-width: 700px) {
    .rectangle {
        padding: 20px 10px;
    }

    .level-1,
    .level-2 {
        width: 100%;
    }

    .level-1 {
        margin-bottom: 20px;
    }

        .level-1::before,
        .level-2-wrapper > li::before {
            display: none;
        }

    .level-2-wrapper,
    .level-2-wrapper::after,
    .level-2::after {
        display: block;
    }

    .level-2-wrapper {
        width: 90%;
        margin-left: 10%;
    }

        .level-2-wrapper::before {
            left: -20px;
            width: 2px;
            height: calc(100% + 40px);
        }

        .level-2-wrapper > li:not(:first-child) {
            margin-top: 50px;
        }
}


/* END HOW EXCHANGE WORK SECTION */



/***********************************************   END HOME PAGE   **** ***********************************************/