/* ========== Reset & Base ========== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background-color: #fcfdfe;
color: #333;
line-height: 1.6;
font-family: 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}

/* ========== Scroll Animations ========== */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
opacity: 1;
transform: translateY(0);
}

/* ========== 1. Navbar ========== */
.navbar {
background-color: #051464;
padding: 8px 0;
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}
.nav-container {
width: 100%;
max-width: 100%;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 65px;
gap: 30px;
}
.navbar .logo-container {
display: flex;
align-items: center;
flex-shrink: 0;
}
.nav-right {
display: flex;
align-items: center;
gap: 24px;
margin-left: auto;
}
.navbar .nav-logo {
height: 55px;
width: auto;
object-fit: contain;
display: block;
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
}
.nav-links a {
color: rgba(255,255,255,0.8);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: color 0.2s;
white-space: nowrap;
}
.nav-links a:hover {
color: #ffffff;
}
.nav-links a.active-link {
color: #ffffff;
font-weight: 600;
}
.navbar .back-home {
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
padding: 8px 18px;
border-radius: 6px;
white-space: nowrap;
flex-shrink: 0;
}
.navbar .back-home:hover {
background-color: #ffffff;
color: #051464;
border-color: #ffffff;
}

/* ========== Hero Banner ========== */
.hero {
position: relative;
color: white;
text-align: center;
overflow: hidden;
}
.hero-img {
width: 100%;
height: auto;
display: block;
}

/* ========== Form CTA Banner (below hero) ========== */
.form-cta-banner {
background: #fff;
border-bottom: 1px solid #e0e5f0;
padding: 32px 20px;
text-align: center;
}
.form-cta-label {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff3e0;
color: #e65100;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 4px 12px;
border-radius: 4px;
margin-bottom: 12px;
}
.form-cta-label svg {
width: 14px;
height: 14px;
fill: #e65100;
flex-shrink: 0;
}
.form-cta-title {
font-size: 15px;
font-weight: 400;
color: #333;
line-height: 1.7;
max-width: 720px;
margin: 0 auto 18px;
}
.form-cta-title span {
color: #e65100;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.form-cta-title strong {
color: #051464;
font-weight: 700;
}
.form-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #ff9800;
color: white;
text-decoration: none;
padding: 13px 36px;
font-weight: 700;
font-size: 15px;
border-radius: 8px;
transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 14px rgba(255,152,0,0.3);
margin-bottom: 16px;
}
.form-cta-btn:hover {
background-color: #e68a00;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255,152,0,0.35);
}
.form-cta-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.form-cta-prep {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.form-cta-prep-item {
display: inline-flex;
align-items: center;
gap: 5px;
background: #f5f7fa;
border: 1px solid #e8ecf2;
border-radius: 20px;
padding: 5px 12px;
font-size: 12px;
color: #555;
font-weight: 500;
}
.form-cta-prep-item svg {
width: 13px;
height: 13px;
fill: none;
stroke: #051464;
stroke-width: 2;
flex-shrink: 0;
}

/* ========== Common Layout ========== */
.container {
max-width: 1080px;
margin: 0 auto;
padding: 70px 20px;
}
.section-bg {
background-color: #f7f9fc;
}
.section-title {
color: #051464;
font-size: 28px;
margin-bottom: 40px;
font-weight: 700;
letter-spacing: -0.5px;
}

/* ========== Section Wave Transitions ========== */
.section-wave {
display: block;
width: 100%;
height: auto;
line-height: 0;
margin-bottom: -1px;
}
.section-wave svg {
display: block;
width: 100%;
height: 40px;
}
.wave-top {
transform: scaleY(-1);
}

/* ========== Key Dates Timeline ========== */
.timeline-container {
position: relative;
margin: 50px 0;
padding-top: 46px;
}
.timeline-line {
position: absolute;
top: 100px;
left: 0;
width: 100%;
height: 4px;
background-color: #051464;
z-index: 1;
border-radius: 2px;
}
.timeline-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
position: relative;
z-index: 2;
gap: 10px;
}
.timeline-node {
text-align: center;
}
.timeline-date {
height: 44px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 16px;
}
.timeline-date .date-main {
font-size: 15px;
font-weight: 700;
color: #051464;
display: block;
line-height: 1.3;
}
.timeline-date .date-sub {
font-size: 12px;
font-weight: 400;
color: #718096;
display: block;
margin-top: 3px;
line-height: 1.2;
}
.timeline-dot {
width: 20px;
height: 20px;
background-color: #051464;
border: 4px solid #fff;
border-radius: 50%;
margin: 0 auto 18px;
box-shadow: 0 0 0 3px rgba(5, 20, 100, 0.2);
transition: all 0.3s ease;
}
.timeline-node:hover .timeline-dot {
transform: scale(1.3);
background-color: #ff9800;
}
.timeline-desc {
font-size: 14px;
color: #4a5568;
padding: 0 5px;
font-weight: 500;
line-height: 1.4;
margin-top: 2px;
}
.footnote {
font-size: 13px;
color: #333;
margin-top: 30px;
font-style: italic;
}

/* Timeline region labels flanking the vertical divider */
.tl-region-hk, .tl-region-sh {
position: absolute;
top: 4px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
z-index: 4;
line-height: 22px;
}
.tl-region-hk {
left: 0;
width: 33.33%;
text-align: center;
color: #e65100;
}
.tl-region-sh {
left: 33.33%;
width: 66.67%;
text-align: center;
color: #051464;
}
/* Vertical dashed line through timeline */
.timeline-vline {
position: absolute;
top: 0;
bottom: 0;
left: 33.33%;
width: 0;
border-left: 2px dashed #cbd5e0;
z-index: 3;
pointer-events: none;
}

/* Hong Kong node color variants */
.timeline-node.hk .timeline-dot {
background-color: #ff9800;
box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}
.timeline-node.hk .date-main {
color: #e65100;
}
.timeline-node.hk:hover .timeline-dot {
background-color: #e65100;
}

/* Living Information bullet list */
.info-bullet-list {
list-style: disc;
padding-left: 20px;
margin: 0;
}
.info-bullet-list li {
font-size: 13px;
color: #4a5568;
line-height: 1.4;
margin-bottom: 6px;
}
.info-bullet-list li:last-child {
margin-bottom: 0;
}

/* On-Site divider */
.onsite-divider {
border-top: 1px dashed #d0d0d0;
margin: 24px 0 0;
}

/* Room Provisions & Amenities */
.provisions-section {
margin-top: 24px;
}
.provisions-section h4 {
font-size: 18px;
color: #051464;
margin-bottom: 18px;
font-weight: 700;
}
.provisions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.provisions-box {
padding: 20px;
border-radius: 8px;
border: 1px solid #eef2f5;
background-color: #fff;
}
.provisions-box.provided {
border-left: 4px solid #2ecc71;
background: linear-gradient(to right, #f9fbf9, #ffffff);
}
.provisions-box.not-provided {
border-left: 4px solid #e74c3c;
background: linear-gradient(to right, #fdfaf9, #ffffff);
}
.provisions-box h5 {
font-size: 15px;
margin: 0 0 14px;
display: flex;
align-items: center;
color: #333;
}
.status-icon {
margin-right: 8px;
font-size: 16px;
}
.provisions-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.provisions-list li {
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
color: #4a5568;
}
.provisions-list li:last-child {
margin-bottom: 0;
}
.sub-note {
display: block;
font-size: 12px;
color: #718096;
margin-top: 4px;
}
.special-note {
font-size: 12px !important;
color: #718096 !important;
font-style: italic;
padding-left: 10px;
border-left: 2px solid #bdc3c7;
margin: 6px 0 10px;
}
.alert-note {
background-color: #fff5f5;
padding: 10px;
border-radius: 4px;
border: 1px dashed #f5c6cb;
color: #721c24 !important;
margin-top: 10px;
}

/* ========== Course Overview ========== */
.academic-link-card {
background-color: #fff;
padding: 20px;
border-left: 4px solid #051464;
margin-bottom: 35px;
border-radius: 0 8px 8px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
font-size: 15px;
}
.academic-link-card a {
color: #051464;
font-weight: 600;
text-decoration: underline;
}
.block-title {
font-size: 20px;
color: #051464;
margin: 30px 0 15px 0;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.table-responsive {
width: 100%;
overflow-x: auto;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
border-collapse: collapse;
background-color: #fff;
min-width: 800px;
text-align: left;
table-layout: fixed;
}
th {
background-color: #051464;
color: white;
padding: 14px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
text-align: center;
}
td {
padding: 15px;
border: 1px solid #e2e8f0;
vertical-align: top;
font-size: 14px;
width: 18%;
}
td:first-child, th:first-child {
font-weight: bold;
color: #051464;
background-color: #f7f9fc;
width: 10%;
text-align: center;
vertical-align: middle;
}
.course-box {
background-color: #f0f4f8;
padding: 12px;
border-radius: 6px;
border-left: 3px solid #051464;
margin-bottom: 5px;
}
.course-box:last-child {
margin-bottom: 0;
}
.course-title {
font-weight: 700;
color: #051464;
margin-bottom: 4px;
}
.course-or {
text-align: center;
font-weight: bold;
color: #ff9800;
margin: 5px 0;
font-size: 12px;
}
.no-class {
color: #a0aec0;
font-style: italic;
font-size: 13px;
text-align: center;
padding-top: 15px;
}
.reading-week-banner {
background: linear-gradient(90deg, #e6ecf8, #f0f4f8);
border: 2px dashed #051464;
padding: 20px;
text-align: center;
border-radius: 8px;
margin: 40px 0;
}
.reading-week-banner h3 {
color: #051464;
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}
.examination-period-banner {
background: linear-gradient(90deg, #e6ecf8, #f0f4f8);
border: 2px dashed #051464;
padding: 20px;
text-align: center;
border-radius: 8px;
margin: 40px 0;
}
.examination-period-banner h3 {
color: #051464;
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}

/* ========== Course Enrolment ========== */
.enrolment-card {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
border-top: 4px solid #051464;
}
.enrolment-card p {
margin-bottom: 20px;
font-size: 15px;
}
.enrolment-card p:last-of-type {
margin-bottom: 0;
}
.example-box {
background-color: #f7f9fc;
padding: 20px;
border-radius: 6px;
border: 1px dashed #cbd5e0;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
width: 100%;
}
.example-item {
display: flex;
align-items: baseline;
gap: 6px;
}
.example-sep {
color: #cbd5e0;
font-weight: bold;
display: none;
}
.example-box strong {
color: #051464;
font-family: monospace;
font-size: 14px;
background: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
}
.example-box .example-value {
font-family: monospace;
font-size: 14px;
font-weight: 600;
color: #333;
}
@media (min-width: 640px) {
.example-sep { display: inline; }
}

/* ========== Activities ========== */
.activities-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.activity-card {
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
transition: transform 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}
.activity-card:hover {
transform: translateY(-5px);
}
.activity-img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
.activity-content {
padding: 25px 30px 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.activity-card h3 {
color: #051464;
font-size: 20px;
margin-bottom: 15px;
border-bottom: 2px solid #f0f4f8;
padding-bottom: 10px;
}
.activity-card p {
font-size: 15px;
color: #4a5568;
line-height: 1.6;
}

/* ========== Preparation Checklist ========== */
.checklist-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 30px;
align-items: stretch;
}
.step-card {
background: #fff;
padding: 30px 25px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
border-top: 4px solid #cbd5e0;
position: relative;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.step-card:hover {
border-top-color: #051464;
box-shadow: 0 8px 25px rgba(5, 20, 100, 0.08);
transform: translateY(-2px);
}
.step-card h3 {
font-size: 19px;
color: #051464;
margin: 5px 0 15px 0;
font-weight: 700;
}
.step-content {
flex-grow: 1;
}

/* Action vs FYI labels */
.action-group, .fyi-group {
margin-bottom: 16px;
}
.action-group:last-child, .fyi-group:last-child {
margin-bottom: 0;
}
.group-label {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.group-label.action {
background: #fff3e0;
color: #e65100;
border: 1px solid #ffcc80;
}
.group-label.fyi {
background: #e8eaf6;
color: #283593;
border: 1px solid #c5cae9;
}
.group-label .label-icon {
font-size: 12px;
}

.action-group ul, .fyi-group ul {
list-style: none;
padding-left: 0;
}
.action-group li, .fyi-group li {
position: relative;
padding-left: 20px;
margin-bottom: 12px;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.action-group li::before {
content: "☑";
color: #e65100;
font-size: 13px;
position: absolute;
left: 0;
top: 0;
}
.fyi-group li::before {
content: "ℹ";
color: #283593;
font-size: 13px;
position: absolute;
left: 0;
top: 0;
}
.action-group ul ul, .fyi-group ul ul {
margin-top: 8px;
margin-left: 15px;
list-style: disc;
}
.action-group ul ul li, .fyi-group ul ul li {
margin-bottom: 8px;
padding-left: 4px;
}
.action-group ul ul li::before, .fyi-group ul ul li::before {
content: none;
}

/* ========== Bank Information Card ========== */
.bank-card {
background: #fff;
padding: 30px 25px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
border-top: 4px solid #ff9800;
position: relative;
margin-bottom: 30px;
}
.bank-card h3 {
font-size: 19px;
color: #051464;
margin-bottom: 15px;
font-weight: 700;
}
.bank-card .step-intro {
font-size: 14px;
color: #718096;
margin-bottom: 18px;
line-height: 1.4;
}
.bank-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 15px;
}
.bank-option {
background: #f7f9fc;
padding: 20px;
border-radius: 8px;
border: 1px solid #e2e8f0;
position: relative;
}
.bank-option h4 {
font-size: 15px;
color: #051464;
margin-bottom: 8px;
font-weight: 700;
}
.bank-option p {
font-size: 13px;
color: #4a5568;
line-height: 1.5;
}
.bank-option .option-tag {
display: inline-block;
background: #ff9800;
color: white;
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 8px;
}

/* ========== On-Campus Info Card ========== */
.oncampus-card {
background: #fff;
padding: 30px 25px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
border-top: 4px solid #1db181;
margin-bottom: 30px;
}
.oncampus-card h3 {
font-size: 19px;
color: #051464;
margin-bottom: 15px;
font-weight: 700;
}
.oncampus-card .step-intro {
font-size: 14px;
color: #718096;
margin-bottom: 18px;
line-height: 1.4;
}
.oncampus-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.oncampus-info-item {
background: #eaf9f3;
padding: 18px;
border-radius: 6px;
border-left: 3px solid #1db181;
}
.oncampus-info-item h4 {
font-size: 14px;
color: #1db181;
margin-bottom: 6px;
font-weight: 700;
}
.oncampus-info-item p {
font-size: 13px;
color: #4a5568;
line-height: 1.4;
margin-bottom: 6px;
}
.oncampus-info-item p:last-child {
margin-bottom: 0;
}
.oncampus-info-item .info-line {
font-size: 13px;
color: #4a5568;
margin-bottom: 8px;
line-height: 1.4;
}
.oncampus-info-item .info-line strong {
color: #1db181;
}
.oncampus-info-item .schedule-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
margin-bottom: 8px;
min-width: auto;
font-size: 12px;
}
.oncampus-info-item .schedule-table td {
padding: 4px 8px;
border: 1px solid #c8e6dc;
font-size: 12px;
width: auto;
}
.oncampus-info-item .schedule-table td:first-child {
font-weight: 600;
color: #1db181;
background: transparent;
text-align: left;
width: auto;
vertical-align: top;
white-space: nowrap;
}

/* ========== Campus Facilities Sliders ========== */
.campus-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 20px;
}
.campus-card {
background-color: #ffffff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 15px rgba(0,0,0,0.02);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.campus-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(5, 20, 100, 0.08);
}
.campus-slider-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: #edf2f7;
}
.campus-slider-wrapper {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
.campus-slider-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
flex-shrink: 0;
}
.campus-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #051464;
font-size: 13px;
font-weight: bold;
opacity: 0;
transition: all 0.2s ease;
z-index: 5;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.campus-slider-container:hover .campus-arrow {
opacity: 1;
}
.campus-arrow:hover {
background: #051464;
color: #ffffff;
}
.campus-arrow.prev-arrow { left: 12px; }
.campus-arrow.next-arrow { right: 12px; }
.campus-slider-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 5;
}
.campus-slider-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.campus-slider-dot.active {
background: #ffffff;
width: 15px;
border-radius: 3px;
}
.campus-card-content {
padding: 22px 25px 25px;
flex-grow: 1;
}
.campus-card-content h3 {
color: #051464;
font-size: 19px;
font-weight: 700;
margin-bottom: 8px;
}
.campus-card-content p {
font-size: 14px;
color: #4a5568;
line-height: 1.5;
}

/* ========== FAQ Category Tabs ========== */
.faq-tabs {
display: flex;
gap: 8px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.faq-tab {
padding: 8px 18px;
font-size: 13px;
font-weight: 600;
border: 1.5px solid #e2e8f0;
background: #fff;
color: #4a5568;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
}
.faq-tab:hover {
border-color: #051464;
color: #051464;
}
.faq-tab.active {
background-color: #051464;
color: #fff;
border-color: #051464;
}

/* ========== FAQ Accordion ========== */
.qa-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.qa-item {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
border: 1px solid #e2e8f0;
overflow: hidden;
transition: all 0.3s ease;
}
.qa-item.hidden-by-filter {
display: none;
}
.qa-question {
font-size: 16px;
font-weight: 700;
color: #051464;
padding: 20px 25px;
margin-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background-color: #fff;
transition: background-color 0.2s;
user-select: none;
}
.qa-question:hover {
background-color: #f7f9fc;
}
.qa-question .q-text {
display: flex;
gap: 8px;
align-items: flex-start;
}
.qa-question::after {
content: "\276F";
font-size: 12px;
color: #718096;
transition: transform 0.3s ease;
margin-left: 15px;
flex-shrink: 0;
}
.qa-item.active .qa-question::after {
transform: rotate(90deg);
}
.qa-answer {
font-size: 14px;
color: #4a5568;
line-height: 1.6;
padding: 0 25px 20px 25px;
display: none;
border-top: 1px solid #f0f4f8;
padding-top: 15px;
}
.qa-item.active .qa-answer {
display: block;
background-color: #fcfdfe;
}

/* ========== Contact Us ========== */
.inquiry-card {
background-color: #fff;
padding: 35px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
border-left: 4px solid #051464;
}
.inquiry-card > p {
font-size: 15px;
color: #4a5568;
margin-bottom: 25px;
line-height: 1.6;
}
.inquiry-details {
background-color: #f7f9fc;
padding: 25px;
border-radius: 6px;
border: 1px solid #e2e8f0;
}
.inquiry-details ul {
list-style: none;
padding-left: 0;
}
.inquiry-details li {
font-size: 14px;
color: #333;
margin-bottom: 16px;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.inquiry-details li:last-child {
margin-bottom: 0;
}
.inquiry-details strong {
color: #051464;
min-width: 150px;
display: inline-block;
}
.inquiry-details .info-content {
flex-grow: 1;
color: #4a5568;
}
.inquiry-details a {
color: #051464;
font-weight: 600;
text-decoration: underline;
transition: color 0.2s;
}
.inquiry-details a:hover {
color: #ff9800;
}
.inquiry-details code {
font-family: monospace;
background: #e2e8f0;
padding: 3px 8px;
border-radius: 4px;
font-size: 13px;
color: #051464;
font-weight: bold;
}

/* ========== Back to Top Button ========== */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 900;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #051464;
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(5, 20, 100, 0.25);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background-color: #ff9800;
transform: translateY(-2px);
}
.back-to-top svg {
width: 20px;
height: 20px;
fill: currentColor;
}

/* ========== Footer ========== */
footer {
background-color: #030d42;
color: rgba(255,255,255,0.5);
text-align: center;
padding: 40px 20px 25px;
font-size: 13px;
}

/* ====================================================================
Responsive Breakpoints
==================================================================== */

/* Tablet & below (<=960px) */
@media (max-width: 960px) {
.nav-container {
padding: 0 20px;
}
.form-cta-banner { padding: 24px 15px; }
.form-cta-title { font-size: 13px; max-width: 600px; }
.form-cta-btn { padding: 11px 28px; font-size: 14px; }

.container { padding: 40px 15px; }
.section-title { font-size: 22px; margin-bottom: 25px; }

.table-responsive::after {
content: "\2194 Scroll horizontally to view full schedule";
display: block;
text-align: center;
font-size: 12px;
color: #ff9800;
margin-top: 10px;
font-weight: 500;
}

.timeline-grid {
grid-template-columns: 1fr;
gap: 0;
padding-left: 20px;
}
.timeline-line {
display: none;
}
.timeline-vline {
display: none;
}
.tl-region-hk, .tl-region-sh {
display: none;
}
.timeline-node {
text-align: left;
display: flex;
align-items: flex-start;
gap: 20px;
position: relative;
padding-bottom: 30px;
}
.timeline-node:last-child {
padding-bottom: 0;
}
.timeline-date {
min-width: 120px;
text-align: left;
flex-shrink: 0;
}
.timeline-dot {
margin: 4px 0 0 0;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.timeline-desc {
flex-grow: 1;
}

.activities-grid { grid-template-columns: 1fr; }
.checklist-steps-grid { grid-template-columns: 1fr; gap: 35px; }
.step-card { padding: 25px 20px; }
.bank-options { grid-template-columns: 1fr; }
.oncampus-info-grid { grid-template-columns: 1fr; }
.provisions-grid { grid-template-columns: 1fr; }
.campus-grid { grid-template-columns: 1fr; gap: 20px; }

.campus-arrow { opacity: 1; }

.inquiry-details li { flex-direction: column; gap: 4px; }
.inquiry-details strong { min-width: auto; }

.nav-links { display: none; }
}

/* Phone (<=480px) */
@media (max-width: 480px) {
.nav-container {
padding: 0 12px;
gap: 8px;
min-height: 55px;
}
.navbar .nav-logo {
height: 38px;
}
.navbar .back-home {
font-size: 11px;
padding: 5px 10px;
border-width: 1px;
}
.form-cta-banner { padding: 20px 12px; }
.form-cta-label { font-size: 10px; padding: 3px 10px; }
.form-cta-title { font-size: 13px; }
.form-cta-btn { padding: 10px 24px; font-size: 14px; }
.container { padding: 30px 12px; }
.section-title { font-size: 20px; margin-bottom: 20px; }
.enrolment-card { padding: 20px 15px; }
.inquiry-card { padding: 20px 15px; }
.qa-question { padding: 16px 18px; font-size: 15px; }
.qa-answer { padding: 0 18px 18px; padding-top: 12px; }
.faq-tabs { gap: 6px; }
.faq-tab { padding: 6px 14px; font-size: 12px; }
.back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}