.desktopsidebar {
  width: 260px;
  height: 100vh;
  background: linear-gradient(180deg, #3737a5, #ec6bb0);
  color: white;
  padding: 2rem 1rem;
  border-right: 3px solid #ec6bb0;
  
}

.dsidebarcon ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dsidebarcon li {
  margin-bottom: 1rem;
}

.dsidebarcon a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.dsidebarcon a i {
  font-size: 18px;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover Effect */
.dsidebarcon a:hover {
  color: #ffebf7;
  transform: translateX(8px);
}

.dsidebarcon a:hover i {
  color: #ffebf7;
  transform: scale(1.2);
}




@media screen and (min-width: 1100px) {
    .desktopsidebar {
        /* Positioning and Layout */
        position: fixed;
        top: 0px;
        left: 0;
        height: 54rem;
        width: 18rem; /* A fixed width for the sidebar */
        background: linear-gradient(to bottom, #d664b3, #6b4c9e);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        z-index: 55; /* Higher than main content, but lower than the header (which has z-index 60) */
        padding-top: 60px; /* Offset for the header's height */
        width: 23%;
    }

    .dsidebarcon {
        padding: 1.5rem 1rem;
    }

    /* List and Link Styles */
    .dsidebarcon ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .dsidebarcon li {
        margin-bottom: 0.75rem;
    }

    .dsidebarcon a {
        display: block; /* Make the entire list item clickable */
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        color: #f0f0f0;
        padding: 0.75rem 1rem;
        border-radius: 8px; /* Smooth rounded corners */
        transition: background-color 0.3s ease, transform 0.2s ease, color 0.2s ease;
    }

    /* Hover and Active Effects */
    .dsidebarcon a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        transform: translateX(5px);
    }
}

/* --- Hide Desktop Sidebar on smaller screens --- */
@media screen and (max-width: 1099px) {
    .desktopsidebar {
        display: none;
    }
}