.video-loading-indicator {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, 0.7);z-index: 15;color: white;text-align: center;gap: 15px;}.spinner {width: 40px;height: 40px;border: 4px solid rgba(255, 255, 255, 0.3);border-radius: 50%;border-top-color: var(--primary-color);animation: spin 1s linear infinite;}@keyframes spin {to {transform: rotate(360deg);}}.progress-container {width: 80%;max-width: 250px;height: 10px;background-color: rgba(255, 255, 255, 0.2);border-radius: 5px;overflow: hidden;}.progress-bar {width: 0%;height: 100%;background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));border-radius: 5px;transition: width 0.3s ease;}.loading-text {font-size: 14px;font-weight: 500;}.example-card {cursor: pointer;}.play-icon {cursor: pointer;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 70px;height: 70px;background-color: rgba(255, 0, 0, 0.7);border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: background-color 0.3s ease, transform 0.3s ease;z-index: 5;}@media (max-width: 767px) {.play-icon {width: 80px;height: 80px;}}.play-icon:before {content: '';width: 0;height: 0;border-top: 15px solid transparent;border-left: 25px solid white;border-bottom: 15px solid transparent;margin-left: 5px;}.example-card:hover .play-icon {background-color: rgba(255, 0, 0, 0.9);transform: translate(-50%, -50%) scale(1.1);}.icon-svg {width: 1em;height: 1em;vertical-align: -0.125em;fill: currentColor;}.btn .icon-svg {margin-right: 0.5em;}@keyframes fa-spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}.icon-spin {animation: fa-spin 1s linear infinite;}