/*=========================================
POPULAR DESTINATIONS
PART 2 - CSS
==========================================*/

.destinations{
    background:#090909;
    padding:80px 0;
    overflow:hidden;
}

.section-heading{
    text-align:center;
    margin-bottom:50px;
}

.section-heading h2{
    font-size:42px;
    color:#fff;
    font-weight:700;
    margin-bottom:12px;
}

.section-heading p{
    color:#bfbfbf;
    font-size:18px;
}

.destination-slider{

    display:flex;

    gap:28px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    padding:15px 5px 30px;

    -ms-overflow-style:none;

    scrollbar-width:none;

}

.destination-slider::-webkit-scrollbar{

display:none;

}

.destination-card{

position:relative;

flex:0 0 330px;

height:460px;

border-radius:28px;

overflow:hidden;

text-decoration:none;

scroll-snap-align:center;

background:#111;

transition:.45s ease;

box-shadow:0 15px 40px rgba(0,0,0,.45);

border:2px solid rgba(212,175,55,.18);

}

.destination-card:hover{

transform:translateY(-12px);

border-color:#D4AF37;

box-shadow:0 20px 50px rgba(212,175,55,.25);

}

.destination-card img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .7s;

}

.destination-card:hover img{

transform:scale(1.08);

}

.overlay{

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

background:linear-gradient(

to top,

rgba(0,0,0,.88),

rgba(0,0,0,.25),

transparent

);

}

.content{

position:absolute;

left:25px;

bottom:28px;

z-index:5;

}

.content h3{

font-size:34px;

font-weight:700;

color:#fff;

margin-bottom:8px;

}

.content p{

font-size:17px;

color:#D4AF37;

font-weight:500;

letter-spacing:.5px;

}

.slider-nav{

display:flex;

justify-content:center;

gap:16px;

margin-top:35px;

}

.slider-nav button{

width:56px;

height:56px;

border:none;

border-radius:50%;

background:#1b1b1b;

color:#D4AF37;

font-size:22px;

cursor:pointer;

transition:.3s;

border:1px solid rgba(212,175,55,.25);

}

.slider-nav button:hover{

background:#D4AF37;

color:#000;

transform:scale(1.08);

}

/*=========================
TABLET
=========================*/

@media(max-width:992px){

.destination-card{

flex:0 0 300px;

height:420px;

}

.section-heading h2{

font-size:34px;

}

}

/*=========================
MOBILE
=========================*/

@media(max-width:768px){

.destinations{

padding:60px 0;

}

.destination-slider{

gap:18px;

padding:10px 15px 25px;

}

.destination-card{

flex:0 0 86%;

height:400px;

}

.content h3{

font-size:30px;

}

.content p{

font-size:16px;

}

.section-heading h2{

font-size:30px;

}

.section-heading p{

font-size:16px;

}

}

@media(max-width:480px){

.destination-card{

height:360px;

}

.content{

left:20px;

bottom:22px;

}

.content h3{

font-size:26px;

}

.slider-nav{

display:none;

}

}