.ujdin-page{
    padding:60px 0 80px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f2f6fb 100%
        );
}

/* SIDEBAR */

.ujdin-sidebar{
    position:sticky;

    top:120px;

    background:white;

    border-radius:28px;

    padding:28px;

    border:1px solid #e7edf5;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);
}

.ujdin-login{
    width:100%;

    height:58px;

    border-radius:18px;

    background:#16a34a;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    text-decoration:none;

    font-weight:700;

    margin-bottom:28px;
}

.ujdin-login:hover{
    color:white;
}

/* MENU */

.ujdin-menu{
    display:flex;

    flex-direction:column;

    gap:14px;
}

.ujdin-menu-item{
    width:100%;

    min-height:58px;

    border:none;

    border-radius:18px;

    background:#f8fbff;

    border:1px solid #dbe7f3;

    padding:16px 18px;

    display:flex;

    align-items:center;

    gap:14px;

    text-align:left;

    font-weight:700;

    color:#16315c;

    transition:.3s;
}

.ujdin-menu-item:hover,
.ujdin-menu-item.active{
    background:#002f6c;

    color:white;
}

/* SECTION */

.ujdin-section{
    margin-bottom:32px;
}

.section-card{
    background:white;

    border-radius:30px;

    padding:36px;

    border:1px solid #e7edf5;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);
}

.section-card h3{
    font-size:32px;

    font-weight:800;

    color:#16315c;

    margin-bottom:30px;
}

/* INFO */

.info-box{
    padding:24px;

    border-radius:22px;

    background:#f8fbff;

    border:1px solid #e7edf5;

    margin-bottom:20px;
}

/* REQUIREMENT */

.req-box{
    background:#eff6ff;

    border:1px solid #bfdbfe;

    padding:26px;

    border-radius:24px;
}

.req-box ul{
    margin:0;

    padding-left:20px;
}

.req-box li{
    margin-bottom:14px;

    line-height:1.8;

    color:#475569;
}

/* TIMELINE */

.timeline{
    display:flex;

    flex-direction:column;

    gap:24px;
}

.timeline-item{
    display:flex;

    gap:22px;
}

.timeline-number{
    width:62px;
    height:62px;

    border-radius:20px;

    background:#002f6c;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:800;
}

.timeline-content{
    flex:1;

    background:#f8fbff;

    border:1px solid #e7edf5;

    border-radius:24px;

    padding:24px;
}

/* PRICE */

.price-box{
    width:240px;

    height:90px;

    border-radius:24px;

    background:#dcfce7;

    color:#166534;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    font-weight:800;
}

/* HIGHLIGHT */

.highlight-box{
    background:#eff6ff;

    border:1px solid #bfdbfe;

    padding:24px;

    border-radius:22px;

    line-height:1.8;

    color:#16315c;
}

/* CONTACT */

.contact-list{
    display:flex;

    flex-direction:column;

    gap:18px;
}

.contact-item{
    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    border-radius:22px;

    background:#f8fbff;

    border:1px solid #e7edf5;
}

.contact-item i{
    font-size:22px;

    color:#0d6efd;
}

/* RESPONSIVE */

@media(max-width:992px){

    .ujdin-sidebar{
        position:relative;

        top:auto;
    }

}

@media(max-width:768px){

    .ujdin-page{
        padding:40px 0 60px;
    }

    .section-card{
        padding:24px;
    }

    .timeline-item{
        flex-direction:column;
    }

}