/* ============================================================
   CELEBRATING TOGETHERNESS - BACKGROUND VIDEO
   ============================================================ */

.celebration-video {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;

    overflow: hidden;

    background: #061f3d;

    border-radius: 0 14px 14px 0;
}


/* YouTube Player */

.celebration-video #celebrationPlayer {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.celebration-video #celebrationPlayer iframe {

    position: absolute;

    top: 50%;
    left: 50%;

    /*
     * Oversized slightly so the YouTube video behaves
     * like object-fit: cover.
     */

    width: 120%;
    height: 120%;

    min-width: 100%;
    min-height: 100%;

    transform: translate(-50%, -50%);

    border: 0;

    /*
     * Prevent YouTube controls / links from being clicked.
     * Sound is controlled using our own button.
     */

    pointer-events: none;
}


/* Optional overlay */

.celebration-video-overlay {

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 31, 62, 0.08) 0%,
            rgba(4, 31, 62, 0) 45%,
            rgba(4, 31, 62, 0.08) 100%
        );
}


/* Sound Button */

.celebration-sound-btn {

    position: absolute;

    right: 24px;
    bottom: 24px;

    z-index: 10;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 12px 20px;

    border: 0;
    border-radius: 50px;

    background: rgba(255, 255, 255, 0.95);

    color: #07345f;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

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

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.celebration-sound-btn:hover {

    background: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.22);
}


.celebration-sound-btn i {

    font-size: 18px;

    line-height: 1;
}


/* Tablet */

@media (max-width: 991.98px) {

    .celebration-video {

        min-height: 440px;

        border-radius: 12px;
    }


    .celebration-video #celebrationPlayer iframe {

        width: 150%;
        height: 150%;
    }

}


/* Mobile */

@media (max-width: 767.98px) {

    .celebration-video {

        min-height: 360px;
    }


    .celebration-video #celebrationPlayer iframe {

        width: 190%;
        height: 190%;
    }


    .celebration-sound-btn {

        right: 15px;
        bottom: 15px;

        padding: 10px 16px;

        font-size: 13px;
    }

}