body {
    background-color: #141111;
    color: #fff;
}
.video-ss-frame {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 3px 3px 3px 3px;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(248, 23, 23, 0.7);
    border-radius: 50%;
    padding: 4px;
}

.video-title {
    color: #f81717;
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px;  /* Fixed height */
    line-height: 20px; /* Align text vertically */
}
/* Make the search input transparent */
.transparent-input {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Light transparent border */
    color: white;
}

/* Placeholder text color */
.transparent-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Transparent search button */
.transparent-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* On focus, add a slight outline */
.transparent-input:focus {
    outline: none;
    border-color: white;
    box-shadow: none;
}

/* Transparent modal backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Adjust transparency (0.5 = 50%) */
}

/* Make the modal itself transparent */
.modal-content {
    background: rgba(255, 255, 255, 0.2) !important; /* Adjust transparency */
    border: none;
    backdrop-filter: blur(10px); /* Optional: Adds a blurred glass effect */
    color: white; /* Ensures text is visible */
}

/* Customize modal header, body, and footer */
.modal-header, .modal-body, .modal-footer {
    background: transparent !important;
    border: none;
}

/* Make modal close button more visible */
.modal-header .btn-close {
    filter: invert(1); /* Makes the close button white */
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px; /* Set max width for larger screens */
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.video-player {
    width: 100%;
    height: auto;
    display: block;
}

/* Full-screen loader */
#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(6, 6, 67, 0.82); /* Transparent white */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Spinner with Loader Image */
.spinner {
    position: relative;
    width: 80px;
    height: 80px;
    border: 5px solid rgba(248, 23, 23, 0.56);
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loader Image in Center */
.spinner img {
    width: 35px; /* Adjust size */
    height: auto;
    position: absolute;
}

/* Spin Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}