<style>
    .hover-rise {
        display: inline-block; /* Ensure the element is inline-block or block to use transform */
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Initial shadow */
        transition: 0.5s;
    }

    .hover-rise:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.8); /* Shadow effect on hover */
    }
    .hover-rise:active {
        transform: translateY(3px); /* Move downward on click */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Shadow effect on click */
    }
</style>
 <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .sidebar {
            position: relative;
            top: -70px;
            left: -20px;
            right: 0;
            width: 275px;
            background-color: #08338f; /* Dark blue */
            padding: 0;
            color: white;
            border-radius: 0 10px 10px 0;
            height: 100%; /* Full height */
            transition: transform 0.5s ease;
            transform: translateX(0);
        }

        .sidebar.collapsed {
            transform: translateX(-100%);
        }

        .sidebar a {
            display: flex;
            align-items: center;
            padding: 5px 25px;
            color: white;
            text-decoration: none;
            font-size: 12px;
            transition: background-color 0.3s;
            border-radius: 10px;
            margin-bottom: 0px; /* Add margin between items */
            font-weight: normal; /* Set text to normal weight */
        }

        .sidebar a:hover {
            background-color: #009EFB; /* Light blue on hover */
            transform: scale(1.07);
        }

        .sidebar a .icon {
            margin-right: 5px;
        }

        .highlight {
            background-color: #F9D35F;
            color: #333;
        }

        .all-category {
            background-color: #009EFB; /* Light blue */
            color: #333;
            margin: 0px;
            padding:0px 20px;
            font-weight: normal;
            transform: scale(1.07);
        }

        /* Toggle button styles */
        .toggle-btn {
            position: relative;
            top: -43px;
            left: 235px;
            cursor: pointer;
            z-index: 999;
            color: white;
            background-color: #08338f; /* Dark blue */
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }

        .toggle-btn i {
            font-size: 18px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .toggle-btn, .sidebar.collapsed {
                transform: translateX(-110%);
            }
            .toggle-btn {
                display: block; /* Show toggle button on smaller screens */
            }
            .all-category {
                background-color: #08338f;
                color: white;
            }
        }

        .img {
            margin: 0 10px; 
            height: 40px;
            width: 40px;
        }
    </style>


























    <style>
    .hover-rise {
        display: inline-block; /* Ensure the element is inline-block or block to use transform */
        white-space: nowrap;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Initial shadow */
        transition: 0.5s;
    }

    .hover-rise:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.8); /* Shadow effect on hover */
    }
    .hover-rise:active {
        transform: translateY(3px); /* Move downward on click */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Shadow effect on click */
    }
</style>
 <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .sidebar {
            position: relative;
            top: -70px;
            left: -20px;
            right: 0;
            width: 275px;
            background-color: #08338f; /* Dark blue */
            padding: 0;
            color: white;
            border-radius: 0 10px 10px 0;
            height: 100%; /* Full height */
            transition: transform 0.5s ease;
            transform: translateX(0);
        }

        .sidebar.collapsed {
            transform: translateX(-100%);
        }

        .sidebar a {
            display: flex;
            align-items: center;
            padding: 5px 25px;
            color: white;
            text-decoration: none;
            font-size: 12px;
            transition: background-color 0.3s;
            border-radius: 10px;
            margin-bottom: 0px; /* Add margin between items */
            font-weight: normal; /* Set text to normal weight */
        }

        .sidebar a:hover {
            background-color: #009EFB; /* Light blue on hover */
            transform: scale(1.07);
        }

        .sidebar a .icon {
            margin-right: 5px;
        }

        .highlight {
            background-color: #F9D35F;
            color: #333;
        }

        .all-category {
            background-color: #009EFB; /* Light blue */
            color: #333;
            margin: 0px;
            padding:0px 20px;
            font-weight: normal;
            transform: scale(1.07);
        }

        /* Toggle button styles */
        .toggle-btn {
            position: relative;
            top: -43px;
            left: 235px;
            cursor: pointer;
            z-index: 999;
            color: white;
            background-color: #08338f; /* Dark blue */
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }

        .toggle-btn i {
            font-size: 18px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .toggle-btn, .sidebar.collapsed {
                transform: translateX(-110%);
            }
            .toggle-btn {
                display: block; /* Show toggle button on smaller screens */
            }
            .all-category {
                background-color: #08338f;
                color: white;
            }
        }

        .img {
            margin: 0 10px; 
            height: 40px;
            width: 40px;
        }
    </style>












<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
    }

    .sidebar {
        position: relative;
        top: -70px;
        left: -20px;
        right: 0;
        width: 275px;
        background-color: #08338f; /* Dark blue */
        padding: 0;
        color: white;
        border-radius: 0 10px 10px 0;
        height: 100%; /* Full height */
        transition: transform 0.5s ease, width 0.5s ease;
        transform: translateX(0);
        overflow: hidden;
    }

    .sidebar.collapsed {
        width: 115px;
        transform: translateX(-10px);
    }

    .sidebar a {
        display: flex;
        align-items: center;
        padding: 5px 25px;
        color: white;
        text-decoration: none;
        font-size: 12px;
        transition: background-color 0.3s;
        border-radius: 10px;
        margin-bottom: 0px; /* Add margin between items */
        font-weight: normal; /* Set text to normal weight */
    }

    .sidebar a:hover {
        background-color: #009EFB; /* Light blue on hover */
        transform: scale(1.07);
    }

    .sidebar a .text, .sidebar a img {
        margin-right: 20px;
        transition-duration: 0.5s;
    }
     .text {
        white-space: nowrap;
        opacity: 1;
        transition: 0.6s ease;
    }
    .sidebar.collapsed a .text {
        display: none;
    }

    .highlight {
        background-color: #F9D35F;
        color: #333;
    }

    .all-category {
        background-color: #009EFB; /* Light blue */
        color: #333;
        margin: 0px;
        padding: 0px 20px;
        font-weight: normal;
        transform: scale(1.07);
    }

    /* Toggle button styles */
    #toggle-btn {
        position: relative;
        top: -43px;
        left: 235px;
        cursor: pointer;
        z-index: 999;
        color: white;
        background-color: #08338f; /* Dark blue */
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
    }

    #toggle-btn.collapsed {
        transform: rotate(180deg);
        left: 70px; /* Adjust left position when sidebar is collapsed */
    }
    @media (max-width: 768px) {
        .sidebar {
            transform: translateX(-100%);
        }

        #toggle-btn, .sidebar.collapsed {
            transform: translateX(-100%);
        }

        #toggle-btn {
            display: block; /* Show toggle button on smaller screens */
        }

        .all-category {
            background-color: #08338f;
            color: white;
        }
    }

    .img {
        margin: 0 10px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        transition: border 0.5px ease;
    }
    .sidebar.collapsed .img {
        margin-right:30px ;
        margin-bottom: 5px;
        transform: translateX(5px); 
        /* border: 1px solid rgba(255, 255, 255, 0.671); */
        border-radius: 50%;
        /* background-color: #001f61 ; */
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.837);
    }
  
    #img{
        margin-left: 15px;
        margin-right: 20px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        transition: border 0.5px ease;
    }
    .sidebar.collapsed #img {
        margin-bottom: 5px;
        /* border: 1px solid rgba(255, 255, 255, 0.66); */
        border-radius: 50%;
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.837);
        /* background-color: #001f61 ; */
    }
</style>