/* ================================
   MOBILE APP DEVELOPMENT ROADMAP
   DSS THEME
================================ */

/* SECTION */
#roadmap{
    width:100%;
    padding:120px 8vw;
    background:#000;
}

/* TITLE */
.roadmap-title{
    text-align:center;
    color:#fff;
    font-size:3rem;
    font-weight:900;
    margin-bottom:70px;
}

.roadmap-title span{
    color:#ff0000;
    text-shadow:0 0 12px rgba(255,0,0,.6);
}

/* CONTAINER */
.roadmap-container{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    position:relative;
}

/* CENTER LINE */
.line{
    position:absolute;
    left:50%;
    top:0;
    width:4px;
    height:100%;
    background:#ff0000;
    transform:translateX(-50%);
    box-shadow:0 0 18px rgba(255,0,0,.6);
}

/* STEP WRAPPER */
.roadmap-step{
    width:100%;
    display:flex;
    align-items:center;
    margin:55px 0;
    position:relative;
}

.roadmap-step.left .step-box{
    margin-right:auto;
}

.roadmap-step.right .step-box{
    margin-left:auto;
}

/* STEP CARD */
.step-box{
    width:42%;
    background:#0d0d0d;
    padding:26px 30px;
    border-radius:14px;
    border:1px solid #1a1a1a;
    box-shadow:0 0 20px rgba(255,0,0,.25);
    transition:.35s ease;
}

.step-box:hover{
    border-color:#ff0000;
    box-shadow:0 0 28px rgba(255,0,0,.5);
    transform:translateY(-5px);
}

.step-box h2{
    color:#ff0000;
    font-size:1.6rem;
    font-weight:800;
    margin-bottom:10px;
}

.step-box p{
    color:#ddd;
    font-size:.95rem;
    line-height:1.6;
}

/* DOT */
.dot{
    position:absolute;
    left:50%;
    width:18px;
    height:18px;
    background:#ff0000;
    border-radius:50%;
    border:3px solid #000;
    transform:translateX(-50%);
    box-shadow:0 0 14px rgba(255,0,0,.7);
}

/* CHECKPOINT */
.checkpoint{
    width:100%;
    text-align:center;
    margin:60px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    padding:10px 28px;
    background:rgba(255,0,0,.12);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,0,0,.4);
    border-radius:40px;
    color:#ff0000;
    font-size:.9rem;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    box-shadow:0 0 15px rgba(255,0,0,.45);
}

/* SIDE DOTS */
.checkpoint::before,
.checkpoint::after{
    content:"";
    position:absolute;
    top:50%;
    width:14px;
    height:14px;
    background:#ff0000;
    border-radius:50%;
    transform:translateY(-50%);
    border:3px solid #000;
    box-shadow:0 0 10px rgba(255,0,0,.8);
}

.checkpoint::before{
    left:calc(50% - 200px);
}

.checkpoint::after{
    right:calc(50% - 200px);
}

/* SECTION HEADING */
.section-heading{
    text-align:center;
    margin:90px 0 50px;
    position:relative;
    z-index:3;
}

.section-heading::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:60%;
    height:42px;
    background:#000;
    z-index:-1;
}

.section-heading span{
    padding:10px 26px;
    font-size:1.9rem;
    font-weight:900;
    color:#ff0000;
    letter-spacing:2px;
    text-transform:uppercase;
    text-shadow:0 0 14px rgba(255,0,0,.6);
}

/* ===============================
   MOBILE RESPONSIVE
================================ */
@media(max-width:850px){

    .line{
        left:12px;
    }

    .roadmap-step{
        flex-direction:row;
    }

    .step-box{
        width:85%;
        margin-left:40px!important;
        margin-right:0!important;
    }

    .dot{
        left:12px;
        transform:none;
    }

    .checkpoint::before,
    .checkpoint::after{
        display:none;
    }

    .section-heading::before{
        width:90%;
    }

    .roadmap-title{
        font-size:2.2rem;
    }
}