.position-relative {
         position: relative;
     }
     .video-container {
         position: relative;
         width: 100%;
         height: auto;
         cursor: pointer;
     }

     .play-icon {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         opacity: 0.8;
         transition: opacity 0.3s ease;
     }

     .play-icon svg {
         width: 70px;
         height: 70px;
     }

     .play-icon:hover {
         opacity: 1;
     }


      .embed-responsive {
         position: relative;
         display: block;
         width: 100%;
         padding: 0;
         overflow: hidden;
     }

     .embed-responsive-16by9::before {
         content: "";
         display: block;
         padding-top: 56.25%;
     }

     .embed-responsive-item {
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         width: 100%;
         height: 100%;
         border: 0;
     }

     .close-video-btn {
         position: absolute;
         top: 10px;
         right: 10px;
         background: rgba(0, 0, 0, 0.5);
         color: white;
         border: none;
         font-size: 24px;
         cursor: pointer;
         z-index: 2;
         padding: 0;
         line-height: 1;
         width: 30px;
         height: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
     }

     .close-video-btn:hover {
         background: rgba(0, 0, 0, 0.8);
     }