@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");

/*
html,
body {
    width: 100vw;
    height: 100vh;
    position: relative;
}
*/

:root {
    --animation-duration: 1s; /* Default duration */
}

@keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;

    }
    100% {
        opacity: 1;
    }
}

.exponea-banner {
    font-family: Roboto, sans-serif;
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: #2e364d;
    color: #ebeef7;
    padding: 30px 80px 30px 35px;
    font-size: 16px;
    line-height: 1;
    border-radius: 5px;
    box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
    opacity: 0;
    /* transition: opacity 0.2s;*/

    transition: opacity var(--animation-duration) ease-in-out;  /* Gradual fade-in and fade-out */

    animation: fadeOut var(--animation-duration) both;
}
.exponea-banner.exponea-in {
    opacity: 1;

    transition-duration: 1s;

    animation: fadeIn 1s both;
}


.exponea-banner .exponea-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px;
    font-size: 25px;
    font-weight: 300;
    cursor: pointer;
    opacity: 0.75;
}
.exponea-banner .exponea-label {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    opacity: 0.75;
}
.exponea-banner .exponea-text {
    margin-bottom: 8px;
}
.exponea-banner .exponea-text::after {
    content:'\f06e';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    display: inline;
    color: #2d692b; /* Apply primary color to icon */
}
.exponea-banner .exponea-count {
    font-weight: 500;
}



/* Light theme styles */
.exponea-banner.light {
    background-color: #f0f0f0; /* Light background */
    color: #333333; /* Dark text */
    box-shadow: 0 3px 30px rgba(116, 119, 176, 0.1); /* Lighter shadow */
}

.exponea-banner.light .exponea-close {
    color: #333; /* Dark close button for light theme */
    opacity: 0.75;
}

.exponea-banner.light .exponea-text::after {
    color: #e74c3c; /* Change icon color for light theme */
}

.exponea-banner.light .exponea-count {
    color: #555; /* Darker count text in light theme */
}




/*
.exponea-banner .exponea-count::after {
   content:'\f06e';
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    display: inline;
    color: #2d692b;
}*/