.reel-session {
    background: #f9f9f9;
    border-top: -100px;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.headline {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(100deg, rgb(230, 5, 5), rgb(7, 73, 154), rgb(152, 5, 5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .headline {
        font-size: 1.4rem;
        padding: 0 10px;
        background: linear-gradient(100deg, rgb(144, 2, 2), rgb(7, 73, 154), red);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.reel-container {
    position: relative;
    width: 90%;
    max-width: 1000px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff, #f0f2f5);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    padding-bottom: 40px;
}

.reel-wrapper {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 20px;
    padding: 40px 20px;
    position: relative;
}

.reel-wrapper::-webkit-scrollbar {
 display: none;
}

video {
    width: 200px;
    height: 320px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 20px;
    background: black;
    scroll-snap-align: center;
    transition: transform 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
    opacity: 0.8;
    cursor: pointer;
}

.reel-wrapper video.active  {
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 10px 30px rgba(57, 57, 57, 0.6);
    z-index: 10;
}

.progress-line {
    position: absolute;
    bottom: 15px;
    left: 0;
    height: 5px;
    background: linear-gradient(185deg, red, rgb(7, 73, 154), red);
    width: 0%;
    border-radius: 5px;
    transition: width 0.3s ease;
}