* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Arial Unicode MS';
}

.main-container {
    width: 100%;
    height: 100vh;
    overflow: hidden; /* पूरे पेज की स्क्रॉल बंद */
    display: flex;
    flex-direction: column;
}

.up-header {
    height: 15vh;
    /*background-color: aliceblue;*/
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.95)), url('/img/online.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    /* Adjust margins to prevent overflow */
    padding: 0 16px 0 15px; /* Removed top margin */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*border-bottom: 1px solid gray;*/
}

.logoimg {
    margin-right: 10px;
}

    .logoimg img {
        width: 300px;
    }

.main-section {
    flex: 1;
    display: flex;
    min-height: 0;
}

.user-deatils {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.main-section .menu-sec {
    width: 15%;
    /*background: white;*/
    overflow-y: auto;
    scrollbar-width: thin;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

/* Con-sec की स्क्रॉल स्टाइल */
.main-section .con-sec {
    width: 85%;
    background-color: aliceblue;
    /*border-radius: 15px;*/
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
}

.menu-sec::-webkit-scrollbar,
.con-sec::-webkit-scrollbar {
    width: 8px;
}

.menu-sec::-webkit-scrollbar-track,
.con-sec::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.menu-sec::-webkit-scrollbar-thumb,
.con-sec::-webkit-scrollbar-thumb {
    background: #9b59b6; /* पर्पल कलर */
    border-radius: 10px;
}

    .menu-sec::-webkit-scrollbar-thumb:hover,
    .con-sec::-webkit-scrollbar-thumb:hover {
        background: #8e44ad;
    }


.menu-sec.active {
    width: 5%;
}

.con-sec.active {
    width: 95%;
}
/*#barbtn{
    display:none;
}
@media only screen and (max-width: 600px) {
    #barbtn {
       display:block;
    }
    .menu-sec {
        display:none;
    }
    .con-sec{
        width:100%;
    }
}
.menu-sec.mactive {
    width: 60%;

}

.con-sec.mactive {
    width: 40%;
}*/
/*li.menu-item a span.active {

    display:none;
}*/


.menu {
    list-style: none;
    padding: 0;
}

.menu-item {
    position: relative;
    margin-bottom: 5px; /* Default margin */
}

    .menu-item a {
        display: flex; /* Flexbox ka use karenge */
        align-items: center; /* Icon aur text ko vertically align karenge */
        padding: 10px;
        /*background: white;*/
        color: white;
        text-decoration: none;
        gap: 8px; /* Icon aur text ke beech spacing */
        transition: all 0.3s ease;
        font-weight: 400;
        border-bottom: 1.5px solid rgba(128, 128, 128,0.3); /* Halka white transparent border */
        border-radius: 4px; /* Thoda rounded edges dene ke liye */
    }

        .menu-item a:hover {
            background-color: gainsboro;
            color: black;
        }




.submenu {
    list-style: none;
    padding: 0;
    background: aliceblue;
    display: none;
    width: 100%;
    position: relative;
    margin-top: 5px; /* Submenu ko thoda space dena */
}

    .submenu li a {
        display: flex; /* Flexbox use kar rahe hain */
        align-items: center; /* Icon aur text ek line me aayenge */
        padding: 10px;
        color: orangered;
        text-decoration: none;
        gap: 8px; /* Icon aur text ke beech spacing */
    }

    .submenu li box-icon {
        width: 18px; /* Submenu icon ka size thoda chhota */
        height: 18px;
        fill: black !important; /* Icon ka color white hoga */
    }

.menu-item box-icon {
    width: 20px; /* Icon ka size */
    height: 20px;
    padding: 0;
    color: white; /* Icon ka color */
    align-items: center;
    fill: white !important; /* Icon ka color white hoga */
    /*padding: 2px;*/
    border-radius: 2px;
}

a.hideshow-menu.hideshowbtn {
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    background-color: white;
    cursor: pointer;
}

    a.hideshow-menu.hideshowbtn box-icon {
        width: 30px; /* Icon ka size */
        height: 30px;
        padding: 0;
        color: white; /* Icon ka color */
        align-items: center;
        fill: #533348 !important; /* Icon ka color white hoga */
        /*padding: 2px;*/
        border-radius: 2px;
    }

    a.hideshow-menu.hideshowbtn:hover {
        background-color: aliceblue;
    }

.animated-bg {
    /*background: linear-gradient(45deg, #533348, #2f1d29, #5f3a52, #8e577b);
        background-size: 400% 400%;
        animation: gradientBG 10s infinite alternate;*/
    background: #8f356f;
    background: linear-gradient(180deg,rgba(255, 64, 0, 1) 0%, rgba(224, 132, 52, 1) 50%);
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

#barbtn {
    display: none;
    cursor: pointer;
}

    #barbtn box-icon {
        width: 60px; /* Icon ka size */
        height: 60px;
        padding: 0;
        align-items: center;
        fill: black !important; /* Icon ka color white hoga */
        /*padding: 2px;*/
        border-radius: 2px;
    }

@media only screen and (max-width: 600px) {
    #barbtn {
        display: block;
    }

    .menu-sec {
        width: 0% !important;
        transition: all 0.3s ease;
    }

    .con-sec {
        width: 100% !important;
        transition: all 0.3s ease;
    }

    .menu-sec.mactive {
        width: 50% !important;
    }

    .con-sec.mactive {
        width: 50% !important;
    }
}

.pagename {
    display: flex;
    align-items: center;
    font-size: 20px;
    padding: 5px;
    background: #8f356f;
    background: linear-gradient(180deg,rgba(255, 64, 0, 1) 0%, rgba(224, 132, 52, 1) 50%);
    color: white;
}

    .pagename i {
        width: 20px;
        height: 20px;
        padding: 0;
        margin: 5px 0px;
        align-items: center;
        fill: black !important;
    }
/* CSS में जोड़ें */
.user-icon {
    position: relative;
    cursor: pointer;
    padding: 5px;
    margin: 2px;
    background-color: rgba(0, 0, 0, 0.6);
}

.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1000;
}

    .user-dropdown.show {
        display: block;
    }

.dropdown-item {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .dropdown-item:hover {
        background: #f5f5f5;
        color: #470e50;
    }

.sessionicon {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    margin: 2px;
    /*border-radius: 3px;*/
    height: 37px;
}

@media only screen and (max-width: 600px) {
    sessionicon p {
        font-size: 10px;
    }

    .sessionicon {
        height: 30px;
        font-size: 10px;
    }
}

.hover-underline {
    font-size: 2rem;
    color: #ffffff;
    position: relative;
    display: inline-block;
}

    .hover-underline::after,
    .hover-underline::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, #ff0000, #00ffff);
        bottom: -5px;
        left: 0;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease-out;
    }

    .hover-underline::before {
        top: -5px;
        transform-origin: left;
    }

    .hover-underline:hover::after,
    .hover-underline:hover::before {
        transform: scaleX(1);
    }

/* Add these CSS modifications */
.menu-item {
    position: relative;
}

.submenu {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    display: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    z-index: 100;
}

.menu-sec .submenu {
    position: static; /* Reset for main level submenus */
    box-shadow: none;
}

/* Nested submenu positioning */
.menu-item .menu-item .submenu {
    left: 100%;
    top: 0;
}

/* Mobile responsive adjustments */
@media only screen and (max-width: 600px) {
    .submenu {
        position: static;
        width: 100%;
    }
}

#barbtn {
    display: none;
    cursor: pointer;
}

    #barbtn box-icon {
        width: 60px; /* Icon ka size */
        height: 60px;
        padding: 0;
        align-items: center;
        fill: black !important; /* Icon ka color white hoga */
        /*padding: 2px;*/
        border-radius: 2px;
    }

@media only screen and (max-width: 600px) {
    #barbtn {
        display: block;
    }

    .menu-sec {
        width: 0% !important;
        transition: all 0.3s ease;
    }

    .con-sec {
        width: 100% !important;
        transition: all 0.3s ease;
    }

    .menu-sec.mactive {
        width: 50% !important;
    }

    .con-sec.mactive {
        width: 50% !important;
    }
}