:root { --color-primary: #203c85;
--color-rating-star: #f59e0b;
--color-text-main: #0f172a;
--color-text-muted: #64748b;
--color-border: #e5e7eb;
--color-bg-soft: #f8fafc;
--color-badge-blue-bg: #203c85;
--color-badge-blue-text: #ffffff;
--color-badge-yellow-bg: #fef3c7;
--color-badge-yellow-text: #92400e;
--color-badge-pink-bg: #fce7f3;
--color-badge-pink-text: #9d174d; --radius-card: 16px;
--radius-pill: 999px; --space-xs: 6px;
--space-sm: 10px;
--space-md: 18px;
--space-lg: 28px; --shadow-card:
0 10px 30px rgba(15,23,42,0.08);
--shadow-card-hover:
0 18px 42px rgba(15,23,42,0.14);
--shadow-featured:
0 16px 40px rgba(32,60,133,0.16); --transition-fast: 0.2s ease;
--transition-smooth: 0.35s ease; --font-size-title: 21px;
--font-size-body: 14px;
--font-size-small: 13px;
} .section-head {
margin-bottom: 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.section-title {
margin-bottom: 20px;
text-align: center;
}
.section-desc {
max-width: 72ch;
margin: 0 auto;
font-size: 16px;
line-height: 1.7;
color: var(--color-text-muted);
text-align: center;
} .card {
background: #fff;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.card-featured {
border: 2px solid var(--color-primary);
box-shadow: var(--shadow-featured);
} .pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: var(--radius-pill);
transition:
transform var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast),
background var(--transition-fast);
}
.pill-hover:hover {
transform: translateY(-2px);
border-color: rgba(32,60,133,0.25);
box-shadow: var(--shadow-card);
} .pill-outline {
border: 1px solid var(--color-border);
background: #fff;
color: var(--color-text-main);
} .hotel-badge {
position: absolute;
top: 16px;
left: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 500;
}
.hotel-badge i {
font-size: 11px;
line-height: 1;
opacity: 0.95;
}
.badge-blue {
background: var(--color-badge-blue-bg);
color: var(--color-badge-blue-text);
}
.badge-yellow {
background: var(--color-badge-yellow-bg);
color: var(--color-badge-yellow-text);
}
.badge-pink {
background: var(--color-badge-pink-bg);
color: var(--color-badge-pink-text);
} .hotel-rating i {
color: var(--color-rating-star);
} .us-btn.us-btn-style_4 {
border: 2px solid #2563eb;
} .icon-muted {
color: var(--color-text-muted);
font-size: 14px;
margin-right: 8px;
} @media (max-width: 768px) {
.section-head {
margin-bottom: 36px;
}
.section-desc {
font-size: 15px;
}
}