/* Popup Overlay */

.custom-popup-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 9999;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

}



.custom-popup-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* Popup Container */

.custom-popup-container {

    position: relative;

    max-width: 90%;

    max-height: 90%;

    background: white;

    /* border-radius: 10px; */

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    transform: scale(0.8);

    transition: transform 0.3s ease;

}



.custom-popup-overlay.active .custom-popup-container {

    transform: scale(1);

}



/* Close Button */

.custom-popup-close {

    position: absolute;

    top: 10px;

    right: 15px;

    background: none;

    border: none;

    font-size: 50px;

    font-weight: 400;

    cursor: pointer;

    z-index: 10001;

    width: 50px;

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    /* background-color: rgba(255, 255, 255, 0.8); */

    transition: background-color 0.3s ease;

}



.custom-popup-close:hover {

    background-color: rgba(255, 255, 255, 1);

}



/* Marquee */

.custom-popup-marquee {

    background-color: #f8f9fa;

    padding: 10px 0;

    overflow: hidden;

    white-space: nowrap;

    border-bottom: 1px solid #dee2e6;

}



.marquee-content {

    display: inline-block;

    animation: marquee 15s linear infinite;

    font-size: 16px;

    font-weight: bold;

    color: #333;

}



@keyframes marquee {

    0% {

        transform: translateX(100%);

    }



    100% {

        transform: translateX(-100%);

    }

}



/* Popup Content */

.custom-popup-content {

    position: relative;

    display: block;

}



.popup-image-link {

    display: block;

    text-decoration: none;

}



.popup-image {

    width: 100%;

    height: auto;

    display: block;

    max-width: 1200px;

    max-height: 500px;

    object-fit: contain;

}



/* Responsive Images */

.popup-mobile-image {

    display: none;

}



.popup-desktop-image {

    display: block;

}



/* Media Queries */

@media (max-width: 768px) {

    .custom-popup-container {

        max-width: 95%;

        max-height: 95%;

        margin: 10px;

    }



    .popup-desktop-image {

        display: none;

    }



    .popup-mobile-image {

        display: block;

    }



    .custom-popup-close {

        top: -10px;

        right: -10px;

        font-size: 24px;

        width: 35px;

        height: 35px;

    }



    .marquee-content {

        font-size: 14px;

    }



    .popup-image {

        max-height: 400px;

    }

}



@media (max-width: 480px) {

    .custom-popup-container {

        max-width: 98%;

        max-height: 98%;

        margin: 5px;

    }



    .popup-image {

        max-height: 300px;

    }



    .marquee-content {

        font-size: 12px;

    }

}



/* Animation for popup entrance */

@keyframes popupFadeIn {

    from {

        opacity: 0;

        transform: scale(0.8);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



.custom-popup-container.animate-in {

    animation: popupFadeIn 0.3s ease-out;

}