/* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Specific styles for the active dashboard link to match the image */
        .sidebar-nav-item.active {
            background-color: #FCE7F3; /* Light pink background */
            color: #EC4899; /* Darker pink text color */
            font-weight: 600;
            border-radius: 8px;
        }

        /* Progress bar styling */
        .progress-bar-container {
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
        }

        .progress-bar {
            height: 8px;
            background-color: #EC4899; /* Pink color for progress */
            border-radius: 5px;
            text-align: right; /* To position text if added */
            color: white;
            font-size: 0.75rem;
            line-height: 8px;
            transition: width 0.5s ease-in-out;
        }
        /* settings */
          /* The switch - the box around the slider */
                .switch {
                  position: relative;
                  display: inline-block;
                  width: 48px; /* Slightly wider for better touch target */
                  height: 24px; /* Slightly taller */
                }

                /* Hide default HTML checkbox */
                .switch input {
                  opacity: 0;
                  width: 0;
                  height: 0;
                }

                /* The slider */
                .slider {
                  position: absolute;
                  cursor: pointer;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background-color: #ccc;
                  -webkit-transition: .4s;
                  transition: .4s;
                  border-radius: 24px; /* Make it round */
                }

                .slider:before {
                  position: absolute;
                  content: "";
                  height: 16px;
                  width: 16px;
                  left: 4px;
                  bottom: 4px;
                  background-color: white;
                  -webkit-transition: .4s;
                  transition: .4s;
                  border-radius: 50%; /* Make inner circle round */
                }

                input:checked + .slider {
                  background-color: #EC4899; /* Pink for active */
                }

                input:focus + .slider {
                  box-shadow: 0 0 1px #EC4899;
                }

                input:checked + .slider:before {
                  -webkit-transform: translateX(24px); /* Move 24px for 48px width */
                  -ms-transform: translateX(24px);
                  transform: translateX(24px);
                }
                
                /* responisve */
           @media(max-width:786px){
            .header{
                margin-top: 56px;
            }
        }
        @media(max-width:430px){
            .header{
                margin-top: 56px;
            }
        }