html { scroll-padding-top: 120px; scroll-behavior: smooth; }
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700;900&family=Outfit:wght@800;900&display=swap');
/* 96創新教育書苑 - Design System & Base Styles (Updated to match mockup) */
:root {
/* Colors - Updated to Blue theme */
--primary-color: #0e3b8a; /* Deep Brand Blue */
--primary-light: #2b5db5;
--secondary-color: #f1f5f9; /* Very light blue/gray for backgrounds */
--text-main: #1f2937;
--text-muted: #6b7280;
--bg-main: #ffffff;
--bg-alt: #f8fafc;
--bg-card: #ffffff;
--border-color: #e2e8f0;
--border-light: #f1f5f9;
/* Typography */
--font-family: 'Noto Sans TC', 'Source Han Sans TC', sans-serif;
--nav-height: 64px;
/* Radius & Shadows */
--radius-xl: 20px;
--radius-lg: 16px;
--radius-md: 12px;
--radius-sm: 8px;
--shadow-sm: 0 2px 10px rgba(14, 59, 138, 0.05);
--shadow-md: 0 10px 30px rgba(14, 59, 138, 0.08);
--shadow-lg: 0 20px 40px rgba(14, 59, 138, 0.12);
/* Transitions */
--transition: all 0.3s ease;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family); color: var(--text-main); background-color: var(--bg-main); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
/* Typography */
.section-title { text-align: center; font-size: 2.2rem; color: var(--text-main); margin-bottom: 2rem; font-weight: 700; position: relative; }
.section-subtitle { text-align: center; font-size: 1.1rem; color: var(--text-muted); margin-bottom: 3rem; }
/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: var(--radius-sm); font-weight: 500; cursor: pointer; transition: var(--transition); border: 2px solid transparent; font-size: 1rem; }
.btn-primary { background-color: var(--primary-color); color: #fff; }
.btn-primary:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-outline { background-color: transparent; color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline:hover { background-color: var(--primary-color); color: #fff; }
.btn-outline-white { background-color: transparent; color: #fff; border-color: #fff; }
.btn-outline-white:hover { background-color: #fff; color: var(--primary-color); }
/* Header */
.header { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 1000; border-bottom: 1px solid rgba(226, 232, 240, 0.8); display: flex; align-items: center; transition: all 0.3s ease; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03); }
.header .container { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-logo { height: 38px; border-radius: 8px; box-shadow: 0 4px 12px rgba(14, 59, 138, 0.08); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.brand:hover .brand-logo { transform: scale(1.05); }
.brand-text { font-family: 'Noto Serif TC', serif; font-size: 1.15rem; font-weight: 700; color: var(--text-main); letter-spacing: 1px; display: flex; align-items: baseline; }
.brand-text strong { font-family: 'Outfit', sans-serif; font-size: 1.45rem; font-weight: 900; color: var(--primary-color); margin-right: 6px; letter-spacing: -0.5px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { position: relative; color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.5px; transition: color 0.3s ease; padding: 6px 0; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--primary-color); transition: width 0.3s ease; border-radius: 2px; }
.nav-links a:hover, .nav-links a.active { color: var(--primary-color); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
/* Header Dropdown */
.nav-dropdown { position: relative; display: inline-block; padding: 8px 0; cursor: pointer; }
.nav-dropdown > a::after { display: none; } /* Remove underline for dropdown trigger */
.nav-dropdown-content { opacity: 0; visibility: hidden; position: absolute; background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); min-width: 160px; box-shadow: 0px 12px 36px rgba(14, 59, 138, 0.08); z-index: 1001; border-radius: 12px; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(10px); border: 1px solid rgba(226, 232, 240, 0.8); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); padding: 8px; }
.nav-dropdown:hover .nav-dropdown-content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-content a { color: var(--text-main) !important; padding: 10px 16px; text-decoration: none; display: block; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; border-radius: 8px; margin-bottom: 4px; text-align: center; white-space: nowrap; }
.nav-dropdown-content a::after { display: none; } /* Disable underline in dropdown */
.nav-dropdown-content a:last-child { margin-bottom: 0; }
.nav-dropdown-content a:hover, .nav-dropdown-content a.active { background-color: #f0f5ff; color: var(--primary-color) !important; transform: translateX(4px); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn-primary { border-radius: 30px; padding: 8px 20px; font-weight: 700; font-size: 0.85rem; box-shadow: 0 4px 15px rgba(14, 59, 138, 0.2); letter-spacing: 0.5px; }
.mobile-menu-btn { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; }
/* Hero */
.hero { padding: calc(var(--nav-height) + 60px) 0 20px; position: relative; background-color: #f8fafc; }
.hero-bg-image { position: absolute; top: 0; right: 0; width: 60%; height: 100%; background-size: cover; background-position: center; z-index: 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 100%); mask-image: linear-gradient(to right, transparent 0%, black 25%, black 100%); }
.relative-z { position: relative; z-index: 2; }
.hero-content { max-width: 650px; padding-top: 0px; }
.hero-tag { font-size: 0.95rem; font-weight: 700; color: var(--primary-color); margin-bottom: 12px; display: inline-block; letter-spacing: 1px; }
.hero h1 { font-size: 3.2rem; color: var(--primary-color); margin-bottom: 16px; line-height: 1.2; font-weight: 800; }
.hero p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 12px; max-width: 500px; line-height: 1.6; }
.hero-actions { display: flex; gap: 10px; margin-bottom: 0px; }
.bg-white { background-color: #fff !important; }
/* Quick Search */
.quick-search { position: relative; margin-top: -50px; z-index: 10; padding: 0 20px; }
.search-card { background: var(--bg-card); padding: 30px; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 24px; align-items: end; max-width: 1000px; margin: 0 auto; border: 1px solid var(--border-light); }
.search-group { display: flex; flex-direction: column; gap: 8px; }
.search-group label { font-weight: 700; font-size: 0.95rem; color: var(--text-main); }
.search-group select { padding: 12px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1rem; font-family: inherit; background: #f8fafc; color: var(--text-main); outline: none; appearance: none; }
.search-group select:focus { border-color: var(--primary-color); }
/* Spaces Section */
.spaces-section { padding: 20px 0; background: #fff; position: relative; }
.spaces-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; position: relative; z-index: 2; align-items: stretch; }
.spaces-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.section-header-left { margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
.section-header-left h2 { font-size: 1.4rem; font-weight: 800; color: var(--text-main); position: relative; display: inline-block; }
.section-header-left h2::after { content: ''; position: absolute; bottom: -9px; left: 0; width: 40px; height: 3px; background: var(--primary-color); border-radius: 2px; }
/* Article List Enhanced Design */
.articles-wrapper { height: 0; min-height: 100%; display: flex; flex-direction: column; }
.articles-list { display: flex; flex-direction: column; flex-grow: 1; margin-bottom: 16px; gap: 12px; overflow-y: auto; padding-right: 6px; min-height: 0; }
.articles-list::-webkit-scrollbar { width: 4px; }
.articles-list::-webkit-scrollbar-track { background: transparent; }
.articles-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.articles-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.article-item { display: flex; gap: 12px; padding: 12px; border-radius: 10px; transition: var(--transition); align-items: center; background: #fff; border: 1px solid var(--border-light); flex-shrink: 0; }
.article-item:hover { background: #f8fbff; border-color: var(--primary-color); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(14, 59, 138, 0.05); }
.article-img { width: 112px; aspect-ratio: 16/9; height: auto; object-fit: cover; border-radius: 6px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.article-content { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.article-cat { font-size: 0.65rem; color: #fff; background: var(--primary-color); padding: 2px 8px; border-radius: 4px; display: inline-block; width: fit-content; font-weight: 700; letter-spacing: 0.5px; }
.article-title { font-size: 0.85rem; font-weight: 700; color: var(--text-main); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s; }
.article-item:hover .article-title { color: var(--primary-color); }
.article-date { font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.article-date::before { content: '⏱'; font-size: 0.75rem; }
.articles-card { background: #fff; padding: 20px; border-radius: 16px; box-shadow: 0 4px 20px rgba(14, 59, 138, 0.05); border: 1px solid rgba(14, 59, 138, 0.03); display: flex; flex-direction: column; height: 100%; min-height: 0; }
.articles-card .section-header-left { margin-bottom: 16px; padding-bottom: 8px; flex-shrink: 0; }
.articles-card .section-header-left h2 { font-size: 1.3rem; }
.articles-card .article-btn-wrapper { margin-top: auto; flex-shrink: 0; }
.articles-card .btn-outline { padding: 12px; font-size: 0.9rem; border-radius: 8px; }
.space-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(14, 59, 138, 0.05); border: 1px solid rgba(14, 59, 138, 0.05); transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; }
.space-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(14, 59, 138, 0.1); }
.space-img-wrapper { position: relative; }
.space-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 0.6s ease; }
.space-card:hover .space-img { transform: scale(1.05); }
.space-badge { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(4px); color: var(--primary-color); padding: 4px 12px; border-radius: 8px; font-weight: 800; font-size: 0.9rem; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 2; }
.space-info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.space-info h3 { font-size: 1.25rem; margin-bottom: 8px; color: var(--text-main); font-weight: 700; letter-spacing: 0.5px; }
.space-meta { display: flex; flex-direction: column; gap: 6px; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 16px; }
.space-info .btn-outline { border-color: var(--border-color); color: var(--text-main); font-weight: 700; padding: 10px; font-size: 0.9rem; border-radius: 8px; letter-spacing: 0.5px; text-align: center; width: 100%; }
.space-card:hover .btn-outline { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.space-meta-item { display: flex; align-items: center; gap: 8px; }
.space-meta-item i { color: var(--primary-color); width: 16px; text-align: center; }
/* Why Choose Us */
.why-us { padding: 20px 0 20px; background-color: #f8fbff; background-image: radial-gradient(ellipse at top left, rgba(14, 59, 138, 0.04) 0%, transparent 60%), radial-gradient(ellipse at bottom right, rgba(14, 59, 138, 0.05) 0%, transparent 70%), radial-gradient(rgba(14, 59, 138, 0.05) 1.5px, transparent 1.5px); background-size: 100% 100%, 100% 100%, 30px 30px; position: relative; }
.why-grid { display: grid; grid-template-columns: 1.2fr 3.5fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.why-tag { font-size: 0.85rem; font-weight: 700; color: var(--primary-color); margin-bottom: 8px; display: inline-block; letter-spacing: 1px; }
.why-content h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 16px; color: var(--text-main); line-height: 1.2; letter-spacing: 1px; }
.why-content p { color: var(--text-muted); margin-bottom: 20px; font-size: 0.95rem; line-height: 1.5; }
.why-features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.why-card { background: #fff; padding: 24px 12px; border-radius: 12px; box-shadow: 0 8px 30px rgba(14, 59, 138, 0.05); text-align: center; border: 1px solid rgba(14, 59, 138, 0.03); transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.why-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(14, 59, 138, 0.1); }
.why-icon { width: 56px; height: 56px; background: #f0f5ff; border: 1.5px solid #dbeafe; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); margin-bottom: 16px; transition: all 0.3s; }
.why-icon svg { width: 28px; height: 28px; }
.why-card:hover .why-icon { background: var(--primary-color); color: #fff; border-color: var(--primary-color); transform: scale(1.1); }
.why-card h4 { font-size: 1rem; margin-bottom: 8px; color: var(--text-main); font-weight: 800; letter-spacing: 0.5px; }
.why-card p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0; }
.why-card-line { width: 24px; height: 3px; background: var(--primary-color); margin-top: 20px; border-radius: 2px; }
/* Comparison Table & Pricing CTA */
.compare-section { padding: 20px 0 15px; background: #f8fbff; }
.compare-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
.compare-table-wrapper { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 10px 40px rgba(14, 59, 138, 0.05); border: 1px solid rgba(14, 59, 138, 0.03); }
.compare-header { display: flex; align-items: center; margin-bottom: 12px; }
.compare-icon { width: 44px; height: 44px; border-radius: 50%; background: #f0f5ff; color: var(--primary-color); display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.compare-icon svg { width: 24px; height: 24px; }
.compare-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--text-main); margin-bottom: 2px; line-height: 1.2; letter-spacing: 0.5px; }
.compare-header p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.compare-table { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 16px; }
.compare-table th { background: #f4f8fc; border-bottom: none; color: var(--text-main); font-weight: 700; padding: 10px 12px; font-size: 0.9rem; }
.compare-table th:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.compare-table th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.compare-table td { padding: 12px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--text-muted); font-size: 0.9rem; }
.compare-table tr:last-child td { border-bottom: none; }
.room-badge { display: inline-block; background: var(--primary-color); color: #fff; padding: 4px 12px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; }
.activity-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.activity-tag { background: #f0f5ff; color: var(--text-main); padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.price-link { color: var(--primary-color); font-weight: 700; font-size: 0.85rem; text-decoration: none; transition: all 0.2s; }
.price-link:hover { opacity: 0.8; }
.compare-actions { text-align: center; margin-top: 8px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 50; }
.compare-actions .btn { font-weight: 700; border-radius: 8px; letter-spacing: 0.5px; padding: 10px 20px; font-size: 0.9rem; }
/* Pricing CTA */
.pricing-cta { background: linear-gradient(135deg, #0f3b8e 0%, #1754c0 100%); color: #fff; border-radius: 16px; padding: 24px; position: relative; display: flex; flex-direction: column; justify-content: flex-start; box-shadow: 0 10px 40px rgba(14, 59, 138, 0.15); height: 100%; }
.cta-header { display: flex; align-items: center; margin-bottom: 12px; }
.cta-header-icon { margin-right: 10px; display: flex; align-items: center; justify-content: center; }
.cta-header-icon svg { width: 24px; height: 24px; }
.pricing-cta h3 { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: 0.5px; }
.cta-desc { opacity: 0.9; font-size: 0.85rem; line-height: 1.5; margin-bottom: 20px; }
.cta-features { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.cta-feature-item { display: flex; align-items: flex-start; }
.cta-feature-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }
.cta-feature-icon svg { width: 18px; height: 18px; }
.cta-feature-text h5 { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
.cta-feature-text span { font-size: 0.8rem; opacity: 0.8; line-height: 1.3; display: block; }
.btn-white-arrow { background: #fff; color: var(--primary-color); font-weight: 800; border-radius: 8px; transition: all 0.3s ease; border: none; padding: 10px 20px; text-decoration: none; box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-size: 0.95rem; }
.btn-white-arrow:hover { background: #f0f5ff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
/* FAQ & Gallery */
.faq-gallery { padding: 15px 0 20px; background: #f4f8fc; }
.fg-card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 10px 40px rgba(14, 59, 138, 0.05); display: grid; grid-template-columns: 1.2fr 1.5fr; gap: 20px; align-items: stretch; }
/* FAQ Section (Left) */
.faq-section { display: flex; flex-direction: column; }
.faq-header { display: flex; align-items: center; margin-bottom: 16px; position: relative; }
.faq-header-icon { width: 44px; height: 44px; background: #f0f5ff; border: 2px solid #dbeafe; border-radius: 50%; color: var(--primary-color); display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }
.faq-header-icon svg { width: 22px; height: 22px; }
.faq-header-text h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 2px 0; color: var(--primary-color); letter-spacing: 0.5px; }
.faq-header-text p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.faq-dot-pattern { position: absolute; right: 0; top: 0; width: 40px; height: 30px; background-image: radial-gradient(#dbeafe 2px, transparent 2px); background-size: 10px 10px; opacity: 0.8; }
.faq-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.faq-pill { display: flex; align-items: center; padding: 10px 14px; background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.faq-pill:hover { border-color: var(--primary-color); box-shadow: 0 4px 10px rgba(14, 59, 138, 0.08); transform: translateY(-1px); }
.faq-pill-icon { width: 22px; height: 22px; background: #f0f5ff; color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; margin-right: 10px; flex-shrink: 0; }
.faq-pill-text { font-weight: 700; color: var(--text-main); font-size: 0.85rem; flex-grow: 1; }
.faq-pill-plus { color: var(--primary-color); font-weight: 500; font-size: 1.2rem; line-height: 1; margin-left: 8px; }
.btn-faq-more { display: flex; align-items: center; justify-content: center; padding: 10px; font-weight: 700; font-size: 0.85rem; border-radius: 10px; margin-top: auto; border: 1.5px solid var(--primary-color); color: var(--primary-color); text-decoration: none; transition: all 0.3s ease; }
.btn-faq-more:hover { background: #f0f5ff; }
/* Promo Gallery (Right) */
.promo-gallery { position: relative; border-radius: 16px; display: flex; flex-direction: column; padding: 24px; box-shadow: 0 4px 20px rgba(14, 59, 138, 0.1); min-height: 400px; }
.promo-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; }
.promo-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(14, 59, 138, 0.1) 0%, rgba(14, 59, 138, 0.9) 100%); z-index: 2; }
.promo-badges { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 6px; max-width: 180px; flex-grow: 1; }
.promo-badge { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(4px); padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.p-badge-icon { width: 24px; height: 24px; color: var(--primary-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p-badge-icon svg { width: 16px; height: 16px; }
.p-badge-text { display: flex; flex-direction: column; gap: 0; }
.p-badge-text strong { font-size: 0.8rem; color: var(--text-main); font-weight: 800; }
.p-badge-text span { font-size: 0.65rem; color: var(--text-muted); }
.promo-gallery-bottom { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; gap: 12px; }
.promo-content { color: #fff; flex-grow: 1; padding-bottom: 2px; }
.promo-content h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 2px; letter-spacing: 0.5px; color: #fff; }
.promo-content p { font-size: 0.75rem; opacity: 0.9; margin: 0; line-height: 1.4; color: #fff; }
.promo-cta { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); width: 180px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.promo-cta-header { display: flex; align-items: center; gap: 8px; }
.promo-cta-icon { width: 28px; height: 28px; background: #f0f5ff; border-radius: 6px; color: var(--primary-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.promo-cta-icon svg { width: 16px; height: 16px; }
.promo-cta-text { display: flex; flex-direction: column; gap: 0; }
.promo-cta-text strong { font-size: 0.85rem; color: var(--text-main); font-weight: 800; }
.promo-cta-text span { font-size: 0.65rem; color: var(--text-muted); }
.promo-cta .btn { padding: 8px; font-size: 0.85rem; }
/* Final CTA */
.final-cta { padding: 60px 0; background: var(--primary-color); color: #fff; text-align: center; position: relative; }
/* Assuming skyline bg is an image, we can use a linear gradient for now */
.final-cta::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.15), transparent); pointer-events: none; }
.final-cta-content { position: relative; z-index: 1; }
.final-cta h2 { font-size: 2.2rem; margin-bottom: 16px; font-weight: 700; }
.final-cta p { font-size: 1.1rem; margin-bottom: 32px; opacity: 0.9; }
.final-cta-actions { display: flex; gap: 10px; justify-content: center; }
/* Footer */
.footer { background: #1e293b; color: #cbd5e1; padding: 60px 0 20px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 20px; }
.footer-brand { margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.2rem; font-weight: 700; }
.footer-brand img { height: 32px; /* filter: brightness(0) invert(1) */; }
.footer h4 { color: #fff; font-size: 1.1rem; margin-bottom: 20px; font-weight: 500; }
.footer ul { display: flex; flex-direction: column; gap: 12px; }
.footer a { color: #cbd5e1; }
.footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center; font-size: 0.85rem; opacity: 0.7; }
/* Featured Layout Enhancements */
.bg-light { background-color: #f8fafc; }
.with-subtitle { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; border-bottom: none; padding-bottom: 0; }
.header-subtitle { font-size: 0.9rem; color: var(--text-muted); position: relative; }
.header-subtitle::before { content: '—'; margin-right: 8px; color: var(--primary-color); font-weight: 700; }
.featured-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.space-card-hero { position: relative; background-size: cover; background-position: left center; color: #fff; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(14, 59, 138, 0.08); transition: var(--transition); border: none; }
.space-card-hero:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(14, 59, 138, 0.12); }
.space-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(12, 35, 75, 0.7) 0%, rgba(14, 59, 138, 0.4) 40%, rgba(14, 59, 138, 0.1) 70%, transparent 100%); z-index: 1; }
.space-card-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 100%; width: 100%; height: 100%; padding-bottom: 70px; }
.space-badge-hero { background: rgba(14, 59, 138, 0.85); color: #fff; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; line-height: 1.1; position: absolute; top: 20px; left: 20px; z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.2); padding: 8px 14px; font-size: 1.2rem; gap: 2px; }
.space-badge-hero span { font-size: 0.75rem; font-weight: 500; opacity: 0.9; }
.space-info-hero { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0 20px; }
.space-info-hero h3 { font-size: 1.6rem; margin-bottom: 8px; color: #fff; font-weight: 800; letter-spacing: 1px; }
.space-meta-hero { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; margin-bottom: 12px; opacity: 0.95; font-weight: 500; align-items: flex-start; }
.space-tags-hero { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; justify-content: flex-start; }
.tag-hero { background: rgba(14, 59, 138, 0.75); border: 1px solid rgba(255, 255, 255, 0.4); padding: 5px 12px; border-radius: 20px; font-size: 0.75rem; backdrop-filter: blur(4px); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.space-info-hero .btn-arrow { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); width: 85%; max-width: 300px; padding: 10px; font-size: 0.95rem; font-weight: 700; justify-content: center; letter-spacing: 0.5px; border-radius: 6px; }
.space-tags { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tag-light { background: #f1f5f9; color: var(--text-muted); padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; }
.btn-arrow { display: flex; justify-content: center; align-items: center; gap: 6px; font-weight: 600; border-radius: 6px; padding: 10px 16px; font-size: 0.9rem; }
/* Space Matcher Modal */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 2000; opacity: 0; visibility: hidden; transition: var(--transition); pointer-events: none; }
.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-content { background: #fff; border-radius: 20px; width: 90%; max-width: 500px; position: relative; transform: translateY(20px); transition: var(--transition); box-shadow: 0 25px 50px rgba(0,0,0,0.25); }
.modal-overlay.active .modal-content { transform: translateY(0); }
.modal-close { position: absolute; top: 16px; right: 16px; background: #f1f5f9; border: none; font-size: 1.5rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--text-muted); transition: var(--transition); display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 10; padding: 0; }
.modal-close:hover { background: #e2e8f0; color: var(--text-main); }
.matcher-header { padding: 32px 32px 24px; background: linear-gradient(135deg, var(--bg-main) 0%, var(--bg-alt) 100%); border-bottom: 1px solid var(--border-light); }
.matcher-header h3 { font-size: 1.5rem; font-weight: 800; color: var(--primary-color); margin-bottom: 8px; }
.matcher-header p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; }
.matcher-progress { height: 6px; background: #e2e8f0; border-radius: 3px; }
.progress-bar { height: 100%; background: var(--primary-color); width: 10%; transition: width 0.4s ease; }
.matcher-body { padding: 32px; min-height: 350px; position: relative; }
.matcher-step { position: absolute; top: 32px; left: 32px; right: 32px; opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateX(20px); }
.matcher-step.active { opacity: 1; visibility: visible; transform: translateX(0); position: relative; top: 0; left: 0; right: 0; }
.matcher-step h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; color: var(--text-main); }
.matcher-options { display: flex; flex-direction: column; gap: 12px; }
.matcher-option { background: #fff; border: 2px solid var(--border-light); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: var(--transition); text-align: left; width: 100%; font-family: inherit; }
.matcher-option:hover { border-color: var(--primary-color); background: #f8fbff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(14,59,138,0.08); }
.option-icon { font-size: 2rem; background: var(--bg-alt); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; }
.option-text { display: flex; flex-direction: column; gap: 4px; }
.option-title { font-weight: 700; font-size: 1.05rem; color: var(--text-main); }
.option-desc { font-size: 0.8rem; color: var(--text-muted); }
.result-badge { background: #10b981; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; display: inline-block; margin-bottom: 16px; }
#resultTitle { font-size: 1.8rem; font-weight: 800; color: var(--primary-color); margin-bottom: 12px; }
#resultDesc { font-size: 1rem; color: var(--text-main); margin-bottom: 32px; line-height: 1.6; }
.result-action { display: flex; gap: 12px; }
.result-action .btn { flex: 1; justify-content: center; }
/* Responsive Adjustments */
@media (max-width: 1024px) {
.hero-grid, .why-grid, .compare-grid, .pricing-grid, .fg-grid, .spaces-layout { grid-template-columns: 1fr; }
.hero { padding-top: 100px; }
.search-card { grid-template-columns: 1fr 1fr; }
.spaces-grid, .featured-grid { grid-template-columns: repeat(2, 1fr); }
.why-features { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.nav-links, .nav-actions { display: none; }
.mobile-menu-btn { display: block; color: var(--text-main); }
.hero h1 { font-size: 2.5rem; }
.hero-features { flex-direction: column; }
.search-card { grid-template-columns: 1fr; }
.spaces-grid, .featured-grid { grid-template-columns: 1fr; }
.why-features { grid-template-columns: repeat(2, 1fr); }
.pricing-cards { grid-template-columns: 1fr 1fr; }
.final-cta-actions { flex-direction: column; }
.footer-grid { grid-template-columns: 1fr; }
}
/* ─── SITE FOOTER (Desktop) ─── */
.site-footer {
background: #122a61;
color: #fff;
padding: 30px 0 16px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 40px;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.footer-logo img { border-radius: 8px;
width: 44px;
height: 44px;
/* filter: brightness(0) invert(1) */;
}
.footer-logo span {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: 0.5px;
}
.footer-col-1 {
order: 1;
}
.footer-col-1 p {
color: #cbd5e1;
font-size: 0.9rem;
line-height: 1.7;
max-width: 280px;
}
.site-footer h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 12px;
color: #fff;
letter-spacing: 1px;
}
.site-footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.site-footer ul li, .site-footer ul a {
color: #cbd5e1;
text-decoration: none;
transition: color 0.2s;
display: flex;
gap: 8px;
font-size: 0.95rem;
align-items: flex-start;
}
.site-footer ul a:hover {
color: #fff;
}
.footer-col-contact {
order: 4;
}
.footer-col-2 {
order: 2;
}
.footer-col-3 {
order: 3;
}
.footer-mobile-row {
display: contents;
}
.footer-col-menus {
display: contents;
}
.footer-menu-toggle {
display: none;
}
.footer-menu-content {
display: block;
}
.footer-copyright {
text-align: left;
color: #64748b;
font-size: 0.82rem;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.07);
position: relative;
z-index: 1;
}
/* Room 801 Custom Styles */
.room-hero { position: relative; padding: 120px 0 80px; background-size: cover; background-position: center; color: #fff; }
.room-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(14,59,138,0.95) 0%, rgba(14,59,138,0.7) 50%, rgba(14,59,138,0.1) 100%); z-index: 1; }
.room-hero-content { position: relative; z-index: 2; max-width: 800px; margin-left: 0; }
.breadcrumb { font-size: 0.85rem; opacity: 0.8; margin-bottom: 12px; letter-spacing: 0.5px; }
.room-hero-tag { font-family: 'Noto Serif TC', serif; font-size: 1.2rem; color: #facc15; font-style: italic; margin-bottom: 12px; }
.room-hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 16px; letter-spacing: 1px; }
.room-hero p { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; margin-bottom: 20px; max-width: 600px; }
.room-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; max-width: 500px; }
.r-meta-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.1); padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(4px); }
.r-meta-icon { font-size: 1.5rem; }
.r-meta-label { font-size: 0.75rem; opacity: 0.8; margin-bottom: 2px; }
.r-meta-value { font-weight: 700; font-size: 0.95rem; }
.room-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-360-float { position: absolute; bottom: 40px; right: 40px; z-index: 5; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 30px; padding: 12px 24px; display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; backdrop-filter: blur(8px); transition: all 0.3s; }
.btn-360-float:hover { background: rgba(0,0,0,0.8); border-color: #fff; }
.section-header-center { text-align: center; margin-bottom: 20px; }
.section-header-center h2 { font-size: 2rem; font-weight: 800; color: var(--primary-color); margin-bottom: 12px; }
.section-header-center p { color: var(--text-muted); font-size: 1.05rem; }
.activity-recommender { padding: 60px 0 15px; background: #fff; }
.activity-filters { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 20px; margin-bottom: 20px; justify-content: center; }
.activity-filters::-webkit-scrollbar { height: 4px; }
.activity-filters::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.act-filter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 110px; height: 110px; border: 2px solid #e2e8f0; border-radius: 16px; background: #fff; cursor: pointer; position: relative; transition: all 0.2s; flex-shrink: 0; }
.act-filter:hover { border-color: #bfdbfe; background: #f8fafc; }
.act-filter.active { border-color: var(--primary-color); box-shadow: 0 4px 15px rgba(14,59,138,0.1); }
.act-icon { font-size: 2rem; }
.act-text { font-size: 0.8rem; font-weight: 700; color: var(--text-main); text-align: center; line-height: 1.3; }
.act-check { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; background: var(--primary-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; opacity: 0; transition: 0.2s; border: 2px solid #fff; }
.act-filter.active .act-check { opacity: 1; }
.recommendation-card { background: #f8fafc; border-radius: 20px; border: 1px solid #e2e8f0; padding: 0; position: relative; }
.rec-badge { position: absolute; top: 0; left: 0; background: #e0e7ff; color: var(--primary-color); padding: 6px 16px; font-weight: 800; font-size: 0.9rem; border-bottom-right-radius: 12px; }
.rec-header { padding: 24px 32px; border-bottom: 1px solid #e2e8f0; padding-left: 120px; }
.rec-header h3 { font-size: 1.5rem; color: var(--text-main); font-weight: 800; display: flex; align-items: center; gap: 12px; margin: 0; }
.rec-header h3 span { font-size: 1rem; color: var(--text-muted); font-weight: 500; }
.rec-body { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 24px; padding: 32px; }
.rec-type-tag { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; letter-spacing: 0.5px; }
.rec-info h4 { font-size: 1.8rem; color: var(--primary-color); font-weight: 800; margin-bottom: 12px; }
.rec-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.rec-features { list-style: none; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.rec-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--text-main); }
.rec-features li::before { content: '✓'; color: var(--primary-color); font-weight: bold; }
.rec-specs { display: flex; flex-direction: column; gap: 12px; background: #fff; padding: 16px; border-radius: 12px; border: 1px solid #e2e8f0; }
.r-spec { display: flex; align-items: flex-start; gap: 12px; }
.r-spec-icon { background: #f1f5f9; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1rem; }
.r-spec-label { display: block; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 2px; }
.r-spec-val { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text-main); }
.rec-gallery { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.rec-main-img { width: 100%; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.rec-dots { display: flex; gap: 8px; }
.r-dot { width: 8px; height: 8px; border-radius: 4px; background: #cbd5e1; cursor: pointer; transition: 0.3s; }
.r-dot.active { width: 24px; background: var(--primary-color); }
.rec-layout { background: #fff; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
.rec-layout h4 { font-size: 1.4rem; font-weight: 800; color: var(--primary-color); margin-bottom: 8px; }
.layout-diagram-box { flex-grow: 1; background: #f8fafc; border-radius: 8px; border: 1px dashed #cbd5e1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rec-footer { padding: 20px; border-top: 1px solid #e2e8f0; text-align: center; background: #fff; }
.config-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.config-card { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); position: relative; transition: 0.3s; }
.config-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(14,59,138,0.1); border-color: #bfdbfe; }
.c-badge { position: absolute; top: 12px; left: 12px; background: var(--primary-color); color: #fff; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; font-size: 0.9rem; z-index: 2; }
.c-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid #e2e8f0; }
.c-body { padding: 20px; text-align: center; }
.c-body h4 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
.c-diagram { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.c-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; text-align: left; }
.c-meta strong { color: var(--text-main); font-weight: 700; margin-right: 8px; display: inline-block; width: 60px; }
.tour-card { background: #fff; border-radius: 20px; display: flex; box-shadow: 0 10px 40px rgba(14,59,138,0.08); border: 1px solid #e2e8f0; }
.tour-content { padding: 40px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tour-content h2 { font-size: 2rem; font-weight: 800; color: var(--primary-color); margin-bottom: 12px; }
.tour-features { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.tour-features li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.t-icon { color: var(--primary-color); background: #f0f5ff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.tour-image-wrap { flex: 1.5; position: relative; }
.t-img { width: 100%; height: 100%; object-fit: cover; }
.tour-overlay-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border: 3px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; font-weight: 800; background: rgba(14,59,138,0.3); backdrop-filter: blur(4px); cursor: pointer; transition: 0.3s; }
.tour-overlay-icon:hover { transform: translate(-50%, -50%) scale(1.1); background: var(--primary-color); }
.tour-thumbnails { position: absolute; bottom: 20px; left: 20px; right: 20px; display: flex; gap: 12px; }
.t-thumb { flex: 1; border-radius: 8px; border: 2px solid rgba(255,255,255,0.5); height: 60px; cursor: pointer; }
.t-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bf-item { display: flex; align-items: center; gap: 10px; justify-content: center; }
.bf-icon { font-size: 2rem; background: #f0f5ff; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 16px; flex-shrink: 0; }
.bf-text h5 { font-size: 1rem; font-weight: 800; color: var(--text-main); margin-bottom: 2px; }
.bf-text p { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
@media (max-width: 1024px) {
.rec-body { grid-template-columns: 1fr; }
.rec-header { padding-left: 20px; padding-top: 40px; }
.config-grid { grid-template-columns: repeat(2, 1fr); }
.bf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.room-meta-grid { grid-template-columns: 1fr; }
.r-meta-item[style] { grid-column: auto !important; }
.config-grid { grid-template-columns: 1fr; }
/* .bf-grid handled by mobile.css */
/* .tour-card handled by mobile.css */
}
/* New Room 801 Custom Styles */
.room-hero-new { position: relative; padding: 110px 0 46px; background: #eef2ff; min-height: 380px; display: flex; align-items: center; border-bottom: 1px solid #e2e8f0; }
.hero-bg-img { position: absolute; top: 0; right: 0; width: 68%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; filter: saturate(1.2) contrast(1.05) brightness(1.1) sepia(0.05); }
.hero-bg-overlay { position: absolute; inset: 0; background: linear-gradient(to right, #eef2ff 32%, rgba(238,242,255,0.85) 45%, transparent 68%); z-index: 1; pointer-events: none; }
.room-hero-container { position: relative; z-index: 2; width: 100%; display: flex; }
.hero-white-card { background: #ffffff; border-radius: 20px; padding: 32px 40px; box-shadow: 0 20px 50px rgba(14,59,138,0.12); width: 100%; max-width: 580px; border: 1px solid #ffffff; }
.room-hero-tag-new { font-weight: 800; font-size: 0.85rem; color: var(--primary-color); margin-bottom: 12px; letter-spacing: 1px; }
.room-hero-title-new { font-size: 3rem; font-weight: 900; color: #1e3a8a; margin-bottom: 16px; letter-spacing: 1px; display: flex; align-items: center; gap: 12px; line-height: 1.1; }
.room-hero-desc-new { font-size: 0.95rem; color: #475569; margin-bottom: 28px; line-height: 1.6; }
.hero-meta-row { display: flex; gap: 32px; margin-bottom: 28px; align-items: center; flex-wrap: wrap; }
.h-meta-item { display: flex; align-items: center; gap: 10px; }
.h-meta-icon { color: var(--primary-color); display: flex; align-items: center; justify-content: center; }
.h-meta-text { display: flex; flex-direction: column; }
.h-meta-label { font-size: 0.75rem; color: #64748b; margin-bottom: 2px; }
.h-meta-value { font-weight: 700; font-size: 0.95rem; color: #1e293b; }
/* Hide mobile scroll arrows on desktop */
.scroll-arrow { display: none; }
.hero-actions-row { display: flex; gap: 12px; }
.btn-book { padding: 10px 24px; font-size: 0.95rem; font-weight: 700; border-radius: 8px; display: flex; gap: 8px; align-items: center; }
.btn-download { padding: 10px 24px; font-size: 0.95rem; font-weight: 700; border-radius: 8px; border: 1.5px solid #cbd5e1; color: var(--primary-color); display: flex; gap: 8px; align-items: center; }
.btn-download:hover { background: #f8fafc; border-color: var(--primary-color); }
.btn-360-float-new { position: absolute; bottom: 20px; right: 20px; z-index: 5; background: #ffffff; color: var(--primary-color); border: none; border-radius: 30px; padding: 10px 20px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.85rem; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.15); transition: all 0.3s; }
.btn-360-float-new:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
/* New Recommender Card Styles */
.act-recommender-card { background: #f8fafc; border-radius: 12px; display: flex; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #e2e8f0; padding: 24px 0; margin-top: 20px; align-items: stretch; }
.act-bg-shape { position: absolute; background: radial-gradient(circle, rgba(14,59,138,0.03) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.act-bg-shape-1 { width: 300px; height: 300px; top: -100px; left: -100px; }
.act-bg-shape-2 { width: 400px; height: 400px; bottom: -150px; right: -50px; }
.act-bg-dots { position: absolute; width: 80px; height: 80px; background-image: radial-gradient(rgba(14,59,138,0.1) 1.5px, transparent 1.5px); background-size: 10px 10px; pointer-events: none; }
.act-bg-dots-1 { top: 10px; right: 20px; opacity: 0.5; }
.act-bg-dots-2 { bottom: 10px; right: 10px; opacity: 0.5; }
.act-recommender-left { flex: 0 0 340px; padding: 0 32px; position: relative; z-index: 2; border-right: 1px solid rgba(14,59,138,0.08); display: flex; flex-direction: column; justify-content: center; }
.act-tag { display: flex; align-items: center; font-size: 0.75rem; font-weight: 800; color: var(--primary-color); margin-bottom: 12px; letter-spacing: 0.5px; }
.act-tag-line { width: 30px; height: 1.5px; background: var(--primary-color); margin-left: 10px; margin-right: 4px; }
.act-tag-circle { width: 4px; height: 4px; border: 1px solid var(--primary-color); border-radius: 50%; }
.act-recommender-left h2 { font-size: 1.7rem; font-weight: 900; color: #0f172a; margin-bottom: 10px; line-height: 1.25; letter-spacing: 0.5px; }
.act-recommender-left p { font-size: 0.85rem; color: #64748b; line-height: 1.5; margin-bottom: 0; }
.act-current-selection { display: none !important; }
.act-cs-icon { width: 40px; height: 40px; background: #e0e7ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); flex-shrink: 0; }
.act-cs-text { display: flex; flex-direction: column; gap: 2px; }
.act-cs-text strong { font-size: 0.85rem; font-weight: 800; color: var(--primary-color); }
.act-cs-text span { font-size: 0.7rem; color: #64748b; line-height: 1.3; }
.act-cs-check { width: 16px; height: 16px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.act-recommender-right { flex: 1; padding: 0 32px; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-content: center; }
.act-btn { background: #ffffff; border: 1px solid #f1f5f9; border-radius: 8px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s; position: relative; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.015); min-height: 110px; }
.act-btn:hover { border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(14,59,138,0.04); }
.act-btn.active { border: 1.5px solid var(--primary-color); box-shadow: 0 4px 15px rgba(14,59,138,0.08); transform: translateY(-2px); }
.act-btn-icon { color: #64748b; transition: all 0.2s; }
.act-btn.active .act-btn-icon { color: var(--primary-color); }
.act-btn-text { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.5px; margin-top: 4px; font-weight: 700; color: #334155; line-height: 1.3; transition: all 0.2s; }
.act-btn.active .act-btn-text { color: var(--primary-color); }
.act-btn-line { width: 16px; height: 2px; border-radius: 1px; background: #bfdbfe; margin-top: 2px; transition: all 0.2s; }
.act-btn.active .act-btn-line { background: var(--primary-color); width: 20px; }
.act-btn-check { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--primary-color); border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: all 0.2s; z-index: 2; box-shadow: 0 2px 5px rgba(14,59,138,0.2); }
.act-btn.active .act-btn-check { opacity: 1; transform: scale(1); }
/* === New Recommendation Modal Styles === */
/* Layer 1: outer wrapper - constrains total height */
.rec-modal-content { max-width: 920px; width: 92%; max-height: 88vh; padding: 0; background: transparent; box-shadow: none; position: relative; display: flex; flex-direction: column; border-radius: 20px; }
/* Layer 2: white card - fills available height as flex column */
.rec-card-new { position: relative; background: #ffffff; border-radius: 20px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; flex: 1; min-height: 0; box-shadow: 0 25px 50px -12px rgba(14,59,138, 0.25); }
/* Layer 3: close button stays in top-right corner */
.modal-close-new { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: #f1f5f9; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #64748b; transition: all 0.2s; z-index: 10; cursor: pointer; }
.modal-close-new svg { width: 18px; height: 18px; }
.modal-close-new:hover { background: #e2e8f0; color: #0f172a; transform: scale(1.05); }
/* Layer 4: header - never shrinks */
.rec-n-header { position: relative; padding: 24px 28px 12px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; border-bottom: 1px solid #f1f5f9; }
.rec-n-tab { display: inline-flex; align-items: center; gap: 6px; background: #e0e7ff; color: var(--primary-color); font-weight: 800; font-size: 0.7rem; padding: 4px 12px; border-radius: 20px; align-self: flex-start; }
.rec-n-tab svg { width: 12px; height: 12px; }
.rec-n-title-area { display: flex; align-items: baseline; gap: 12px; }
.rec-n-title-area h3 { font-size: 1.5rem; font-weight: 900; color: #1e293b; margin: 0; }
.rec-n-title-area span { font-size: 0.85rem; color: #64748b; font-weight: 600; }
/* Layer 5: body - this is the ONLY part that scrolls */
.rec-n-body { display: grid; grid-template-columns: 250px 1fr 220px; gap: 20px; padding: 16px 28px 20px; overflow-y: auto; flex: 1; min-height: 0; align-items: start; }
.rec-n-left { display: flex; flex-direction: column; }
.rec-n-tag { display: inline-block; background: #e0e7ff; color: var(--primary-color); font-size: 0.65rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; margin-bottom: 8px; align-self: flex-start; }
.rec-n-maintitle { font-size: 1.5rem; font-weight: 900; color: var(--primary-color); margin-bottom: 8px; }
.rec-n-desc { font-size: 0.8rem; color: #64748b; line-height: 1.5; margin-bottom: 16px; }
.rec-n-features { list-style: none; padding: 0; margin: 0 0 16px 0; }
.rec-n-features li { font-size: 0.8rem; color: #1e293b; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; font-weight: 700; }
.feat-icon { width: 16px; height: 16px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.feat-icon svg { width: 10px; height: 10px; }
.rec-n-specs { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.r-n-spec { display: flex; align-items: center; gap: 10px; }
.r-n-icon { width: 28px; height: 28px; background: #eef2ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); flex-shrink: 0; }
.r-n-icon svg { width: 14px; height: 14px; }
.r-n-text { display: flex; flex-direction: column; gap: 2px; }
.r-n-text span { font-size: 0.65rem; color: #64748b; font-weight: 600; }
.r-n-text strong { font-size: 0.8rem; color: #1e293b; font-weight: 800; }
.rec-n-middle { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center; }
.rec-n-img-wrapper { position: relative; width: 100%; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); aspect-ratio: 4/3; }
.rec-n-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; cursor: zoom-in; }
.rec-n-zoom { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; background: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.2s; }
.rec-n-zoom:hover { transform: scale(1.1); }
.rec-n-thumbnails { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.rec-n-thumb { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; cursor: pointer; opacity: 0.5; border: 2px solid transparent; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.rec-n-thumb:hover { opacity: 0.8; transform: translateY(-2px); }
.rec-n-thumb.active { opacity: 1; border-color: var(--primary-color); }
.rec-n-right { display: flex; flex-direction: column; }
.rec-n-alt-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; height: 100%; box-shadow: inset 0 2px 10px rgba(0,0,0,0.02); }
.rec-n-tag-alt { display: inline-block; background: #dbeafe; color: var(--primary-color); font-size: 0.65rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; margin-bottom: 8px; align-self: flex-start; }
.rec-n-diagram { flex: 1; border: 1px solid #cbd5e1; border-radius: 10px; margin: 12px 0; display: flex; align-items: center; justify-content: center; background: #ffffff; min-height: 120px; }
.btn-alt-view { padding: 8px 0; font-size: 0.8rem; background: #ffffff; border: 1.5px solid var(--primary-color); border-radius: 8px; color: var(--primary-color); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; }
.btn-alt-view:hover { background: var(--primary-color); color: #fff; }
/* Layer 6: footer - never shrinks, always visible at bottom */
.rec-n-footer { padding: 16px 28px; border-top: 1px solid #f1f5f9; display: flex; justify-content: center; background: #ffffff; flex-shrink: 0; }
.btn-book-primary { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); color: #fff; font-size: 0.95rem; font-weight: 800; padding: 12px 28px; border-radius: 30px; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(37,99,235,0.25); transition: all 0.3s; }
.btn-book-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(37,99,235,0.4); }
/* Lightbox for Modal Zoom */
.lightbox-overlay { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.9); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.lightbox-overlay.active { display: flex; opacity: 1; }
.lightbox-content { margin: auto; display: block; max-width: 90%; max-height: 85vh; object-fit: contain; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.lightbox-close { position: absolute; top: 30px; right: 40px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; cursor: pointer; z-index: 10001; }
.lightbox-close:hover { color: #bbb; transform: scale(1.1); }
@keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 1024px) {
.rec-modal-content { width: 95%; }
.rec-n-body { grid-template-columns: 1fr; gap: 24px; padding: 16px 24px 24px; }
.rec-n-right { display: none; }
.rec-n-title-area { flex-direction: column; gap: 4px; }
}
/* New Configurations Grid Styles */
.configurations-section-new { scroll-margin-top: 120px; padding: 15px 0 15px; background: #f4f7fb; position: relative; }
.c-bg-dots { position: absolute; width: 150px; height: 150px; background-image: radial-gradient(rgba(14,59,138,0.1) 2px, transparent 2px); background-size: 15px 15px; pointer-events: none; z-index: 1; }
.c-bg-dots-1 { top: 20px; right: 40px; }
.c-bg-dots-2 { bottom: 20px; left: 40px; }
.config-main-card { background: #ffffff; border-radius: 24px; padding: 28px 36px; box-shadow: 0 15px 40px rgba(14,59,138,0.06); position: relative; z-index: 2; border: 1px solid #e2e8f0; }
.config-header-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.config-header-left { display: flex; flex-direction: column; }
.config-tag { display: inline-flex; align-items: center; gap: 6px; background: #e0e7ff; color: var(--primary-color); font-size: 0.8rem; font-weight: 700; padding: 6px 16px; border-radius: 20px; border: 1px solid #bfdbfe; margin-bottom: 16px; align-self: flex-start; }
.config-header-left h2 { font-size: 1.7rem; font-weight: 900; color: #1e293b; margin-bottom: 4px; letter-spacing: 0.5px; }
.config-header-left p { font-size: 1rem; color: #64748b; margin: 0; }
.config-compare-btn { padding: 12px 24px; font-weight: 700; border-color: var(--primary-color); color: var(--primary-color); background: #ffffff; }
.config-cards-grid { display: flex; flex-wrap: nowrap !important; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 12px; cursor: grab; }
.config-cards-grid:active { cursor: grabbing; }
.config-cards-grid::-webkit-scrollbar { height: 4px; }
.config-cards-grid::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 2px; }
.config-cards-grid::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.c-card-new { background: #ffffff; border: 1px solid #f1f5f9; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.3s; flex-shrink: 0; width: 220px; scroll-snap-align: start; }
.c-card-new:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(14,59,138,0.08); border-color: #e2e8f0; }
.c-card-img-wrap { position: relative; height: 140px; }
.c-card-badge { position: absolute; top: 0; left: 0; background: var(--primary-color); color: #fff; font-weight: 800; font-size: 0.85rem; padding: 4px 10px; border-bottom-right-radius: 10px; z-index: 2; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); }
.c-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.c-card-new:hover .c-card-img-wrap img { transform: scale(1.05); }
.c-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; align-items: center; flex: 1; }
.c-card-body h4 { font-size: 0.9rem; font-weight: 800; color: #1e293b; margin-bottom: 6px; text-align: center; }
.c-card-highlight { font-size: 0.68rem; color: var(--primary-color); font-weight: 700; background: #eef2ff; padding: 3px 8px; border-radius: 20px; margin-bottom: 8px; text-align: center; }
.c-card-diagram { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.c-card-meta-list { width: 100%; display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.c-card-meta-item { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; color: #475569; background: #f8fafc; padding: 5px 7px; border-radius: 6px; border: 1px solid #f1f5f9; line-height: 1.3; }
.c-card-meta-item svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--primary-color); }
@media (max-width: 1200px) {
.c-card-new { width: 200px; }
}
@media (max-width: 768px) {
.config-main-card { padding: 24px; }
.c-card-new { width: 180px; }
}
@media (max-width: 480px) {
.config-cards-grid { grid-template-columns: 1fr; }
.c-card-img-wrap { height: 180px; }
}
/* ==========================================================================
LOCATION PAGE REDESIGN STYLES
========================================================================== */
/* Hero Section */
.loc-hero {
position: relative;
background-color: #f8fafc;
height: 280px;
}
.loc-hero-bg {
display: flex;
height: 100%;
}
.loc-hero-text-area {
flex: 0 0 50%;
padding: 80px 40px 80px 10%;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
}
.loc-badge {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
font-size: 1rem;
margin-bottom: 12px;
}
.loc-hero-title {
font-size: 3rem;
font-weight: 800;
color: var(--primary-color);
line-height: 1.2;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.loc-hero-subtitle {
font-size: 1.2rem;
color: var(--text-muted);
line-height: 1.6;
}
.loc-hero-image-area {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60%;
clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.loc-hero-image-area img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 3 Feature Cards */
.loc-features {
padding: 24px 0 32px 0;
background-color: #fff;
text-align: center;
}
.loc-features-header {
margin-bottom: 12px;
}
.loc-features-header h2 {
font-size: 1.8rem;
color: var(--primary-color);
margin-bottom: 8px;
}
.loc-features-header p {
color: var(--text-muted);
}
.loc-features-grid {
display: flex;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
}
.loc-feature-card {
background: #fff;
border-radius: 16px;
padding: 32px 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
display: flex;
align-items: center;
gap: 20px;
width: 320px;
border: 1px solid #f1f5f9;
}
.loc-feature-icon {
color: var(--primary-color);
background: #eef2ff;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
}
.loc-feature-text {
text-align: left;
}
.loc-feature-text h3 {
font-size: 1.2rem;
color: var(--text-main);
margin-bottom: 4px;
}
.loc-feature-text p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.4;
margin: 0;
}
/* Accordion & Sidebar Section */
.loc-details {
padding: 20px 0 20px;
background-color: #f8fafc;
}
.loc-details-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
/* Accordion */
.loc-accordion {
display: flex;
flex-direction: column;
gap: 10px;
}
.loc-acc-item {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
border: 1px solid #e2e8f0;
}
.loc-acc-item.active {
border-color: #bfdbfe;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.loc-acc-header {
width: 100%;
display: flex;
align-items: center;
padding: 24px;
background: none;
border: none;
cursor: default;
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
text-align: left;
}
.loc-acc-num {
background: var(--primary-color);
color: #fff;
padding: 6px 12px;
border-radius: 8px;
margin-right: 16px;
font-size: 1rem;
}
.loc-acc-icon {
margin-left: auto;
font-size: 1.5rem;
color: var(--primary-color);
}
.loc-acc-content {
display: none;
border-top: 1px solid #f1f5f9;
}
.loc-acc-inner {
padding: 24px;
}
.loc-transport-row {
display: flex;
gap: 20px;
margin-bottom: 16px;
}
.loc-transport-row:last-child {
margin-bottom: 0;
}
.loc-trans-icon {
font-weight: 600;
color: var(--primary-color);
width: 120px;
flex-shrink: 0;
}
.loc-trans-desc {
color: #475569;
line-height: 1.6;
}
/* Sidebar CTA Card */
.loc-cta-card {
background: var(--primary-color);
color: #fff;
border-radius: 16px;
padding: 32px;
margin-bottom: 12px;
}
.loc-cta-icon {
font-size: 2.5rem;
margin-bottom: 16px;
}
.loc-cta-card h3 {
font-size: 1.4rem;
margin-bottom: 4px;
font-weight: 800;
}
.loc-cta-card p {
color: #cbd5e1;
font-size: 0.9rem;
margin-bottom: 0;
}
.loc-cta-btn {
display: flex;
justify-content: center;
align-items: center;
background: #facc15;
color: #1e293b;
font-weight: 800;
padding: 14px;
border-radius: 8px;
text-decoration: none;
margin-bottom: 12px;
transition: transform 0.2s;
}
.loc-cta-btn:hover {
transform: translateY(-2px);
}
.loc-cta-list {
list-style: none;
padding: 0;
margin: 0;
}
.loc-cta-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-size: 0.95rem;
color: #e2e8f0;
}
.loc-cta-list li svg {
width: 18px;
height: 18px;
fill: #fff;
color: var(--primary-color);
stroke-width: 2;
flex-shrink: 0;
}
/* Sidebar Map Card */
.loc-map-card {
background: #fff;
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
border: 1px solid #e2e8f0;
}
.loc-map-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.loc-map-icon {
font-size: 1.5rem;
}
.loc-map-card h3 {
font-size: 1.2rem;
color: var(--primary-color);
}
.loc-map-card p {
font-size: 0.95rem;
color: #334155;
margin-bottom: 20px;
line-height: 1.5;
}
.loc-map-preview {
position: relative;
background: #e2e8f0;
height: 160px;
border-radius: 8px;
margin-bottom: 12px;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.loc-map-pin {
background: var(--primary-color);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 12px;
position: relative;
}
.loc-map-pin::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
border-width: 6px 6px 0;
border-style: solid;
border-color: var(--primary-color) transparent transparent transparent;
}
.loc-map-btn {
background: #fff;
color: var(--primary-color);
padding: 8px 24px;
border-radius: 20px;
font-size: 0.95rem;
text-decoration: none;
font-weight: 700;
border: 1px solid #bfdbfe;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
position: absolute;
bottom: 16px;
}
.loc-help-block h4 {
font-size: 1.1rem;
color: var(--text-main);
margin-bottom: 8px;
}
.loc-help-block p {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 16px;
}
.loc-help-row {
display: flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 8px;
font-size: 0.95rem;
}
/* Bottom Features */
.loc-bottom-features {
background: #fff;
padding: 40px 0;
border-top: 1px solid #f1f5f9;
}
.loc-bf-grid {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.loc-bf-item {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 220px;
}
.loc-bf-icon {
font-size: 2rem;
color: var(--primary-color);
}
.loc-bf-text h4 {
font-size: 1.05rem;
color: var(--primary-color);
margin-bottom: 4px;
}
.loc-bf-text p {
font-size: 0.9rem;
color: var(--text-muted);
margin: 0;
}
/* Responsive */
@media (max-width: 992px) {
.loc-hero-title {
font-size: 2.5rem;
}
.loc-hero-image-area {
width: 50%;
}
.loc-details-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.loc-hero {
height: auto;
}
.loc-hero-bg {
flex-direction: column;
}
.loc-hero-text-area {
padding: 60px 24px;
}
.loc-hero-image-area {
position: relative;
width: 100%;
height: 250px;
clip-path: none;
}
.loc-trans-icon {
width: 100%;
margin-bottom: 4px;
}
.loc-transport-row {
flex-direction: column;
gap: 4px;
}
}
.loc-cta-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.loc-cta-icon-wrapper {
color: #fff;
}
/* FAQ Article Section */
.faq-article-section {
background-color: #f8fafc;
}
.faq-article-header {
margin-bottom: 20px;
}
.faq-article-header h2 {
font-size: 2.2rem;
color: var(--primary-color);
font-weight: 800;
margin-bottom: 12px;
}
.faq-article-header p {
color: var(--text-muted);
font-size: 1.1rem;
}
.faq-article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.faq-article-card {
background: #fff;
border-radius: 12px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.faq-article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.fac-image {
height: 200px;
background-size: cover;
background-position: center;
}
.fac-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.fac-tags {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.fac-tags span {
color: var(--primary-color);
background: #eef2ff;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.85rem;
font-weight: 600;
}
.fac-content h3 {
font-size: 1.25rem;
color: var(--text-main);
margin-bottom: 16px;
font-weight: 700;
line-height: 1.4;
}
.fac-readmore {
margin-top: auto;
color: var(--primary-color);
font-weight: 600;
font-size: 0.95rem;
}
@media (max-width: 991px) {
.faq-article-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.faq-article-grid {
grid-template-columns: 1fr;
}
}
/* Booking Page Hero */
.booking-hero {
position: relative;
height: 320px;
background-color: #f8fafc;
}
.booking-hero-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('assets/images/2783-1256x707.jpeg');
background-size: cover;
background-position: center;
}
.booking-hero-bg::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 100%);
}
.booking-hero-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-bottom: 20px;
}
.booking-hero h1 {
font-size: 3.5rem;
color: #1e3a8a;
margin-bottom: 16px;
font-weight: 800;
letter-spacing: 2px;
}
.booking-hero p {
font-size: 1.2rem;
color: #475569;
margin-bottom: 12px;
font-weight: 500;
}
.title-underline {
width: 60px;
height: 4px;
background-color: #fbbf24;
}
.booking-curve-mask {
position: absolute;
bottom: -1px; left: 0; right: 0;
height: 120px;
z-index: 5;
}
.booking-curve-mask svg {
width: 100%;
height: 100%;
}
/* Booking Grid */
.booking-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 20px;
margin-top: -80px;
position: relative;
z-index: 10;
}
.booking-contact-card, .booking-form-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.06);
padding: 32px;
border: 1px solid rgba(226, 232, 240, 0.6);
}
.bcc-header, .bfc-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.bcc-icon, .bfc-icon {
width: 48px;
height: 48px;
background: #1e3a8a;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.bcc-icon svg, .bfc-icon svg {
width: 24px;
height: 24px;
}
.bcc-header h3, .bfc-header h3 {
font-size: 1.4rem;
color: #1e3a8a;
font-weight: 700;
margin: 0;
}
/* Contact Info List */
.bcc-info-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.bcc-info-item {
display: flex;
gap: 10px;
}
.bcc-item-icon {
width: 32px;
height: 32px;
background-color: #1e3a8a;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 0;
}
.bcc-item-icon svg {
width: 16px;
height: 16px;
}
.bcc-item-content {
display: flex;
align-items: flex-start;
gap: 20px;
flex-grow: 1;
}
.bcc-label {
font-weight: 700;
color: #1e293b;
width: 80px;
flex-shrink: 0;
}
.bcc-value {
color: #475569;
}
/* Map Preview in Contact Card */
.bcc-map-preview {
border-radius: 12px;
position: relative;
height: 200px;
background-image: url('assets/images/map-mockup.png');
background-size: cover;
background-position: center;
background-color: #e2e8f0;
display: flex;
align-items: flex-end;
padding: 16px;
}
.bcc-map-card {
background: rgba(255,255,255,0.95);
padding: 16px;
border-radius: 8px;
width: 100%;
}
.bcc-map-card strong {
color: #1e3a8a;
display: block;
margin-bottom: 4px;
}
.bcc-map-card p {
font-size: 0.85rem;
color: #64748b;
margin-bottom: 12px;
}
/* Booking Form */
.booking-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group.half {
width: 50%;
}
.form-group label {
font-weight: 600;
color: #1e293b;
font-size: 0.95rem;
}
.form-group .req {
color: #ef4444;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-family: inherit;
font-size: 1rem;
outline: none;
transition: border-color 0.2s;
}
.form-group input:focus, .form-group textarea:focus {
border-color: #3b82f6;
}
.captcha-row {
display: flex;
align-items: center;
gap: 10px;
}
.captcha-box {
background: #f1f5f9;
border: 1px solid #cbd5e1;
padding: 10px 24px;
border-radius: 8px;
font-weight: bold;
letter-spacing: 2px;
color: #1e293b;
font-size: 1.1rem;
}
.captcha-refresh {
color: #3b82f6;
font-size: 0.9rem;
text-decoration: none;
}
.form-checkbox {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.form-checkbox input {
width: 16px;
height: 16px;
}
.form-checkbox label {
font-size: 0.9rem;
color: #475569;
}
.form-checkbox label a {
color: #3b82f6;
text-decoration: underline;
}
.btn-submit-full {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px;
font-size: 1.1rem;
margin-top: 10px;
background-color: #fbbf24;
color: #1e293b;
border: none;
font-weight: 700;
}
.btn-submit-full:hover {
background-color: #f59e0b;
}
.security-notice {
text-align: center;
margin-top: 30px;
color: #64748b;
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.security-notice svg {
width: 18px;
height: 18px;
}
/* Space Carousel */
.space-preview-section {
background: #fff;
}
.space-carousel-wrapper {
display: flex;
align-items: center;
gap: 10px;
margin-top: 30px;
}
.space-carousel {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
flex-grow: 1;
}
.space-card {
border-radius: 16px;
position: relative;
height: 220px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.sc-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
}
.space-card:hover .sc-bg {
transform: scale(1.05);
}
.sc-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 100%);
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 24px 28px;
}
.sc-content h4 {
color: #fff;
font-size: 1.3rem;
margin-bottom: 8px;
font-weight: 700;
}
.sc-meta {
color: rgba(255,255,255,0.9);
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 8px;
}
.sc-meta .sep {
opacity: 0.5;
}
.sc-btn {
background: rgba(255,255,255,0.85);
color: #1e293b;
backdrop-filter: blur(8px);
border: none;
padding: 10px 20px;
font-size: 0.95rem;
font-weight: 700;
border-radius: 8px;
}
.sc-btn:hover {
background: #fff;
color: #1e293b;
}
.carousel-btn {
background: #fff;
border: 1px solid #e2e8f0;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #1e3a8a;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: 0.2s;
flex-shrink: 0;
}
.carousel-btn:hover {
background: #1e3a8a;
color: #fff;
}
/* Features Banner */
.booking-features-banner {
background: #f8fafc;
padding: 40px 0;
border-top: 1px solid #e2e8f0;
}
.bf-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.bf-item {
display: flex;
align-items: center;
gap: 20px;
padding: 0 20px;
}
.bf-item:not(:last-child) {
border-right: 1px solid #cbd5e1;
}
.bf-icon {
width: 48px;
height: 48px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #1e3a8a;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.bf-icon svg {
width: 24px;
height: 24px;
}
.bf-text h4 {
color: #1e3a8a;
font-size: 1.1rem;
margin-bottom: 4px;
font-weight: 700;
}
.bf-text p {
color: #475569;
font-size: 0.85rem;
line-height: 1.5;
margin: 0;
}
/* Booking Footer overrides */
.booking-footer {
background: #0f4a8a;
color: #fff;
padding: 60px 0 20px;
font-size: 0.95rem;
}
.booking-footer a {
color: #fff;
text-decoration: none;
opacity: 0.8;
transition: opacity 0.2s;
}
.booking-footer a:hover {
opacity: 1;
}
.booking-footer h4 {
color: #fff;
font-size: 1.1rem;
margin-bottom: 20px;
font-weight: 500;
}
@media (max-width: 991px) {
.booking-grid {
grid-template-columns: 1fr;
}
.space-carousel {
grid-template-columns: 1fr;
}
.bf-grid {
grid-template-columns: 1fr;
}
.bf-item:not(:last-child) {
border-right: none;
border-bottom: 1px solid #cbd5e1;
padding-bottom: 20px;
}
.bcc-item-content {
flex-direction: column;
gap: 4px;
}
}
.form-group .req {
color: #e11d48;
margin-left: 4px;
}
.form-group label {
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
}
/* FAQ Page Styles */
.faq-hero {
position: relative;
background-color: #f1f5f9;
background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
background-size: 20px 20px;
padding: 40px 0;
border-bottom: 1px solid #e2e8f0;
}
.faq-hero-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.faq-hero-text h1 {
font-size: 3rem;
color: #1e3a8a;
font-weight: 800;
margin-bottom: 16px;
font-family: serif;
}
.faq-hero-text h1 .highlight {
position: relative;
display: inline-block;
font-family: sans-serif;
z-index: 1;
}
.faq-hero-text h1 .highlight::after {
content: '';
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
height: 8px;
background-color: #fbbf24;
z-index: -1;
}
.faq-hero-text p {
font-size: 1.1rem;
color: #64748b;
}
.faq-sketch-bg {
width: 300px;
height: 180px;
background-image: url('assets/images/classroom_360_panorama.png'); /* Placeholder */
background-size: cover;
background-position: center;
border-radius: 12px;
opacity: 0.5;
mix-blend-mode: multiply;
}
/* Main Layout Grid */
.faq-main-section {
padding-bottom: 20px;
}
.faq-layout-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 30px;
margin-bottom: 0px;
}
.card-box {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
border: 1px solid rgba(226, 232, 240, 0.8);
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.card-header.split {
justify-content: space-between;
}
.ch-left {
display: flex;
align-items: center;
gap: 12px;
}
.icon-circle {
width: 32px;
height: 32px;
background: #1e3a8a;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.icon-circle.hash {
background: #64748b;
}
.icon-square {
width: 32px;
height: 32px;
background: #1e3a8a;
color: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.card-header h3 {
font-size: 1.25rem;
color: #1e293b;
font-weight: 700;
margin: 0;
}
.view-all-link {
font-size: 0.9rem;
color: #3b82f6;
text-decoration: none;
font-weight: 600;
}
.view-all-link:hover {
text-decoration: underline;
}
/* FAQ Filters */
.faq-filter-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.filter-tag {
background: #f1f5f9;
border: none;
padding: 8px 16px;
border-radius: 20px;
color: #64748b;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.filter-tag:hover {
background: #e2e8f0;
}
.filter-tag.active {
background: #1e3a8a;
color: #fff;
}
/* FAQ Accordion using details/summary */
.faq-accordion-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
max-height: 550px;
overflow-y: auto;
padding-right: 8px;
}
.faq-details {
border: 1px solid #e2e8f0;
border-radius: 12px;
transition: 0.3s;
}
.faq-details[open] {
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.faq-summary {
display: flex;
align-items: center;
padding: 16px 20px;
cursor: pointer;
list-style: none;
background: #fff;
}
.faq-summary::-webkit-details-marker {
display: none;
}
.faq-q-icon {
width: 24px;
height: 24px;
background: #e0e7ff;
color: #1e3a8a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
margin-right: 12px;
flex-shrink: 0;
}
.faq-q-text {
font-weight: 600;
color: #1e293b;
flex-grow: 1;
}
.faq-arrow {
color: #94a3b8;
transition: transform 0.3s;
display: flex;
}
.faq-details[open] .faq-arrow {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 20px 20px 56px;
color: #64748b;
line-height: 1.6;
font-size: 0.95rem;
}
/* Articles */
.article-list {
display: flex;
flex-direction: column;
gap: 20px;
max-height: 550px;
overflow-y: auto;
padding-right: 8px;
}
.article-item {
display: flex;
gap: 12px;
text-decoration: none;
padding: 12px;
border-radius: 12px;
border: 1px solid #f1f5f9;
transition: 0.2s;
align-items: center;
}
.article-item:hover {
background: #f8fafc;
border-color: #e2e8f0;
}
.article-img {
width: 128px; aspect-ratio: 16/9; height: auto;
flex-shrink: 0;
border-radius: 8px;
background-size: cover;
background-position: center;
}
.article-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.article-tag {
background: #eff6ff;
color: #3b82f6;
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 4px;
margin-bottom: 8px;
font-weight: 600;
}
.article-title {
font-size: 1rem;
color: #1e293b;
margin: 0 0 6px 0;
font-weight: 700;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-desc {
font-size: 0.85rem;
color: #64748b;
margin: 0 0 10px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.read-more {
font-size: 0.85rem;
color: #1e3a8a;
font-weight: 600;
margin-top: auto;
}
/* Bottom Grid */
.faq-bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.keyword-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.kp {
background: #f1f5f9;
color: #3b82f6;
font-size: 0.85rem;
padding: 6px 12px;
border-radius: 6px;
font-weight: 500;
}
.faq-contact-box {
display: flex;
align-items: center;
gap: 24px;
}
.fc-icon {
width: 80px;
height: 80px;
background: #eff6ff;
color: #1e3a8a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.fc-content h3 {
font-size: 1.25rem;
color: #1e293b;
margin: 0 0 8px 0;
}
.fc-content p {
color: #64748b;
font-size: 0.95rem;
margin: 0 0 16px 0;
}
.btn-sm {
padding: 8px 16px;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #fbbf24;
color: #1e293b;
border: none;
font-weight: 700;
}
@media (max-width: 991px) {
.faq-layout-grid, .faq-bottom-grid {
grid-template-columns: 1fr;
}
.faq-hero-container {
flex-direction: column;
text-align: center;
}
.faq-sketch-bg {
margin-top: 20px;
width: 100%;
}
.faq-contact-box {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 500px) {
.article-item {
flex-direction: column;
padding: 12px;
gap: 8px;
}
.article-title {
font-size: 0.95rem;
margin-bottom: 4px;
}
.article-desc {
font-size: 0.8rem;
margin-bottom: 0;
}
.article-img {
display: none;
}
}
.faq-accordion-list::-webkit-scrollbar,
.article-list::-webkit-scrollbar {
width: 6px;
}
.faq-accordion-list::-webkit-scrollbar-track,
.article-list::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.faq-accordion-list::-webkit-scrollbar-thumb,
.article-list::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
/* Custom fix for tour static slider aspect ratio */
.tour-image-wrap .t-img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
border-radius: 12px;
}
#tour-thumbs .t-thumb img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
/* Footer Link Hover Effect */
.footer-hover-link {
transition: all 0.3s ease;
}
.footer-hover-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff !important;
padding: 2px 8px;
border-radius: 4px;
margin-left: -8px; /* Offset the padding */
}
/* Fix for unclickable act-btn */
.act-recommender-card { z-index: 10 !important; }
.act-recommender-right { position: relative !important; z-index: 99 !important; pointer-events: auto !important; }
.act-btn { position: relative !important; z-index: 100 !important; pointer-events: auto !important; }
.modal-overlay { z-index: 9999 !important; }
/* Mobile FB Section Hidden on Desktop */
.mobile-fb-section { display: none; }