body {
    font-family: Arial, sans-serif;
}

.chatbot-icon {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    filter: drop-shadow(2px 4px 6px black);
    /*drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.75)); /* Adjust the shadow values as needed */
    z-index: 1000;
    /* Ensure the icon stays on top */
}

.chatbot-icon:hover {
    filter: drop-shadow(2px 4px 6px black);
    animation: rotateAnimation 2s infinite linear;
    /* Adjust duration and timing function as needed */

}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.chatbot-popup {
    position: absolute;
    bottom: 80px;
    /* Position above the icon */
    right: 20px;
    /* Align with the icon */
    width: 340px;
    /* Increased width */
    max-width: 90%;
    height: 500px;
    /* Increased height */
    max-height: 90%;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.9);
    /* White background with 90% opacity */
    display: none;
    background-color: white;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    /* Optional: adds a blur effect to the background */
    padding: 10px;
    z-index: 1000;
    /* Ensure the popup stays on top */
}

.chatbot-popup iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 25px;
}

@media (max-width: 340px) {
    .chatbot-popup {
        width: 90%;
        height: 90%;
        bottom: 10px;
        right: 10px;
        border-radius: 0;
    }
}