/* Floating Menu to hold the button and quarter circle */
.floating-menu {
    position: fixed; /* Fixed position to stick on the screen */
    bottom: 0; /* Adjust the distance from the bottom */
    right: 0; /* Adjust the distance from the right */
    z-index: 1000; /* Ensure it appears above other content */
    margin: 0;
}

/* Circle Button */
.circle-button {
    width: 70px;
    height: 70px;
    background-color: #082743;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    bottom: 20px; /* Add 20px margin from the bottom */
    right: 20px;  /* Add 20px margin from the right */
    z-index: 2;
    
    background-image: url('https://cdn-icons-png.flaticon.com/512/10439/10439826.png'); /* Initial icon */
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Hidden Quarter Circle */
.quarter-circle {
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Black with 80% opacity */
    border-radius: 0 100% 0 0;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: all 0.3s cubic-bezier(0.33, 0, 0.67, 1); /* Faster animation with ease-in effect in the last 30% */
    z-index: 1;
    overflow: hidden;
}

/* Quarter Circle Active State */
.floating-menu.active .quarter-circle {
    width: 250px;
    height: 250px;
    background-color: rgba(0, 0, 0, 0.8); /* Black with 10% opacity (90% transparency) */
    border-radius: 100% 0 0 0;
    position: absolute;
}

/* Buttons Inside Quarter Circle */
.menu-button {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in;
}

/* Icon Buttons */
.icon-button {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

.icon-button img {
    width: 24px;
    height: 24px;
}

/* Menu Button Labels */
.menu-button span {
    font-size: 12px;
    color: #fff;
}

/* Make Buttons Appear When Quarter Circle Expands */
.floating-menu.active .menu-button {
    opacity: 1;
    transition-delay: 0.3s; /* Delays the button appearance after the quarter circle expands */
}

.wordshift {
    position: relative;
    left: -6px;
}

.header__link {
    text-decoration: none; /* Removes underline */
    color: inherit; /* Ensures the link inherits the text color */
}

.enqshift {
    position: relative;
    left: 4px;
}
