/* Define the keyframe animation for the zoom effect */
@keyframes zoomIn {
    from {
        transform: scale(0.5); /* Start at half size */
        opacity: 0; /* Start invisible */
    }
    to {
        transform: scale(1); /* End at full size */
        opacity: 1; /* End fully visible */
    }
}

/* Chatbot Button Style */
.whatsapp-logo {
    border-radius: 50%; /* Makes the image circular */
    width: 45px; /* Set width */
    height: 45px; /* Set height */
    cursor: pointer; /* Change cursor on hover */
    animation: zoomIn 0.5s ease; /* Apply the zoom-in animation on load */
}

.whatsapp-logo:hover {
    transform: scale(0.9); /* Zoom in effect on hover */
}


/* Preload Montserrat font */
@font-face {
    font-family: 'Montserrat';
    src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

.gavo-chatbot-button-container {
    position: fixed;
    bottom: 20px;
    right: 20px;    
    z-index: 1000;
}

.gavo-chatbot-button-container.left {
    left: 20px;
}

.gavo-chatbot-button-container.right {
    right: 20px;
}

.gavo-chatbot-toggle-button {
    display: none; /* Hide the toggle button */
}

/* Chatbox Style */
.gavo-chatbox-container {
    display: none; /* Hide chatbox container by default */
    position: fixed;
    bottom: 80px; /* Adjust as needed */
    width: 200px; /* Adjust width as needed */
    background-color: #f6fdf9;
    border: 1px solid #ccc;
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    color: #fff; /* Set text color to white */
    font-size: 13px; /* Set font size to 13px */
    z-index: 1002;
}


/* Chatbox positions */
.gavo-chatbox-container.left {
    left: 20px;
}

.gavo-chatbox-container.right {
    right: 20px;
}


/* Chatbox Header Style */
.chatbox-header {
    background-color: #25d366;
    padding: 10px;
    font-weight: light; /* Set font weight to light */
    font-family: 'Montserrat', sans-serif; /* Use Montserrat Classic font */
    font-size: 12px; /* Set font size to 13px */
    border-bottom: 1px solid #ccc;
    color: #fff; /* Set text color to white */
    border-radius: 20px 20px 0 0; /* Rounded corners */
}

/* Chatbox Body Style */
.chatbox-body {
    padding: 10px;
}


.chatbox-header {
    font-family: 'Montserrat', sans-serif;
    color: white; /* or any desired color */
}

.chatbox-header a {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: white; /* or any desired color */
}

.chatbox-header span {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: white; /* or any desired color */
}

/* CSS styles for positioning the close button */
.close-chatbox {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.close-chatbox img {
    width: 20px; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
}

/* CSS styles for the close button image */
.close-button-img {
    opacity: 0.2; /* Set the opacity to 50% (adjust as needed) */
}