.custom-hospitality-slider {
position: relative;
overflow: hidden;
width: 100%;
}
.chs-wrapper {
position: relative;
width: 100%;
}
.chs-slide {
position: absolute;
inset: 0;
width: 100%;
background-size: cover;
background-position: center;
display: flex;
opacity: 0;
z-index: 1;
transform: scale(1.06);
transition:
opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1),
transform 8s cubic-bezier(0.2, 0.8, 0.2, 1);
pointer-events: none;
}
.chs-slide.active {
opacity: 1;
z-index: 2;
transform: scale(1);
pointer-events: auto;
}
.chs-slide::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.55));
z-index: 1;
}
.chs-content-container {
position: relative;
z-index: 3;
}
.chs-content-container {
width: 100%;
max-width: var(--container-widget-width, 1140px);
z-index: 3;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
} .chs-title,
.chs-subtitle,
.chs-description,
.chs-btn {
opacity: 0;
transform: translateY(30px);
will-change: transform, opacity;
}
.chs-slide.active .chs-title {
animation: luxuryReveal 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.2s;
}
.chs-slide.active .chs-subtitle {
animation: luxuryReveal 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.4s;
}
.chs-slide.active .chs-description {
animation: luxuryReveal 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.5s;
}
.chs-slide.active .chs-btn {
animation: luxuryReveal 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
animation-delay: 0.65s;
}
@keyframes luxuryReveal {
from {
opacity: 0;
transform: translateY(35px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chs-title {
font-family: 'Cinzel', 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 20px;
}
.chs-subtitle {
font-size: 1.1rem;
font-weight: 300;
opacity: 0.85;
margin-bottom: 15px;
line-height: 1.6;
}
.chs-description {
font-size: 1rem;
font-weight: 300;
opacity: 0.75;
margin-bottom: 40px;
line-height: 1.6;
max-width: 600px;
}
.chs-btn {
display: inline-block;
color: #ffffff;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding-bottom: 5px;
transition: all 0.3s ease;
}
.chs-btn:hover {
border-color: #ffffff;
transform: translateX(4px) !important;
}
.chs-pagination {
position: absolute;
right: 4%;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 15px;
z-index: 10;
text-align: right;
}
.chs-nav-item {
font-size: 1rem;
color: #fff;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
padding-right: 5px;
}
.chs-nav-item.active {
color: #ffffff;
font-size: 1.5rem;
font-weight: 700;
}
.chs-nav-item.active::after {
content: '';
position: absolute;
right: 0;
bottom: -5px;
width: 70px;
height: 2px;
background-color: #ffffff;
}
.chs-nav-item:hover::after {
content: '';
position: absolute;
right: 0;
bottom: -5px;
width: 70px;
height: 2px;
background-color: #ffffff;
}
@media (max-width: 768px) {
.chs-title {
font-size: 2rem;
}
.chs-pagination {
right: 2%;
}
.chs-slide {
padding: 40px 5%;
}
}