.us-head .m-hed{
    text-align: center;
    padding: 2rem 0;
    background:linear-gradient(135deg, #ffffff 0%, #f0f4f8 50%, #e0eafc 100%) ;
}

.user-manual{
    display: flex;
    padding: 1rem;
}

.user-manual aside{
    padding: 1rem;
    width: 25%;
}
.user-manual section{
    padding: 1rem 3rem;
    width: 100% ;
}

main {
    display: flex;
    height: 100vh;
}

/* Sidebar Styling */
aside {
    width: 250px;
    /* background: #f8f9fa; */
    border-right: 1px solid #ddd;
    overflow-y: auto;
    padding: 20px;
}

details { margin-bottom: 10px; cursor: pointer; }
summary { font-weight: bold; list-style: none; }

.nav-usm { 
    display: block; 
    padding: 5px 15px; 
    text-decoration: none; 
    color: #333; 
    font-size: 0.9em;
}
.nav-usm:hover { color: #007bff; }

/* Scrollable Content Section */
.cont-section {
    flex-grow: 1;
    overflow-y: auto;
    padding: 40px;
    scroll-behavior: smooth; /* Professional smooth scroll transition */
}

.content-block { /*min-height: 90vh;*/ margin-bottom: 50px; }
.content-block img { max-width: 100%; display: block; margin: 20px 0; border: 1px solid #eee; }

.mvp-label, .mvp-heading{
    text-align: center;
}

.cc-sec {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top:1rem ;
}
.cc-sec a{
    color: #1abaed;
}
.cc-sec a:hover{
    text-decoration: underline;
}
.cc-sec .cc-hed{
    font-weight: 700;
}
.cc-sec .uni{
   width: 50rem;
}
.cc-sec .cc-lis{
    list-style-type: disc;
    padding-left: 2rem;
}
.cc-sec .cc-olis{
    padding-left: 2rem;
}
.cc-sec .cc-olis li{
    margin-bottom:10px ;
}


@media (max-width: 1024px) {

    .user-manual {
        display: flex;
        flex-direction: column;
        padding: 0 16px;
    }

    /* Sidebar becomes horizontal */
    .user-manual aside {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        gap: 5%;
        overflow-x: auto;
        padding: 14px 0;
        border-bottom: 1px solid #ddd;
    }

    .user-manual aside details {
        min-width: max-content;
    }

    .user-manual aside summary {
        font-size: 14px;
        white-space: nowrap;
        text-align: center;
    }

    .user-manual aside a {
        display: inline-block;
        font-size: 14px;
        padding: 6px 10px;
    }

    /* Content full width */
    .cont-section {
        width: 100%;
        padding: 20px 0;
    }

    /* Images */
    .cont-section img {
        max-width: 100%;
        height: auto;
    }

    /* Video */
    .cont-section iframe {
        width: 100%;
        height: 420px;
    }
}


@media (max-width: 768px) {

    /* Header spacing */
    .us-head {
        padding: 0;
    }
    aside{
        border: none;
    }

    .m-hed {
        font-size: 24px;
        text-align: center;
    }
    .user-manual{
        padding: 10px;
    }

    /* Sidebar becomes stacked scrollable menu */
    .user-manual aside {
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 10px;
        z-index: 10;
        border: none;
    }
    .user-manual section{
        padding: 10px;
    }

    .user-manual aside summary {
        font-size: 13px;
    }

    .user-manual aside a {
        font-size: 13px;
        padding: 6px 8px;
    }

    /* Section spacing */
    .content-block {
        margin-bottom: 40px;
    }

    .content-block h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    .cc-sec p,
    .cc-sec li {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Ordered & unordered lists */
    .cc-olis,
    .cc-lis {
        padding-left: 18px;
    }

    /* Images */
    .cont-section img {
        width: 100%;
        margin: 12px 0;
    }

    /* Video embed */
    .cont-section iframe {
        width: 100%;
        height: 220px;
    }

    /* FAQ */
    .faqr-question h3 {
        font-size: 15px;
    }

    .faqr-answer p {
        font-size: 14px;
    }

    /* Back to top button */
    #backToTop {
        right: 16px;
        bottom: 16px;
    }
}