.sidebar-banner {
    position: fixed;
    bottom: -130px; /* Hidden for Image/GIF */
    left: 50%;
    transform: translateX(-50%);
    width: 728px;
    height: 110px; /* For Image/GIF */
    max-width: 95%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
    overflow: hidden;
}

.sidebar-banner.active {
    bottom: 10px; /* Slide up for Image/GIF */
}

/* Video and Iframe from bottom-right */
.sidebar-banner.video-active, 
.sidebar-banner.iframe-active {
    bottom: -100%; /* Hidden off-screen */
    right: 10px;
    left: auto;
    transform: none;
    width: auto; /* Native width */
    height: auto; /* Native height */
    max-width: 80%; /* Limit width */
    max-height: 80vh; /* Limit height */
    background-color: rgba(0, 0, 0, 0.8); /* Overlay effect */
    padding: 10px;
}

.sidebar-banner.video-active.active, 
.sidebar-banner.iframe-active.active {
    bottom: 10px; /* Slide up from bottom-right */
}

.banner-content {
    width: 100%;
    height: 100%;
}

.banner-content a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.banner-content img {
    width: 100%;
    height: 100%;
}

.banner-content video {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer; /* Indicate clickable */
}

.banner-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Close Button */
.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    z-index: 10000;
    display: none; /* Hidden by default */
}

.sidebar-banner.active .close-button,
.sidebar-banner.video-active .close-button,
.sidebar-banner.iframe-active .close-button {
    display: block; /* Show for all active states */
}

/* Responsive Design for Image/GIF */
@media (max-width: 768px) {
    .sidebar-banner {
        width: 468px;
        height: 71px;
    }
}

@media (max-width: 480px) {
    .sidebar-banner {
        width: 300px;
        height: 45px;
    }
}

/* Responsive for Video/Iframe */
@media (max-width: 768px) {
    .sidebar-banner.video-active,
    .sidebar-banner.iframe-active {
        max-width: 90%;
        max-height: 30vh;
    }
}