body {
    padding: 0;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

html {
    font-size: 0.5vw;
}

.main .header {
    width: 100vw;
    background-color: #F2535F;
    text-align: center;
    padding: 1px 0;
}

.main .header h2 {
    font-size: 25px;
    letter-spacing: 0.1cap;
    color: #ffff;
    text-transform: capitalize;
}

.process {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.circle .no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    position: absolute;
    font-size: 5rem;
    border-radius: 50%;
    color: #F2535F;
}

.reg-no,
.login-no {
    bottom: 18rem;
}

.authentication-no,
.download-no {
    top: 18rem;
}

.horizontal-line {
    width: 10vw;
    height: 0.7rem;
    background-color: #F2535F;
}

.vertical-line {
    height: 7rem;
    width: 0.5rem;
    background-color: #F2535F;
    position: absolute;
}

.reg-vertical,
.login-vertical {
    top: 16rem;
}

.authentication-vertical,
.download-vertical {
    bottom: 16rem;
}

.main .process .stage .circle {
    width: 15rem;
    height: 15rem;
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid transparent;
    position: relative;
}

.registration,
.login {
    border: 5px solid transparent;
    border-radius: 50%;
    border-bottom: 0.5rem solid #F2535F;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.authentication,
.download {
    border: 5px solid transparent;
    border-radius: 50%;
    border-top: 0.5rem solid #F2535F;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
}

.main .process .stage .circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.login img,
.registration img {
    width: 86% !important;
    height: 86% !important;
}

.hover:hover span {
    visibility: visible;
    opacity: 1;
}

.circle span {
    position: absolute;
    font-size: 2rem;
    background-color: #F2535F;
    color: #ffff;
    padding: 0.8rem;
    border-radius: 5px;
    top: 0;
    left: 8rem;
    width: 19rem;
    visibility: hidden;
    opacity: 0;
    transition: 0.6s;
}

.circle .info {
    position: absolute;
    background-color: #F2535F;
    color: #ffff;
    border-radius: 10px;
    font-size: 1.6rem;
    width: 27rem;
    padding: 0 2rem;
}   
   

.circle .reg-info,
.circle .login-info {
    top: 23rem;
}

.circle .auth-info,
.circle .download-info {
    bottom: 23rem;
}


@media (max-width:800px) {
    html {
        font-size: 1vw;
    }

    .process {
        flex-direction: column;
    }

    .horizontal-line {
        width: 0.7rem;
        height: 6vh;
    }

    .reg-no,
    .login-no {
        bottom: auto;
        left: 18rem
    }

    .authentication-no,
    .download-no {
        top: auto;
        right: 18rem;
    }

    .registration,
    .login {
        border-bottom: solid transparent;
        border-left: 0.5rem solid #F2535F;
    }

    .authentication,
    .download {
        border-top: solid transparent;
        border-right: 0.5rem solid #F2535F;
    }

    .vertical-line {
        width: 9vw;
        height: 0.5rem;
    }

    .reg-vertical,
    .login-vertical {
        top: auto;
        right: 16.5rem;
    }

    .authentication-vertical,
    .download-vertical {
        bottom: auto;
        left: 16.5rem;
    }
    .circle span{
        font-size: 3rem;
        width: 30rem;
    }
    .circle .auth-msg, .circle .download-msg{
        top: 0;
        left: auto;
        right: 8rem;
    }
    .circle .info {
        font-size: 2rem;
    }

    .circle .reg-info,
    .circle .login-info {
        top: auto;
        right: 24rem;
    }

    .circle .auth-info,
    .circle .download-info {
        bottom: auto;
        left: 24rem;
    }
}