.hero-slider{
  position:relative;
  min-height:260px;
}
.hero-slide{
  position:absolute;
  width:100%;
  top:0;
  left:0;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1s ease, transform 1s ease;
}
.hero-slide.active{
  opacity:1;
  transform:translateY(0);
  position:relative;
}
.clip-path-diagonal{
clip-path:polygon(0 0,100% 0,0 100%);
}
.tab-card{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
background:#1a1a1a;
border-radius:10px;
padding:16px;
font-size:14px;
transition:all .35s ease;
cursor:pointer;
}

.tab-card i{
font-size:20px;
color:#d4a65a;
}

.tab-card:hover{
background:#d4a65a;
color:#000;
transform:translateY(-4px);
}

.tab-card:hover i{
color:#000;
}

.tab-card.active{
background:#d4a65a;
color:#000;
}

.tab-card.active i{
color:#000;
}

 /* Discover Attractions Around Celestia Retreat */
.attraction-wrapper{
display:flex;
gap:16px;
height:420px;
}

.attraction-card{
position:relative;
flex:1;
overflow:hidden;
border-radius:12px;
transition:flex .5s ease;
cursor:pointer;
}

.attraction-card img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease;
}

.attraction-card:hover img{
transform:scale(1.1);
}

.attraction-wrapper:hover .attraction-card{
flex:.6;
}

.attraction-card:hover{
flex:3;
}

.overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:30px;
background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
color:#fff;
opacity:0;
transition:opacity .4s ease;
}

.attraction-card:hover .overlay{
opacity:1;
}

.overlay h3{
font-size:22px;
margin-bottom:10px;
}

.explore-btn{
display:inline-block;
background:#d4a65a;
color:#000;
padding:10px 20px;
border-radius:30px;
font-weight:600;
transition:.3s;
}

.explore-btn:hover{
background:#c3954b;
}

.vertical-title{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%) rotate(-90deg);
color:#fff;
font-weight:600;
letter-spacing:3px;
opacity:.8;
transition:.3s;
}

.attraction-card:hover .vertical-title{
opacity:0;
}

/* Mobile */
@media(max-width:768px){

.attraction-wrapper{
flex-direction:column;
height:auto;
}

.attraction-card{
flex:none;
height:260px;
}

.vertical-title{
display:none;
}

.overlay{
opacity:1;
}

}



/* image gallary css */
.gallery-item{
position:relative;
overflow:hidden;
border-radius:12px;
cursor:pointer;
}

.gallery-item img{
width:100%;
height:260px;
object-fit:cover;
transition:transform .6s ease;
}

.gallery-item:hover img{
transform:scale(1.1);
}

.gallery-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
display:flex;
align-items:flex-end;
justify-content:center;
padding-bottom:20px;
opacity:0;
transition:opacity .4s ease;
}

.gallery-item:hover .gallery-overlay{
opacity:1;
}

.gallery-overlay h3{
color:#fff;
font-weight:600;
letter-spacing:.5px;
}


/* image gallery page */

.gallery-item{
position:relative;
overflow:hidden;
border-radius:12px;
cursor:pointer;
}

.gallery-item img{
width:100%;
height:260px;
object-fit:cover;
transition:transform .6s ease;
}

.gallery-item:hover img{
transform:scale(1.1);
}

.gallery-overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to top,rgba(0,0,0,.75),transparent);
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:20px;
color:#fff;
opacity:0;
transition:opacity .4s ease;
}

.gallery-item:hover .gallery-overlay{
opacity:1;
}