.custom-bottom-menu {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    max-width: 600px;
    z-index: 1000;
    background-color: #f8f9fa; /* Light background color */
    border-radius: 15px; /* Slightly rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Soft shadow for elevation */
    padding: 8px;
}

.custom-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    flex: 1;
    text-align: center;
    padding: 5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

    .custom-menu-item:hover {
        color: #0081c3; /* Your preferred hover color */
        transform: scale(1.1); /* Slight enlargement */
    }

.custom-menu-icon {
    font-size: 22px; /* Slightly smaller icon size */
    margin-bottom: 4px;
}



texts {
    position: absolute;
    width: 600px;
    left: 50%;
    margin-left: -225px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    font-weight: 700;
    font-size: 40px;
}

.animate-texts {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    font-weight: 700;
    font-size: 40px;
}

.word {
    position: absolute;
    opacity: 0;
}

.letter {
    display: inline-block;
    position: relative;
    float: left;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
}

    .letter.out {
        transform: rotateX(90deg);
        transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .letter.behind {
        transform: rotateX(-90deg);
    }

    .letter.in {
        transform: rotateX(0deg);
        transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

.wisteria {
    color: #fff;
}

.belize {
    color: #fff;
}

.pomegranate {
    color: #fff;
}

.green {
    color: #fff;
}

.midnight {
    color: #fff;
}




/* Default state of the chat options (hidden) */
#chat-options {
    display: none; /* Hidden by default */
    opacity: 0; /* Make it invisible */
    position: absolute;
    bottom: 60px;
    right: 96px;
    z-index: 100;
    visibility: hidden; /* Hide the element */
    transition: opacity 0.5s ease-in-out, visibility 0s 2s; /* Smooth transition for opacity */
}

    /* Show the chat options with smooth fade-in */
    #chat-options.show {
        display: block; /* Make it visible */
        opacity: 1; /* Make it fully visible */
        visibility: visible; /* Ensure it's visible */
        transition: opacity 0.5s ease-in-out, visibility 0s; /* Smooth transition for opacity */
    }