/*==================================
DESTINATION HERO
==================================*/

.page-hero{

position:relative;

height:280px;

overflow:hidden;

display:flex;

align-items:center;

}

.page-hero img{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

}

.page-overlay{

position:absolute;

inset:0;

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

}

.page-content{

position:relative;

z-index:2;

color:white;

}

.page-content h1{

font-size:52px;

margin-bottom:12px;

font-weight:700;

}

.breadcrumb{

display:flex;

align-items:center;

gap:10px;

font-size:16px;

}

.breadcrumb a{

color:white;

opacity:.85;

}

.breadcrumb span{

color:#A7F3D0;

font-weight:600;

}

.breadcrumb i{

font-size:12px;

}
/*=============================
DESTINATIONS
=============================*/

.destinations{
    padding:90px 0;
    background:#fff;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:40px;
}

.section-tag{
    color:#0F766E;
    font-weight:700;
    display:block;
    margin-bottom:8px;
}

.section-header h2{
    font-size:42px;
    color:#0F172A;
}

.view-all{
    color:#0F766E;
    font-weight:700;
}

.destination-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

.destination-card{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
}

.destination-card img{
    width:100%;
    height:280px;
    object-fit:cover;
    transition:.4s;
}

.destination-overlay{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:20px;
    background:linear-gradient(transparent,rgba(0,0,0,.8));
    color:#fff;
}

.destination-overlay h3{
    margin-bottom:6px;
}

.destination-card:hover img{
    transform:scale(1.08);
}
/*==================================
FILTER
==================================*/

.destination-filter{

padding:60px 0 30px;

background:#fff;

}

.filter-tabs{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.filter-tabs button{

padding:12px 24px;

border:none;

background:#F1F5F9;

border-radius:50px;

cursor:pointer;

font-size:15px;

font-weight:600;

transition:.3s;

}

.filter-tabs button.active{

background:#0F766E;

color:#fff;

}

.filter-tabs button:hover{

background:#0F766E;

color:#fff;

}
/*==================================
DESTINATION GRID
==================================*/

.destinations-page{

padding-bottom:80px;

}

.destination-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:28px;

}

.destination-card{

position:relative;

overflow:hidden;

border-radius:18px;

cursor:pointer;

height:280px;

}

.destination-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.destination-card:hover img{

transform:scale(1.1);

}

.destination-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:22px;

background:linear-gradient(to top,
rgba(0,0,0,.8),
transparent);

color:#fff;

}

.destination-overlay h3{

font-size:24px;

margin-bottom:6px;

}

.destination-overlay p{

color:#E2E8F0;

}
/*==================================
PAGINATION
==================================*/

.pagination-section{

padding-bottom:100px;

}

.pagination{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

}

.pagination button{

width:46px;

height:46px;

border:none;

border-radius:12px;

background:#F1F5F9;

cursor:pointer;

font-weight:700;

font-size:15px;

transition:.3s;

}

.pagination button.active{

background:#0F766E;

color:white;

}

.pagination button:hover{

background:#0F766E;

color:white;

}