.gfg {
    height: 50px;
    width: 50px;

}

#bdSidebar {

    top: 150px; /* Adjust as needed to position below the header */
    left: -250px; /* Initially hide off-screen */
    width: 250px; /* Adjust width as needed */
    z-index: 999; /* Ensure sidebar is below header */
    overflow-y: auto;

    transition: all 0.3s;




}



.mynav {
    color: #fff;
}

.mynav li a {
    color: #fff;
    text-decoration: none;
    width: 100%;
    display: block;
    border-radius: 5px;
    padding: 8px 5px;
}

.mynav li a.active {
    background: rgba(255, 255, 255, 0.2);
}

.mynav li a:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mynav li a i {
    width: 25px;
    text-align: center;
}

#bdSidebar ul li.active>a,
a[aria-expanded="true"] {
    background-color: black;
    color: #323b68;
}

a[data-toggle="collapse"] {
    position: relative;
    min-height: 100vh;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    margin-top: 60px;
}

.notification-badge {
    background-color: rgba(255, 255, 255, 0.7);
    float: right;
    color: #222;
    font-size: 14px;
    padding: 0px 8px;
    border-radius: 2px;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    overflow: scroll;
    padding-top: 150px; /* Default padding, will be adjusted dynamically */
}

@media (max-width: 768px) {
    .wrapper {
         padding-top: 100px;
         position: relative; /* Adjust padding for mobile view if header height is different */
       }
}

#content {
    /* padding: 0px; */
    min-height: 100vh;
    font-family: "Franklin Gothic Medium", sans-serif;
    transition: all 0.3s;
    padding-left: 20px; */ /* Adjust margin if sidebar is overlapping */
}
@media (max-width: 768px) {
    #content {
        padding-left: 20px; /* Ensure content doesn't hide under sidebar */
        padding-top: 0px; /* Reduced padding for mobile */
    }
}