/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 28 2026 | 11:00:15 */
/* =========================================
   SLIDER BASE FIX
========================================= */

#rev_slider_14_1_wrapper rs-sbg,
#rev_slider_14_1_wrapper rs-sbg-wrap,
#rev_slider_14_1_wrapper rs-sbg-px {
    background: #0b0e21 !important;
    background-image: none !important;
}

#rev_slider_14_1_wrapper rs-sbg canvas {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =========================================
   CLOUDS (SMALLER + RIGHT → LEFT)
   ========================================= */

.moving-clouds {
    position: absolute;
    top: 0;
    left: 0;

    width: 300% !important; /* IMPORTANT: must be wider than screen */

    height: 100% !important;

    background-image: url("https://test.blackpeopleplayingcards.com/wp-content/uploads/revslider/TheGem-Agency-One-Page-New/Crystal-Clouds1.png");

    background-repeat: repeat-x !important;

    background-size: auto 75% !important;

    background-position: 0 top !important;

    animation: cloudLoop 60s linear infinite;

    will-change: transform;
}

.moving-clouds img {
    opacity: 0 !important;
}

/* RIGHT → LEFT (smooth loop) */
@keyframes cloudLoop {
    from {
        transform: translateX(-33.333%);
    }
    to {
        transform: translateX(0);
    }
}

/* =========================================
   FANTASY BACKGROUND (SMALLER + LEFT → RIGHT)
   ========================================= */

.fantasy-bg {
    position: absolute;
    top: 0;
    left: 0;

    width: 200% !important;
    height: 100% !important;


    background-repeat: repeat-x !important;

    /* 🔥 SMALLER + LESS BLUR */
    background-size: auto 100% !important;
    background-position: center top !important;

    animation: fantasyLoop 95s linear infinite;

    will-change: transform;
    transform: translate3d(0,0,0);

    z-index: 1;
}

.fantasy-bg img {
    opacity: 0 !important;
}

/* LEFT → RIGHT (opposite direction of clouds) */
@keyframes fantasyLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.globe {
    animation: spinOnce 4s linear forwards;
}

@keyframes spinOnce {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* =========================================
  YOUTUBE LIVE STREAMING
========================================= */

/* Main wrapper */
.youtube-live-container {
  display: flex;
  align-items: stretch;
}

/* Video side */
.youtube-live-video {
  height: 100%;
}

.youtube-video-container {
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}

/* Chat side */
.youtube-live-chat {
  width: 100%;
  flex: 1;
min-height: 300px;
}

/* Make iframe fully fill chat container */
.youtube-live-chat iframe,
.yt-live-chat {
  width: 100%;
  height: auto;
  min-height: 100%;
  flex: 1;
  border: 0;
}
/* TABLET (768px–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .youtube-live-chat {
    height: 420px;
    min-height: 420px;
  }

  .youtube-live-chat iframe,
  .yt-live-chat {
    height: 100%;
    min-height: 420px;
  }
}

/* MOBILE (<768px) */
@media (max-width: 767px) {
  .youtube-live-container {
    flex-direction: column;
  }
  .youtube-video-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .youtube-live-video iframe {
    width: 100%;
    height: 100%;
  }
  .youtube-live-chat {
    height: 535px;
    min-height: 535px;
  }
  .youtube-live-chat iframe,
  .yt-live-chat {
    height: 100%;
    min-height: 535px;
  }
}

/* =========================================
   TWINKLING STARS
========================================= */

.twinkle-1,
.twinkle-2,
.twinkle-3,
.twinkle-4{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    will-change:opacity;
}

.twinkle-1{
    animation:twinkle1 24s ease-in-out infinite;
}

.twinkle-2{
    animation:twinkle2 29s ease-in-out infinite;
}

.twinkle-3{
    animation:twinkle3 33s ease-in-out infinite;
}

.twinkle-4{
    animation:twinkle4 27s ease-in-out infinite;
}

/* ========================================= */

@keyframes twinkle1{

0%,12%{
opacity:0;
}

18%{
opacity:.70;
}

28%{
opacity:.70;
}

34%{
opacity:0;
}

100%{
opacity:0;
}

}

/* ========================================= */

@keyframes twinkle2{

0%,34%{
opacity:0;
}

40%{
opacity:.60;
}

50%{
opacity:.60;
}

56%{
opacity:0;
}

100%{
opacity:0;
}

}

/* ========================================= */

@keyframes twinkle3{

0%,56%{
opacity:0;
}

62%{
opacity:.75;
}

72%{
opacity:.75;
}

78%{
opacity:0;
}

100%{
opacity:0;
}

}

/* ========================================= */

@keyframes twinkle4{

0%,78%{
opacity:0;
}

84%{
opacity:.65;
}

94%{
opacity:.65;
}

100%{
opacity:0;
}

}