/*=========================
 FLEXBOX CAROUSEL
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.fw-slider{

    width:100%;
    position:relative;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;

}

.slider{

    width:100%;
    display:flex;
    position:relative;
    height:650px;

}

.slide{

    display:none;
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    animation:fade 1.2s;

}

.slide.active{

    display:flex;

}

.slide img{

    width:100%;
    height:100%;
    object-fit:cover;

}

/*==================
 Caption
==================*/

.caption{

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:22px;

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

    color:#fff;

    font-size:34px;

    font-weight:600;

    text-align:center;

    opacity:0;

    animation:captionFade 1.3s forwards;

    animation-delay:.3s;

}

/*==================
 Buttons
==================*/

.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

    z-index:10;

}

.prev:hover,
.next:hover{

    background:#d79d33;

}

.prev{

    left:20px;

}

.next{

    right:20px;

}

/*==================
 DOTS
==================*/

.dots{

    position:absolute;

    bottom:85px;

    width:100%;

    display:flex;

    justify-content:center;

    gap:10px;

    z-index:100;

}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#bbb;

    cursor:pointer;

    transition:.4s;

}

.dot.active{

    background:#fff;
    transform:scale(1.3);

}

/*==================
 Animations
==================*/

@keyframes fade{

from{

opacity:.2;

}

to{

opacity:1;

}

}

@keyframes captionFade{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==================
 Responsive
==================*/

@media(max-width:1200px){

.slider{

height:520px;

}

.caption{

font-size:28px;

}

}

@media(max-width:992px){

.slider{

height:430px;

}

.caption{

font-size:24px;

padding:18px;

}

}

@media(max-width:768px){

.slider{

height:320px;

}

.caption{

font-size:18px;

padding:15px;

}

.prev,
.next{

width:45px;
height:45px;
font-size:24px;

}

}

@media(max-width:480px){

.slider{

height:240px;

}

.caption{

font-size:15px;

padding:12px;

}

.prev,
.next{

width:40px;
height:40px;

}

}