.trending {

    background: #000;

}


.slider-container {

    position: relative;

}


.movie-list {

    display: flex;

    gap: 18px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding:
        10px 5px 20px;

}


.movie-list::-webkit-scrollbar {

    display: none;

}


.movie-card {

    flex:
        0 0 190px;

    cursor: pointer;

    transition:
        transform 0.25s ease;

}


.movie-card:hover {

    transform:
        scale(1.06);

}


.poster {

    position: relative;

    height: 285px;

    overflow: hidden;

    border-radius: 5px;

    background: #222;

}


.poster img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.netflix-n {

    position: absolute;

    z-index: 2;

    left: 8px;

    top: 6px;

    color: #e50914;

    font-size: 20px;

    font-weight: 900;

}


.rank {

    position: absolute;

    right: 8px;

    bottom: 0;

    color: white;

    font-size: 50px;

    font-weight: 900;

    text-shadow:
        2px 2px 5px black;

}


.movie-card h3 {

    margin-top: 10px;

    font-size: 16px;

}


.movie-card p {

    margin-top: 3px;

    color: #999;

    font-size: 13px;

}


.slider-button {

    position: absolute;

    z-index: 5;

    top: 42%;

    width: 45px;

    height: 80px;

    border: none;

    border-radius: 5px;

    background:
        rgba(0,0,0,.75);

    color: white;

    font-size: 40px;

}


.slider-button:hover {

    background:
        rgba(0,0,0,.95);

}


.slider-button.left {

    left: -10px;

}


.slider-button.right {

    right: -10px;

}



.continue-section,
.my-list-section {

    display: none;

}


.continue-section.visible,
.my-list-section.visible {

    display: block;

}