.dest-page {
background: #f6f7fb;
}
.destinations-premium-section {
padding: 90px 0;
background:
radial-gradient(circle at top left, rgba(32, 40, 87, 0.12), transparent 35%),
linear-gradient(180deg, #f7f8fb 0%, #ffffff 45%, #f4f6fa 100%);
}
.dest-intro {
max-width: 820px;
margin: 0 auto 45px;
}
.dest-eyebrow {
display: inline-block;
margin-bottom: 14px;
color: #1f8f5f;
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.dest-intro h2 {
margin: 0;
color: #202857;
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 900;
line-height: 1.05;
}
.dest-intro p {
max-width: 660px;
margin: 18px auto 0;
color: #5d6475;
font-size: 1.08rem;
line-height: 1.7;
}
.dest-tabs-wrapper {
margin-bottom: 55px;
}
.dest-tabs {
gap: 12px;
}
.dest-tabs .nav-link {
border: 1px solid rgba(32, 40, 87, 0.12);
border-radius: 999px;
padding: 13px 22px;
background: rgba(255, 255, 255, 0.78);
color: #202857;
font-weight: 800;
box-shadow: 0 14px 34px rgba(32, 40, 87, 0.08);
transition: all 0.3s ease;
}
.dest-tabs .nav-link:hover {
transform: translateY(-2px);
background: #ffffff;
}
.dest-tabs .nav-link.active {
background: #202857;
color: #ffffff;
box-shadow: 0 18px 40px rgba(32, 40, 87, 0.25);
}
.dest-group-heading {
margin-bottom: 28px;
}
.dest-group-heading span {
display: block;
margin-bottom: 8px;
color: #1f8f5f;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.78rem;
}
.dest-group-heading h3 {
margin: 0;
color: #202857;
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 900;
}
.destination-card {
height: 430px;
border-radius: 28px;
overflow: hidden;
cursor: pointer;
background: #202857;
box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
transform: translateY(0);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.destination-card:hover {
transform: translateY(-8px);
box-shadow: 0 32px 80px rgba(16, 24, 40, 0.24);
}
.destination-card-img {
position: relative;
height: 100%;
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform 0.7s ease;
}
.destination-card:hover .destination-card-img {
transform: scale(1.06);
}
.destination-card-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(10, 14, 28, 0.45) 48%, rgba(9, 13, 28, 0.9) 100%);
}
.destination-card-content {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
padding: 32px;
color: #ffffff;
}
.destination-category {
display: inline-flex;
align-items: center;
margin-bottom: 14px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.destination-card h3 {
margin: 0 0 10px;
color: #ffffff;
font-size: 2rem;
font-weight: 900;
}
.destination-card p {
min-height: 58px;
margin: 0 0 22px;
color: rgba(255, 255, 255, 0.86);
font-size: 1rem;
line-height: 1.55;
}
.destination-discover-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
padding: 12px 18px;
background: #ffffff;
color: #202857;
font-weight: 900;
transition: all 0.3s ease;
}
.destination-card:hover .destination-discover-btn {
background: #1f8f5f;
color: #ffffff;
}
.destination-detail-panel {
display: none;
width: 100%;
margin-top: 10px;
margin-bottom: 34px;
animation: detailFade 0.38s ease both;
}
.destination-detail-panel.is-open {
display: block;
}
.destination-detail-inner {
position: relative;
overflow: hidden;
border-radius: 32px;
padding: 34px;
background:
linear-gradient(135deg, #eef7ff 0%, #f7fbff 48%, #ffffff 100%);
box-shadow: 0 28px 90px rgba(16, 24, 40, 0.16);
border: 1px solid rgba(32, 40, 87, 0.08);
}
.destination-detail-inner::before {
content: "";
position: absolute;
width: 360px;
height: 360px;
top: -180px;
right: -160px;
border-radius: 50%;
background: rgba(31, 143, 95, 0.12);
}
.destination-close {
position: absolute;
top: 18px;
right: 20px;
z-index: 5;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: #202857;
color: #ffffff;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.destination-detail-text {
position: relative;
z-index: 2;
height: 100%;
padding: 12px 10px;
}
.destination-detail-category {
display: inline-block;
margin-bottom: 12px;
color: #1f8f5f;
font-weight: 900;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.destination-detail-text h2 {
margin: 0 0 12px;
color: #202857;
font-size: clamp(2rem, 4vw, 3.1rem);
font-weight: 900;
}
.destination-lead {
color: #202857;
font-size: 1.2rem;
font-weight: 800;
}
.destination-detail-text p {
color: #535c70;
font-size: 1.02rem;
line-height: 1.75;
}
.destination-detail-text h4 {
margin: 28px 0 16px;
color: #202857;
font-size: 1.25rem;
font-weight: 900;
}
.destination-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.destination-chips span {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
background: #ffffff;
color: #202857;
font-weight: 800;
font-size: 0.92rem;
border: 1px solid rgba(32, 40, 87, 0.1);
box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
}
.destination-link-row {
margin-top: 28px;
}
.destination-route-link {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 13px 20px;
background: #202857;
color: #ffffff;
font-weight: 900;
text-decoration: none;
transition: all 0.3s ease;
}
.destination-route-link:hover {
background: #1f8f5f;
color: #ffffff;
text-decoration: none;
transform: translateY(-2px);
}
.destination-booking-box {
position: relative;
z-index: 2;
height: 100%;
border-radius: 28px;
padding: 30px;
background: #202857;
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.booking-label {
display: inline-block;
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.destination-booking-box h3 {
margin: 0 0 24px;
color: #ffffff;
font-size: 1.6rem;
font-weight: 900;
}
.destination-booking-form label {
display: block;
margin: 14px 0 7px;
color: rgba(255, 255, 255, 0.86);
font-weight: 800;
}
.destination-booking-form input,
.destination-booking-form select {
width: 100%;
min-height: 48px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
padding: 0 14px;
background: rgba(255, 255, 255, 0.96);
color: #202857;
font-weight: 700;
outline: none;
}
.destination-booking-form input:focus,
.destination-booking-form select:focus {
border-color: #1f8f5f;
box-shadow: 0 0 0 4px rgba(31, 143, 95, 0.18);
}
.destination-booking-form button {
display: block;
width: auto;
min-width: 220px;
margin: 24px auto 0;
min-height: 52px;
border: 0;
border-radius: 999px;
padding: 0 34px;
background: #1f8f5f;
color: #ffffff;
font-weight: 900;
transition: all 0.3s ease;
}
.destination-booking-form button:hover {
background: #ffffff;
color: #202857;
transform: translateY(-2px);
}
@keyframes detailFade {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 991px) {
.destinations-premium-section {
padding: 65px 0;
}
.destination-card {
height: 390px;
}
.destination-detail-inner {
padding: 26px;
}
.destination-booking-box {
margin-top: 10px;
}
}
@media (max-width: 767px) {
.dest-tabs {
flex-direction: column;
}
.dest-tabs .nav-link {
width: 100%;
}
.destination-card {
height: 360px;
border-radius: 22px;
}
.destination-card-content {
padding: 24px;
}
.destination-card h3 {
font-size: 1.7rem;
}
.destination-detail-inner {
border-radius: 24px;
padding: 22px;
}
.destination-close {
top: 12px;
right: 12px;
}
}