.hero-slider {
    z-index:10;
    height:100vh;
    max-height:926px;
    width:100%;
    .swiper-slide {
        .swiper-slide-overlay {
            background: linear-gradient(178.44deg, rgba(33, 33, 33, 0.8) 1.33%, rgba(33, 33, 33, 0.1) 98.67%);
            display:block;
            content:'';
            width: 100%;
            height:100%;
            left:0;
            top:0;
            position:absolute;
        }
        video {
            position:absolute;
            left:0;
            top:0;
            width: 100%;
            height:100%;
            z-index:0;
            object-position: center;
            object-fit: cover;
        }
        .slide-content {
            color:white; 
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            display:flex;
            flex-direction: column;
            gap:20px;
            justify-content: center;
            margin: 0 auto;
            max-width: 1605px;
            width: 100%;
            h1 {
                color:white;
                overflow: hidden;
                max-width: 60%;
                text-transform: uppercase;
                word-break: break-word;
                hyphens: auto;
            }

            .title-in {
                overflow: hidden;
            }

            .title-in span {
                display: block;
                transform: translateY(115%);
                opacity: 0;
                transition: transform 700ms ease, opacity 500ms ease;
                will-change: transform, opacity;
            }
        }

        &.is-title-visible {
            .slide-content {
                .title-in span {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
        }

        &.is-title-leaving {
            .slide-content {
                .title-in span {
                    transform: translateY(-115%);
                    opacity: 0;
                }
            }
        }

        .hero-slider-button {
            fill: #FFFFFF;
            color: #FFFFFF;
            border-style: solid;
            border-width: 1px 1px 1px 1px;
            border-color: #FFFFFF;
            display: inline-block;
            font-size: 19px;
            font-weight: 600;
            border-radius: 12px 12px 12px 12px;
            padding: 22px 28px 22px 28px;
            text-align: center;
            transition: all .3s;
            margin-right: auto;
            text-transform: uppercase;
            height:inherit;
            .hero-slider-button-in {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 15px;
                svg {
                    width:15px;
                    height:15px;
                    transition: all 300ms ease;
                }
            }
        }
        .hero-slider-button:hover {
            background:red;
            border-color:red;
            svg {
                transform: rotate(-45deg);
            }
        }
    }

    .swiper-nav {
        width:100%;
        max-width:1605px;
        display:flex;
        justify-content: space-between;
        flex-direction: row;
        position:absolute;
        left:50%;
        bottom:72px;
        transform:translateX(-50%);
        z-index:10;
        .swiper-pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            bottom: 40px !important;
            width: auto !important;
            position:relative;
            top:0;
            .swiper-pagination-bullet {
                width:10px;
                height:10px;
                background:white;
                opacity:1;
                &.swiper-pagination-bullet-active {
                    border:1px solid white;
                    width:26px;
                    height:26px;
                    background:transparent;
                }
            }
        }
        .swiper-button-prev,
        .swiper-button-next {
            position:static;
            margin:0;
            width:43px;
            height:43px;
        }
        .swiper-button-prev:after,
        .swiper-button-next:after {
            display:none;
        }
        .swiper-bullets {
            display:flex;
            flex-direction: row;
            gap:40px;
            position: relative;
        }
    }
} 

@media screen and (max-width:580px) {
    .hero-slider {
        max-height:100vh;
        .swiper-slide {
            .slide-content {
                padding:16px;
                h1 {
                    font-weight: 500;
                    font-size: 55px;
                    line-height: 65px;
                    max-width: 100%;
                    margin:0;
                }

            }
            .hero-slider-button {
                width: 172px;
                height: 49px;
                border-radius: 12px;
                border-width: 1px;
                gap: 12px;
                padding: 18px;
                font-weight: 600;
                font-size: 11px;
            }
        }
        .swiper-nav {
            padding:0 16px;
            .swiper-pagination {
                .swiper-pagination-bullet {
                    width:5px;
                    height:5px;
                    &.swiper-pagination-bullet-active {
                        width:13px;
                        height:13px;
                    }
                }
            }
            .swiper-button-prev,
            .swiper-button-next {
                width:17px;
                height:17px;
            }
        }
    }
}