@keyframes showContent {
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}


@media only screen and (min-width: 200px) {

    .slider {
        height: 100vh;
        position: relative;
    }
    .slider .list .item {
        position: absolute;
        inset: 0 0 0 0;
        overflow: hidden;
        opacity: 0;
        transition: .5s;
    }
    .slider .list .item.active {
        opacity: 1;
        z-index: 10;
    }
    .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, #051e0fbf -25%, #051e0fad 68%, transparent, transparent, transparent, transparent
        );
    }
    .slider .list .item .content{
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 90px;
        z-index: 1;
    }
    .slider .list .item.active .content h2,
    .slider .list .item.active .content p,
    .slider .list .item.active .content button,
    .slider .list .item.active .content a {
        transform: translateY(30px);
        filter: blur(20px);
        opacity: 0;
        animation: showContent .5s .7s ease-in-out 1 forwards;
    }
    .slider .list .item.active .content p {
        animation-delay: 1s;
    }
    .slider .list .item.active .content button,
    .slider .list .item.active .content a {
        animation-delay: 1.3s;
    }

    .slider .list .item .content h2 {
        color: #f0543e;
        font-size: 30px;
        font-weight: 700;
        margin: 0 0 5px;
    }
    .slider .list .item .content p {
        font-size: 17px;
        margin: 5px 0 15px;
        color: #f3ddda;
    }
    .slider .list .item .content button,
    .slider .list .item .content a {
        font-size: 19px;
        border-radius: 5px;
        border: 3px solid #f0543e;
        background-color: #f0543e;
        color: #f0e1df;
        padding: 5px 8px;
        transition: background-color .5s ease-in-out, color .5s ease-in-out;
    }
    .slider .list .item .content button:hover,
    .slider .list .item .content a:hover {
        background-color: #f0e1df;
        color: #b83625;
        cursor: pointer;
        text-decoration: none;
    }

    .arrows{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 15px;
        display: flex;
        justify-content: center;
        z-index: 30;
    }
    .arrows button {
        background-color: #f0543e;
        border: none;
        font-family: monospace;
        border-radius: 5px;
        font-size: 17px;
        padding: 2px 5px;
        color: #f0e1df;
        margin: 0 3px;
        cursor: pointer;
        transition: .5s;
    }
    .arrows button:hover {
        background-color: #f0e1df;
        color: #f0543e;
    }

    .slide_indicator {
        position: absolute;
        bottom: 50px;
        padding: 0 10px;
        z-index: 20;
        display: flex;
        gap: 10px;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        overflow: auto;
        justify-content: center;
    }
    .slide_indicator::-webkit-scrollbar {
        width: 0;
    }
    .slide_indicator .item {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #189f53;
        filter: brightness(.7);
        cursor: pointer;
        transition: .5s;
        flex-shrink: 0;
    }  
    .slide_indicator .item.active {
        filter: brightness(1.5);
    }

}

@media only screen and (min-width: 360px) {

    .slider .list .item .content {
        left: 20px;
        right: 20px;
    }
    .slider .list .item::after {
        background-image: linear-gradient(
                to top, #051e0fbf -25%, #051e0fad 53%, transparent, transparent, transparent, transparent
            );
    }

}
@media only screen and (min-width: 410px) {

    .slider .list .item::after {
        background-image: linear-gradient(
                    to top, #051e0fbf -25%, #051e0fad 50%, transparent, transparent, transparent, transparent
                );
    }
    .slider .list .item .content {
        left: 25px;
        right: 25px;
    }
    .slide_indicator {
        bottom: 53px;
    }
    .slider .list .item .content p {
        font-size: 18px;
    }
    .slider .list .item .content button,
    .slider .list .item .content a {
        font-size: 20px;
    }
    .arrows button {
        font-size: 21px;
    }

}
@media only screen and (min-width: 600px) {

    .slider .list .item::after {
        background-image: linear-gradient(
                        to top, #051e0fbf -25%, #051e0fad 38%, transparent, transparent, transparent, transparent
                    );
    }
    .slider .list .item .content {
        left: 50px;
        right: 50px;
        bottom: 130px;
        text-align: center;
    }
    .slider .list .item .content h2 {
        font-size: 35px;
    }
    .slide_indicator {
        bottom: 70px;
    }
    .slide_indicator .item {
        width: 20px;
        height: 20px;
    }
    .arrows {
        bottom: 30px;
    }

}
@media only screen and (min-width: 710px) {

    .slider .list .item::after {
        background-image: linear-gradient(
                            to top, #051e0fbf -25%, #051e0fad 33%, transparent, transparent, transparent, transparent
                        );
    }
    .slider .list .item .content {
        left: 140px;
        right: 140px;
    }
    .slider .list .item .content p {
        font-size: 21px;
    }
    .slider .list .item .content button,
    .slider .list .item .content a {
        font-size: 23px;
    }

}
@media only screen and (min-width: 768px) {
    .slider .list .item::after {
        background-image: linear-gradient(
                                to top, #051e0fbf -25%, #051e0fad 35%, transparent, transparent, transparent, transparent
                            );
    }
}
@media only screen and (min-width: 912px) {
    .slider .list .item::after {
        background-image: linear-gradient(
                                    to top, #051e0fbf -25%, #051e0fad 23%, transparent, transparent, transparent, transparent
                                );
    }
}
@media only screen and (min-width: 1024px) {

    .slider .list .item::after {
        background-image: linear-gradient(
                                    to top, #051e0fbf -25%, #051e0fad 25%, transparent, transparent, transparent, transparent
                                );
    }

    .slider .list .item .content {
        left: 200px;
        right: 200px;
        bottom: 110px;
        text-align: left;
    }
    .slider .list .item .content h2 {
        font-size: 38px;
    }
    .slider .list .item .content p {
        margin: 5px 0 20px;
    }
    .slide_indicator {
        bottom: 70px;
    }
    .arrows {
        bottom: 30px;
    }
    
}
@media only screen and (min-width: 1024px) {
    @media only screen and (height: 600px) {

        .slider .list .item::after {
            background-image: linear-gradient(
                                            to top, #051e0fbf -25%, #051e0fad 53%, transparent, transparent, transparent, transparent
                                        );
        }
        .slider .list .item .content {
            left: 200px;
            right: 200px;
            bottom: 100px;
            text-align: left;
        }
        .slide_indicator {
            bottom: 60px;
        }
        .arrows {
            bottom: 15px;
        }

    }
}
@media only screen and (min-width: 1280px) {

    @media only screen and (min-height: 800px) {
        .slider .list .item::after {
            background-image: linear-gradient(
                                            to top, #051e0fbf -25%, #051e0fad 41%, transparent, transparent, transparent, transparent
                                        );
        }
    }
    @media only screen and (min-height: 950px) {
        .slider .list .item::after {
            background-image: linear-gradient(
                                            to top, #051e0fbf -25%, #051e0fad 34%, transparent, transparent, transparent, transparent
                                        );
        }
    }
    
    .slider .list .item .content {
        left: 330px;
        right: 330px;
    }

}
@media only screen and (min-width: 1366px) {

    .slider .list .item::after {
        background-image: linear-gradient(
                                        to top, #051e0fbf -25%, #051e0fad 56%, transparent, transparent, transparent, transparent
                                    );
    }

}
@media only screen and (min-width: 1440px) {

    .slider .list .item::after {
        background-image: linear-gradient(
                                        to top, #051e0fbf -25%, #051e0fad 33%, transparent, transparent, transparent, transparent
                                    );
    }

}