/* ==========================================================
   YOUTUBE VIDEO SECTION — TV STYLE + MODAL VIDEO PLAYER
   ========================================================== */

/* Section wrapper */
  .video-section {
    background: #f7f7f7;
    padding: 40px 20px;
    text-align: center;
  }

  .video-section h2 {
    color: #111;
    font-weight: 700;
  }

  /* -------- TV Frame Container -------- */
  .tv-frame {
    position: relative;
    display: inline-block;
    background: #111;
    border: 10px solid #222;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    max-width: 700px;
    aspect-ratio: 16 / 9;
    margin: 40px auto;
  }

  /* Video thumbnail inside the TV */
  .tv-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }

  /* -------- TV Stand -------- */
  .tv-stand {
    width: 120px;
    height: 10px;
    background: #222;
    border-radius: 2px;
    margin: 10px auto 0;
  }

  .tv-stand::after {
    content: "";
    display: block;
    width: 60px;
    height: 6px;
    background: #333;
    border-radius: 1px;
    margin: 4px auto 0;
  }

  /* -------- Play Button -------- */
  .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    animation: pulse 1.8s infinite ease-in-out;
  }

  .play-btn:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.05);
  }

  .play-btn i {
    font-size: 2.5rem;
    color: #000;
  }

  /* -------- Bootstrap Modal Dark Theme -------- */
  .modal-content.bg-dark {
    background: #000 !important;
    border: none;
  }

  /* Make sure nothing else covers the modal (rare) */
    .modal { z-index: 9999 !important; }

/* ==========================================================
  ANIMATIONS: TV TURN-ON + PLAY BUTTON PULSE
========================================================== */

  /* --- Play Button Pulse Animation --- */

  @keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
    100% { transform: translate(-50%, -50%) scale(1); }
  }

  /* --- TV Turn-On Effect (inside modal) --- */
  .tv-on-start {
    animation: tvOn 0.6s ease-out forwards;
  }

  @keyframes tvOn {
    0% {
      transform: scaleY(0.02);       /* A thin horizontal line */
      filter: brightness(300%);
    }
    40% {
      transform: scaleY(0.1);
      filter: brightness(200%);
    }
    70% {
      transform: scaleY(1.2);
      filter: brightness(150%);
    }
    100% {
      transform: scaleY(1);
      filter: brightness(100%);
    }
  }


  /* -------- Responsive tweaks -------- */
  @media (max-width: 768px) {
    .tv-frame {
      max-width: 90%;
    }

    .play-btn {
      width: 60px;
      height: 60px;
    }
}
/* youtube video css end */