.hot-corner-menu {
    background-color: #00000055; /* Or any color you like */
    border: 1px solid #ffffff22;
    backdrop-filter: blur(5px);
    opacity: 0.3;
    font-size: 18px;
    position: fixed;
    padding: 12px;
    border-radius: 12px;
    width: 288px; 
    left: -295px; 
    bottom: -225px;
    transition: bottom 0.5s ease, opacity 0.5s ease, left 0.5s ease; /* Smooth transition for expanding */
    z-index: 1000; /* Ensure it's above other content */
    transition-delay: 1300ms;
}

.hot-corner-menu:hover {
    transition-delay: 0s;
    opacity: 1;
    bottom: 2px;
    left: 2px;
}

.material-symbols-hot-corner{
    font-size: 21px;
    color: #FFFFFF77;
    vertical-align: top;
    font-variation-settings: 'FILL' 100,   'wght' 200,  'GRAD' 100,  'opsz' 20;
    padding: 2px;
}


.hot-corner-menu-heading{
    font-size: 32px;
    margin-left:7px;
}

.hot-corner-menu-item{
    margin: 2px;
    border: 1px solid transparent;
    border-radius: 7px;
}

.hot-corner-menu-item:hover{
    border: 1px solid #FFFFFF44;
    background: #FFFFFF22;


}

.font-brand-heading-bold{
    font-family: ExoBold;
    letter-spacing: 5px;
    text-transform: uppercase;
}