.section-container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

.slider-container{
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.slider-item{
    position: relative;
    width: 100%;
    height: 460px;
    max-height: 460px;
}

.item-background{
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-title__container{
    position:absolute;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
    background:linear-gradient(to bottom, rgb(0 0 0 / 12%), rgb(0 0 0 / 48%));
    display:flex;
    justify-content:center;
    align-items:center;
    padding:24px;
}

.item-title__title{
    text-align:center;
    font-size:1.1rem;
    line-height:1.35;
    padding:16px 20px;
    color:white;
    text-shadow:none;
    max-width:68%;
    margin:0 auto;
    word-break:break-word;
    background:rgba(12, 24, 38, 0.58);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:16px;
    box-shadow:0 10px 24px rgba(0,0,0,0.22);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.slider-prev{
    animation: arrowPrev .7s;
    -webkit-animation: arrowPrev .7s;
}

.slider-next{
    animation: arrowNext .7s;
    -webkit-animation: arrowNext .7s;
}

@keyframes arrowNext{
    0%{
        opacity:0;
        right:-100%;
    }
    100%{
        right:0%;
        opacity:1;
    }
}

@keyframes arrowPrev{
    0%{
        opacity:0;
        left:-100%;
    }
    100%{
        left:0%;
        opacity:1;
    }
}

@-webkit-keyframes arrowPrev{
    0%{
        opacity:0;
        right:-100%;
    }
    100%{
        right:0%;
        opacity:1;
    }
}

@-webkit-keyframes arrowNext{
    0%{
        opacity:0;
        left:-100%;
    }
    100%{
        left:0%;
        opacity:1;
    }
}

.arrow{
    position:absolute;
    z-index:3;
    font-size:1.4rem;
    width:40px;
    height:40px;
    background:rgba(12,59,90,0.85);
    color:white;
    top:50%;
    transform:translateY(-50%);
    transition:all .2s ease;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.prev-item{
    left:0;
    border-radius:0 12px 12px 0;
}

.next-item{
    right:0;
    border-radius:12px 0 0 12px;
}

.prev-item:after{
    content:"<";
}

.next-item:after{
    content:">";
}

.next-item:hover,
.prev-item:hover{
    background:#1f5fa3;
}

.pagination{
    position:absolute;
    width:100%;
    z-index:3;
    display:flex;
    gap:0.8rem;
    bottom:18px;
    list-style:none;
    padding:0;
    margin:0;
    align-items:center;
    justify-content:center;
}

.dot{
    border:none;
    background:rgba(255,255,255,0.75);
    width:14px;
    height:14px;
    padding:0;
    font-size:0;
    border-radius:50%;
    cursor:pointer;
}

.dot-active{
    background:#e53935;
}

@media (max-width:1024px){
    .section-container{
        max-width:960px;
    }

    .slider-item{
        height:460px;
        max-height:460px;
    }

    .item-title__title{
        font-size:1rem;
        max-width:74%;
        padding:14px 18px;
    }
}

@media (max-width:768px){
    .slider-item{
        height:340px;
        max-height:340px;
    }

    .item-title__title{
        font-size:0.95rem;
        max-width:80%;
        padding:12px 16px;
    }
}

@media (max-width:640px){
    .slider-item{
        height:320px;
        max-height:320px;
    }

    .item-title__container{
        padding:18px;
    }

    .item-title__title{
        font-size:0.9rem;
        line-height:1.3;
        max-width:84%;
        padding:10px 14px;
    }

    .arrow{
        width:32px;
        height:32px;
        font-size:1.1rem;
    }
}

@media (max-width:480px){
    .slider-item{
        height:280px;
        max-height:280px;
    }

    .item-title__title{
        font-size:0.82rem;
        max-width:88%;
        padding:10px 12px;
        border-radius:12px;
    }

    .arrow{
        width:30px;
        height:30px;
        font-size:1rem;
    }
}

@media (max-width:360px){
    .slider-item{
        height:240px;
        max-height:240px;
    }

    .item-title__title{
        font-size:0.76rem;
        max-width:90%;
        padding:8px 10px;
    }

    .arrow{
        width:28px;
        height:28px;
        font-size:0.95rem;
    }
}