/* css slider */
    .slider{
        height: 100vh;
        margin-top: 0px;
        position: relative;
    }
    .slider .list .item{
        position: absolute;
        inset: 0 0 0 0;
        overflow: hidden;
        opacity: 0;
        transition: .5s;
    }
    .slider .list .item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .slider .list .item::after{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        background-image: linear-gradient(
            to top, #00000097 40%, transparent
        );
    }
    .slider .list .item .content{
        position: absolute;
        left: 10%;
        top: 20%;
        width: 500px;
        max-width: 80%;
        z-index: 1;
    }
    .slider .list .item .content p:nth-child(1){
        text-transform: uppercase;
        letter-spacing: 10px;
    }
    .slider .list .item .content h2{
        font-size: 80px;
        margin: 0;
        color: white;
    }
    .slider .list .item.active{
        opacity: 1;
        z-index: 10;
    }
    @keyframes showContent {
        to{
            transform: translateY(0);
            filter: blur(0);
            opacity: 1;
        }
    }
    .slider .list .item.active p:nth-child(1),
    .slider .list .item.active h2,
    .slider .list .item.active p:nth-child(3){
        transform: translateY(30px);
        filter: blur(20px);
        opacity: 0;
        animation: showContent .5s .7s ease-in-out 1 forwards;
    }
    .slider .list .item.active h2{
        animation-delay: 1s;
    }
    .slider .list .item.active p:nth-child(3){
        animation-duration: 1.3s;
    }
    .arrows{
        position: absolute;
        top: 30%;
        right: 50px;
        z-index: 100;
    }
    .arrows button{
        background-color: #eee5;
        border: none;
        font-family: monospace;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        font-size: x-large;
        color: #eee;
        transition: .5s;
    }
    .arrows button:hover{
        background-color: #eee;
        color: black;
    }
    .thumbnail-n{
        position: absolute;
        background-color: none !important;
        border: none imo !important;
        bottom: 50px;
        z-index: 11;
        display: flex;
        gap: 10px;
        width: 100%;
        height: 250px;
        padding: 0 50px;
        box-sizing: border-box;
        overflow: auto;
        justify-content: end;
        z-index: 200;
    }
    .thumbnail-n::-webkit-scrollbar{
        width: 0;
    }
    .thumbnail-n .item{
        width: 150px;
        height: 220px;
        filter: brightness(.5);
        transition: .5s;
        flex-shrink: 0;
    }
    .thumbnail-n .item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
    .thumbnail-n .item.active{
        filter: brightness(1.5);
    }
    .thumbnail-n .item .content{
        position: absolute;
        inset: auto 10px 10px 10px;
        color: white    !important;
    }
    @media screen and (max-width: 678px) {
        .thumbnail-n{
            justify-content: start;
        }
        .slider .list .item .content h2{
            font-size: 40px;
        }

        .slider{
            margin-top: 0px;
        }

    }