/* 

    Custom CSS used on "How it works" page

*/

.horizontal-line {
    position: relative;
    margin: 20px 0;
    background-color: black; /* Color of the horizontal line */
}

.line {
    position: absolute;
    top: -5;
    height: 2px; /* Adjust the height as needed */
    background-color: #E2E2EA; /* Color of the horizontal line */
}

.dot {
    position: absolute;
    width: 17px;
    height: 17px;
    background-color: #FF9900;
    border-radius: 50%;
}

.dot.left {
    left: 11.5%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dot.center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dot.right {
    right: 11.5%;
    top: 50%;
    transform: translate(50%, -50%);
}


.vertical-line {
    position: relative;
    margin: 20px 0;
    width: 2px; /* Width of the vertical line */
    height: 75%; /* Adjust the height as needed */
    background-color: #E2E2EA; /* Color of the vertical line */
    top: 5%;
}


.dot.top {
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dot.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dot.bottom {
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 50%);
}