#advert-container {
    position: fixed;
    top: 50%;
    right: 5px;
    transform: translateY(-50%); /* Vertically centers the container */
    z-index: 1; /* Ensures the advert container is above other page content */
    border-radius: 5px;
}

.advert-card {
    position: relative; /* Needed for z-index to work */
    margin-bottom: 8px; /* spacing between adverts */
    z-index: 0; /* Default stacking order */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Added box shadow with color #EDEDED */
}

.advert-card img {
    width: 100px; /* initial width */
    height: auto; /* keep aspect ratio */
    transition: transform 0.3s; /* Use transform for a smoother transition */
    transform-origin: top left; /* Scaling starts from the top left corner */
    border-radius: 7px;
}

.advert-card:hover img {
    transform: scale(3) translateX(-70px); /* Enlarge the image; 200px/50px = 4 times the original size */
    z-index: 2; /* Bring the hovered image to the front */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Added box shadow with color #EDEDED */
}

.advert-card:hover ~ .advert-card, /* Hide sibling adverts after the hovered one */
.advert-card:hover ~ .advert-card img { /* Hide images inside sibling adverts after the hovered one */
    opacity: 0;
}

@media screen and (max-width: 600px) {
    .advert-card {
        margin-bottom: 4px; /* Adjusted spacing for mobile screens */
        box-shadow: none;
    }

    .advert-card img {
        width: 80px; /* Adjusted image width for mobile screens */
    }

    .advert-card:hover img {
    transform: scale(3) translateX(-55px); /* Enlarge the image; 200px/50px = 4 times the original size */
    }
}


/* Styles for the overlay background */
        .promo-popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 900;
        }

        /* Styles for the popup container */
        .popup {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            width: 40%;
            text-align: center;
            position: relative;
            transition: width .4s;
        }

        .popup a img{
            position: relative;
            width: 100%;

        }

        @media screen and (max-width: 867px) {
            .popup {
                width: 70%;
            }
        }

        /* Close button styles */
        .close-btn1 {
            cursor: pointer;
            font-size: 20px;
            color: #fff;
            background-color:rgba(0, 0, 0, 0.3);
            border: none;
            border-radius: 50%;
            padding: 5px;
            /*position: absolute;
            top: 10px;
            right: 10px;*/
        }