.mobsidebar {
    position: fixed;
    top: 0;
    left: -100%; /* Initially position the sidebar off-screen to the left */
    width: 70%;
    max-width: 300px;
    height: 100%;
    z-index: 50;
    transition: left 0.3s ease-in-out; /* Add a smooth transition for the "left" property */
    
    /* Using a linear gradient with a clear direction */
    background-image: linear-gradient(to bottom, rgb(55, 55, 165), rgb(236, 107, 176));
}

/* This class is added by JavaScript to show the sidebar */
.mobsidebar.active {
    left: 0; /* Slide the sidebar into view */
}

/* Sidebar header container */
.sidebarlogocontaner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border-bottom: 2px solid white;
}

/* Sidebar logo styles */
/* .sidebarlogo {
    height: 50px;
    width: 10rem;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO32d8J6UvpWmqZjeEHRBBTBEovPYv7F523K9C-kp5Wz-gcfFYBiaN15M75c41Q-VZKy9QwjTw5HaoH87Xe35uxqhP9Q-y7JO6k-K0TfRw5Tg3zYHHtQvyA5aAynJje8Cw2Buy5djsqqfJSwcZD5RiSIK2kq4y2ICDUFu1wVzorgjRflyY1_dQyrAzfVTd/s798/Gemini_Generated_Image_q3cp2iq3cp2iq3cp-removebg-preview.png);
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
} */

/* Close icon styles */
/* .closeicon {
    height: 50px;
    width: 3rem;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNTl6NiudMTf-c7mxTY9ZzvwxCPjCZNauurkE8iiNOAZV3iR55wxA0EsW-ZZvCZOk6rEdEjXx2l1GSwfauTP-gYSNveSyEMQaSEzh23UMwrzCJ77zz4XIwJNgf3VypkrOQ6PwXtaZTPo5CByiUb_Nta-BGPesgfQuDiGUVvCLhlTZ87WVX-WyBx4Ra7trT/s540/Gemini_Generated_Image_9zes9i9zes9i9zes-removebg-preview.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
} */

/* Sidebar content container */
.sidebarcon {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- Sidebar Navigation Styles --- */
.sidebarcon ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebarcon li {
    margin-bottom: 1rem;
    transition: transform 0.2s ease;
}

.sidebarcon li:hover {
    transform: translateX(5px);
}

.sidebarcon a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    color: #f0f0f0;
    transition: color 0.2s ease;
}

.sidebarcon a:hover {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Hide the sidebar icon on larger screens */
@media screen and (min-width: 769px) {
    .mobile-icon-container {
        display: none;
    }
}