.circular-menu {
     position: fixed;
     top: 50%;
     right: -30px;
     /* Start partially hidden */
     transform: translateY(-50%);
     z-index: 1000;
     /* Smoother transitions for sliding in and out */
     transition: right 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }

 /* When the menu is open, slide it fully into view */
 .circular-menu.menu-open {
     right: 30px;
 }

 /*
         * NEW: This class is added via JavaScript to hide the menu completely after closing.
        */
 .circular-menu.is-hidden {
     right: -80px;
     /* Pushes the menu completely off-screen */
     pointer-events: none;
     /* Prevents interaction when hidden */
 }

 /* Hide the actual checkbox input */
 .circular-menu #menu-toggle {
     display: none;
 }

 /* The main button that the user clicks */
 .circular-menu .menu-button {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 60px;
     height: 60px;
     background: linear-gradient(45deg, #007BFF, #0056b3);
     border-radius: 50%;
     color: white;
     font-size: 30px;
     font-weight: bold;
     cursor: pointer;
     position: relative;
     z-index: 10;
     transition: transform 0.3s ease-in-out, background-color 0.2s;
     box-shadow: -2px 2px 15px rgba(0, 0, 0, 0.2);
 }

 .circular-menu .menu-button:hover {
     background-color: #0056b3;
 }

 /* Container for the menu items */
 .circular-menu .menu-items {
     position: absolute;
     top: 5px;
     left: 5px;
     width: 50px;
     height: 50px;
     pointer-events: none;
     opacity: 0;
     transform: scale(0.5);
     transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }

 /* Individual menu items */
 .circular-menu .menu-item {
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 70px;
     height: 70px;
     background-color: #5cb85c;
     border-radius: 50%;
     color: white;
     text-decoration: none;
     /* Adjusted font size for text labels */
     font-size: 11px;
     font-weight: 500;
     transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.2s;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
     opacity: 0;
     /* Items start invisible */
 }

 .circular-menu .menu-item:hover {
     background-color: #4cae4c;
 }

 /* Rotate the '+' icon to a '×' when the menu is open */
 .circular-menu #menu-toggle:checked+.menu-button {
     transform: rotate(0deg);
     background: linear-gradient(45deg, #dc3545, #b02a37);
 }

 /* Show the menu items when the checkbox is checked */
 .circular-menu #menu-toggle:checked~.menu-items {
     opacity: 1;
     transform: scale(1);
     pointer-events: auto;
     /* Make items clickable */
 }

 /* Make individual items visible when menu is open */
 .circular-menu #menu-toggle:checked~.menu-items .menu-item {
     opacity: 1;
 }

 /* Position menu items in a circular arc with a staggered animation */
 .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(1) {
     transform: rotate(0deg) translateX(-120px) rotate(0deg);
     transition-delay: 0.0s;
 }

 .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(2) {
     transform: rotate(45deg) translateX(-120px) rotate(-45deg);
     transition-delay: 0.05s;
 }

 .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(3) {
     transform: rotate(90deg) translateX(-120px) rotate(-90deg);
     transition-delay: 0.1s;
 }

 .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(4) {
     transform: rotate(135deg) translateX(-120px) rotate(-135deg);
     transition-delay: 0.15s;
 }

 .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(5) {
     transform: rotate(180deg) translateX(-120px) rotate(-180deg);
     transition-delay: 0.2s;
 }

 /* --- Responsiveness for smaller devices --- */
 @media (max-width: 768px) {
     .circular-menu.is-hidden {
         right: -60px;
     }

     .circular-menu .menu-button {
         width: 70px;
         height: 70px;
         font-size: 24px;
     }

     .circular-menu .menu-items {
         top: 2.5px;
         left: 2.5px;
         width: 45px;
         height: 45px;
     }

     .circular-menu .menu-item {
         width: 45px;
         height: 45px;
         font-size: 10px;
     }

     .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(1) {
         transform: rotate(0deg) translateX(-100px) rotate(0deg);
     }

     .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(2) {
         transform: rotate(45deg) translateX(-100px) rotate(-45deg);
     }

     .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(3) {
         transform: rotate(90deg) translateX(-100px) rotate(-90deg);
     }

     .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(4) {
         transform: rotate(135deg) translateX(-100px) rotate(-135deg);
     }

     .circular-menu #menu-toggle:checked~.menu-items .menu-item:nth-child(5) {
         transform: rotate(180deg) translateX(-100px) rotate(-180deg);
     }
 }