/* ==========================================================================
   Home Event Popup Styling (Vanilla JS Version)
   ========================================================================== */
#popupEvent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.home-event-box {
    position: relative;
    width: 90%;
    max-width: 640px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: popupScaleIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.event-Youtube { max-width: 960px; }

.home-event-box p { margin-bottom: 0; }

@keyframes popupScaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Image Banner styling inside popup */
.home-event-box img {
    display: block;
    width: 100%;
    height: auto;
}

/* Video Wrapper (16:9 Aspect Ratio) */
.home-event-vdo {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.home-event-vdo iframe,
.home-event-vdo video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Close Button Styling */
.home-event-box .fancybox-close-small {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.home-event-box .fancybox-close-small:hover {
    background: rgba(0, 0, 0, 0.8);
}

.home-event-box .fancybox-close-small::before {
    content: ""; display: block;
    position: absolute;    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    background-size: 100%;filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(7500%) hue-rotate(27deg) brightness(103%) contrast(100%); background-position: center; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMzAuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMi4xLjEgQnVpbGQgMTIzKSAgLS0+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5zdDAgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJNZW51X194MkZfX0Nsb3NlX3g1Rl9NRCI+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNOTIuODYsMTAwYy0xLjgzLDAtMy42Ni0uNy01LjA1LTIuMDlsLTM3LjgxLTM3LjgxTDEyLjE5LDk3LjkxYy0yLjc5LDIuNzktNy4zMSwyLjc5LTEwLjEsMC0yLjc5LTIuNzktMi43OS03LjMxLDAtMTAuMWwzNy44MS0zNy44MUwyLjA5LDEyLjE5Qy0uNyw5LjQtLjcsNC44OCwyLjA5LDIuMDljMi43OS0yLjc5LDcuMzEtMi43OSwxMC4xLDBsMzcuODEsMzcuODFMODcuODEsMi4wOWMyLjc5LTIuNzksNy4zMS0yLjc5LDEwLjEsMCwyLjc5LDIuNzksMi43OSw3LjMxLDAsMTAuMWwtMzcuODEsMzcuODEsMzcuODEsMzcuODFjMi43OSwyLjc5LDIuNzksNy4zMSwwLDEwLjEtMS4zOSwxLjM5LTMuMjIsMi4wOS01LjA1LDIuMDlaIi8+CiAgPC9nPgo8L3N2Zz4=);
}