/* ===========================
   Destination Slider
=========================== */

.destination-slider{
    width:100%;
    position:relative;
    overflow:hidden;
    padding:20px 0 50px;
}

.destination-slider .swiper-wrapper{
    align-items:center;
}

.destination-slider .swiper-slide{
    border-radius:20px;
    overflow:hidden;
    transition:.45s ease;
}

/* ===========================
   Card
=========================== */

.destination-card{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:20px;

    text-decoration:none;

    background:#fff;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.destination-card img{

    width:100%;

    display:block;

    transition:.5s;

    border-radius:20px;

}

/* Hover Animation */

.destination-card:hover{

    box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.destination-card:hover img{

    transform:scale(1.08);

}

/* ===========================
   Overlay
=========================== */

.destination-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:100%;

    display:flex;

    align-items:flex-end;

    padding:25px;

    background:linear-gradient(
    to top,
    rgba(0,0,0,.88),
    rgba(0,0,0,.45),
    rgba(0,0,0,0));

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.destination-card:hover .destination-overlay,

.destination-card:focus .destination-overlay,

.destination-card:active .destination-overlay{

    opacity:1;

    visibility:visible;

}

/* ===========================
   Content
=========================== */

.destination-content{

    width:100%;

    color:#fff;

}

.destination-content h3{

    margin:0 0 14px;

    font-size:28px;

    font-weight:700;

    color:#fff;

    letter-spacing:.5px;

}

.more-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#C78A2B;

    color:#fff;

    padding:12px 24px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.more-btn svg{

    transition:.35s;

}

.destination-card:hover .more-btn{

    background:#fff;

    color:#C78A2B;

}

.destination-card:hover .more-btn svg{

    transform:translateX(6px);

}
/*=========================================
  Premium Navigation Arrows
=========================================*/

.destination-slider .swiper-button-next,
.destination-slider .swiper-button-prev{

    width:56px;
    height:56px;
    background:#ffffff;
    border-radius:50%;
    box-shadow:0 15px 40px rgba(0,0,0,.18);
    transition:.35s;
    top:50%;
    transform:translateY(-50%);
}

.destination-slider .swiper-button-next{

    right:10px;

}

.destination-slider .swiper-button-prev{

    left:10px;

}

.destination-slider .swiper-button-next::after,
.destination-slider .swiper-button-prev::after{

    font-size:18px;
    font-weight:700;
    color:#C78A2B;
    transition:.3s;

}

.destination-slider .swiper-button-next:hover,
.destination-slider .swiper-button-prev:hover{

    background:#C78A2B;
    transform:translateY(-50%) scale(1.08);

}

.destination-slider .swiper-button-next:hover::after,
.destination-slider .swiper-button-prev:hover::after{

    color:#fff;

}


/*=========================================
  Active Slide Effect
=========================================*/

.destination-slider .swiper-slide-active{

    transform:scale(1.02);

}

.destination-slider .swiper-slide-active .destination-card{

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}


/*=========================================
  Touch Devices
=========================================*/

@media (hover:none){

.destination-overlay{

    opacity:1;
    visibility:visible;

}

.destination-content{

    transform:translateY(0);

}

}


/*=========================================
  Tablet
=========================================*/

@media(max-width:1024px){

.destination-slider{

    padding:15px 0 45px;

}

.destination-content h3{

    font-size:22px;

}

.more-btn{

    padding:10px 18px;
    font-size:14px;

}

}


/*=========================================
  Mobile
=========================================*/

@media(max-width:767px){

.destination-slider{

    padding:10px 0 35px;

}

.destination-slider .swiper-button-next,
.destination-slider .swiper-button-prev{

    width:42px;
    height:42px;

}

.destination-slider .swiper-button-next::after,
.destination-slider .swiper-button-prev::after{

    font-size:15px;

}

.destination-overlay{

    padding:18px;

}

.destination-content h3{

    font-size:20px;
    margin-bottom:10px;

}

.more-btn{

    padding:9px 16px;
    font-size:13px;

}

}


/*=========================================
  Cursor
=========================================*/

.destination-slider{

    cursor:grab;

}

.destination-slider:active{

    cursor:grabbing;

}