/* =============================================================
   PANEKAR SECONDARY SCHOOL — Home Page Styles
   School Colors: Navy Blue (#1a237e) | Gold (#c8a951) | White
   ============================================================= */




/* ---------------------------
   Font Import
--------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* ---------------------------
   Base Font
--------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
body,
html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04', 'cv11';
    letter-spacing: -0.02em;
}
p, a, span, li, td, th, label, input, button, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ---------------------------
   Variables
--------------------------- */
:root {
    --primary:       #1a237e;
    --primary-light: #283593;
    --primary-dark:  #0d1257;
    --accent:        #c8a951;
    --accent-dark:   #a8893a;
    --white:         #ffffff;
    --light-gray:    #f5f6fa;
    --mid-gray:      #e8eaf0;
    --text-dark:     #1c1c2e;
    --text-muted:    #6c757d;
    --shadow-sm:     0 2px 12px rgba(26,35,126,0.08);
    --shadow-md:     0 6px 28px rgba(26,35,126,0.14);
    --shadow-lg:     0 12px 48px rgba(26,35,126,0.22);
    --radius-sm:     6px;
    --radius-md:     12px;
    --radius-lg:     24px;
    --transition:    all 0.35s ease;
}

/* ---------------------------
   Shared Utilities
--------------------------- */
.bg-primary  { background-color: var(--primary) !important; }
.bg-accent   { background-color: var(--accent)  !important; }
.text-primary{ color: var(--primary) !important; }
.content-inner { padding: 70px 0; }
.m-t10  { margin-top: 10px; }
.m-t20  { margin-top: 20px; }
.m-t30  { margin-top: 30px; }
.m-b20  { margin-bottom: 20px; }
.m-b30  { margin-bottom: 30px; }
.p-a20  { padding: 20px; }

/* ---------------------------
   Buttons
--------------------------- */
.pss-btn {
    display: inline-block;
    padding: 13px 32px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    letter-spacing: 0.3px;
}

.pss-btn-primary {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}
.pss-btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26,35,126,0.3);
}

.pss-btn-accent {
    background: var(--accent);
    color: var(--primary-dark);
    border-color: var(--accent);
    font-weight: 700;
}
.pss-btn-accent:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200,169,81,0.35);
}

.pss-btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.7);
}
.pss-btn-outline:hover {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
    transform: translateY(-2px);
}

.pss-btn-outline-white {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.6);
}
.pss-btn-outline-white:hover {
    background: rgba(255,255,255,0.15);
    color: var(--white);
    border-color: var(--white);
}

.pss-btn-white {
    background: var(--white);
    color: var(--primary);
    border-color: var(--white);
    font-weight: 700;
}
.pss-btn-white:hover {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
}

.pss-text-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}
.pss-text-link:hover {
    color: var(--accent);
    gap: 8px;
}
.pss-text-link i {
    font-size: 0.8rem;
}

/* ---------------------------
   Section Labels & Headings
--------------------------- */
.pss-section-label {
    display: inline-block;
    background: linear-gradient(135deg, #e8eaf6, #c5cae9);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 12px;
}

.pss-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 14px;
    position: relative;
    display: inline-block;
}

.pss-section-title::after {
    content: '';
    display: block;
    width: 52px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    margin: 10px auto 0;
}

.pss-section-head { margin-bottom: 44px; }
.pss-section-head p {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 580px;
    margin: 0 auto;
}

/* Shared section heading (existing class) */
.section-head .title::after {
    content: '';
    display: block;
    width: 52px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    margin: 10px auto 0;
}

/* ---------------------------
   HERO SLIDER
--------------------------- */
.pss-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

.pss-hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.pss-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    display: flex;
    align-items: center;
}

.pss-slide.active {
    opacity: 1;
    z-index: 1;
}

.pss-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(13, 18, 87, 0.88) 0%,
        rgba(26, 35, 126, 0.65) 60%,
        rgba(0, 0, 0, 0.45) 100%
    );
}

.pss-overlay-2 {
    background: linear-gradient(
        to right,
        rgba(13, 18, 87, 0.9) 0%,
        rgba(26, 35, 126, 0.6) 50%,
        rgba(0,0,0,0.3) 100%
    );
}

.pss-overlay-3 {
    background: linear-gradient(
        to top,
        rgba(13, 18, 87, 0.92) 0%,
        rgba(26, 35, 126, 0.55) 60%,
        rgba(0,0,0,0.25) 100%
    );
}

.pss-slide-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
    color: var(--white);
    animation: heroContentIn 1s ease 0.2s both;
}

@keyframes heroContentIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pss-slide-tag {
    display: inline-block;
    background: var(--accent);
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: 5px 18px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.pss-slide-content h1 {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    text-shadow: 0 3px 12px rgba(0,0,0,0.3);
}

.pss-slide-content p {
    font-size: 1.15rem;
    line-height: 1.7;
    opacity: 0.92;
    max-width: 600px;
    margin: 0 auto 30px;
}

.pss-hero-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Slider Arrows */
.pss-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.4);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pss-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary-dark);
}

.pss-arrow-prev { left: 24px; }
.pss-arrow-next { right: 24px; }

/* Slider Dots */
.pss-slider-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.pss-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: var(--transition);
}

.pss-dot.active {
    background: var(--accent);
    width: 28px;
    border-radius: 5px;
}

/* Scroll Hint */
.pss-scroll-hint {
    position: absolute;
    bottom: 30px;
    right: 40px;
    z-index: 10;
}

.pss-scroll-hint span {
    display: block;
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
    margin: 0 auto;
    animation: scrollPulse 1.8s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
}

/* ---------------------------
   MOTTO STRIP
--------------------------- */
.pss-motto-strip {
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-dark) 100%);
    border-bottom: 3px solid var(--accent);
    padding: 0;
    position: relative;
    z-index: 5;
}

.pss-motto-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
}

.pss-motto-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.pss-motto-text i {
    color: var(--accent);
    font-size: 1.3rem;
}

.pss-quick-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pss-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.25);
    text-decoration: none;
    transition: var(--transition);
}

.pss-quick-links a:hover {
    background: var(--accent);
    color: var(--primary-dark);
    border-color: var(--accent);
}

.pss-quick-links a i {
    font-size: 0.82rem;
}

/* ---------------------------
   ABOUT / WELCOME SECTION
--------------------------- */
.pss-about-img-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.pss-about-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: block;
}

.pss-about-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: var(--white);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 3px solid var(--white);
}

.pss-badge-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
}

.pss-badge-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.85;
    margin-top: 2px;
}

.pss-about-content {
    padding-left: 30px;
}

.pss-lead-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 14px;
}

.pss-about-content > p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 10px;
}

/* Feature items inside about */
.pss-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pss-feature-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pss-feature-icon i {
    font-size: 1.2rem;
    color: var(--white);
}

.pss-feature-text h6 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.pss-feature-text p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------
   STATISTICS
--------------------------- */
.pss-stats-section {
    position: relative;
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.pss-stats-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(13, 18, 87, 0.92) 0%,
        rgba(26, 35, 126, 0.82) 100%
    );
}

.pss-stats-section .container {
    position: relative;
    z-index: 2;
}

.pss-stats-header {
    margin-bottom: 48px;
}

.pss-stats-header h2 {
    color: var(--white);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.pss-stats-header p {
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
}

.pss-stat-item {
    text-align: center;
    padding: 20px;
}

.pss-stat-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(200,169,81,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    transition: var(--transition);
}

.pss-stat-item:hover .pss-stat-icon {
    background: var(--accent);
    border-color: var(--accent);
}

.pss-stat-icon i {
    font-size: 1.6rem;
    color: var(--accent);
    transition: var(--transition);
}

.pss-stat-item:hover .pss-stat-icon i {
    color: var(--primary-dark);
}

.pss-stat-item h2.counter {
    font-size: 3rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 6px;
    line-height: 1;
}

.pss-stat-item p {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin: 0;
}

/* ---------------------------
   ACTIVITIES
--------------------------- */
.pss-activity-card {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--white);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pss-activity-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.pss-activity-img {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.pss-activity-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pss-activity-card:hover .pss-activity-img img {
    transform: scale(1.08);
}

.pss-activity-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 18, 87, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.pss-activity-card:hover .pss-activity-overlay {
    opacity: 1;
}

.pss-activity-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pss-activity-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e8eaf6, #c5cae9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.pss-activity-icon i {
    font-size: 1.3rem;
    color: var(--primary);
}

.pss-activity-body h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.pss-activity-body p {
    color: var(--text-muted);
    font-size: 0.93rem;
    line-height: 1.7;
    flex: 1;
    margin-bottom: 14px;
}

/* ---------------------------
   EVENTS
--------------------------- */
.pss-events-section {
    background: var(--light-gray);
}

.pss-event-card {
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    gap: 0;
    transition: var(--transition);
    height: 100%;
}

.pss-event-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.pss-event-date {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: var(--white);
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    text-align: center;
    flex-shrink: 0;
}

.pss-event-day {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
}

.pss-event-month {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-top: 4px;
}

.pss-event-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pss-event-body h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.pss-event-body p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 10px;
}

/* Empty state */
.pss-empty-state {
    padding: 40px 20px;
    color: var(--text-muted);
}

.pss-empty-state i {
    font-size: 3rem;
    color: var(--mid-gray);
    display: block;
    margin-bottom: 14px;
}

/* ---------------------------
   ADMISSIONS CTA BANNER
--------------------------- */
.pss-cta-banner {
    position: relative;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    padding: 80px 0;
    overflow: hidden;
}

.pss-cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(200,169,81,0.07);
    pointer-events: none;
}

.pss-cta-banner::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -5%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.pss-cta-overlay { display: none; }

.pss-cta-inner {
    position: relative;
    z-index: 2;
}

.pss-cta-tag {
    display: inline-block;
    background: var(--accent);
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 18px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.pss-cta-inner h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.pss-cta-inner p {
    color: rgba(255,255,255,0.82);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 580px;
    margin: 0 auto 32px;
}

.pss-cta-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------------------
   GALLERY
--------------------------- */
.pss-gallery-grid { margin-bottom: 0; }

.pss-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    height: 180px;
    cursor: pointer;
}

.pss-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.pss-gallery-item:hover img {
    transform: scale(1.1);
}

.pss-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 18, 87, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.pss-gallery-item:hover .pss-gallery-overlay {
    opacity: 1;
}

.pss-gallery-zoom {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.1rem;
    text-decoration: none;
    transition: var(--transition);
}

.pss-gallery-zoom:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

/* ---------------------------
   NEWS
--------------------------- */
.pss-news-section {
    background: var(--light-gray);
}

.pss-news-card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pss-news-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.pss-news-img {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.pss-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.pss-news-card:hover .pss-news-img img {
    transform: scale(1.06);
}

.pss-news-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,18,87,0.4) 0%, transparent 60%);
}

.pss-news-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pss-news-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 10px;
}

.pss-news-meta i {
    color: var(--accent);
}

.pss-news-body h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.4;
}

.pss-news-body p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 14px;
}

/* ---------------------------
   RESPONSIVE
--------------------------- */
@media (max-width: 991px) {
    .pss-hero             { height: 85vh; }
    .pss-slide-content h1 { font-size: 2.4rem; }
    .pss-about-content    { padding-left: 15px; }
    .pss-about-badge      { right: 0; bottom: -15px; }
    .pss-stats-section    { background-attachment: scroll; }
    .pss-stats-header h2  { font-size: 1.7rem; }
    .pss-stat-item h2.counter { font-size: 2.4rem; }
    .pss-cta-inner h2     { font-size: 1.8rem; }
}

@media (max-width: 767px) {
    .pss-hero             { height: 100svh; min-height: 520px; }
    .pss-slide-content h1 { font-size: 1.9rem; }
    .pss-slide-content p  { font-size: 1rem; }
    .pss-hero-btns        { flex-direction: column; align-items: center; }
    .pss-arrow            { width: 40px; height: 40px; font-size: 1rem; }
    .pss-arrow-prev       { left: 12px; }
    .pss-arrow-next       { right: 12px; }

    .pss-motto-inner      { flex-direction: column; text-align: center; gap: 10px; }
    .pss-quick-links      { justify-content: center; }

    .pss-about-img        { height: 300px; }
    .pss-about-badge      { display: none; }
    .pss-about-content    { padding-left: 0; margin-top: 20px; }

    .pss-event-card       { flex-direction: column; }
    .pss-event-date       { flex-direction: row; gap: 10px; padding: 14px 20px; }

    .pss-cta-inner h2     { font-size: 1.5rem; }
    .pss-cta-btns         { flex-direction: column; align-items: center; }
    .pss-gallery-item     { height: 140px; }

    .content-inner        { padding: 45px 0; }
    .pss-section-title    { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .pss-slide-content h1 { font-size: 1.55rem; }
    .pss-stat-item h2.counter { font-size: 2rem; }
    .pss-quick-links a    { font-size: 0.78rem; padding: 5px 10px; }
    .pss-gallery-item     { height: 120px; }
}




/* =============================================================
   PANEKAR SECONDARY SCHOOL — Header
   Font: Inter | Navy #1a237e | Gold #c8a951 | White #ffffff
   Best & fully responsive — no HTML changes
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ---------------------------
   Variables
--------------------------- */
:root {
    --h-navy:          #1a237e;
    --h-navy-dark:     #0d1257;
    --h-navy-light:    #283593;
    --h-gold:          #c8a951;
    --h-gold-dark:     #a8893a;
    --h-white:         #ffffff;
    --h-text:          #1c1c2e;
    --h-muted:         rgba(255,255,255,0.75);
    --h-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --h-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --h-dur:           0.28s;
    --h-radius:        8px;
}

/* ---------------------------
   Base reset for header
--------------------------- */
.site-header *,
.site-header *::before,
.site-header *::after {
    box-sizing: border-box;
}

.site-header {
    font-family: var(--h-font);
    -webkit-font-smoothing: antialiased;
}

/* =============================================================
   TOP BAR
============================================================= */
.site-header .top-bar {
    background: var(--h-navy-dark);
    padding: 9px 0;
    border-bottom: 1px solid rgba(200, 169, 81, 0.2);
}

.site-header .top-bar .container {
    max-width: 1240px;
    padding: 0 20px;
}

.site-header .top-bar .row {
    display:         flex !important;
    flex-wrap:       nowrap !important;
    align-items:     center !important;
    justify-content: space-between !important;
    margin-left:     0 !important;
    margin-right:    0 !important;
    width:           100%;
    gap:             12px;
}

.site-header .dlab-topbar-left,
.site-header .dlab-topbar-right {
    float:       none !important;
    display:     flex !important;
    align-items: center;
    padding:     0 !important;
    width:       auto !important;
    flex-shrink: 0;
}

.site-header .dlab-topbar-left > ul,
.site-header .dlab-topbar-right > ul {
    list-style: none;
    display:    flex;
    align-items: center;
    flex-wrap:  nowrap;
    gap:        0;
    margin:     0;
    padding:    0;
}

.site-header .dlab-topbar-left > ul > li,
.site-header .dlab-topbar-right > ul > li {
    font-size:    0.775rem;
    font-weight:  500;
    color:        var(--h-muted);
    letter-spacing: 0.15px;
    display:      flex;
    align-items:  center;
    gap:          5px;
    padding:      0 14px;
    line-height:  1;
    border-right: 1px solid rgba(255,255,255,0.1);
    margin:       0;
    white-space:  nowrap;
}

.site-header .dlab-topbar-left > ul > li:first-child { padding-left: 0; }
.site-header .dlab-topbar-left > ul > li:last-child  { border-right: none; }
.site-header .dlab-topbar-right > ul > li:first-child { border-left: 1px solid rgba(255,255,255,0.1); }
.site-header .dlab-topbar-right > ul > li:last-child  { border-right: none; padding-right: 0; }

.site-header .dlab-topbar-left > ul > li i,
.site-header .dlab-topbar-right > ul > li i {
    color:      var(--h-gold);
    font-size:  0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

/* =============================================================
   MAIN HEADER BAR
============================================================= */
.site-header .main-bar-wraper {
    position:   relative;
    z-index:    1000;
    background: var(--h-white);
    transition: box-shadow var(--h-dur) var(--h-ease),
                background var(--h-dur) var(--h-ease);
}

.site-header .main-bar {
    background:    var(--h-white);
    border-bottom: 3px solid var(--h-gold);
    padding:       0;
}

.site-header .main-bar .container {
    max-width:       1240px;
    padding:         0 20px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    min-height:      74px;
    gap:             12px;
}

/* =============================================================
   STICKY HEADER
============================================================= */
body.header-is-sticky {
    padding-top: var(--sticky-offset, 77px);
}

.site-header.header-fixed .sticky-header,
.site-header .sticky-header.fixed {
    position:   fixed !important;
    top:        0;
    left:       0;
    right:      0;
    z-index:    9999;
    width:      100%;
    animation: stickySlideDown 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes stickySlideDown {
    from { transform: translateY(-100%); opacity: 0.6; }
    to   { transform: translateY(0);     opacity: 1;   }
}

.site-header.header-fixed .main-bar,
.site-header .sticky-header.fixed .main-bar {
    box-shadow: 0 4px 28px rgba(26,35,126,0.16);
    border-top: 2px solid var(--h-gold);
}

.site-header.header-fixed .main-bar .container,
.site-header .sticky-header.fixed .main-bar .container {
    min-height: 62px;
    transition: min-height 0.3s cubic-bezier(0.4,0,0.2,1);
}

.site-header.header-fixed .logo-header img,
.site-header .sticky-header.fixed .logo-header img {
    height:     44px;
    transition: height 0.3s cubic-bezier(0.4,0,0.2,1);
}

.site-header.header-fixed .nav.navbar-nav > li > a,
.site-header .sticky-header.fixed .nav.navbar-nav > li > a {
    padding-top:    6px;
    padding-bottom: 6px;
}

/* =============================================================
   LOGO
============================================================= */
.site-header .logo-header {
    flex-shrink: 0;
    display:     flex;
    align-items: center;
    padding:     8px 0;
    z-index:     2;
}

.site-header .logo-header a {
    display:         flex;
    align-items:     center;
    text-decoration: none;
}

.site-header .logo-header img {
    height:      54px;
    width:       auto;
    object-fit:  contain;
    display:     block;
    transition:  height var(--h-dur) var(--h-ease),
                 filter var(--h-dur) var(--h-ease);
}

.site-header .logo-header a:hover img {
    filter: brightness(0.88);
}

/* =============================================================
   DESKTOP NAVIGATION
============================================================= */
.site-header .header-nav {
    flex: 1;
}

.site-header .nav.navbar-nav {
    list-style:      none;
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             0;
    flex-wrap:       nowrap;
    margin:          0;
    padding:         0;
}

.site-header .nav.navbar-nav > li {
    position: relative;
}

.site-header .nav.navbar-nav > li > a {
    font-family:     var(--h-font);
    font-size:       0.845rem;
    font-weight:     600;
    color:           var(--h-text);
    text-decoration: none;
    letter-spacing:  0.1px;
    padding:         8px 11px;
    display:         flex;
    align-items:     center;
    border-radius:   var(--h-radius);
    position:        relative;
    white-space:     nowrap;
    transition:
        color      var(--h-dur) var(--h-ease),
        background var(--h-dur) var(--h-ease);
}

.site-header .nav.navbar-nav > li > a::after {
    content:          '';
    position:         absolute;
    bottom:           2px;
    left:             11px;
    right:            11px;
    height:           2px;
    background:       var(--h-gold);
    border-radius:    1px;
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform 0.25s var(--h-ease);
}

.site-header .nav.navbar-nav > li > a:hover {
    color:      var(--h-navy);
    background: rgba(26,35,126,0.05);
}

.site-header .nav.navbar-nav > li > a:hover::after,
.site-header .nav.navbar-nav > li.active > a::after {
    transform: scaleX(1);
}

.site-header .nav.navbar-nav > li.active > a {
    color: var(--h-navy);
}

/* =============================================================
   APPLY NOW BUTTON
============================================================= */
.site-header .nav-apply-btn {
    display:     flex;
    align-items: center;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid rgba(26,35,126,0.12);
    flex-shrink: 0;
}

.site-header .nav-apply-btn > .site-button {
    font-family:     var(--h-font);
    font-size:       0.82rem;
    font-weight:     700;
    color:           var(--h-white) !important;
    background:      linear-gradient(135deg, var(--h-navy-dark) 0%, var(--h-navy) 100%);
    border:          none;
    outline:         none;
    padding:         9px 22px;
    border-radius:   50px;
    text-decoration: none;
    letter-spacing:  0.25px;
    white-space:     nowrap;
    display:         inline-flex;
    align-items:     center;
    box-shadow:      0 3px 12px rgba(26,35,126,0.22);
    transition:
        background var(--h-dur) var(--h-ease),
        box-shadow var(--h-dur) var(--h-ease),
        transform  var(--h-dur) var(--h-ease),
        color      var(--h-dur) var(--h-ease);
}

.site-header .nav-apply-btn > .site-button:hover {
    background: linear-gradient(135deg, var(--h-gold-dark) 0%, var(--h-gold) 100%);
    color:      var(--h-navy-dark) !important;
    box-shadow: 0 6px 20px rgba(200,169,81,0.38);
    transform:  translateY(-1px);
}

/* =============================================================
   EXTRA NAV
============================================================= */
.site-header .extra-nav {
    flex-shrink: 0;
    z-index:     2;
}

.site-header .extra-cell {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.site-header #quik-search-btn {
    background: none;
    border:     none;
    outline:    none;
    cursor:     pointer;
    color:      var(--h-navy);
    font-size:  1.05rem;
    padding:    7px 9px;
    border-radius: var(--h-radius);
    display:    flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition:
        background var(--h-dur) var(--h-ease),
        color      var(--h-dur) var(--h-ease);
}

.site-header #quik-search-btn:hover {
    background: rgba(26,35,126,0.07);
    color:      var(--h-gold);
}

/* =============================================================
   HAMBURGER TOGGLE
============================================================= */
.site-header .navbar-toggler {
    background:    none;
    border:        1.5px solid rgba(26,35,126,0.18);
    border-radius: var(--h-radius);
    padding:       0;
    width:         40px;
    height:        40px;
    cursor:        pointer;
    display:       none;
    flex-direction: column;
    align-items:   center;
    justify-content: center;
    gap:           5px;
    flex-shrink:   0;
    order:         5;
    transition:
        border-color var(--h-dur) var(--h-ease),
        background   var(--h-dur) var(--h-ease);
}

.site-header .navbar-toggler:hover {
    background:   rgba(26,35,126,0.05);
    border-color: var(--h-navy);
}

.site-header .navbar-toggler span {
    display:       block;
    width:         20px;
    height:        2px;
    background:    var(--h-navy);
    border-radius: 2px;
    transition:
        transform var(--h-dur) var(--h-ease),
        opacity   0.2s         var(--h-ease),
        width     var(--h-dur) var(--h-ease);
}

.site-header .navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header .navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
    width:   0;
}
.site-header .navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =============================================================
   DESKTOP DROPDOWN MENU (Hover-based)
============================================================= */
@media (min-width: 992px) {
    .has-mega-menu {
        position: relative;
    }

    .has-mega-menu > a {
        display: flex !important;
        align-items: center;
        gap: 5px;
        position: relative;
    }

    .has-mega-menu > a .la-angle-down {
        font-size: 0.7rem;
        margin-top: 1px;
        transition: transform var(--h-dur) var(--h-ease);
        flex-shrink: 0;
    }

    .has-mega-menu:hover > a .la-angle-down {
        transform: rotate(180deg);
    }

    .has-mega-menu > .sub-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 240px;
        background: var(--h-white);
        border: 1px solid #e4e6ef;
        border-top: 3px solid var(--h-gold);
        border-radius: 0 0 var(--h-radius) var(--h-radius);
        box-shadow: 0 12px 40px rgba(13, 18, 87, 0.18);
        list-style: none;
        padding: 8px 0;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 9999;
        transition: opacity var(--h-dur) var(--h-ease),
                    transform var(--h-dur) var(--h-ease),
                    visibility var(--h-dur) var(--h-ease);
    }

    .has-mega-menu:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .has-mega-menu > .sub-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .has-mega-menu > .sub-menu li a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        font-family: var(--h-font);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--h-text) !important;
        padding: 10px 20px;
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: all var(--h-dur) var(--h-ease);
    }

    .has-mega-menu > .sub-menu li a i {
        font-size: 1rem;
        color: var(--h-gold-dark);
        flex-shrink: 0;
        width: 20px;
        text-align: center;
    }

    .has-mega-menu > .sub-menu li a:hover {
        background: #e8eaf6;
        color: var(--h-navy) !important;
        border-left-color: var(--h-gold);
        padding-left: 24px;
    }

    .has-mega-menu > .sub-menu li a:hover i {
        color: var(--h-navy);
    }

    .has-mega-menu > .sub-menu li + li {
        border-top: 1px solid #e4e6ef;
    }
}

/* =============================================================
   PREMIUM MOBILE MENU DESIGN (≤ 991px)
   With scroll indicators
============================================================= */
@media (max-width: 991px) {
    /* Show hamburger */
    .site-header .navbar-toggler {
        display: flex;
        background: rgba(26, 35, 126, 0.05);
        border: none;
        width: 44px;
        height: 44px;
        transition: all 0.3s ease;
    }

    .site-header .navbar-toggler:hover {
        background: rgba(26, 35, 126, 0.12);
    }

    .site-header .navbar-toggler span {
        background: var(--h-navy);
        height: 2.5px;
        width: 22px;
    }

    /* Adjust container */
    .site-header .main-bar .container {
        flex-wrap: wrap;
        min-height: 62px;
        padding: 0 20px;
        position: relative;
    }

    .site-header .logo-header {
        order: 1;
        padding: 8px 0;
    }

    .site-header .logo-header img {
        height: 46px;
    }

    .site-header .extra-nav {
        order: 4;
    }

    .site-header .navbar-toggler {
        order: 5;
        margin-left: 8px;
    }

    /* Mobile menu overlay effect */
    .site-header .header-nav {
        order: 6;
        width: 100%;
        flex: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: transparent;
        z-index: 1000;
    }

    /* Mobile menu panel - with scroll indicators */
    .site-header .header-nav.navbar-collapse {
        background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
        border-radius: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0;
        margin: 0 12px;
        position: relative;
    }

    /* Top scroll shadow indicator */
    .site-header .header-nav.navbar-collapse.show::before {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 30px;
        background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
        z-index: 10;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 20px 20px 0 0;
    }

    /* Bottom scroll shadow indicator */
    .site-header .header-nav.navbar-collapse.show::after {
        content: '';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 30px;
        background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
        z-index: 10;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 0 0 20px 20px;
    }

    /* Show scroll indicators when content is scrollable */
    .site-header .header-nav.navbar-collapse.show.scroll-top::before {
        opacity: 1;
    }

    .site-header .header-nav.navbar-collapse.show.scroll-bottom::after {
        opacity: 1;
    }

    .site-header .header-nav.navbar-collapse.show {
        max-height: calc(100vh - 85px);
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 0;
        margin-bottom: 12px;
        scroll-behavior: smooth;
    }

    /* Beautiful custom scrollbar */
    .site-header .header-nav.navbar-collapse.show::-webkit-scrollbar {
        width: 6px;
    }

    .site-header .header-nav.navbar-collapse.show::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
        margin: 20px 0;
    }

    .site-header .header-nav.navbar-collapse.show::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, var(--h-gold), var(--h-gold-dark));
        border-radius: 10px;
    }

    .site-header .header-nav.navbar-collapse.show::-webkit-scrollbar-thumb:hover {
        background: var(--h-gold-dark);
    }

    /* Floating scroll indicator badge */
    .site-header .header-nav.navbar-collapse.show .scroll-indicator {
        position: sticky;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(26, 35, 126, 0.9);
        backdrop-filter: blur(10px);
        color: white;
        padding: 6px 14px;
        border-radius: 30px;
        font-size: 0.7rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        z-index: 20;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        font-family: var(--h-font);
    }

    .site-header .header-nav.navbar-collapse.show.scrollable .scroll-indicator {
        opacity: 1;
        animation: bounce 2s ease-in-out infinite;
    }

    .site-header .header-nav.navbar-collapse.show .scroll-indicator i {
        font-size: 0.8rem;
        animation: scrollHint 1.5s ease-in-out infinite;
    }

    @keyframes bounce {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(-5px); }
    }

    @keyframes scrollHint {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(3px); }
    }

    /* Mobile navigation list */
    .site-header .nav.navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
        padding: 0 12px;
    }

    /* Mobile menu items - card-like design */
    .site-header .nav.navbar-nav > li {
        border: none;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    .site-header .nav.navbar-nav > li > a {
        font-size: 1rem;
        font-weight: 600;
        padding: 14px 20px;
        border-radius: 14px;
        background: #ffffff;
        color: var(--h-text);
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    .site-header .nav.navbar-nav > li > a::before {
        content: '';
        display: none;
    }

    .site-header .nav.navbar-nav > li > a:hover {
        background: linear-gradient(135deg, rgba(26, 35, 126, 0.05), rgba(200, 169, 81, 0.05));
        border-color: rgba(200, 169, 81, 0.3);
        transform: translateX(4px);
        color: var(--h-navy);
    }

    .site-header .nav.navbar-nav > li.active > a {
        background: linear-gradient(135deg, rgba(26, 35, 126, 0.08), rgba(200, 169, 81, 0.08));
        border-left: 3px solid var(--h-gold);
        color: var(--h-navy);
        font-weight: 700;
    }

    /* Remove dropdown behavior - show all submenu items */
    .has-mega-menu {
        position: static;
    }

    /* Hide angle-down icon on mobile */
    .has-mega-menu > a .la-angle-down {
        display: none;
    }

    /* Submenu items - beautifully indented */
    .has-mega-menu > .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        margin: 8px 0 0 0;
        max-height: none;
        overflow: visible;
        border-radius: 0;
        display: block !important;
    }

    .has-mega-menu > .sub-menu::before {
        display: none;
    }

    .has-mega-menu > .sub-menu li {
        border: none;
        margin: 4px 0;
    }

    .has-mega-menu > .sub-menu li a {
        padding: 12px 20px 12px 52px;
        font-size: 0.92rem;
        border-left: none;
        gap: 12px;
        color: var(--h-text) !important;
        font-weight: 500;
        background: #f8f9fc;
        border-radius: 12px;
        margin: 0 0 0 16px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.03);
    }

    .has-mega-menu > .sub-menu li a i {
        font-size: 1rem;
        width: 24px;
        color: var(--h-gold-dark);
        transition: all 0.3s ease;
    }

    .has-mega-menu > .sub-menu li a:hover {
        background: #ffffff;
        transform: translateX(4px);
        color: var(--h-navy) !important;
        border-color: rgba(200, 169, 81, 0.2);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .has-mega-menu > .sub-menu li a:hover i {
        color: var(--h-navy);
        transform: translateX(2px);
    }

    /* Apply button in mobile - premium styling */
    .site-header .nav-apply-btn {
        margin: 20px 24px 10px;
        padding: 0;
        border-left: none;
        border-top: none;
    }

    .site-header .nav-apply-btn > .site-button {
        width: 100%;
        justify-content: center;
        padding: 14px 22px;
        font-size: 0.95rem;
        font-weight: 700;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--h-navy-dark), var(--h-navy));
        box-shadow: 0 8px 20px rgba(26, 35, 126, 0.25);
        transition: all 0.3s ease;
    }

    .site-header .nav-apply-btn > .site-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(200, 169, 81, 0.35);
        background: linear-gradient(135deg, var(--h-gold-dark), var(--h-gold));
        color: var(--h-navy-dark) !important;
    }

    /* Add decorative element to submenu sections */
    .has-mega-menu:not(:last-child) > .sub-menu {
        margin-bottom: 4px;
    }
}

/* =============================================================
   RESPONSIVE — TABLET (≤ 1024px)
============================================================= */
@media (max-width: 1024px) and (min-width: 992px) {
    .site-header .nav.navbar-nav > li > a {
        font-size: 0.8rem;
        padding: 8px 8px;
    }
    .site-header .nav.navbar-nav > li > a::after {
        left: 8px;
        right: 8px;
    }
}

/* =============================================================
   RESPONSIVE — TOP BAR (≤ 767px)
============================================================= */
@media (max-width: 767px) {
    .site-header .top-bar .row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .site-header .dlab-topbar-left > ul,
    .site-header .dlab-topbar-right > ul {
        justify-content: center;
        flex-wrap: wrap;
    }

    .site-header .dlab-topbar-right > ul > li:first-child {
        border-left: none;
    }
}

/* =============================================================
   RESPONSIVE — SMALL MOBILE (≤ 575px)
============================================================= */
@media (max-width: 575px) {
    .site-header .top-bar {
        display: none;
    }

    .site-header .logo-header img {
        height: 40px;
    }

    .site-header .main-bar .container {
        min-height: 56px;
        padding: 0 16px;
    }

    .site-header .nav.navbar-nav {
        padding: 0 8px;
    }

    .site-header .nav.navbar-nav > li > a {
        font-size: 0.95rem;
        padding: 12px 16px;
    }

    .has-mega-menu > .sub-menu li a {
        padding: 10px 16px 10px 44px;
        font-size: 0.88rem;
        margin-left: 8px;
    }

    /* Adjust scrollable area height for small screens */
    .site-header .header-nav.navbar-collapse.show {
        max-height: calc(100vh - 75px);
        margin: 0 8px;
    }

    .site-header .nav-apply-btn {
        margin: 16px 20px 8px;
    }
}

/* =============================================================
   RESPONSIVE — VERY SMALL (≤ 360px)
============================================================= */
@media (max-width: 360px) {
    .site-header .logo-header img {
        height: 36px;
    }
    .site-header .navbar-toggler {
        width: 38px;
        height: 38px;
    }
    .site-header .navbar-toggler span {
        width: 18px;
    }
}

/* =============================================================
   ACCESSIBILITY — Focus states
============================================================= */
.site-header .nav.navbar-nav > li > a:focus-visible,
.site-header #quik-search-btn:focus-visible,
.site-header .navbar-toggler:focus-visible,
.site-header .nav-apply-btn > .site-button:focus-visible {
    outline: 2px solid var(--h-gold);
    outline-offset: 2px;
    border-radius: 12px;
}



/* =============================================================
   PANEKAR SECONDARY SCHOOL — Footer
   Font: Inter | Navy #1a237e | Gold #c8a951 | White #ffffff
   Matches header design system — no HTML changes
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ---------------------------
   Variables
--------------------------- */
:root {
    --f-navy:        #1a237e;
    --f-navy-dark:   #0d1257;
    --f-navy-mid:    #131b6b;
    --f-gold:        #c8a951;
    --f-gold-dark:   #a8893a;
    --f-white:       #ffffff;
    --f-muted:       rgba(255,255,255,0.62);
    --f-muted-light: rgba(255,255,255,0.82);
    --f-border:      rgba(255,255,255,0.1);
    --f-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --f-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --f-dur:         0.25s;
}



/* =============================================================
   NEWSLETTER SECTION
============================================================= */
.section-full.p-tb50.bg-primary {
    background: linear-gradient(135deg, var(--f-navy-dark) 0%, var(--f-navy) 100%) !important;
    padding: 48px 0;
    position: relative;
    overflow: hidden;
}

/* Subtle diagonal stripe overlay */
.section-full.p-tb50.bg-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 40px,
        rgba(200,169,81,0.04) 40px,
        rgba(200,169,81,0.04) 80px
    );
    pointer-events: none;
}

.section-full.p-tb50.bg-primary .container {
    position: relative;
    z-index: 1;
}

/* Left text block */
.section-full.p-tb50.bg-primary h4 {
    font-family: var(--f-font);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--f-white);
    margin-bottom: 8px;
    letter-spacing: -0.2px;
    text-align: left;
}

.section-full.p-tb50.bg-primary p.m-b0 {
    font-family: var(--f-font);
    font-size: 0.92rem;
    color: var(--f-muted-light);
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* Right form block */
.section-full.p-tb50.bg-primary .col-lg-5 h4 {
    font-family: var(--f-font);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--f-gold);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Newsletter form */
.newsletter-group {
    display: flex;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0,0,0,0.22);
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(4px);
}

.newsletter-group .form-control {
    font-family: var(--f-font);
    font-size: 0.875rem;
    background: transparent;
    border: none;
    color: var(--f-white);
    padding: 13px 20px;
    flex: 1;
    outline: none;
    box-shadow: none;
}

.newsletter-group .form-control::placeholder {
    color: rgba(255,255,255,0.45);
}

.newsletter-group .form-control:focus {
    background: transparent;
    box-shadow: none;
    border: none;
    color: var(--f-white);
}

.newsletter-group .input-group-append {
    display: flex;
    align-items: center;
}

.subscribe-btn {
    font-family: var(--f-font);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--f-navy-dark) !important;
    background: linear-gradient(135deg, var(--f-gold) 0%, var(--f-gold-dark) 100%);
    border: none;
    outline: none;
    padding: 13px 26px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0 50px 50px 0;
    transition:
        background var(--f-dur) var(--f-ease),
        transform  var(--f-dur) var(--f-ease),
        box-shadow var(--f-dur) var(--f-ease);
}

.subscribe-btn:hover {
    background: linear-gradient(135deg, var(--f-gold-dark) 0%, var(--f-gold) 100%);
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(200,169,81,0.4);
}


/* =============================================================
   FOOTER TOP
============================================================= */
.site-footer .footer-top {
    background-color: var(--f-navy) !important;
    background-blend-mode: multiply;
    padding: 72px 0 52px;
    position: relative;
}

/* Gold accent bar at very top */
.site-footer .footer-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--f-gold-dark), var(--f-gold), var(--f-gold-dark));
}

/* =============================================================
   FOOTER WIDGET — shared
============================================================= */
.site-footer .footer-widget {
    padding-right: 12px;
}

.site-footer .footer-title {
    font-family: var(--f-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--f-white);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 12px;
    position: relative;
}

/* Gold underline bar on titles */
.site-footer .footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 2.5px;
    background: var(--f-gold);
    border-radius: 2px;
}

/* =============================================================
   ABOUT WIDGET
============================================================= */
.site-footer .footer-text {
    font-family: var(--f-font);
    font-size: 0.875rem;
    color: var(--f-muted);
    line-height: 1.75;
    margin-bottom: 20px;
}

.site-footer .footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-footer .footer-contact li {
    font-family: var(--f-font);
    font-size: 0.85rem;
    color: var(--f-muted-light);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.site-footer .footer-contact li i {
    color: var(--f-gold);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* =============================================================
   LATEST NEWS WIDGET
============================================================= */
.site-footer .footer-post {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--f-border);
}

.site-footer .footer-post:first-of-type {
    padding-top: 0;
}

.site-footer .footer-post:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.site-footer .footer-post img {
    width: 64px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1.5px solid rgba(200,169,81,0.25);
}

.site-footer .footer-post-title {
    font-family: var(--f-font);
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--f-muted-light);
    line-height: 1.45;
    margin: 0 0 5px 0;
    transition: color var(--f-dur) var(--f-ease);
}

.site-footer .footer-post:hover .footer-post-title {
    color: var(--f-gold);
}

.site-footer .footer-post-date {
    font-family: var(--f-font);
    font-size: 0.75rem;
    color: var(--f-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-footer .footer-post-date i {
    color: var(--f-gold);
    font-size: 0.8rem;
}

/* =============================================================
   QUICK LINKS WIDGET
============================================================= */
.site-footer .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.site-footer .footer-links li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--f-border);
}

.site-footer .footer-links li:last-child {
    border-bottom: none;
}

.site-footer .footer-links li a {
    font-family: var(--f-font);
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--f-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    transition: color var(--f-dur) var(--f-ease),
                padding-left var(--f-dur) var(--f-ease);
}

/* Chevron arrow */
.site-footer .footer-links li a::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--f-gold);
    border-bottom: 1.5px solid var(--f-gold);
    transform: rotate(-45deg);
    flex-shrink: 0;
    transition: transform var(--f-dur) var(--f-ease);
}

.site-footer .footer-links li a:hover {
    color: var(--f-gold);
    padding-left: 6px;
}

.site-footer .footer-links li a:hover::before {
    transform: rotate(-45deg) translate(2px, -2px);
}

/* =============================================================
   SCHOOL HOURS WIDGET
============================================================= */
.site-footer .footer-hours {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.site-footer .footer-hours li {
    font-family: var(--f-font);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--f-border);
    margin: 0;
}

.site-footer .footer-hours li:last-child {
    border-bottom: none;
}

.site-footer .footer-hours li > span:first-child {
    color: var(--f-muted-light);
    font-weight: 500;
}

.site-footer .footer-hours li > span:last-child {
    color: var(--f-gold);
    font-weight: 600;
    font-size: 0.82rem;
}

/* "Closed" days — dim the time */
.site-footer .footer-hours li:nth-last-child(-n+2) > span:last-child {
    color: var(--f-muted);
    font-weight: 400;
}

/* =============================================================
   FOOTER BOTTOM
============================================================= */
.site-footer .footer-bottom {
    background: var(--f-navy-dark);
    border-top: 1px solid rgba(200,169,81,0.2);
    padding: 18px 0;
}

/* Copyright */
.site-footer .copyright-text {
    font-family: var(--f-font);
    font-size: 0.82rem;
    color: var(--f-muted);
    line-height: 1.5;
}

.site-footer .copyright-text a {
    color: var(--f-gold);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--f-dur) var(--f-ease);
}

.site-footer .copyright-text a:hover {
    color: var(--f-white);
}

/* Bottom links (override shared .footer-links for horizontal layout) */
.site-footer .footer-bottom .footer-links {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0;
}

.site-footer .footer-bottom .footer-links li {
    border-bottom: none;
    border-right: 1px solid var(--f-border);
}

.site-footer .footer-bottom .footer-links li:last-child {
    border-right: none;
}

.site-footer .footer-bottom .footer-links li a {
    font-size: 0.82rem;
    padding: 0 14px;
    gap: 0;
    color: var(--f-muted);
}

.site-footer .footer-bottom .footer-links li a::before {
    display: none;
}

.site-footer .footer-bottom .footer-links li a:hover {
    color: var(--f-gold);
    padding-left: 14px;
}

/* =============================================================
   RESPONSIVE — TABLET  ≤ 991px
============================================================= */
@media (max-width: 991px) {
    .site-footer .footer-top {
        padding: 52px 0 40px;
    }

    .site-footer .footer-widget {
        padding-right: 0;
        margin-bottom: 8px;
    }

    .section-full.p-tb50.bg-primary {
        padding: 36px 0;
    }
}

/* =============================================================
   RESPONSIVE — MOBILE  ≤ 767px
============================================================= */
@media (max-width: 767px) {
    .site-footer .footer-bottom .row {
        text-align: center;
    }

    .site-footer .footer-bottom .footer-links {
        justify-content: center;
        margin-top: 10px;
    }

    .site-footer .footer-bottom .footer-links li:first-child a {
        padding-left: 0;
    }

    .site-footer .copyright-text {
        text-align: center;
    }

    .section-full.p-tb50.bg-primary h4 {
        font-size: 1.2rem;
    }

    .newsletter-group {
        border-radius: 10px;
    }

    .subscribe-btn {
        border-radius: 0 10px 10px 0;
    }
}

/* =============================================================
   RESPONSIVE — SMALL  ≤ 480px
============================================================= */
@media (max-width: 480px) {
    .site-footer .footer-top {
        padding: 40px 0 30px;
    }

    .newsletter-group {
        flex-direction: column;
        border-radius: 10px;
        overflow: visible;
        background: transparent;
        box-shadow: none;
        border: none;
        gap: 10px;
    }

    .newsletter-group .form-control {
        border-radius: 50px;
        background: rgba(255,255,255,0.1);
        border: 1.5px solid rgba(255,255,255,0.2);
        padding: 12px 18px;
    }

    .newsletter-group .input-group-append {
        width: 100%;
    }

    .subscribe-btn {
        border-radius: 50px;
        width: 100%;
        justify-content: center;
        padding: 12px;
    }

    .site-footer .footer-bottom .footer-links {
        flex-wrap: wrap;
        gap: 4px;
    }

    .site-footer .footer-bottom .footer-links li {
        border-right: none;
    }

    .site-footer .footer-bottom .footer-links li a {
        padding: 2px 8px;
    }
}


/* =============================================================
   SCROLL TO TOP BUTTON
============================================================= */

/* Base override */
button.scroltop {
    position:      fixed;
    bottom:        32px;
    right:         28px;
    width:         48px;
    height:        48px;
    border-radius: 50% !important;
    border:        none !important;
    outline:       none;
    cursor:        pointer;
    z-index:       9999;

    /* Navy-to-gold gradient */
    background: linear-gradient(135deg, var(--f-navy-dark) 0%, var(--f-navy) 100%) !important;
    color:      var(--f-gold) !important;
    font-size:  1rem;
    line-height: 1 !important;

    /* Flex-center the icon */
    display:         flex !important;
    align-items:     center;
    justify-content: center;

    box-shadow:  0 6px 24px rgba(26,35,126,0.35) !important;
    transition:
        transform   0.28s cubic-bezier(0.4,0,0.2,1),
        box-shadow  0.28s cubic-bezier(0.4,0,0.2,1),
        background  0.28s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Pulsing gold ring */
button.scroltop::before {
    content:       '';
    position:      absolute;
    inset:         -4px;
    border-radius: 50%;
    border:        2px solid rgba(200,169,81,0.45);
    animation:     scroltop-ring 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes scroltop-ring {
    0%   { transform: scale(1);    opacity: 0.7; }
    70%  { transform: scale(1.38); opacity: 0;   }
    100% { transform: scale(1.38); opacity: 0;   }
}

/* Gold thin inner border */
button.scroltop::after {
    content:       '' !important;
    position:      absolute !important;
    inset:         0 !important;
    border-radius: 50% !important;
    border:        1.5px solid rgba(200,169,81,0.35) !important;
    background:    transparent !important;
    transform:     none !important;
    opacity:       1 !important;
    z-index:       1;
    pointer-events: none;
    transition:    border-color 0.28s ease !important;
    animation:     none !important;
}

/* Hover state */
button.scroltop:hover {
    background:  linear-gradient(135deg, var(--f-gold-dark) 0%, var(--f-gold) 100%) !important;
    color:       var(--f-navy-dark) !important;
    transform:   translateY(-4px) scale(1.08) !important;
    box-shadow:  0 12px 32px rgba(200,169,81,0.42) !important;
}

button.scroltop:hover::after {
    border-color: rgba(200,169,81,0.7) !important;
}

button.scroltop:hover::before {
    animation: none;
    opacity: 0;
}

/* Active / pressed */
button.scroltop:active {
    transform: translateY(-1px) scale(0.96) !important;
    box-shadow: 0 4px 14px rgba(26,35,126,0.28) !important;
}

/* Neutralise style2/style3 spinning ring from theme */
button.scroltop.style2::after,
button.scroltop.style3::after {
    animation: none !important;
    border:    1.5px solid rgba(200,169,81,0.35) !important;
}

/* =============================================================
   RESPONSIVE — SMALL  ≤ 480px
============================================================= */
@media (max-width: 480px) {
    .site-footer .footer-top {
        padding: 40px 0 30px;
    }

    .newsletter-group {
        flex-direction: column;
        border-radius: 10px;
        overflow: visible;
        background: transparent;
        box-shadow: none;
        border: none;
        gap: 10px;
    }

    .newsletter-group .form-control {
        border-radius: 50px;
        background: rgba(255,255,255,0.1);
        border: 1.5px solid rgba(255,255,255,0.2);
        padding: 12px 18px;
    }

    .newsletter-group .input-group-append {
        width: 100%;
    }

    .subscribe-btn {
        border-radius: 50px;
        width: 100%;
        justify-content: center;
        padding: 12px;
    }

    .site-footer .footer-bottom .footer-links {
        flex-wrap: wrap;
        gap: 4px;
    }

    .site-footer .footer-bottom .footer-links li {
        border-right: none;
    }

    .site-footer .footer-bottom .footer-links li a {
        padding: 2px 8px;
    }
}



/* =============================================================
   FOOTER SOCIAL ICONS (About widget)
============================================================= */
.site-footer .footer-social {
    list-style: none;
    margin: 22px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.site-footer .footer-social li {
    margin: 0;
    padding: 0;
}
.site-footer .footer-social li a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--f-muted-light);
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.12);
    transition:
        background    0.25s cubic-bezier(0.4,0,0.2,1),
        color         0.25s cubic-bezier(0.4,0,0.2,1),
        border-color  0.25s cubic-bezier(0.4,0,0.2,1),
        transform     0.25s cubic-bezier(0.4,0,0.2,1),
        box-shadow    0.25s cubic-bezier(0.4,0,0.2,1);
}
.site-footer .footer-social li a:hover {
    background:   var(--f-gold);
    color:        var(--f-navy-dark);
    border-color: var(--f-gold);
    transform:    translateY(-3px);
    box-shadow:   0 6px 18px rgba(200,169,81,0.38);
}

/* =============================================================
   PANEKAR SECONDARY SCHOOL — About Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ---------------------------
   Variables
--------------------------- */
:root {
    --a-navy:        #1a237e;
    --a-navy-dark:   #0d1257;
    --a-navy-light:  #e8eaf6;
    --a-gold:        #c8a951;
    --a-gold-dark:   #a8893a;
    --a-gold-light:  #f5edce;
    --a-white:       #ffffff;
    --a-gray:        #f5f6fa;
    --a-text:        #3a3a4a;
    --a-muted:       #6b7280;
    --a-border:      #e4e6ef;
    --a-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --a-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --a-dur:         0.28s;
    --a-radius:      10px;
}

/* =============================================================
   PAGE BANNER
============================================================= */
.dlab-bnr-inr {
    position:            relative;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    min-height:          320px;
    display:             flex;
    align-items:         center;
    padding:             60px 0;
}

.dlab-bnr-inr.overlay-black-middle::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba(13,18,87,0.82) 0%,
        rgba(26,35,126,0.65) 100%
    );
}

/* Gold bottom border */
.dlab-bnr-inr::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     4px;
    background: linear-gradient(90deg, var(--a-gold-dark), var(--a-gold), var(--a-gold-dark));
}

.dlab-bnr-inr .container {
    position: relative;
    z-index:  1;
}

.dlab-bnr-inr-entry h1 {
    font-family:    var(--a-font);
    font-size:      clamp(1.8rem, 4vw, 2.8rem);
    font-weight:    800;
    color:          var(--a-white);
    letter-spacing: -0.5px;
    margin-bottom:  16px;
    text-shadow:    0 2px 16px rgba(0,0,0,0.25);
}

/* Breadcrumb */
.breadcrumb-row ul.list-inline {
    list-style:     none;
    display:        flex;
    align-items:    center;
    justify-content: center;
    flex-wrap:      wrap;
    gap:            6px;
    margin:         0;
    padding:        0;
}

.breadcrumb-row ul.list-inline li {
    font-family:  var(--a-font);
    font-size:    0.85rem;
    font-weight:  500;
    color:        rgba(255,255,255,0.7);
    padding:      0;
    display:      flex;
    align-items:  center;
    gap:          6px;
}

.breadcrumb-row ul.list-inline li::before {
    content: '/';
    color:   var(--a-gold);
}

.breadcrumb-row ul.list-inline li:first-child::before { display: none; }

.breadcrumb-row ul.list-inline li a {
    color:           var(--a-gold);
    text-decoration: none;
    font-weight:     600;
    transition:      color var(--a-dur) var(--a-ease);
}

.breadcrumb-row ul.list-inline li a:hover { color: var(--a-white); }

/* =============================================================
   MOTTO STRIP
============================================================= */
.section-full.bg-primary.p-tb20 {
    background: linear-gradient(135deg, var(--a-navy-dark) 0%, var(--a-navy) 100%) !important;
    padding:    22px 0;
    position:   relative;
    overflow:   hidden;
}

.section-full.bg-primary.p-tb20::before {
    content: '';
    position: absolute;
    inset:    0;
    background: repeating-linear-gradient(
        -55deg,
        transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px,
        rgba(200,169,81,0.05) 80px
    );
    pointer-events: none;
}

.section-full.bg-primary.p-tb20 h3 {
    font-family:    var(--a-font);
    font-size:      clamp(1rem, 2.5vw, 1.35rem);
    font-weight:    300;
    letter-spacing: 3px;
    color:          var(--a-white) !important;
    position:       relative;
    z-index:        1;
    margin:         0;
}

.section-full.bg-primary.p-tb20 h3 i { color: var(--a-gold); }

/* =============================================================
   SECTION SHARED
============================================================= */
.section-full       { width: 100%; }
.content-inner      { padding: 70px 0; }
.content-inner-2    { padding: 60px 0; }
.bg-gray            { background-color: var(--a-gray)  !important; }
.bg-white           { background-color: var(--a-white) !important; }

.section-head { margin-bottom: 44px; }

.section-head .title,
.section-head h2.title,
.section-head h3.title {
    font-family:    var(--a-font);
    font-size:      clamp(1.4rem, 3vw, 2rem);
    font-weight:    800;
    color:          var(--a-navy);
    letter-spacing: -0.4px;
    margin-bottom:  12px;
    position:       relative;
    display:        inline-block;
}

.section-head.text-center .title::after {
    content:       '';
    display:       block;
    width:         52px;
    height:        3px;
    background:    linear-gradient(90deg, var(--a-gold), var(--a-gold-dark));
    border-radius: 2px;
    margin:        10px auto 0;
}

.section-head p {
    font-family: var(--a-font);
    font-size:   0.95rem;
    color:       var(--a-muted);
    max-width:   580px;
    margin:      0 auto;
    line-height: 1.7;
}

/* =============================================================
   SCHOOL STATS
============================================================= */
.icon-bx-wraper.bx-style-1 {
    border:        1px solid var(--a-border);
    border-radius: var(--a-radius);
    background:    var(--a-white);
    height:        100%;
    transition:
        transform    var(--a-dur) var(--a-ease),
        box-shadow   var(--a-dur) var(--a-ease),
        border-color var(--a-dur) var(--a-ease);
}

.icon-bx-wraper.bx-style-1:hover {
    transform:    translateY(-6px);
    box-shadow:   0 14px 36px rgba(26,35,126,0.12);
    border-color: var(--a-gold);
}

.icon-bx-wraper .icon-bx-md {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--a-navy-light);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   14px;
    transition:      background var(--a-dur) var(--a-ease);
}

.icon-bx-wraper:hover .icon-bx-md  { background: var(--a-gold-light); }

.icon-bx-wraper .icon-bx-md i,
.icon-bx-wraper .icon-bx-md i.text-primary {
    font-size:  1.5rem;
    color:      var(--a-navy) !important;
    transition: color var(--a-dur) var(--a-ease);
}

.icon-bx-wraper:hover .icon-bx-md i { color: var(--a-gold-dark) !important; }

.icon-bx-wraper h2.text-primary {
    font-family:   var(--a-font);
    font-size:     2.2rem;
    font-weight:   800;
    color:         var(--a-navy) !important;
    margin-bottom: 4px;
    line-height:   1;
}

.icon-bx-wraper p.m-b0 {
    font-family: var(--a-font);
    font-size:   0.88rem;
    color:       var(--a-muted);
    margin:      0;
}

/* =============================================================
   HISTORY — image + text
============================================================= */
.img-cover {
    object-fit:    cover;
    width:         100%;
    border-radius: var(--a-radius);
    box-shadow:    0 8px 32px rgba(26,35,126,0.13);
    display:       block;
}

.radius-sm { border-radius: var(--a-radius); }

.content-inner h3 {
    font-family:   var(--a-font);
    font-size:     1.35rem;
    font-weight:   700;
    color:         var(--a-navy);
    margin-bottom: 16px;
    line-height:   1.35;
}

.content-inner p {
    font-family:   var(--a-font);
    font-size:     0.92rem;
    color:         var(--a-text);
    line-height:   1.8;
    margin-bottom: 14px;
}

.content-inner p strong { color: var(--a-navy); font-weight: 700; }

/* =============================================================
   MILESTONES TIMELINE
============================================================= */
.timeline-list {
    list-style: none;
    padding:    0;
    margin:     0;
    position:   relative;
}

/* Vertical line */
.timeline-list::before {
    content:       '';
    position:      absolute;
    top:           0;
    bottom:        0;
    left:          18px;
    width:         2px;
    background:    linear-gradient(180deg, var(--a-navy), var(--a-gold));
    border-radius: 2px;
}

.timeline-list-item {
    display:     flex;
    align-items: flex-start;
    gap:         20px;
    padding:     0 0 32px 0;
    position:    relative;
}

.timeline-list-item:last-child { padding-bottom: 0; }

/* Circle dot */
.timeline-badge {
    width:           38px;
    height:          38px;
    border-radius:   50%;
    flex-shrink:     0;
    position:        relative;
    z-index:         1;
    border:          3px solid var(--a-white);
    box-shadow:      0 0 0 2px var(--a-navy);
    transition:
        box-shadow var(--a-dur) var(--a-ease),
        transform  var(--a-dur) var(--a-ease);
}

.timeline-badge.bg-primary {
    background: linear-gradient(135deg, var(--a-navy-dark), var(--a-navy)) !important;
}

.timeline-list-item:hover .timeline-badge {
    box-shadow: 0 0 0 2px var(--a-gold);
    transform:  scale(1.14);
}

/* Panel card */
.timeline-panel {
    background:    var(--a-white);
    border:        1px solid var(--a-border);
    border-radius: var(--a-radius);
    padding:       18px 22px;
    flex:          1;
    box-shadow:    0 2px 10px rgba(26,35,126,0.06);
    transition:
        box-shadow   var(--a-dur) var(--a-ease),
        border-color var(--a-dur) var(--a-ease),
        transform    var(--a-dur) var(--a-ease);
}

.timeline-list-item:hover .timeline-panel {
    box-shadow:   0 8px 28px rgba(26,35,126,0.12);
    border-color: var(--a-gold);
    transform:    translateX(5px);
}

.timeline-panel h5 {
    font-family:   var(--a-font);
    font-size:     0.95rem;
    font-weight:   700;
    color:         var(--a-navy) !important;
    margin-bottom: 6px;
}

.timeline-panel p.m-b0 {
    font-family: var(--a-font);
    font-size:   0.88rem;
    color:       var(--a-text);
    line-height: 1.7;
    margin:      0;
}

.timeline-panel p.m-b0 strong { color: var(--a-navy); font-weight: 700; }

/* =============================================================
   VISION & MISSION
============================================================= */
.icon-bx-wraper.bx-style-1.center {
    text-align:     center;
    padding:        36px 30px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

.icon-bx-wraper.bx-style-1.center h4 {
    font-family:   var(--a-font);
    font-size:     1.15rem;
    font-weight:   700;
    color:         var(--a-navy);
    margin-bottom: 12px;
}

.icon-bx-wraper.bx-style-1.center p {
    font-family:   var(--a-font);
    font-size:     0.9rem;
    color:         var(--a-text);
    line-height:   1.75;
    margin-bottom: 10px;
}

/* =============================================================
   CORE VALUES & ACADEMIC PROGRAMS
============================================================= */
.icon-bx-wraper.bx-style-2 {
    border:        1px solid var(--a-border);
    border-radius: var(--a-radius);
    background:    var(--a-white);
    position:      relative;
    padding:        20px;
    overflow:      hidden;
    height:        100%;
    transition:
        transform    var(--a-dur) var(--a-ease),
        box-shadow   var(--a-dur) var(--a-ease),
        border-color var(--a-dur) var(--a-ease);
}

/* Gold left accent bar */
.icon-bx-wraper.bx-style-2::before {
    content:          '';
    position:         absolute;
    top:              0;
    left:             0;
    bottom:           0;
    width:            4px;
    background:       linear-gradient(180deg, var(--a-navy), var(--a-gold));
    transform:        scaleY(0);
    transform-origin: top;
    transition:       transform 0.35s var(--a-ease);
}

.icon-bx-wraper.bx-style-2:hover {
    transform:    translateY(-5px);
    box-shadow:   0 14px 36px rgba(26,35,126,0.13);
    border-color: var(--a-navy-light);
}

.icon-bx-wraper.bx-style-2:hover::before { transform: scaleY(1); }

/* Small icon circle */
.icon-bx-wraper .icon-sm {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    background:      var(--a-navy-light);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   14px;
    transition:      background var(--a-dur) var(--a-ease);
}

.icon-bx-wraper:hover .icon-sm { background: var(--a-gold-light); }

.icon-bx-wraper .icon-sm i,
.icon-bx-wraper .icon-sm i.text-primary {
    font-size:  1.15rem;
    color:      var(--a-navy) !important;
    transition: color var(--a-dur) var(--a-ease);
}

.icon-bx-wraper:hover .icon-sm i { color: var(--a-gold-dark) !important; }

.icon-bx-wraper.bx-style-2 h4,
.icon-bx-wraper.bx-style-2 h5 {
    font-family:   var(--a-font);
    font-weight:   700;
    color:         var(--a-navy);
    margin-bottom: 10px;
}

.icon-bx-wraper.bx-style-2 h4 { font-size: 1.05rem; }
.icon-bx-wraper.bx-style-2 h5 { font-size: 0.95rem; }

.icon-bx-wraper.bx-style-2 p {
    font-family: var(--a-font);
    font-size:   0.875rem;
    color:       var(--a-text);
    line-height: 1.75;
    margin:      0;
}

/* Academic programs centred */
.icon-bx-wraper.bx-style-2.text-center {
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

/* =============================================================
   HEADMASTERS TABLE
============================================================= */
.table-responsive {
    border-radius: var(--a-radius);
    overflow:      hidden;
    box-shadow:    0 4px 24px rgba(26,35,126,0.1);
    border:        1px solid var(--a-border);
}

.table.table-striped.table-bordered {
    font-family:     var(--a-font);
    font-size:       0.9rem;
    margin:          0;
    border-collapse: separate;
    border-spacing:  0;
}

.table thead.bg-primary {
    background: linear-gradient(135deg, var(--a-navy-dark) 0%, var(--a-navy) 100%) !important;
}

.table thead.bg-primary th {
    font-family:    var(--a-font);
    font-size:      0.82rem;
    font-weight:    700;
    color:          var(--a-white) !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding:        14px 18px;
    border:         none;
    white-space:    nowrap;
}

.table tbody tr {
    transition: background var(--a-dur) var(--a-ease);
}

.table tbody tr td {
    font-family:    var(--a-font);
    font-size:      0.9rem;
    color:          var(--a-text);
    padding:        13px 18px;
    border-color:   var(--a-border);
    vertical-align: middle;
}

.table tbody tr:first-child td { border-top: none; }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(26,35,126,0.03);
}

.table tbody tr:hover {
    background-color: var(--a-gold-light) !important;
}

/* Current headmaster row */
.table tbody tr:last-child td {
    font-weight: 700;
    color:       var(--a-navy);
    background:  var(--a-navy-light) !important;
}

.table tbody tr:last-child:hover td {
    background: var(--a-gold-light) !important;
}

/* Row number column */
.table tbody tr td:first-child {
    font-weight: 600;
    color:       var(--a-navy);
    text-align:  center;
    width:       48px;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991px) {
    .content-inner   { padding: 52px 0; }
    .content-inner-2 { padding: 44px 0; }
    .section-head    { margin-bottom: 32px; }
    .dlab-bnr-inr    { min-height: 240px; padding: 44px 0; }
    .timeline-list::before { left: 15px; }
    .timeline-badge        { width: 32px; height: 32px; }
}

@media (max-width: 767px) {
    .content-inner   { padding: 40px 0; }
    .content-inner-2 { padding: 32px 0; }
    .dlab-bnr-inr    { min-height: 200px; padding: 36px 0; }

    .section-full.bg-primary.p-tb20 h3 {
        font-size: 0.95rem; letter-spacing: 1.5px;
    }

    .timeline-panel { padding: 14px 16px; }

    .table thead.bg-primary th,
    .table tbody tr td { padding: 10px 12px; font-size: 0.82rem; }
}

@media (max-width: 480px) {
    .dlab-bnr-inr      { min-height: 180px; padding: 28px 0; }
    .timeline-list     { padding-left: 6px; }
    .timeline-list::before { left: 12px; }
    .timeline-badge        { width: 26px; height: 26px; }
    .timeline-list-item    { gap: 14px; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — Academics Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ---------------------------
   Variables
--------------------------- */
:root {
    --ac-navy:       #1a237e;
    --ac-navy-dark:  #0d1257;
    --ac-navy-light: #e8eaf6;
    --ac-gold:       #c8a951;
    --ac-gold-dark:  #a8893a;
    --ac-gold-light: #f5edce;
    --ac-white:      #ffffff;
    --ac-gray:       #f5f6fa;
    --ac-text:       #3a3a4a;
    --ac-muted:      #6b7280;
    --ac-border:     #e4e6ef;
    --ac-green:      #1e7e50;
    --ac-red:        #b71c1c;
    --ac-orange:     #e65100;
    --ac-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ac-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --ac-dur:        0.28s;
    --ac-radius:     10px;
    --ac-radius-lg:  16px;
}

/* =============================================================
   PAGE BANNER
============================================================= */
.dlab-bnr-inr {
    position:            relative;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    min-height:          340px;
    display:             flex;
    align-items:         center;
    padding:             60px 0;
}

.dlab-bnr-inr.overlay-black-middle::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba(13,18,87,0.85) 0%,
        rgba(26,35,126,0.65) 100%
    );
}

.dlab-bnr-inr::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     4px;
    background: linear-gradient(90deg, var(--ac-gold-dark), var(--ac-gold), var(--ac-gold-dark));
}

.dlab-bnr-inr .container { position: relative; z-index: 1; }

.dlab-bnr-inr-entry h1 {
    font-family:    var(--ac-font);
    font-size:      clamp(2rem, 5vw, 3rem);
    font-weight:    800;
    color:          var(--ac-white);
    letter-spacing: -0.5px;
    margin-bottom:  8px;
    text-shadow:    0 2px 20px rgba(0,0,0,0.3);
}

.banner-sub {
    font-family:    var(--ac-font);
    font-size:      0.9rem;
    font-weight:    500;
    color:          var(--ac-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom:  14px;
    display:        block;
}

.breadcrumb-row ul.list-inline {
    list-style:      none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             6px;
    margin:          0;
    padding:         0;
}

.breadcrumb-row ul.list-inline li {
    font-family:  var(--ac-font);
    font-size:    0.85rem;
    font-weight:  500;
    color:        rgba(255,255,255,0.7);
    padding:      0;
    display:      flex;
    align-items:  center;
    gap:          6px;
}

.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--ac-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }

.breadcrumb-row ul.list-inline li a {
    color:           var(--ac-gold);
    text-decoration: none;
    font-weight:     600;
    transition:      color var(--ac-dur) var(--ac-ease);
}

.breadcrumb-row ul.list-inline li a:hover { color: var(--ac-white); }

/* =============================================================
   QUICK STATS STRIP
============================================================= */
.acad-strip {
    background: linear-gradient(135deg, var(--ac-navy-dark) 0%, var(--ac-navy) 100%);
    padding:    0;
    position:   relative;
    overflow:   hidden;
}

.acad-strip::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -55deg,
        transparent, transparent 40px,
        rgba(200,169,81,0.06) 40px,
        rgba(200,169,81,0.06) 80px
    );
    pointer-events: none;
}

.acad-strip-inner {
    display:         flex;
    align-items:     stretch;
    justify-content: center;
    flex-wrap:       wrap;
    position:        relative;
    z-index:         1;
}

.acad-strip-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding:        24px 44px;
    gap:            4px;
    transition:     background var(--ac-dur) var(--ac-ease);
}

.acad-strip-item:hover { background: rgba(200,169,81,0.1); }

.strip-num {
    font-family:  var(--ac-font);
    font-size:    2rem;
    font-weight:  800;
    color:        var(--ac-gold);
    line-height:  1;
}

.strip-label {
    font-family:    var(--ac-font);
    font-size:      0.78rem;
    font-weight:    500;
    color:          rgba(255,255,255,0.75);
    letter-spacing: 0.5px;
    text-align:     center;
}

.acad-strip-divider {
    width:     1px;
    background: rgba(255,255,255,0.15);
    margin:    12px 0;
}

/* =============================================================
   SHARED SECTION STYLES
============================================================= */
.section-full       { width: 100%; }
.content-inner      { padding: 72px 0; }
.bg-gray            { background-color: var(--ac-gray)  !important; }
.bg-white           { background-color: var(--ac-white) !important; }
.m-b30              { margin-bottom: 30px !important; }
.m-b40              { margin-bottom: 40px !important; }
.m-b50              { margin-bottom: 50px !important; }
.m-t40              { margin-top:    40px !important; }
.m-auto             { margin-left: auto !important; margin-right: auto !important; }

.section-head { margin-bottom: 48px; }

.section-head .title,
.section-head h2.title {
    font-family:    var(--ac-font);
    font-size:      clamp(1.5rem, 3vw, 2rem);
    font-weight:    800;
    color:          var(--ac-navy);
    letter-spacing: -0.4px;
    margin-bottom:  12px;
    display:        inline-block;
    position:       relative;
}

.section-head.text-center .title::after {
    content:       '';
    display:       block;
    width:         52px;
    height:        3px;
    background:    linear-gradient(90deg, var(--ac-gold), var(--ac-gold-dark));
    border-radius: 2px;
    margin:        10px auto 0;
}

.section-head p {
    font-family: var(--ac-font);
    font-size:   0.95rem;
    color:       var(--ac-muted);
    max-width:   560px;
    margin:      0 auto;
    line-height: 1.7;
}

/* =============================================================
   ACADEMIC CALENDAR — Hero Image
============================================================= */
.acad-img-banner {
    position:      relative;
    border-radius: var(--ac-radius-lg);
    overflow:      hidden;
    max-height:    340px;
    box-shadow:    0 8px 36px rgba(26,35,126,0.15);
}

.acad-hero-img {
    width:      100%;
    height:     340px;
    object-fit: cover;
    display:    block;
    transition: transform 0.5s var(--ac-ease);
}

.acad-img-banner:hover .acad-hero-img { transform: scale(1.03); }

.acad-img-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(13,18,87,0.75) 100%
    );
    display:     flex;
    align-items: flex-end;
    padding:     28px 32px;
}

.acad-img-overlay-text {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-family: var(--ac-font);
    font-size:   1rem;
    font-weight: 600;
    color:       var(--ac-white);
}

.acad-img-overlay-text i {
    font-size: 1.2rem;
    color:     var(--ac-gold);
}

/* =============================================================
   TERM CARDS
============================================================= */
.term-card {
    border:        1px solid var(--ac-border);
    border-radius: var(--ac-radius-lg);
    background:    var(--ac-white);
    overflow:      hidden;
    height:        100%;
    display:       flex;
    flex-direction: column;
    box-shadow:    0 2px 12px rgba(26,35,126,0.07);
    transition:
        transform  var(--ac-dur) var(--ac-ease),
        box-shadow var(--ac-dur) var(--ac-ease);
}

.term-card:hover {
    transform:  translateY(-6px);
    box-shadow: 0 16px 40px rgba(26,35,126,0.14);
}

/* Header stripe colours per term */
.term-card-header {
    padding:    28px 24px 20px;
    background: linear-gradient(135deg, var(--ac-navy-dark), var(--ac-navy));
    position:   relative;
    overflow:   hidden;
}

.term-card-header::before {
    content:    '';
    position:   absolute;
    top:        -30px;
    right:      -30px;
    width:      90px;
    height:     90px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}

.term-card--2 .term-card-header {
    background: linear-gradient(135deg, #0d3b6e, #1565c0);
}

.term-card--3 .term-card-header {
    background: linear-gradient(135deg, #3e2723, #6d4c41);
}

.term-badge {
    display:        inline-block;
    font-family:    var(--ac-font);
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color:          var(--ac-navy);
    background:     var(--ac-gold);
    padding:        3px 10px;
    border-radius:  20px;
    margin-bottom:  10px;
}

.term-badge--gold {
    background: var(--ac-white);
    color:      var(--ac-navy-dark);
}

.term-title {
    font-family:   var(--ac-font);
    font-size:     1.15rem;
    font-weight:   800;
    color:         var(--ac-white);
    margin-bottom: 4px;
}

.term-dates {
    font-family: var(--ac-font);
    font-size:   0.82rem;
    color:       rgba(255,255,255,0.65);
    margin:      0;
}

/* Event list */
.term-events {
    list-style: none;
    padding:    20px 24px;
    margin:     0;
    flex:       1;
    display:    flex;
    flex-direction: column;
    gap:        16px;
}

.term-event {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
}

.term-event div {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.term-event strong {
    font-family: var(--ac-font);
    font-size:   0.88rem;
    font-weight: 700;
    color:       var(--ac-text);
}

.term-event span {
    font-family: var(--ac-font);
    font-size:   0.8rem;
    color:       var(--ac-muted);
}

/* Event dots */
.event-dot {
    width:        10px;
    height:       10px;
    border-radius: 50%;
    flex-shrink:  0;
    margin-top:   4px;
}

.event-dot--open    { background: var(--ac-green); }
.event-dot--close   { background: var(--ac-red); }
.event-dot--exam    { background: var(--ac-gold-dark); }
.event-dot--special { background: var(--ac-navy); }

/* Card footer */
.term-card-footer {
    padding:        14px 24px;
    border-top:     1px solid var(--ac-border);
    background:     var(--ac-gray);
}

.term-duration {
    font-family: var(--ac-font);
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--ac-muted);
    display:     flex;
    align-items: center;
    gap:         6px;
}

.term-duration i { color: var(--ac-navy); }

/* =============================================================
   CTA DOWNLOAD BAR
============================================================= */
.acad-cta-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    background:      var(--ac-navy-light);
    border:          1px solid rgba(26,35,126,0.15);
    border-radius:   var(--ac-radius);
    padding:         20px 28px;
    flex-wrap:       wrap;
}

.acad-cta-text {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-family: var(--ac-font);
    font-size:   0.92rem;
    font-weight: 500;
    color:       var(--ac-navy);
}

.acad-cta-text i {
    font-size:  1.2rem;
    color:      var(--ac-gold-dark);
}

.btn-acad-download {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ac-font);
    font-size:       0.85rem;
    font-weight:     700;
    color:           var(--ac-white);
    background:      linear-gradient(135deg, var(--ac-navy-dark), var(--ac-navy));
    border:          none;
    border-radius:   8px;
    padding:         11px 22px;
    text-decoration: none;
    white-space:     nowrap;
    transition:
        transform  var(--ac-dur) var(--ac-ease),
        box-shadow var(--ac-dur) var(--ac-ease),
        background var(--ac-dur) var(--ac-ease);
}

.btn-acad-download:hover {
    background:  linear-gradient(135deg, var(--ac-gold-dark), var(--ac-gold));
    color:       var(--ac-navy-dark);
    transform:   translateY(-2px);
    box-shadow:  0 8px 20px rgba(200,169,81,0.35);
    text-decoration: none;
}

/* =============================================================
   SUBJECTS — intro image
============================================================= */
.subj-img-wrap {
    position: relative;
    display:  inline-block;
    width:    100%;
}

.subj-main-img {
    width:         100%;
    height:        380px;
    object-fit:    cover;
    border-radius: var(--ac-radius-lg);
    box-shadow:    0 10px 36px rgba(26,35,126,0.15);
    display:       block;
    transition:    transform 0.45s var(--ac-ease);
}

.subj-img-wrap:hover .subj-main-img { transform: scale(1.02); }

/* Floating badge */
.subj-img-badge {
    position:        absolute;
    bottom:          -18px;
    right:           24px;
    background:      linear-gradient(135deg, var(--ac-navy-dark), var(--ac-navy));
    border:          3px solid var(--ac-white);
    border-radius:   14px;
    padding:         14px 20px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    text-align:      center;
    box-shadow:      0 8px 24px rgba(26,35,126,0.25);
    min-width:       80px;
}

.badge-num {
    font-family: var(--ac-font);
    font-size:   1.8rem;
    font-weight: 800;
    color:       var(--ac-gold);
    line-height: 1;
}

.badge-text {
    font-family:  var(--ac-font);
    font-size:    0.68rem;
    font-weight:  600;
    color:        rgba(255,255,255,0.8);
    line-height:  1.3;
    letter-spacing: 0.3px;
}

/* Intro text */
.subj-intro-title {
    font-family:   var(--ac-font);
    font-size:     1.4rem;
    font-weight:   800;
    color:         var(--ac-navy);
    margin-bottom: 14px;
}

.subj-intro-text {
    font-family:   var(--ac-font);
    font-size:     0.92rem;
    color:         var(--ac-text);
    line-height:   1.8;
    margin-bottom: 14px;
}

.subj-intro-tags {
    display:     none!important; /* Hidden on desktop, shown on mobile */
    flex-wrap: wrap;
    gap:       8px;
    margin-top: 6px;
}

/* =============================================================
   SUBJECT CARDS
============================================================= */
.subj-card {
    border:        1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    background:    var(--ac-white);
    padding:       24px 20px 20px;
    height:        100%;
    display:       flex;
    flex-direction: column;
    position:      relative;
    overflow:      hidden;
    transition:
        transform    var(--ac-dur) var(--ac-ease),
        box-shadow   var(--ac-dur) var(--ac-ease),
        border-color var(--ac-dur) var(--ac-ease);
}

/* Animated top accent bar */
.subj-card::before {
    content:          '';
    position:         absolute;
    top:              0;
    left:             0;
    right:            0;
    height:           3px;
    background:       linear-gradient(90deg, var(--ac-navy), var(--ac-gold));
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform 0.35s var(--ac-ease);
}

.subj-card:hover {
    transform:    translateY(-5px);
    box-shadow:   0 14px 36px rgba(26,35,126,0.12);
    border-color: var(--ac-navy-light);
}

.subj-card:hover::before { transform: scaleX(1); }

.subj-card-icon {
    width:           48px;
    height:          48px;
    border-radius:   12px;
    background:      var(--ac-navy-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   14px;
    transition:      background var(--ac-dur) var(--ac-ease);
}

.subj-card:hover .subj-card-icon { background: var(--ac-gold-light); }

.subj-card-icon i {
    font-size:  1.1rem;
    color:      var(--ac-navy);
    transition: color var(--ac-dur) var(--ac-ease);
}

.subj-card:hover .subj-card-icon i { color: var(--ac-gold-dark); }

.subj-card-title {
    font-family:   var(--ac-font);
    font-size:     0.95rem;
    font-weight:   700;
    color:         var(--ac-navy);
    margin-bottom: 8px;
}

.subj-card-text {
    font-family: var(--ac-font);
    font-size:   0.83rem;
    color:       var(--ac-muted);
    line-height: 1.65;
    flex:        1;
    margin:      0 0 14px 0;
}

/* Stream tags */
.tag,
.subj-tag {
    display:        inline-block;
    font-family:    var(--ac-font);
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.5px;
    border-radius:  20px;
    padding:        3px 10px;
    text-transform: uppercase;
}

.tag {
    background: var(--ac-navy-light);
    color:      var(--ac-navy);
}

.subj-tag--core     { background: var(--ac-navy-light); color: var(--ac-navy); }
.subj-tag--science  { background: #e3f2fd; color: #0d47a1; }
.subj-tag--humanity { background: #fff3e0; color: #e65100; }
.subj-tag--practical{ background: #e8f5e9; color: #1b5e20; }

/* Subject legend */
.subj-legend {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         10px;
    margin-top:  10px;
    padding-top: 28px;
    border-top:  1px solid var(--ac-border);
}

.legend-label {
    font-family: var(--ac-font);
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--ac-muted);
}

/* =============================================================
   TIMETABLE — Image banner
============================================================= */
.tt-img-banner {
    position:      relative;
    border-radius: var(--ac-radius-lg);
    overflow:      hidden;
    max-height:    260px;
    box-shadow:    0 6px 28px rgba(26,35,126,0.12);
}

.tt-hero-img {
    width:      100%;
    height:     260px;
    object-fit: cover;
    display:    block;
    transition: transform 0.5s var(--ac-ease);
}

.tt-img-banner:hover .tt-hero-img { transform: scale(1.03); }

.tt-img-caption {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    background: linear-gradient(to top, rgba(13,18,87,0.78), transparent);
    padding:    20px 24px 16px;
    font-family: var(--ac-font);
    font-size:  0.88rem;
    font-weight: 600;
    color:      var(--ac-white);
    display:    flex;
    align-items: center;
    gap:        8px;
}

.tt-img-caption i { color: var(--ac-gold); }

/* =============================================================
   TIMETABLE — Info strip
============================================================= */
.tt-info-strip {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0;
    background:      var(--ac-navy);
    border-radius:   var(--ac-radius);
    overflow:        hidden;
}

.tt-info-item {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     16px 24px;
    flex:        1;
    min-width:   180px;
    border-right: 1px solid rgba(255,255,255,0.12);
}

.tt-info-item:last-child { border-right: none; }

.tt-info-item i {
    font-size:  1.1rem;
    color:      var(--ac-gold);
    flex-shrink: 0;
}

.tt-info-item span {
    font-family: var(--ac-font);
    font-size:   0.83rem;
    color:       rgba(255,255,255,0.85);
    line-height: 1.4;
}

.tt-info-item strong {
    color:       var(--ac-white);
    font-weight: 700;
}

/* =============================================================
   TIMETABLE — Tabs
============================================================= */
.tt-tabs-wrap {
    margin-bottom: 4px;
}

.tt-tabs {
    display:      flex;
    gap:          6px;
    flex-wrap:    wrap;
    border-bottom: 2px solid var(--ac-border);
    padding-bottom: 0;
}

.tt-tab {
    font-family:     var(--ac-font);
    font-size:       0.88rem;
    font-weight:     600;
    color:           var(--ac-muted);
    background:      transparent;
    border:          none;
    border-bottom:   3px solid transparent;
    padding:         12px 24px;
    cursor:          pointer;
    margin-bottom:   -2px;
    border-radius:   8px 8px 0 0;
    transition:
        color        var(--ac-dur) var(--ac-ease),
        background   var(--ac-dur) var(--ac-ease),
        border-color var(--ac-dur) var(--ac-ease);
}

.tt-tab:hover {
    color:       var(--ac-navy);
    background:  var(--ac-navy-light);
}

.tt-tab.active {
    color:        var(--ac-navy);
    background:   var(--ac-white);
    border-color: var(--ac-navy);
    font-weight:  700;
}

/* =============================================================
   TIMETABLE — Panes
============================================================= */
.tt-pane { display: none; padding-top: 24px; }
.tt-pane.active { display: block; }

/* =============================================================
   TIMETABLE — Table
============================================================= */
.table-responsive {
    border-radius: var(--ac-radius);
    overflow:      hidden;
    box-shadow:    0 4px 24px rgba(26,35,126,0.1);
    border:        1px solid var(--ac-border);
}

.tt-table {
    font-family:     var(--ac-font);
    font-size:       0.88rem;
    width:           100%;
    border-collapse: collapse;
    margin:          0;
    background:      var(--ac-white);
}

/* Column widths */
.tt-th-period { width: 56px;  text-align: center; }
.tt-th-time   { width: 120px; white-space: nowrap; }

/* Header */
.tt-table thead tr {
    background: linear-gradient(135deg, var(--ac-navy-dark), var(--ac-navy));
}

.tt-table thead th {
    font-family:    var(--ac-font);
    font-size:      0.78rem;
    font-weight:    700;
    color:          var(--ac-white) !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding:        14px 16px;
    border:         none;
    white-space:    nowrap;
}

/* Body cells */
.tt-table tbody tr { transition: background var(--ac-dur) var(--ac-ease); }

.tt-table tbody tr:nth-child(even):not(.tt-break) {
    background: rgba(26,35,126,0.02);
}

.tt-table tbody tr:not(.tt-break):hover {
    background: var(--ac-navy-light) !important;
}

.tt-table tbody td {
    padding:        11px 14px;
    border-bottom:  1px solid var(--ac-border);
    border-right:   1px solid var(--ac-border);
    vertical-align: middle;
}

.tt-table tbody td:last-child { border-right: none; }

/* Period & time cells */
.tt-period {
    font-weight:  700;
    color:        var(--ac-navy);
    text-align:   center;
    font-size:    0.82rem;
    background:   var(--ac-navy-light);
    border-right: 2px solid rgba(26,35,126,0.15) !important;
}

.tt-time {
    font-size:    0.78rem;
    color:        var(--ac-muted);
    font-weight:  600;
    white-space:  nowrap;
    background:   var(--ac-gray);
}

/* Break rows */
.tt-break { background: var(--ac-gold-light) !important; }
.tt-break-label {
    font-family:  var(--ac-font);
    font-size:    0.82rem;
    font-weight:  600;
    color:        var(--ac-gold-dark);
    text-align:   center;
    padding:      10px !important;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--ac-border) !important;
}
.tt-break-label i { margin-right: 6px; }

.tt-break-lunch { background: rgba(26,35,126,0.06) !important; }
.tt-break-lunch .tt-break-label { color: var(--ac-navy); }

/* Subject pills */
.tt-subj {
    display:        inline-block;
    font-family:    var(--ac-font);
    font-size:      0.78rem;
    font-weight:    600;
    padding:        4px 10px;
    border-radius:  20px;
    white-space:    nowrap;
}

/* Subject colour coding */
.tt-eng   { background: #e3f2fd; color: #1565c0; }
.tt-math  { background: #e8f5e9; color: #2e7d32; }
.tt-arab  { background: #fce4ec; color: #880e4f; }
.tt-bio   { background: #e0f7fa; color: #006064; }
.tt-chem  { background: #fff3e0; color: #e65100; }
.tt-phys  { background: #f3e5f5; color: #6a1b9a; }
.tt-hist  { background: #fbe9e7; color: #bf360c; }
.tt-geo   { background: #e8eaf6; color: #283593; }
.tt-cre   { background: #fff8e1; color: #f57f17; }
.tt-agri  { background: #f1f8e9; color: #33691e; }
.tt-ict   { background: #e0f2f1; color: #004d40; }
.tt-pe    { background: #fce4ec; color: #ad1457; }

/* Placeholder for empty panes */
.tt-placeholder {
    text-align:  center;
    padding:     60px 20px;
    border:      2px dashed var(--ac-border);
    border-radius: var(--ac-radius);
    background:  var(--ac-gray);
}

.tt-placeholder i {
    font-size:     2.5rem;
    color:         var(--ac-border);
    margin-bottom: 14px;
    display:       block;
}

.tt-placeholder p {
    font-family: var(--ac-font);
    font-size:   0.92rem;
    color:       var(--ac-muted);
    margin:      0;
}

/* =============================================================
   EXAM CALLOUT BANNER
============================================================= */
.acad-exam-banner {
    background:  linear-gradient(135deg, var(--ac-navy-dark) 0%, var(--ac-navy) 100%);
    padding:     0;
    overflow:    hidden;
    position:    relative;
}

.acad-exam-banner::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -55deg,
        transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px,
        rgba(200,169,81,0.05) 80px
    );
    pointer-events: none;
}

.acad-exam-inner {
    display:      flex;
    align-items:  stretch;
    position:     relative;
    z-index:      1;
    min-height:   400px;
}

.acad-exam-img-col {
    flex:          0 0 45%;
    position:      relative;
    overflow:      hidden;
}

.acad-exam-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    min-height: 380px;
    transition: transform 0.5s var(--ac-ease);
}

.acad-exam-img-col::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to right, transparent 70%, rgba(13,18,87,0.9) 100%);
}

.acad-exam-img-col:hover .acad-exam-img { transform: scale(1.04); }

.acad-exam-content {
    flex:       1;
    padding:    56px 48px 56px 40px;
    display:    flex;
    flex-direction: column;
    justify-content: center;
}

.exam-eyebrow {
    font-family:    var(--ac-font);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--ac-gold);
    margin-bottom:  12px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.exam-title {
    font-family:   var(--ac-font);
    font-size:     clamp(1.4rem, 3vw, 2rem);
    font-weight:   800;
    color:         var(--ac-white);
    margin-bottom: 16px;
    line-height:   1.2;
}

.acad-exam-content > p {
    font-family:   var(--ac-font);
    font-size:     0.92rem;
    color:         rgba(255,255,255,0.8);
    line-height:   1.8;
    margin-bottom: 22px;
}

.exam-points {
    list-style:    none;
    padding:       0;
    margin:        0 0 28px 0;
    display:       flex;
    flex-direction: column;
    gap:           10px;
}

.exam-points li {
    font-family:  var(--ac-font);
    font-size:    0.88rem;
    color:        rgba(255,255,255,0.85);
    display:      flex;
    align-items:  center;
    gap:          10px;
}

.exam-points li i {
    font-size:  0.8rem;
    color:      var(--ac-gold);
    flex-shrink: 0;
}

.btn-acad-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ac-font);
    font-size:       0.88rem;
    font-weight:     700;
    color:           var(--ac-navy);
    background:      var(--ac-gold);
    border:          none;
    border-radius:   8px;
    padding:         13px 28px;
    text-decoration: none;
    align-self:      flex-start;
    transition:
        transform    var(--ac-dur) var(--ac-ease),
        box-shadow   var(--ac-dur) var(--ac-ease),
        background   var(--ac-dur) var(--ac-ease);
}

.btn-acad-primary:hover {
    background:  var(--ac-gold-dark);
    color:       var(--ac-white);
    transform:   translateY(-2px);
    box-shadow:  0 8px 20px rgba(200,169,81,0.4);
    text-decoration: none;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991px) {
    .content-inner    { padding: 54px 0; }
    .acad-strip-item  { padding: 18px 28px; }

    .acad-exam-inner      { flex-direction: column; }
    .acad-exam-img-col    { flex: none; max-height: 260px; }
    .acad-exam-img-col::after { background: linear-gradient(to bottom, transparent 60%, rgba(13,18,87,0.9)); }
    .acad-exam-img        { min-height: 260px; }
    .acad-exam-content    { padding: 36px 28px; }
}

@media (max-width: 767px) {
    .content-inner    { padding: 40px 0; }
    .dlab-bnr-inr     { min-height: 240px; padding: 44px 0; }

    .acad-strip-inner { flex-direction: column; }
    .acad-strip-item  { padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .acad-strip-divider { display: none; }

    .acad-img-banner,
    .acad-hero-img     { max-height: 200px; height: 200px; }

    .subj-main-img     { height: 260px; }
    .subj-img-badge    { bottom: -14px; right: 12px; }

    .tt-tabs           { gap: 4px; }
    .tt-tab            { padding: 10px 16px; font-size: 0.82rem; }

    .tt-info-strip     { flex-direction: column; }
    .tt-info-item      { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }

    .acad-cta-bar      { flex-direction: column; text-align: center; }
    .acad-cta-text     { justify-content: center; }

    .acad-exam-content { padding: 28px 20px; }
}

@media (max-width: 480px) {
    .dlab-bnr-inr    { min-height: 200px; }
    .tt-table        { font-size: 0.75rem; }
    .tt-table thead th,
    .tt-table tbody td { padding: 8px 8px; }
    .tt-subj         { font-size: 0.72rem; padding: 3px 7px; }
    .tt-th-time,
    .tt-time         { display: none; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — Admissions Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ---------------------------
   Variables
--------------------------- */
:root {
    --ad-navy:       #1a237e;
    --ad-navy-dark:  #0d1257;
    --ad-navy-light: #e8eaf6;
    --ad-gold:       #c8a951;
    --ad-gold-dark:  #a8893a;
    --ad-gold-light: #f5edce;
    --ad-white:      #ffffff;
    --ad-gray:       #f5f6fa;
    --ad-text:       #3a3a4a;
    --ad-muted:      #6b7280;
    --ad-border:     #e4e6ef;
    --ad-green:      #1e7e50;
    --ad-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ad-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --ad-dur:        0.28s;
    --ad-radius:     10px;
    --ad-radius-lg:  16px;
}

/* =============================================================
   PAGE BANNER
============================================================= */
.dlab-bnr-inr {
    position:            relative;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    min-height:          340px;
    display:             flex;
    align-items:         center;
    padding:             60px 0;
}

.dlab-bnr-inr.overlay-black-middle::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85) 0%, rgba(26,35,126,0.65) 100%);
}

.dlab-bnr-inr::after {
    content:    '';
    position:   absolute;
    bottom:     0; left: 0; right: 0;
    height:     4px;
    background: linear-gradient(90deg, var(--ad-gold-dark), var(--ad-gold), var(--ad-gold-dark));
}

.dlab-bnr-inr .container { position: relative; z-index: 1; }

.dlab-bnr-inr-entry h1 {
    font-family:    var(--ad-font);
    font-size:      clamp(2rem, 5vw, 3rem);
    font-weight:    800;
    color:          var(--ad-white);
    letter-spacing: -0.5px;
    margin-bottom:  8px;
    text-shadow:    0 2px 20px rgba(0,0,0,0.3);
}

.banner-sub {
    font-family:    var(--ad-font);
    font-size:      0.9rem;
    font-weight:    500;
    color:          var(--ad-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom:  14px;
    display:        block;
}

.breadcrumb-row ul.list-inline {
    list-style:      none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             6px;
    margin: 0; padding: 0;
}

.breadcrumb-row ul.list-inline li {
    font-family:  var(--ad-font);
    font-size:    0.85rem;
    font-weight:  500;
    color:        rgba(255,255,255,0.7);
    padding:      0;
    display:      flex;
    align-items:  center;
    gap:          6px;
}

.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--ad-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }

.breadcrumb-row ul.list-inline li a {
    color:           var(--ad-gold);
    text-decoration: none;
    font-weight:     600;
    transition:      color var(--ad-dur) var(--ad-ease);
}
.breadcrumb-row ul.list-inline li a:hover { color: var(--ad-white); }

/* =============================================================
   WELCOME STRIP
============================================================= */
.adm-strip {
    background: linear-gradient(135deg, var(--ad-navy-dark), var(--ad-navy));
    position:   relative;
    overflow:   hidden;
}

.adm-strip::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -55deg,
        transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px,
        rgba(200,169,81,0.05) 80px
    );
    pointer-events: none;
}

.adm-strip-inner {
    display:        flex;
    align-items:    stretch;
    flex-wrap:      wrap;
    position:       relative;
    z-index:        1;
}

.adm-strip-item {
    display:     flex;
    align-items: center;
    gap:         14px;
    padding:     20px 32px;
    flex:        1;
    min-width:   220px;
    transition:  background var(--ad-dur) var(--ad-ease);
}

.adm-strip-item:hover { background: rgba(200,169,81,0.1); }

.adm-strip-item > i {
    font-size:  1.4rem;
    color:      var(--ad-gold);
    flex-shrink: 0;
}

.adm-strip-item > div {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.adm-strip-item strong {
    font-family: var(--ad-font);
    font-size:   0.82rem;
    font-weight: 700;
    color:       var(--ad-white);
    letter-spacing: 0.3px;
}

.adm-strip-item span {
    font-family: var(--ad-font);
    font-size:   0.78rem;
    color:       rgba(255,255,255,0.65);
}

.adm-strip-divider {
    width:      1px;
    background: rgba(255,255,255,0.12);
    margin:     12px 0;
}

/* =============================================================
   SHARED
============================================================= */
.section-full    { width: 100%; }
.content-inner   { padding: 72px 0; }
.bg-gray         { background-color: var(--ad-gray)  !important; }
.bg-white        { background-color: var(--ad-white) !important; }
.m-b30           { margin-bottom: 30px !important; }
.m-b40           { margin-bottom: 40px !important; }
.m-b50           { margin-bottom: 50px !important; }
.m-auto          { margin-left: auto !important; margin-right: auto !important; }

.section-head { margin-bottom: 48px; }

.section-head .title,
.section-head h2.title {
    font-family:    var(--ad-font);
    font-size:      clamp(1.5rem, 3vw, 2rem);
    font-weight:    800;
    color:          var(--ad-navy);
    letter-spacing: -0.4px;
    margin-bottom:  12px;
    display:        inline-block;
}

.section-head.text-center .title::after {
    content:       '';
    display:       block;
    width:         52px;
    height:        3px;
    background:    linear-gradient(90deg, var(--ad-gold), var(--ad-gold-dark));
    border-radius: 2px;
    margin:        10px auto 0;
}

.section-head p {
    font-family: var(--ad-font);
    font-size:   0.95rem;
    color:       var(--ad-muted);
    max-width:   560px;
    margin:      0 auto;
    line-height: 1.7;
}

/* =============================================================
   SHARED BUTTONS
============================================================= */
.btn-adm-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ad-font);
    font-size:       0.88rem;
    font-weight:     700;
    color:           var(--ad-white);
    background:      linear-gradient(135deg, var(--ad-navy-dark), var(--ad-navy));
    border:          none;
    border-radius:   8px;
    padding:         13px 24px;
    text-decoration: none;
    white-space:     nowrap;
    transition:
        transform    var(--ad-dur) var(--ad-ease),
        box-shadow   var(--ad-dur) var(--ad-ease),
        background   var(--ad-dur) var(--ad-ease);
}

.btn-adm-primary:hover {
    background:      linear-gradient(135deg, var(--ad-gold-dark), var(--ad-gold));
    color:           var(--ad-navy-dark);
    transform:       translateY(-2px);
    box-shadow:      0 8px 20px rgba(200,169,81,0.35);
    text-decoration: none;
}

.btn-adm-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ad-font);
    font-size:       0.88rem;
    font-weight:     600;
    color:           var(--ad-navy);
    background:      transparent;
    border:          2px solid var(--ad-navy);
    border-radius:   8px;
    padding:         11px 22px;
    text-decoration: none;
    white-space:     nowrap;
    transition:
        background   var(--ad-dur) var(--ad-ease),
        color        var(--ad-dur) var(--ad-ease),
        border-color var(--ad-dur) var(--ad-ease),
        transform    var(--ad-dur) var(--ad-ease);
}

.btn-adm-outline:hover {
    background:      var(--ad-navy);
    color:           var(--ad-white);
    transform:       translateY(-2px);
    text-decoration: none;
}

/* =============================================================
   HOW TO APPLY — Steps
============================================================= */
.adm-steps {
    display:        flex;
    flex-direction: column;
    gap:            0;
    position:       relative;
}

/* Vertical connector line */
.adm-steps::before {
    content:    '';
    position:   absolute;
    top:        28px;
    bottom:     28px;
    left:       22px;
    width:      2px;
    background: linear-gradient(180deg, var(--ad-navy), var(--ad-gold));
    border-radius: 2px;
}

.adm-step {
    display:     flex;
    align-items: flex-start;
    gap:         20px;
    padding:     0 0 28px 0;
    position:    relative;
}

.adm-step:last-child { padding-bottom: 0; }

.adm-step-num {
    width:           46px;
    height:          46px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--ad-navy-dark), var(--ad-navy));
    color:           var(--ad-white);
    font-family:     var(--ad-font);
    font-size:       1rem;
    font-weight:     800;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    border:          3px solid var(--ad-white);
    box-shadow:      0 0 0 2px var(--ad-navy);
    position:        relative;
    z-index:         1;
    transition:
        background var(--ad-dur) var(--ad-ease),
        box-shadow var(--ad-dur) var(--ad-ease),
        transform  var(--ad-dur) var(--ad-ease);
}

.adm-step:hover .adm-step-num {
    background: linear-gradient(135deg, var(--ad-gold-dark), var(--ad-gold));
    box-shadow: 0 0 0 2px var(--ad-gold-dark);
    transform:  scale(1.1);
}

.adm-step-body {
    background:    var(--ad-white);
    border:        1px solid var(--ad-border);
    border-radius: var(--ad-radius);
    padding:       18px 20px;
    flex:          1;
    box-shadow:    0 2px 10px rgba(26,35,126,0.06);
    transition:
        box-shadow   var(--ad-dur) var(--ad-ease),
        border-color var(--ad-dur) var(--ad-ease),
        transform    var(--ad-dur) var(--ad-ease);
}

.adm-step:hover .adm-step-body {
    box-shadow:   0 8px 28px rgba(26,35,126,0.12);
    border-color: var(--ad-gold);
    transform:    translateX(4px);
}

.adm-step-body h5 {
    font-family:   var(--ad-font);
    font-size:     0.95rem;
    font-weight:   700;
    color:         var(--ad-navy);
    margin-bottom: 8px;
}

.adm-step-body p {
    font-family: var(--ad-font);
    font-size:   0.87rem;
    color:       var(--ad-text);
    line-height: 1.75;
    margin:      0;
}

/* =============================================================
   APPLY NOW CARD
============================================================= */
.adm-apply-card {
    background:    var(--ad-white);
    border:        1px solid var(--ad-border);
    border-radius: var(--ad-radius-lg);
    overflow:      hidden;
    box-shadow:    0 6px 32px rgba(26,35,126,0.12);
    height:        100%;
}

.adm-apply-card-top {
    background: linear-gradient(135deg, var(--ad-navy-dark), var(--ad-navy));
    padding:    32px 28px 28px;
    position:   relative;
    overflow:   hidden;
    text-align: center;
}

.adm-apply-card-top::before {
    content:       '';
    position:      absolute;
    top: -24px; right: -24px;
    width:         90px; height: 90px;
    border-radius: 50%;
    background:    rgba(255,255,255,0.06);
}

.adm-apply-card-top i {
    font-size:     2.2rem;
    color:         var(--ad-gold);
    margin-bottom: 12px;
    display:       block;
}

.adm-apply-card-top h4 {
    font-family:   var(--ad-font);
    font-size:     1.2rem;
    font-weight:   800;
    color:         var(--ad-white);
    margin-bottom: 10px;
}

.adm-apply-card-top p {
    font-family: var(--ad-font);
    font-size:   0.85rem;
    color:       rgba(255,255,255,0.75);
    line-height: 1.65;
    margin:      0;
}

.adm-apply-card-actions {
    padding:        24px 24px 0;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.adm-apply-card-actions .btn-adm-primary,
.adm-apply-card-actions .btn-adm-outline {
    justify-content: center;
    width: 100%;
}

.adm-apply-checklist {
    list-style: none;
    padding:    20px 24px 24px;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        8px;
    border-top: 1px solid var(--ad-border);
    margin-top: 20px;
}

.adm-apply-checklist li {
    font-family:  var(--ad-font);
    font-size:    0.82rem;
    color:        var(--ad-muted);
    display:      flex;
    align-items:  center;
    gap:          8px;
}

.adm-apply-checklist li i {
    color:       var(--ad-green);
    font-size:   0.78rem;
    flex-shrink: 0;
}

/* =============================================================
   REQUIRED DOCUMENTS BAR
============================================================= */
.adm-docs-bar {
    display:      flex;
    align-items:  flex-start;
    gap:          20px;
    background:   var(--ad-navy-light);
    border:       1px solid rgba(26,35,126,0.15);
    border-radius: var(--ad-radius);
    padding:      20px 24px;
    flex-wrap:    wrap;
}

.adm-docs-label {
    display:      flex;
    align-items:  center;
    gap:          8px;
    font-family:  var(--ad-font);
    font-size:    0.88rem;
    font-weight:  700;
    color:        var(--ad-navy);
    white-space:  nowrap;
    padding-top:  4px;
}

.adm-docs-label i { color: var(--ad-gold-dark); }

.adm-docs-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.adm-doc-tag {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-family:    var(--ad-font);
    font-size:      0.8rem;
    font-weight:    600;
    color:          var(--ad-navy);
    background:     var(--ad-white);
    border:         1px solid var(--ad-border);
    border-radius:  20px;
    padding:        5px 12px;
    transition:
        border-color var(--ad-dur) var(--ad-ease),
        box-shadow   var(--ad-dur) var(--ad-ease);
}

.adm-doc-tag i { color: var(--ad-gold-dark); font-size: 0.75rem; }

.adm-doc-tag:hover {
    border-color: var(--ad-navy);
    box-shadow:   0 2px 8px rgba(26,35,126,0.1);
}

/* =============================================================
   FEE STRUCTURE — Image
============================================================= */
.adm-fees-img-wrap {
    position:      relative;
    border-radius: var(--ad-radius-lg);
    overflow:      hidden;
    max-height:    280px;
    box-shadow:    0 6px 28px rgba(26,35,126,0.13);
}

.adm-fees-img {
    width:      100%;
    height:     280px;
    object-fit: cover;
    display:    block;
    transition: transform 0.5s var(--ad-ease);
}

.adm-fees-img-wrap:hover .adm-fees-img { transform: scale(1.03); }

.adm-fees-img-caption {
    position:    absolute;
    bottom:      0; left: 0; right: 0;
    background:  linear-gradient(to top, rgba(13,18,87,0.82), transparent);
    padding:     24px 24px 16px;
    font-family: var(--ad-font);
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--ad-white);
    display:     flex;
    align-items: center;
    gap:         8px;
}

.adm-fees-img-caption i { color: var(--ad-gold); }

/* =============================================================
   FEE TABLES
============================================================= */
.adm-fee-section-title {
    font-family:   var(--ad-font);
    font-size:     1rem;
    font-weight:   700;
    color:         var(--ad-navy);
    margin-bottom: 16px;
    display:       flex;
    align-items:   center;
    gap:           10px;
}

.adm-fee-section-title i {
    font-size:       1rem;
    color:           var(--ad-gold-dark);
    width:           34px;
    height:          34px;
    border-radius:   8px;
    background:      var(--ad-gold-light);
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
}

.table-responsive {
    border-radius: var(--ad-radius);
    overflow:      hidden;
    box-shadow:    0 4px 24px rgba(26,35,126,0.09);
    border:        1px solid var(--ad-border);
}

.adm-fee-table {
    font-family:     var(--ad-font);
    font-size:       0.88rem;
    width:           100%;
    border-collapse: collapse;
    margin:          0;
    background:      var(--ad-white);
}

.adm-fee-table thead tr {
    background: linear-gradient(135deg, var(--ad-navy-dark), var(--ad-navy));
}

.adm-fee-table thead th {
    font-family:    var(--ad-font);
    font-size:      0.78rem;
    font-weight:    700;
    color:          var(--ad-white) !important;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding:        14px 16px;
    border:         none;
    white-space:    nowrap;
}

.adm-fee-table tbody tr {
    transition: background var(--ad-dur) var(--ad-ease);
}

.adm-fee-table tbody tr:nth-child(even) {
    background: rgba(26,35,126,0.025);
}

.adm-fee-table tbody tr:hover:not(.fee-total-row) {
    background: var(--ad-gold-light) !important;
}

.adm-fee-table tbody td {
    padding:        12px 16px;
    border-bottom:  1px solid var(--ad-border);
    color:          var(--ad-text);
    vertical-align: middle;
}

.adm-fee-table tbody tr:last-child td { border-bottom: none; }

.fee-item-name {
    font-weight: 600;
    color:       var(--ad-navy);
}

/* Total row */
.fee-total-row td {
    background:  var(--ad-navy-light) !important;
    color:       var(--ad-navy) !important;
    font-weight: 700 !important;
    border-top:  2px solid var(--ad-navy) !important;
}

.fee-total-row:hover td {
    background: var(--ad-gold-light) !important;
}

/* Frequency badges */
.fee-freq {
    display:        inline-block;
    font-family:    var(--ad-font);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.4px;
    border-radius:  20px;
    padding:        3px 9px;
    white-space:    nowrap;
}

.fee-freq--term   { background: #e8eaf6; color: var(--ad-navy); }
.fee-freq--annual { background: #fff3e0; color: #e65100; }
.fee-freq--once   { background: #e8f5e9; color: #2e7d32; }

/* Fee notes */
.adm-fee-notes {
    background:    var(--ad-navy-light);
    border-left:   4px solid var(--ad-gold);
    border-radius: 0 var(--ad-radius) var(--ad-radius) 0;
    padding:       20px 24px;
    margin-top:    8px;
}

.fee-notes-title {
    font-family:   var(--ad-font);
    font-size:     0.88rem;
    font-weight:   700;
    color:         var(--ad-navy);
    margin-bottom: 12px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

.fee-notes-title i { color: var(--ad-gold-dark); }

.adm-fee-notes ul {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.adm-fee-notes ul li {
    font-family:  var(--ad-font);
    font-size:    0.84rem;
    color:        var(--ad-text);
    line-height:  1.65;
    padding-left: 14px;
    position:     relative;
}

.adm-fee-notes ul li::before {
    content:    '·';
    position:   absolute;
    left:       0;
    color:      var(--ad-gold-dark);
    font-weight: 900;
}

/* =============================================================
   PROSPECTUS
============================================================= */
.adm-prospectus-img-wrap {
    position: relative;
    display:  inline-block;
    width:    100%;
}

.adm-prospectus-cover {
    width:         100%;
    max-height:    420px;
    object-fit:    cover;
    border-radius: var(--ad-radius-lg);
    box-shadow:    0 12px 40px rgba(26,35,126,0.18);
    display:       block;
    transition:    transform 0.45s var(--ad-ease);
}

.adm-prospectus-img-wrap:hover .adm-prospectus-cover { transform: scale(1.02); }

.adm-prospectus-badge {
    position:        absolute;
    top:             20px;
    right:           -14px;
    background:      linear-gradient(135deg, var(--ad-gold-dark), var(--ad-gold));
    border:          3px solid var(--ad-white);
    border-radius:   12px;
    padding:         14px 16px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             4px;
    box-shadow:      0 6px 20px rgba(200,169,81,0.4);
    text-align:      center;
    min-width:       76px;
}

.adm-prospectus-badge i {
    font-size:  1.4rem;
    color:      var(--ad-navy-dark);
    margin-bottom: 4px;
}

.adm-prospectus-badge span {
    font-family:  var(--ad-font);
    font-size:    0.72rem;
    font-weight:  700;
    color:        var(--ad-navy-dark);
    line-height:  1.3;
}

.adm-prospectus-title {
    font-family:   var(--ad-font);
    font-size:     clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight:   800;
    color:         var(--ad-navy);
    margin-bottom: 16px;
    line-height:   1.3;
}

.adm-prospectus-text {
    font-family:   var(--ad-font);
    font-size:     0.92rem;
    color:         var(--ad-text);
    line-height:   1.8;
    margin-bottom: 14px;
}

.adm-prospectus-contents {
    margin-bottom: 24px;
}

.contents-label {
    font-family:   var(--ad-font);
    font-size:     0.82rem;
    font-weight:   700;
    color:         var(--ad-muted);
    display:       block;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contents-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.contents-tags span {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-family:    var(--ad-font);
    font-size:      0.8rem;
    font-weight:    500;
    color:          var(--ad-navy);
    background:     var(--ad-navy-light);
    border-radius:  20px;
    padding:        4px 12px;
}

.contents-tags span i { color: var(--ad-green); font-size: 0.75rem; }

.adm-prospectus-actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
    margin-top: 4px;
}

/* =============================================================
   ENTRY REQUIREMENTS
============================================================= */
.adm-req-card {
    border:        1px solid var(--ad-border);
    border-radius: var(--ad-radius-lg);
    background:    var(--ad-white);
    overflow:      hidden;
    height:        100%;
    box-shadow:    0 2px 12px rgba(26,35,126,0.07);
    transition:
        transform  var(--ad-dur) var(--ad-ease),
        box-shadow var(--ad-dur) var(--ad-ease);
}

.adm-req-card:hover {
    transform:  translateY(-6px);
    box-shadow: 0 16px 40px rgba(26,35,126,0.14);
}

.adm-req-card-header {
    background:  linear-gradient(135deg, var(--ad-navy-dark), var(--ad-navy));
    padding:     24px 20px 20px;
    text-align:  center;
    position:    relative;
    overflow:    hidden;
}

.adm-req-card-header::before {
    content:    '';
    position:   absolute;
    top: -20px; right: -20px;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
}

.req-form-badge {
    display:        inline-block;
    font-family:    var(--ad-font);
    font-size:      1.4rem;
    font-weight:    800;
    color:          var(--ad-navy-dark);
    background:     var(--ad-gold);
    width:          52px; height: 52px;
    border-radius:  50%;
    line-height:    52px;
    text-align:     center;
    margin-bottom:  12px;
    box-shadow:     0 4px 12px rgba(200,169,81,0.4);
}

.req-form-badge--gold {
    background: var(--ad-white);
    color:      var(--ad-navy-dark);
}

.adm-req-card-header h5 {
    font-family:   var(--ad-font);
    font-size:     0.95rem;
    font-weight:   700;
    color:         var(--ad-white);
    margin-bottom: 4px;
}

.req-year {
    font-family: var(--ad-font);
    font-size:   0.78rem;
    color:       rgba(255,255,255,0.6);
}

.adm-req-list {
    list-style:     none;
    padding:        20px;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.adm-req-list li {
    font-family:  var(--ad-font);
    font-size:    0.86rem;
    color:        var(--ad-text);
    display:      flex;
    align-items:  flex-start;
    gap:          10px;
    line-height:  1.5;
}

.adm-req-list li i {
    color:       var(--ad-green);
    font-size:   0.78rem;
    flex-shrink: 0;
    margin-top:  3px;
}

/* =============================================================
   CTA SECTION
============================================================= */
.adm-cta-section {
    background: linear-gradient(135deg, var(--ad-navy-dark) 0%, var(--ad-navy) 100%);
    padding:    0;
    overflow:   hidden;
    position:   relative;
}

.adm-cta-section::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -55deg,
        transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px,
        rgba(200,169,81,0.05) 80px
    );
    pointer-events: none;
}

.adm-cta-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             40px;
    padding:         64px 0;
    position:        relative;
    z-index:         1;
    flex-wrap:       wrap;
}

.adm-cta-text-col { flex: 1; min-width: 280px; }

.cta-eyebrow {
    font-family:    var(--ad-font);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--ad-gold);
    margin-bottom:  12px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.cta-title {
    font-family:   var(--ad-font);
    font-size:     clamp(1.4rem, 3vw, 2rem);
    font-weight:   800;
    color:         var(--ad-white);
    margin-bottom: 16px;
    line-height:   1.2;
}

.adm-cta-text-col > p {
    font-family:   var(--ad-font);
    font-size:     0.92rem;
    color:         rgba(255,255,255,0.78);
    line-height:   1.8;
    margin-bottom: 20px;
    max-width:     520px;
}

.cta-points {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.cta-points li {
    font-family:  var(--ad-font);
    font-size:    0.88rem;
    color:        rgba(255,255,255,0.85);
    display:      flex;
    align-items:  center;
    gap:          10px;
}

.cta-points li i { color: var(--ad-gold); font-size: 0.8rem; }

/* CTA action card */
.adm-cta-action-col { flex-shrink: 0; }

.adm-cta-card {
    background:    rgba(255,255,255,0.08);
    border:        1px solid rgba(255,255,255,0.15);
    border-radius: var(--ad-radius-lg);
    padding:       32px 28px;
    text-align:    center;
    min-width:     260px;
    backdrop-filter: blur(8px);
}

.cta-card-label {
    font-family:   var(--ad-font);
    font-size:     0.78rem;
    font-weight:   600;
    color:         rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.cta-card-date {
    font-family:   var(--ad-font);
    font-size:     1.25rem;
    font-weight:   800;
    color:         var(--ad-gold);
    margin-bottom: 22px;
}

.btn-adm-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-family:     var(--ad-font);
    font-size:       0.9rem;
    font-weight:     700;
    color:           var(--ad-navy-dark);
    background:      var(--ad-gold);
    border:          none;
    border-radius:   8px;
    padding:         14px 24px;
    text-decoration: none;
    margin-bottom:   10px;
    transition:
        transform    var(--ad-dur) var(--ad-ease),
        box-shadow   var(--ad-dur) var(--ad-ease),
        background   var(--ad-dur) var(--ad-ease);
}

.btn-adm-cta:hover {
    background:      var(--ad-white);
    color:           var(--ad-navy-dark);
    transform:       translateY(-2px);
    box-shadow:      0 8px 20px rgba(200,169,81,0.4);
    text-decoration: none;
}

.btn-adm-cta-ghost {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-family:     var(--ad-font);
    font-size:       0.85rem;
    font-weight:     600;
    color:           rgba(255,255,255,0.75);
    background:      transparent;
    border:          1px solid rgba(255,255,255,0.25);
    border-radius:   8px;
    padding:         12px 24px;
    text-decoration: none;
    transition:
        background   var(--ad-dur) var(--ad-ease),
        color        var(--ad-dur) var(--ad-ease),
        border-color var(--ad-dur) var(--ad-ease);
}

.btn-adm-cta-ghost:hover {
    background:      rgba(255,255,255,0.12);
    color:           var(--ad-white);
    border-color:    rgba(255,255,255,0.5);
    text-decoration: none;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991px) {
    .content-inner      { padding: 54px 0; }
    .adm-strip-item     { padding: 16px 20px; min-width: 180px; }
    .adm-cta-inner      { gap: 28px; }
    .adm-prospectus-badge { right: 4px; }
}

@media (max-width: 767px) {
    .content-inner  { padding: 40px 0; }
    .dlab-bnr-inr   { min-height: 240px; padding: 44px 0; }

    .adm-strip-inner    { flex-direction: column; }
    .adm-strip-item     { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .adm-strip-divider  { display: none; }

    .adm-cta-inner      { flex-direction: column; }
    .adm-cta-card       { width: 100%; }

    .adm-docs-bar       { flex-direction: column; }

    .adm-prospectus-actions { flex-direction: column; }
    .btn-adm-primary,
    .btn-adm-outline    { justify-content: center; }
}

@media (max-width: 480px) {
    .dlab-bnr-inr   { min-height: 200px; }
    .adm-steps::before { left: 18px; }
    .adm-step-num   { width: 38px; height: 38px; font-size: 0.9rem; }
    .adm-fee-table  { font-size: 0.8rem; }
    .adm-fee-table thead th,
    .adm-fee-table tbody td { padding: 10px 10px; }
}

/* =============================================================
   PANEKAR SECONDARY SCHOOL — Application Form Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --af-navy:       #1a237e;
    --af-navy-dark:  #0d1257;
    --af-navy-light: #e8eaf6;
    --af-gold:       #c8a951;
    --af-gold-dark:  #a8893a;
    --af-gold-light: #f5edce;
    --af-white:      #ffffff;
    --af-gray:       #f5f6fa;
    --af-text:       #3a3a4a;
    --af-muted:      #6b7280;
    --af-border:     #e4e6ef;
    --af-error:      #c62828;
    --af-green:      #1e7e50;
    --af-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --af-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --af-dur:        0.22s;
    --af-radius:     10px;
    --af-radius-lg:  16px;
}

/* =============================================================
   PAGE BANNER
============================================================= */
.dlab-bnr-inr {
    position:            relative;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    min-height:          300px;
    display:             flex;
    align-items:         center;
    padding:             56px 0;
}

.dlab-bnr-inr.overlay-black-middle::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85) 0%, rgba(26,35,126,0.65) 100%);
}

.dlab-bnr-inr::after {
    content:    '';
    position:   absolute;
    bottom: 0; left: 0; right: 0;
    height:     4px;
    background: linear-gradient(90deg, var(--af-gold-dark), var(--af-gold), var(--af-gold-dark));
}

.dlab-bnr-inr .container { position: relative; z-index: 1; }

.dlab-bnr-inr-entry h1 {
    font-family:    var(--af-font);
    font-size:      clamp(1.8rem, 4vw, 2.6rem);
    font-weight:    800;
    color:          var(--af-white);
    letter-spacing: -0.5px;
    margin-bottom:  8px;
    text-shadow:    0 2px 20px rgba(0,0,0,0.3);
}

.banner-sub {
    font-family:    var(--af-font);
    font-size:      0.85rem;
    font-weight:    500;
    color:          var(--af-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom:  14px;
    display:        block;
}

.breadcrumb-row ul.list-inline {
    list-style:      none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             6px;
    margin: 0; padding: 0;
}

.breadcrumb-row ul.list-inline li {
    font-family: var(--af-font);
    font-size:   0.85rem;
    font-weight: 500;
    color:       rgba(255,255,255,0.7);
    padding:     0;
    display:     flex;
    align-items: center;
    gap:         6px;
}

.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--af-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }

.breadcrumb-row ul.list-inline li a {
    color:           var(--af-gold);
    text-decoration: none;
    font-weight:     600;
    transition:      color var(--af-dur) var(--af-ease);
}
.breadcrumb-row ul.list-inline li a:hover { color: var(--af-white); }

/* =============================================================
   LAYOUT
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 64px 0; }
.bg-gray       { background-color: var(--af-gray) !important; }
.m-auto        { margin-left: auto !important; margin-right: auto !important; }

/* =============================================================
   INSTRUCTIONS PANEL
============================================================= */
.af-instructions {
    display:       flex;
    align-items:   flex-start;
    gap:           16px;
    background:    var(--af-navy-light);
    border:        1px solid rgba(26,35,126,0.18);
    border-left:   4px solid var(--af-gold);
    border-radius: 0 var(--af-radius) var(--af-radius) 0;
    padding:       18px 22px;
    margin-bottom: 28px;
}

.af-instructions-icon {
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--af-gold-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.af-instructions-icon i {
    font-size: 1.1rem;
    color:     var(--af-gold-dark);
}

.af-instructions-text {
    font-family:  var(--af-font);
    font-size:    0.88rem;
    color:        var(--af-text);
    line-height:  1.7;
    padding-top:  8px;
}

.af-instructions-text strong { color: var(--af-navy); }

/* =============================================================
   FORM WRAPPER
============================================================= */
.af-form {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

/* =============================================================
   FORM SECTIONS
============================================================= */
.af-section {
    background:    var(--af-white);
    border:        1px solid var(--af-border);
    border-radius: var(--af-radius-lg);
    overflow:      hidden;
    box-shadow:    0 2px 16px rgba(26,35,126,0.07);
    transition:    box-shadow var(--af-dur) var(--af-ease);
}

.af-section:hover {
    box-shadow: 0 6px 28px rgba(26,35,126,0.11);
}

/* Section header bar */
.af-section-header {
    display:      flex;
    align-items:  center;
    gap:          18px;
    padding:      20px 28px;
    background:   linear-gradient(135deg, var(--af-navy-dark), var(--af-navy));
    position:     relative;
    overflow:     hidden;
}

.af-section-header::after {
    content:    '';
    position:   absolute;
    bottom:     0; left: 0; right: 0;
    height:     3px;
    background: linear-gradient(90deg, var(--af-gold), transparent);
}

/* Step number circle */
.af-section-num {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--af-gold);
    color:           var(--af-navy-dark);
    font-family:     var(--af-font);
    font-size:       1.1rem;
    font-weight:     800;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    box-shadow:      0 4px 12px rgba(200,169,81,0.4);
}

.af-section-title {
    font-family:   var(--af-font);
    font-size:     1rem;
    font-weight:   700;
    color:         var(--af-white);
    margin:        0 0 3px 0;
}

.af-section-sub {
    font-family: var(--af-font);
    font-size:   0.78rem;
    color:       rgba(255,255,255,0.6);
    margin:      0;
}

/* Section body */
.af-section-body {
    padding: 28px;
}

/* =============================================================
   FORM FIELDS
============================================================= */
.af-field-wrap {
    margin-bottom: 20px;
}

.af-label {
    font-family:   var(--af-font);
    font-size:     0.82rem;
    font-weight:   700;
    color:         var(--af-navy);
    display:       block;
    margin-bottom: 7px;
    letter-spacing: 0.2px;
}

.af-hint {
    font-weight:  400;
    color:        var(--af-muted);
    font-size:    0.78rem;
    margin-left:  4px;
}

.af-required-star {
    color:       var(--af-error);
    font-weight: 800;
    margin-left: 2px;
}

/* Text / date / number inputs */
.af-input {
    width:         100%;
    height:        46px;
    padding:       0 14px;
    font-family:   var(--af-font);
    font-size:     0.88rem;
    color:         var(--af-text);
    background:    var(--af-white);
    border:        1.5px solid var(--af-border);
    border-radius: 8px;
    outline:       none;
    transition:
        border-color var(--af-dur) var(--af-ease),
        box-shadow   var(--af-dur) var(--af-ease);
    -webkit-appearance: none;
}

.af-input::placeholder { color: var(--af-muted); opacity: 1; }

.af-input:focus {
    border-color: var(--af-navy);
    box-shadow:   0 0 0 3px rgba(26,35,126,0.1);
}

.af-input:hover:not(:focus) { border-color: #b0b8d0; }

/* Select */
.af-select {
    width:            100%;
    height:           46px;
    padding:          0 36px 0 14px;
    font-family:      var(--af-font);
    font-size:        0.88rem;
    color:            var(--af-text);
    background:       var(--af-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a237e' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    border:           1.5px solid var(--af-border);
    border-radius:    8px;
    outline:          none;
    -webkit-appearance: none;
    appearance:       none;
    cursor:           pointer;
    transition:
        border-color var(--af-dur) var(--af-ease),
        box-shadow   var(--af-dur) var(--af-ease);
}

.af-select:focus {
    border-color: var(--af-navy);
    box-shadow:   0 0 0 3px rgba(26,35,126,0.1);
}

.af-select:hover:not(:focus) { border-color: #b0b8d0; }

/* Textarea */
.af-textarea {
    width:         100%;
    padding:       12px 14px;
    font-family:   var(--af-font);
    font-size:     0.88rem;
    color:         var(--af-text);
    background:    var(--af-white);
    border:        1.5px solid var(--af-border);
    border-radius: 8px;
    outline:       none;
    resize:        vertical;
    min-height:    90px;
    transition:
        border-color var(--af-dur) var(--af-ease),
        box-shadow   var(--af-dur) var(--af-ease);
    line-height:   1.6;
}

.af-textarea::placeholder { color: var(--af-muted); opacity: 1; }

.af-textarea:focus {
    border-color: var(--af-navy);
    box-shadow:   0 0 0 3px rgba(26,35,126,0.1);
}

.af-textarea:hover:not(:focus) { border-color: #b0b8d0; }

/* =============================================================
   DOCUMENTS CHECKLIST
============================================================= */
.af-docs-note {
    font-family:   var(--af-font);
    font-size:     0.87rem;
    color:         var(--af-muted);
    margin-bottom: 20px;
    line-height:   1.65;
}

.af-checklist-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   14px;
}

/* =============================================================
   CUSTOM CHECKBOX ITEMS
============================================================= */
.af-checkbox-item {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    cursor:      pointer;
    padding:     14px 16px;
    border:      1.5px solid var(--af-border);
    border-radius: var(--af-radius);
    background:  var(--af-gray);
    transition:
        border-color var(--af-dur) var(--af-ease),
        background   var(--af-dur) var(--af-ease),
        box-shadow   var(--af-dur) var(--af-ease);
    user-select: none;
}

.af-checkbox-item:hover {
    border-color: var(--af-navy);
    background:   var(--af-navy-light);
}

/* Hide native checkbox */
.af-checkbox-item input[type="checkbox"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

/* Custom box */
.af-checkbox-box {
    width:         22px;
    height:        22px;
    border:        2px solid var(--af-border);
    border-radius: 5px;
    background:    var(--af-white);
    flex-shrink:   0;
    margin-top:    2px;
    position:      relative;
    transition:
        background   var(--af-dur) var(--af-ease),
        border-color var(--af-dur) var(--af-ease);
}

/* Checkmark (hidden by default) */
.af-checkbox-box::after {
    content:     '';
    position:    absolute;
    top:         3px;
    left:        6px;
    width:       6px;
    height:      11px;
    border:      2px solid var(--af-white);
    border-top:  none;
    border-left: none;
    transform:   rotate(45deg) scale(0);
    transition:  transform 0.15s var(--af-ease);
}

/* Checked state */
.af-checkbox-item input:checked ~ .af-checkbox-box {
    background:   var(--af-navy);
    border-color: var(--af-navy);
}

.af-checkbox-item input:checked ~ .af-checkbox-box::after {
    transform: rotate(45deg) scale(1);
}

.af-checkbox-item input:checked ~ .af-checkbox-label strong {
    color: var(--af-navy);
}

/* Whole card highlight on checked */
.af-checkbox-item:has(input:checked) {
    border-color: var(--af-navy);
    background:   var(--af-navy-light);
    box-shadow:   0 2px 10px rgba(26,35,126,0.1);
}

/* Label text */
.af-checkbox-label {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.af-checkbox-label strong {
    font-family:   var(--af-font);
    font-size:     0.86rem;
    font-weight:   700;
    color:         var(--af-text);
    transition:    color var(--af-dur) var(--af-ease);
}

.af-checkbox-label em {
    font-family:  var(--af-font);
    font-size:    0.78rem;
    color:        var(--af-muted);
    font-style:   normal;
    line-height:  1.4;
}

/* =============================================================
   DECLARATION BOX
============================================================= */
.af-declaration-box {
    background:    var(--af-navy-light);
    border:        1px solid rgba(26,35,126,0.15);
    border-left:   4px solid var(--af-gold);
    border-radius: 0 var(--af-radius) var(--af-radius) 0;
    padding:       20px 24px;
    margin-bottom: 20px;
}

.af-declaration-box p {
    font-family:   var(--af-font);
    font-size:     0.88rem;
    font-weight:   600;
    color:         var(--af-navy);
    margin-bottom: 12px;
}

.af-declaration-box ul {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.af-declaration-box ul li {
    font-family:  var(--af-font);
    font-size:    0.84rem;
    color:        var(--af-text);
    line-height:  1.65;
    padding-left: 16px;
    position:     relative;
}

.af-declaration-box ul li::before {
    content:    '·';
    position:   absolute;
    left:       0;
    color:      var(--af-gold-dark);
    font-weight: 900;
    font-size:  1.1rem;
    line-height: 1.3;
}

.af-declaration-check {
    margin-bottom: 20px;
    border-color:  var(--af-navy);
}

/* =============================================================
   SUBMIT BAR
============================================================= */
.af-submit-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    background:      var(--af-white);
    border:          1px solid var(--af-border);
    border-radius:   var(--af-radius-lg);
    padding:         24px 28px;
    flex-wrap:       wrap;
    box-shadow:      0 4px 20px rgba(26,35,126,0.1);
}

.af-submit-info {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    font-family: var(--af-font);
    font-size:   0.86rem;
    color:       var(--af-muted);
    line-height: 1.6;
    max-width:   500px;
}

.af-submit-info i {
    font-size:   1.1rem;
    color:       var(--af-gold-dark);
    flex-shrink: 0;
    margin-top:  1px;
}

.af-submit-actions {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
}

/* Back button */
.btn-af-outline {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--af-font);
    font-size:       0.86rem;
    font-weight:     600;
    color:           var(--af-navy);
    background:      transparent;
    border:          2px solid var(--af-border);
    border-radius:   8px;
    padding:         11px 20px;
    text-decoration: none;
    white-space:     nowrap;
    transition:
        border-color var(--af-dur) var(--af-ease),
        color        var(--af-dur) var(--af-ease),
        background   var(--af-dur) var(--af-ease);
}

.btn-af-outline:hover {
    border-color:    var(--af-navy);
    background:      var(--af-navy-light);
    text-decoration: none;
    color:           var(--af-navy);
}

/* Submit button */
.btn-af-submit {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--af-font);
    font-size:       0.9rem;
    font-weight:     700;
    color:           var(--af-white);
    background:      linear-gradient(135deg, var(--af-navy-dark), var(--af-navy));
    border:          none;
    border-radius:   8px;
    padding:         13px 28px;
    cursor:          pointer;
    white-space:     nowrap;
    transition:
        transform    var(--af-dur) var(--af-ease),
        box-shadow   var(--af-dur) var(--af-ease),
        background   var(--af-dur) var(--af-ease);
}

.btn-af-submit:hover {
    background:  linear-gradient(135deg, var(--af-gold-dark), var(--af-gold));
    color:       var(--af-navy-dark);
    transform:   translateY(-2px);
    box-shadow:  0 8px 20px rgba(200,169,81,0.4);
}

.btn-af-submit:active { transform: translateY(0); }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991px) {
    .content-inner { padding: 48px 0; }
    .af-section-body { padding: 22px 20px; }
    .af-section-header { padding: 18px 20px; }
}

@media (max-width: 767px) {
    .content-inner  { padding: 36px 0; }
    .dlab-bnr-inr   { min-height: 220px; padding: 40px 0; }

    .af-checklist-grid { grid-template-columns: 1fr; }

    .af-submit-bar {
        flex-direction: column;
        align-items:    flex-start;
    }
    .af-submit-actions { width: 100%; }
    .btn-af-outline,
    .btn-af-submit { flex: 1; justify-content: center; }
}

@media (max-width: 480px) {
    .dlab-bnr-inr   { min-height: 190px; }
    .af-section-num { width: 36px; height: 36px; font-size: 0.95rem; }
    .af-section-body { padding: 18px 14px; }
    .af-instructions { flex-direction: column; gap: 10px; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — Activities Hub Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --ac-navy:       #1a237e;
    --ac-navy-dark:  #0d1257;
    --ac-navy-light: #e8eaf6;
    --ac-gold:       #c8a951;
    --ac-gold-dark:  #a8893a;
    --ac-gold-light: #f5edce;
    --ac-green:      #1b5e20;
    --ac-green-light:#e8f5e9;
    --ac-purple:     #4a148c;
    --ac-purple-light:#ede7f6;
    --ac-white:      #ffffff;
    --ac-gray:       #f5f6fa;
    --ac-text:       #3a3a4a;
    --ac-muted:      #6b7280;
    --ac-border:     #e4e6ef;
    --ac-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ac-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --ac-dur:        0.28s;
    --ac-radius:     12px;
    --ac-radius-lg:  18px;
}

/* =============================================================
   PAGE BANNER
============================================================= */
.dlab-bnr-inr {
    position:            relative;
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    min-height:          340px;
    display:             flex;
    align-items:         center;
    padding:             60px 0;
}

.dlab-bnr-inr.overlay-black-middle::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85) 0%, rgba(26,35,126,0.6) 100%);
}

.dlab-bnr-inr::after {
    content:    '';
    position:   absolute;
    bottom: 0; left: 0; right: 0;
    height:     4px;
    background: linear-gradient(90deg, var(--ac-gold-dark), var(--ac-gold), var(--ac-gold-dark));
}

.dlab-bnr-inr .container { position: relative; z-index: 1; }

.dlab-bnr-inr-entry h1 {
    font-family:    var(--ac-font);
    font-size:      clamp(2rem, 5vw, 3rem);
    font-weight:    800;
    color:          var(--ac-white);
    letter-spacing: -0.5px;
    margin-bottom:  8px;
    text-shadow:    0 2px 20px rgba(0,0,0,0.3);
}

.banner-sub {
    font-family:    var(--ac-font);
    font-size:      0.85rem;
    font-weight:    500;
    color:          var(--ac-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom:  14px;
    display:        block;
}

.breadcrumb-row ul.list-inline {
    list-style:      none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             6px;
    margin: 0; padding: 0;
}

.breadcrumb-row ul.list-inline li {
    font-family: var(--ac-font);
    font-size:   0.85rem;
    font-weight: 500;
    color:       rgba(255,255,255,0.7);
    display:     flex;
    align-items: center;
    gap:         6px;
}

.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--ac-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }

.breadcrumb-row ul.list-inline li a {
    color:           var(--ac-gold);
    text-decoration: none;
    font-weight:     600;
    transition:      color var(--ac-dur) var(--ac-ease);
}
.breadcrumb-row ul.list-inline li a:hover { color: var(--ac-white); }

/* =============================================================
   LAYOUT HELPERS
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 72px 0; }
.bg-gray       { background-color: var(--ac-gray) !important; }
.bg-white      { background-color: var(--ac-white) !important; }

/* =============================================================
   INTRO SECTION
============================================================= */
.act-intro-section {
    background: var(--ac-white);
    padding:    56px 0 52px;
    text-align: center;
}

.act-intro-inner {
    max-width: 700px;
    margin:    0 auto;
}

.act-intro-title {
    font-family:    var(--ac-font);
    font-size:      clamp(1.5rem, 3vw, 2rem);
    font-weight:    800;
    color:          var(--ac-navy);
    margin-bottom:  16px;
    letter-spacing: -0.4px;
    display:        inline-block;
    position:       relative;
}

.act-intro-title::after {
    content:       '';
    display:       block;
    width:         52px;
    height:        3px;
    background:    linear-gradient(90deg, var(--ac-gold), var(--ac-gold-dark));
    border-radius: 2px;
    margin:        10px auto 0;
}

.act-intro-text {
    font-family: var(--ac-font);
    font-size:   0.97rem;
    color:       var(--ac-muted);
    line-height: 1.85;
    margin:      0;
}

/* =============================================================
   ACTIVITY CARD GRID
============================================================= */
.act-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   28px;
}

/* =============================================================
   ACTIVITY CARD
============================================================= */
.act-card {
    background:    var(--ac-white);
    border:        1px solid var(--ac-border);
    border-radius: var(--ac-radius-lg);
    overflow:      hidden;
    box-shadow:    0 4px 20px rgba(26,35,126,0.08);
    display:       flex;
    flex-direction: column;
    transition:
        transform  var(--ac-dur) var(--ac-ease),
        box-shadow var(--ac-dur) var(--ac-ease);
}

.act-card:hover {
    transform:  translateY(-8px);
    box-shadow: 0 20px 50px rgba(26,35,126,0.16);
}

/* ── Image area ── */
.act-card-img-wrap {
    position:   relative;
    height:     230px;
    overflow:   hidden;
    flex-shrink: 0;
}

.act-card-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.55s var(--ac-ease);
}

.act-card:hover .act-card-img { transform: scale(1.07); }

.act-card-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom, transparent 30%, rgba(13,18,87,0.5) 100%);
    pointer-events: none;
}

/* Badge on image */
.act-card-badge {
    position:     absolute;
    top:          16px;
    left:         16px;
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    font-family:  var(--ac-font);
    font-size:    0.75rem;
    font-weight:  700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background:   var(--ac-navy);
    color:        var(--ac-white);
    padding:      5px 12px;
    border-radius: 20px;
    box-shadow:   0 2px 8px rgba(0,0,0,0.25);
}

.act-card-badge--gold   { background: var(--ac-gold);   color: var(--ac-navy-dark); }
.act-card-badge--green  { background: var(--ac-green);  color: var(--ac-white); }
.act-card-badge--purple { background: var(--ac-purple); color: var(--ac-white); }

/* ── Card body ── */
.act-card-body {
    padding:        28px 26px;
    display:        flex;
    flex-direction: column;
    gap:            0;
    flex:           1;
}

/* Icon circle */
.act-card-icon {
    width:           46px;
    height:          46px;
    border-radius:   12px;
    background:      var(--ac-navy-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   14px;
    flex-shrink:     0;
}

.act-card-icon i { font-size: 1.2rem; color: var(--ac-navy); }

.act-card-icon--gold   { background: var(--ac-gold-light); }
.act-card-icon--gold i { color: var(--ac-gold-dark); }

.act-card-icon--green   { background: var(--ac-green-light); }
.act-card-icon--green i { color: var(--ac-green); }

.act-card-icon--purple   { background: var(--ac-purple-light); }
.act-card-icon--purple i { color: var(--ac-purple); }

/* Title */
.act-card-title {
    font-family:   var(--ac-font);
    font-size:     1.1rem;
    font-weight:   800;
    color:         var(--ac-navy);
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

/* Description */
.act-card-text {
    font-family:   var(--ac-font);
    font-size:     0.88rem;
    color:         var(--ac-muted);
    line-height:   1.8;
    margin-bottom: 16px;
    flex:          1;
}

/* Tags */
.act-card-tags {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    margin-bottom: 22px;
}

.act-card-tags span {
    font-family:  var(--ac-font);
    font-size:    0.74rem;
    font-weight:  600;
    color:        var(--ac-navy);
    background:   var(--ac-navy-light);
    border-radius: 20px;
    padding:      3px 10px;
    letter-spacing: 0.2px;
}

/* Button */
.btn-act-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ac-font);
    font-size:       0.86rem;
    font-weight:     700;
    color:           var(--ac-white);
    background:      linear-gradient(135deg, var(--ac-navy-dark), var(--ac-navy));
    border:          none;
    border-radius:   8px;
    padding:         12px 20px;
    text-decoration: none;
    align-self:      flex-start;
    transition:
        background var(--ac-dur) var(--ac-ease),
        color      var(--ac-dur) var(--ac-ease),
        transform  var(--ac-dur) var(--ac-ease),
        box-shadow var(--ac-dur) var(--ac-ease);
}

.btn-act-primary i { font-size: 0.8rem; transition: transform var(--ac-dur) var(--ac-ease); }

.btn-act-primary:hover {
    background:      linear-gradient(135deg, var(--ac-gold-dark), var(--ac-gold));
    color:           var(--ac-navy-dark);
    transform:       translateX(3px);
    box-shadow:      0 6px 18px rgba(200,169,81,0.35);
    text-decoration: none;
}

.btn-act-primary:hover i { transform: translateX(4px); }

/* =============================================================
   CTA STRIP
============================================================= */
.act-cta-strip {
    background: linear-gradient(135deg, var(--ac-navy-dark), var(--ac-navy));
    padding:    0;
    position:   relative;
    overflow:   hidden;
}

.act-cta-strip::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -55deg,
        transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px,
        rgba(200,169,81,0.05) 80px
    );
    pointer-events: none;
}

.act-cta-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             32px;
    padding:         40px 0;
    position:        relative;
    z-index:         1;
    flex-wrap:       wrap;
}

.act-cta-text h4 {
    font-family:   var(--ac-font);
    font-size:     1.2rem;
    font-weight:   800;
    color:         var(--ac-white);
    margin-bottom: 6px;
}

.act-cta-text p {
    font-family: var(--ac-font);
    font-size:   0.9rem;
    color:       rgba(255,255,255,0.72);
    line-height: 1.65;
    margin:      0;
    max-width:   520px;
}

.btn-act-cta {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ac-font);
    font-size:       0.9rem;
    font-weight:     700;
    color:           var(--ac-navy-dark);
    background:      var(--ac-gold);
    border:          none;
    border-radius:   8px;
    padding:         14px 28px;
    text-decoration: none;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:
        background var(--ac-dur) var(--ac-ease),
        color      var(--ac-dur) var(--ac-ease),
        transform  var(--ac-dur) var(--ac-ease),
        box-shadow var(--ac-dur) var(--ac-ease);
}

.btn-act-cta:hover {
    background:      var(--ac-white);
    color:           var(--ac-navy-dark);
    transform:       translateY(-2px);
    box-shadow:      0 8px 20px rgba(200,169,81,0.35);
    text-decoration: none;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991px) {
    .content-inner        { padding: 54px 0; }
    .act-card-img-wrap    { height: 200px; }
    .act-card-body        { padding: 22px 20px; }
}

@media (max-width: 767px) {
    .content-inner        { padding: 40px 0; }
    .dlab-bnr-inr         { min-height: 240px; padding: 44px 0; }
    .act-intro-section    { padding: 44px 0 36px; }
    .act-grid             { grid-template-columns: 1fr; gap: 20px; }
    .act-card-img-wrap    { height: 210px; }
    .act-cta-inner        { flex-direction: column; align-items: flex-start; }
    .btn-act-cta          { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .dlab-bnr-inr         { min-height: 200px; }
    .act-card-img-wrap    { height: 180px; }
    .act-card-body        { padding: 18px 16px; }
    .act-card-title       { font-size: 1rem; }
    .btn-act-primary      { width: 100%; justify-content: center; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — Clubs & Societies Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --cl-navy:        #1a237e;
    --cl-navy-dark:   #0d1257;
    --cl-navy-light:  #e8eaf6;
    --cl-gold:        #c8a951;
    --cl-gold-dark:   #a8893a;
    --cl-gold-light:  #f5edce;
    --cl-green:       #1b5e20;
    --cl-green-mid:   #2e7d32;
    --cl-green-light: #e8f5e9;
    --cl-orange:      #e65100;
    --cl-orange-light:#fff3e0;
    --cl-purple:      #4a148c;
    --cl-purple-light:#ede7f6;
    --cl-teal:        #00695c;
    --cl-teal-light:  #e0f2f1;
    --cl-white:       #ffffff;
    --cl-gray:        #f5f6fa;
    --cl-text:        #3a3a4a;
    --cl-muted:       #6b7280;
    --cl-border:      #e4e6ef;
    --cl-font:        'Inter', -apple-system, sans-serif;
    --cl-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --cl-dur:         0.28s;
    --cl-radius:      12px;
}

/* ── Banner ── */
.dlab-bnr-inr {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 330px;
    display: flex;
    align-items: center;
    padding: 56px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85) 0%, rgba(26,35,126,0.65) 100%);
}
.dlab-bnr-inr::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--cl-gold-dark), var(--cl-gold), var(--cl-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--cl-font); font-size: clamp(2rem,5vw,3rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--cl-font); font-size: 0.85rem; font-weight: 500;
    color: var(--cl-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--cl-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--cl-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--cl-gold); text-decoration: none; font-weight: 600;
    transition: color var(--cl-dur);
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* ── Layout helpers ── */
.section-full  { width: 100%; }
.content-inner { padding: 72px 0; }
.bg-gray       { background: var(--cl-gray) !important; }

/* ── Intro ── */
.cl-intro-section {
    background: var(--cl-white);
    padding: 52px 0 48px;
    text-align: center;
}
.cl-intro-inner { max-width: 680px; margin: 0 auto; }
.cl-intro-title {
    font-family: var(--cl-font); font-size: clamp(1.4rem,3vw,1.9rem);
    font-weight: 800; color: var(--cl-navy); margin-bottom: 16px;
    letter-spacing: -0.4px; display: inline-block;
}
.cl-intro-title::after {
    content: ''; display: block; width: 48px; height: 3px;
    background: linear-gradient(90deg, var(--cl-gold), var(--cl-gold-dark));
    border-radius: 2px; margin: 10px auto 0;
}
.cl-intro-inner p {
    font-family: var(--cl-font); font-size: 0.95rem;
    color: var(--cl-muted); line-height: 1.85; margin: 0;
}

/* ── Club grid ── */
.cl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 24px;
}

/* ── Club card ── */
.cl-card {
    background: var(--cl-white);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(26,35,126,0.07);
    display: flex; flex-direction: column;
    transition: transform var(--cl-dur) var(--cl-ease),
                box-shadow var(--cl-dur) var(--cl-ease);
}
.cl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(26,35,126,0.14);
}

/* Card header bar */
.cl-card-header {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
    position: relative; overflow: hidden;
}
.cl-card-header::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.35), transparent);
}
.cl-header--navy   { background: linear-gradient(135deg, var(--cl-navy-dark), var(--cl-navy)); }
.cl-header--green  { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
.cl-header--orange { background: linear-gradient(135deg, #bf360c, #e64a19); }
.cl-header--purple { background: linear-gradient(135deg, #4a148c, #6a1b9a); }
.cl-header--teal   { background: linear-gradient(135deg, #004d40, #00695c); }

.cl-icon-wrap {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cl-icon-wrap i { font-size: 1.3rem; color: #fff; }

.cl-header-text h4 {
    font-family: var(--cl-font); font-size: 1rem; font-weight: 800;
    color: #fff; margin: 0 0 4px;
}
.cl-category {
    font-family: var(--cl-font); font-size: 0.72rem; font-weight: 600;
    color: rgba(255,255,255,0.7); letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Card body */
.cl-card-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 0; }

.cl-card-body p {
    font-family: var(--cl-font); font-size: 0.87rem;
    color: var(--cl-muted); line-height: 1.8; margin-bottom: 16px;
}

.cl-meta-list {
    list-style: none; padding: 0; margin: 0 0 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.cl-meta-list li {
    font-family: var(--cl-font); font-size: 0.82rem; font-weight: 600;
    color: var(--cl-navy); display: flex; align-items: center; gap: 8px;
}
.cl-meta-list li i { color: var(--cl-gold-dark); font-size: 0.85rem; width: 14px; }

.cl-highlights {
    margin-top: auto;
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 14px; border-top: 1px solid var(--cl-border);
}
.cl-highlights span {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--cl-font); font-size: 0.76rem; font-weight: 700;
    color: var(--cl-gold-dark); background: var(--cl-gold-light);
    border-radius: 20px; padding: 4px 12px;
}
.cl-highlights span i { font-size: 0.72rem; }

/* ── CTA strip ── */
.cl-cta-strip {
    background: linear-gradient(135deg, var(--cl-navy-dark), var(--cl-navy));
    position: relative; overflow: hidden;
}
.cl-cta-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.cl-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; padding: 40px 0; position: relative; z-index: 1; flex-wrap: wrap;
}
.cl-cta-text h4 {
    font-family: var(--cl-font); font-size: 1.2rem; font-weight: 800;
    color: #fff; margin-bottom: 6px;
}
.cl-cta-text p {
    font-family: var(--cl-font); font-size: 0.9rem;
    color: rgba(255,255,255,0.72); line-height: 1.65; margin: 0;
}
.btn-cl-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--cl-font); font-size: 0.9rem; font-weight: 700;
    color: var(--cl-navy-dark); background: var(--cl-gold);
    border: none; border-radius: 8px; padding: 14px 28px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background var(--cl-dur), transform var(--cl-dur), box-shadow var(--cl-dur);
}
.btn-cl-cta:hover {
    background: #fff; color: var(--cl-navy-dark);
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,169,81,0.35);
    text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .content-inner { padding: 40px 0; }
    .dlab-bnr-inr  { min-height: 240px; }
    .cl-grid       { grid-template-columns: 1fr; }
    .cl-cta-inner  { flex-direction: column; }
    .btn-cl-cta    { width: 100%; justify-content: center; }
}



/* =============================================================
   PANEKAR SECONDARY SCHOOL — Sports Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --sp-navy:        #1a237e;
    --sp-navy-dark:   #0d1257;
    --sp-navy-light:  #e8eaf6;
    --sp-gold:        #c8a951;
    --sp-gold-dark:   #a8893a;
    --sp-gold-light:  #f5edce;
    --sp-green:       #1b5e20;
    --sp-green-light: #e8f5e9;
    --sp-purple:      #4a148c;
    --sp-purple-light:#ede7f6;
    --sp-orange:      #e65100;
    --sp-orange-light:#fff3e0;
    --sp-white:       #ffffff;
    --sp-gray:        #f5f6fa;
    --sp-text:        #3a3a4a;
    --sp-muted:       #6b7280;
    --sp-border:      #e4e6ef;
    --sp-font:        'Inter', -apple-system, sans-serif;
    --sp-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --sp-dur:         0.28s;
    --sp-radius:      12px;
    --sp-radius-lg:   18px;
}

/* ── Banner ── */
.dlab-bnr-inr {
    position: relative; background-size: cover; background-position: center;
    min-height: 340px; display: flex; align-items: center; padding: 60px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--sp-gold-dark), var(--sp-gold), var(--sp-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--sp-font); font-size: clamp(2rem,5vw,3rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--sp-font); font-size: 0.85rem; font-weight: 500;
    color: var(--sp-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--sp-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--sp-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--sp-gold); text-decoration: none; font-weight: 600;
    transition: color var(--sp-dur);
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* ── Layout helpers ── */
.section-full  { width: 100%; }
.content-inner { padding: 72px 0; }
.bg-gray       { background: var(--sp-gray) !important; }

/* ── Stats strip ── */
.sp-stats-strip {
    background: linear-gradient(135deg, var(--sp-navy-dark), var(--sp-navy));
    position: relative; overflow: hidden;
}
.sp-stats-inner {
    display: flex; align-items: stretch; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.sp-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 28px 40px; flex: 1; min-width: 160px; text-align: center;
    transition: background var(--sp-dur);
}
.sp-stat:hover { background: rgba(200,169,81,0.1); }
.sp-stat-num {
    font-family: var(--sp-font); font-size: 2.2rem; font-weight: 800;
    color: var(--sp-gold); line-height: 1; margin-bottom: 6px;
}
.sp-stat-label {
    font-family: var(--sp-font); font-size: 0.78rem; font-weight: 600;
    color: rgba(255,255,255,0.7); letter-spacing: 0.5px; text-transform: uppercase;
}
.sp-stat-div { width: 1px; background: rgba(255,255,255,0.12); margin: 16px 0; }

/* ── Intro ── */
.sp-intro-section { background: var(--sp-white); padding: 52px 0 48px; text-align: center; }
.sp-intro-inner { max-width: 680px; margin: 0 auto; }
.sp-intro-title {
    font-family: var(--sp-font); font-size: clamp(1.4rem,3vw,1.9rem);
    font-weight: 800; color: var(--sp-navy); margin-bottom: 16px;
    letter-spacing: -0.4px; display: inline-block;
}
.sp-intro-title::after {
    content: ''; display: block; width: 48px; height: 3px;
    background: linear-gradient(90deg, var(--sp-gold), var(--sp-gold-dark));
    border-radius: 2px; margin: 10px auto 0;
}
.sp-intro-inner p {
    font-family: var(--sp-font); font-size: 0.95rem;
    color: var(--sp-muted); line-height: 1.85; margin: 0;
}

/* ── Sport rows ── */
.sp-sport-row {
    display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
}
.sp-sport-row--reverse { flex-direction: row-reverse; }

.sp-sport-img-col { flex: 0 0 360px; min-width: 260px; }

.sp-sport-img-wrap {
    position: relative; border-radius: var(--sp-radius-lg); overflow: hidden;
    box-shadow: 0 8px 36px rgba(26,35,126,0.16); height: 280px;
}
.sp-sport-img-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s var(--sp-ease);
}
.sp-sport-img-wrap:hover img { transform: scale(1.05); }

.sp-sport-img-badge {
    position: absolute; top: 16px; left: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--sp-font); font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    background: var(--sp-navy); color: #fff;
    padding: 5px 12px; border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.sp-badge--gold   { background: var(--sp-gold);   color: var(--sp-navy-dark); }
.sp-badge--purple { background: var(--sp-purple); color: #fff; }
.sp-badge--green  { background: var(--sp-green);  color: #fff; }
.sp-badge--orange { background: var(--sp-orange); color: #fff; }

.sp-sport-content-col { flex: 1; min-width: 260px; }

.sp-sport-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.sp-sport-icon i { font-size: 1.4rem; }

.sp-icon--navy   { background: var(--sp-navy-light); }
.sp-icon--navy i { color: var(--sp-navy); }
.sp-icon--gold   { background: var(--sp-gold-light); }
.sp-icon--gold i { color: var(--sp-gold-dark); }
.sp-icon--purple { background: var(--sp-purple-light); }
.sp-icon--purple i { color: var(--sp-purple); }
.sp-icon--green  { background: var(--sp-green-light); }
.sp-icon--green i { color: var(--sp-green); }
.sp-icon--orange { background: var(--sp-orange-light); }
.sp-icon--orange i { color: var(--sp-orange); }

.sp-sport-title {
    font-family: var(--sp-font); font-size: clamp(1.1rem,2vw,1.4rem);
    font-weight: 800; color: var(--sp-navy); margin-bottom: 12px;
    letter-spacing: -0.3px;
}
.sp-sport-text {
    font-family: var(--sp-font); font-size: 0.9rem;
    color: var(--sp-muted); line-height: 1.85; margin-bottom: 18px;
}
.sp-sport-meta {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.sp-meta-item {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--sp-font); font-size: 0.82rem; font-weight: 600;
    color: var(--sp-navy);
}
.sp-meta-item i { color: var(--sp-gold-dark); font-size: 0.85rem; }

.sp-achievements { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-ach-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--sp-font); font-size: 0.78rem; font-weight: 700;
    color: var(--sp-gold-dark); background: var(--sp-gold-light);
    border-radius: 20px; padding: 5px 12px;
}
.sp-ach-tag i { font-size: 0.75rem; }

.sp-divider { border: none; border-top: 1px solid var(--sp-border); margin: 52px 0; }

/* ── CTA strip ── */
.sp-cta-strip {
    background: linear-gradient(135deg, var(--sp-navy-dark), var(--sp-navy));
    position: relative; overflow: hidden;
}
.sp-cta-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.sp-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; padding: 40px 0; position: relative; z-index: 1; flex-wrap: wrap;
}
.sp-cta-text h4 {
    font-family: var(--sp-font); font-size: 1.2rem; font-weight: 800;
    color: #fff; margin-bottom: 6px;
}
.sp-cta-text p {
    font-family: var(--sp-font); font-size: 0.9rem;
    color: rgba(255,255,255,0.72); line-height: 1.65; margin: 0;
}
.btn-sp-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sp-font); font-size: 0.9rem; font-weight: 700;
    color: var(--sp-navy-dark); background: var(--sp-gold);
    border: none; border-radius: 8px; padding: 14px 28px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background var(--sp-dur), transform var(--sp-dur), box-shadow var(--sp-dur);
}
.btn-sp-cta:hover {
    background: #fff; color: var(--sp-navy-dark);
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,169,81,0.35);
    text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .sp-sport-img-col { flex: 0 0 100%; }
    .sp-sport-row, .sp-sport-row--reverse { flex-direction: column; }
    .sp-sport-img-wrap { height: 240px; }
    .sp-stat { padding: 22px 24px; min-width: 130px; }
}
@media (max-width: 767px) {
    .content-inner { padding: 40px 0; }
    .dlab-bnr-inr  { min-height: 240px; }
    .sp-stats-inner { flex-direction: column; }
    .sp-stat-div   { display: none; }
    .sp-divider    { margin: 36px 0; }
    .sp-cta-inner  { flex-direction: column; }
    .btn-sp-cta    { width: 100%; justify-content: center; }
}

/* =============================================================
   PANEKAR SECONDARY SCHOOL — Competitions Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --co-navy:        #1a237e;
    --co-navy-dark:   #0d1257;
    --co-navy-light:  #e8eaf6;
    --co-gold:        #c8a951;
    --co-gold-dark:   #a8893a;
    --co-gold-light:  #f5edce;
    --co-green:       #1b5e20;
    --co-green-mid:   #2e7d32;
    --co-green-light: #e8f5e9;
    --co-orange:      #e65100;
    --co-orange-light:#fff3e0;
    --co-purple:      #4a148c;
    --co-purple-light:#ede7f6;
    --co-white:       #ffffff;
    --co-gray:        #f5f6fa;
    --co-text:        #3a3a4a;
    --co-muted:       #6b7280;
    --co-border:      #e4e6ef;
    --co-font:        'Inter', -apple-system, sans-serif;
    --co-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --co-dur:         0.28s;
    --co-radius:      12px;
}

/* ── Banner ── */
.dlab-bnr-inr {
    position: relative; background-size: cover; background-position: center;
    min-height: 340px; display: flex; align-items: center; padding: 60px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--co-gold-dark), var(--co-gold), var(--co-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--co-font); font-size: clamp(2rem,5vw,3rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--co-font); font-size: 0.85rem; font-weight: 500;
    color: var(--co-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--co-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--co-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--co-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* ── Layout helpers ── */
.section-full  { width: 100%; }
.content-inner { padding: 72px 0; }
.bg-gray       { background: var(--co-gray) !important; }
.text-center   { text-align: center !important; }
.section-head  { margin-bottom: 48px; }
.section-head .title {
    font-family: var(--co-font); font-size: clamp(1.5rem,3vw,2rem);
    font-weight: 800; color: var(--co-navy); margin-bottom: 12px;
    display: inline-block;
}
.section-head.text-center .title::after {
    content: ''; display: block; width: 52px; height: 3px;
    background: linear-gradient(90deg, var(--co-gold), var(--co-gold-dark));
    border-radius: 2px; margin: 10px auto 0;
}
.section-head p {
    font-family: var(--co-font); font-size: 0.95rem; color: var(--co-muted);
    max-width: 560px; margin: 0 auto; line-height: 1.7;
}

/* ── Intro ── */
.co-intro-section { background: var(--co-white); padding: 52px 0 48px; text-align: center; }
.co-intro-inner { max-width: 680px; margin: 0 auto; }
.co-intro-title {
    font-family: var(--co-font); font-size: clamp(1.4rem,3vw,1.9rem);
    font-weight: 800; color: var(--co-navy); margin-bottom: 16px; display: inline-block;
}
.co-intro-title::after {
    content: ''; display: block; width: 48px; height: 3px;
    background: linear-gradient(90deg, var(--co-gold), var(--co-gold-dark));
    border-radius: 2px; margin: 10px auto 0;
}
.co-intro-inner p {
    font-family: var(--co-font); font-size: 0.95rem;
    color: var(--co-muted); line-height: 1.85; margin: 0;
}

/* ── Trophy shelf ── */
.co-trophy-shelf {
    background: linear-gradient(135deg, var(--co-navy-dark), var(--co-navy));
    position: relative; overflow: hidden;
}
.co-trophy-shelf::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.co-trophy-inner {
    display: flex; align-items: stretch; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.co-trophy-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 32px 48px; flex: 1; min-width: 160px; text-align: center;
    transition: background var(--co-dur);
}
.co-trophy-item:hover { background: rgba(200,169,81,0.1); }
.co-trophy-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(200,169,81,0.2);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.co-trophy-icon i { font-size: 1.3rem; color: var(--co-gold); }
.co-trophy-num {
    font-family: var(--co-font); font-size: 2.4rem; font-weight: 800;
    color: var(--co-gold); line-height: 1; margin-bottom: 6px;
}
.co-trophy-label {
    font-family: var(--co-font); font-size: 0.78rem; font-weight: 600;
    color: rgba(255,255,255,0.68); letter-spacing: 0.5px; text-transform: uppercase;
}
.co-trophy-div { width: 1px; background: rgba(255,255,255,0.12); margin: 16px 0; }

/* ── Competition cards grid ── */
.co-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.co-card {
    background: var(--co-white);
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
    overflow: hidden;
    box-shadow: 0 3px 16px rgba(26,35,126,0.07);
    display: flex; flex-direction: column;
    transition: transform var(--co-dur) var(--co-ease),
                box-shadow var(--co-dur) var(--co-ease);
}
.co-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(26,35,126,0.14);
}

.co-card-top {
    padding: 22px;
    display: flex; align-items: center; justify-content: space-between;
    position: relative; overflow: hidden;
}
.co-card-top::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3), transparent);
}
.co-top--navy   { background: linear-gradient(135deg, var(--co-navy-dark), var(--co-navy)); }
.co-top--green  { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
.co-top--purple { background: linear-gradient(135deg, #4a148c, #6a1b9a); }
.co-top--orange { background: linear-gradient(135deg, #bf360c, #e64a19); }

.co-card-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
}
.co-card-icon i { font-size: 1.4rem; color: #fff; }

/* Level badge */
.co-card-level {
    font-family: var(--co-font); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 12px; border-radius: 20px;
}
.co-level--inter    { background: rgba(255,255,255,0.2); color: #fff; }
.co-level--national { background: var(--co-gold); color: var(--co-navy-dark); }
.co-level--regional { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4); }

/* Card body */
.co-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }

.co-card-title {
    font-family: var(--co-font); font-size: 1rem; font-weight: 800;
    color: var(--co-navy); margin-bottom: 10px;
}
.co-card-text {
    font-family: var(--co-font); font-size: 0.86rem;
    color: var(--co-muted); line-height: 1.8; margin-bottom: 18px; flex: 1;
}

/* Results */
.co-card-results {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 16px;
    padding: 14px; background: var(--co-gray);
    border-radius: 8px;
}
.co-result-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.co-result-year {
    font-family: var(--co-font); font-size: 0.8rem; font-weight: 700;
    color: var(--co-muted); white-space: nowrap;
}
.co-result-badge {
    font-family: var(--co-font); font-size: 0.76rem; font-weight: 700;
    border-radius: 20px; padding: 4px 10px;
    display: inline-flex; align-items: center; gap: 5px;
}
.co-badge--gold   { background: var(--co-gold-light); color: var(--co-gold-dark); }
.co-badge--silver { background: #f0f0f0; color: #555; }
.co-badge--bronze { background: var(--co-green-light); color: var(--co-green-mid); }
.co-badge--part   { background: var(--co-navy-light); color: var(--co-navy); }

/* Meta */
.co-card-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    border-top: 1px solid var(--co-border); padding-top: 14px;
}
.co-card-meta span {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--co-font); font-size: 0.8rem; font-weight: 600;
    color: var(--co-navy);
}
.co-card-meta span i { color: var(--co-gold-dark); font-size: 0.8rem; }

/* ── CTA strip ── */
.co-cta-strip {
    background: linear-gradient(135deg, var(--co-navy-dark), var(--co-navy));
    position: relative; overflow: hidden;
}
.co-cta-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.co-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; padding: 40px 0; position: relative; z-index: 1; flex-wrap: wrap;
}
.co-cta-text h4 {
    font-family: var(--co-font); font-size: 1.2rem; font-weight: 800;
    color: #fff; margin-bottom: 6px;
}
.co-cta-text p {
    font-family: var(--co-font); font-size: 0.9rem;
    color: rgba(255,255,255,0.72); line-height: 1.65; margin: 0;
}
.btn-co-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--co-font); font-size: 0.9rem; font-weight: 700;
    color: var(--co-navy-dark); background: var(--co-gold);
    border: none; border-radius: 8px; padding: 14px 28px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background var(--co-dur), transform var(--co-dur), box-shadow var(--co-dur);
}
.btn-co-cta:hover {
    background: #fff; color: var(--co-navy-dark);
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,169,81,0.35);
    text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .content-inner    { padding: 40px 0; }
    .dlab-bnr-inr     { min-height: 240px; }
    .co-grid          { grid-template-columns: 1fr; }
    .co-trophy-inner  { flex-direction: column; }
    .co-trophy-div    { display: none; }
    .co-trophy-item   { padding: 22px; }
    .co-cta-inner     { flex-direction: column; }
    .btn-co-cta       { width: 100%; justify-content: center; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — Photo Gallery Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --gl-navy:        #1a237e;
    --gl-navy-dark:   #0d1257;
    --gl-navy-light:  #e8eaf6;
    --gl-gold:        #c8a951;
    --gl-gold-dark:   #a8893a;
    --gl-gold-light:  #f5edce;
    --gl-white:       #ffffff;
    --gl-gray:        #f5f6fa;
    --gl-text:        #3a3a4a;
    --gl-muted:       #6b7280;
    --gl-border:      #e4e6ef;
    --gl-font:        'Inter', -apple-system, sans-serif;
    --gl-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --gl-dur:         0.28s;
    --gl-radius:      10px;
    --gl-radius-lg:   16px;
}

/* ── Banner ── */
.dlab-bnr-inr {
    position: relative; background-size: cover; background-position: center;
    min-height: 340px; display: flex; align-items: center; padding: 60px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--gl-gold-dark), var(--gl-gold), var(--gl-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--gl-font); font-size: clamp(2rem,5vw,3rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--gl-font); font-size: 0.85rem; font-weight: 500;
    color: var(--gl-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--gl-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--gl-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--gl-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* ── Layout helpers ── */
.section-full  { width: 100%; }
.content-inner { padding: 72px 0; }
.bg-gray       { background: var(--gl-gray) !important; }

/* ── Intro ── */
.gl-intro-section { background: var(--gl-white); padding: 52px 0 48px; text-align: center; }
.gl-intro-inner { max-width: 640px; margin: 0 auto; }
.gl-intro-title {
    font-family: var(--gl-font); font-size: clamp(1.4rem,3vw,1.9rem);
    font-weight: 800; color: var(--gl-navy); margin-bottom: 16px; display: inline-block;
}
.gl-intro-title::after {
    content: ''; display: block; width: 48px; height: 3px;
    background: linear-gradient(90deg, var(--gl-gold), var(--gl-gold-dark));
    border-radius: 2px; margin: 10px auto 0;
}
.gl-intro-inner p {
    font-family: var(--gl-font); font-size: 0.95rem;
    color: var(--gl-muted); line-height: 1.85; margin: 0;
}

/* ── Tab filters ── */
.gl-tabs-wrap {
    display: flex; justify-content: center;
    margin-bottom: 36px;
}
.gl-tabs {
    display: inline-flex; flex-wrap: wrap;
    background: var(--gl-white);
    border: 1px solid var(--gl-border);
    border-radius: 40px;
    padding: 5px;
    gap: 4px;
    box-shadow: 0 2px 12px rgba(26,35,126,0.08);
}
.gl-tab {
    font-family: var(--gl-font); font-size: 0.83rem; font-weight: 600;
    color: var(--gl-muted);
    background: transparent;
    border: none; border-radius: 30px;
    padding: 9px 20px;
    cursor: pointer;
    transition: background var(--gl-dur) var(--gl-ease),
                color    var(--gl-dur) var(--gl-ease),
                box-shadow var(--gl-dur) var(--gl-ease);
    white-space: nowrap;
}
.gl-tab:hover:not(.active) {
    background: var(--gl-navy-light);
    color: var(--gl-navy);
}
.gl-tab.active {
    background: linear-gradient(135deg, var(--gl-navy-dark), var(--gl-navy));
    color: var(--gl-white);
    box-shadow: 0 4px 12px rgba(26,35,126,0.3);
}

/* ── Photo grid (CSS Grid masonry-style) ── */
.gl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 14px;
}

/* Span modifiers */
.gl-item--wide { grid-column: span 2; }
.gl-item--tall { grid-row:    span 2; }

/* ── Photo item ── */
.gl-item {
    position: relative;
    border-radius: var(--gl-radius);
    overflow: hidden;
    box-shadow: 0 3px 14px rgba(26,35,126,0.1);
    cursor: pointer;
}

.gl-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.5s var(--gl-ease);
}

.gl-item:hover img { transform: scale(1.08); }

/* Overlay */
.gl-item-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(13,18,87,0.82) 0%, transparent 55%);
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    opacity: 0;
    transition: opacity var(--gl-dur) var(--gl-ease);
}

.gl-item:hover .gl-item-overlay { opacity: 1; }

.gl-item-label {
    font-family: var(--gl-font); font-size: 0.88rem; font-weight: 700;
    color: #fff; margin-bottom: 5px; display: block;
    transform: translateY(6px);
    transition: transform var(--gl-dur) var(--gl-ease);
}
.gl-item:hover .gl-item-label { transform: translateY(0); }

.gl-item-cat {
    font-family: var(--gl-font); font-size: 0.73rem; font-weight: 600;
    color: var(--gl-gold); letter-spacing: 0.4px;
    display: inline-flex; align-items: center; gap: 5px;
}

/* ── Empty state ── */
.gl-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px;
    padding: 60px 20px; text-align: center;
    grid-column: 1 / -1;
}
.gl-empty i {
    font-size: 3rem; color: var(--gl-border);
}
.gl-empty p {
    font-family: var(--gl-font); font-size: 0.95rem;
    color: var(--gl-muted); margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .gl-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
}

@media (max-width: 991px) {
    .content-inner { padding: 54px 0; }
    .gl-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}

@media (max-width: 767px) {
    .content-inner { padding: 40px 0; }
    .dlab-bnr-inr  { min-height: 240px; }
    .gl-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 170px;
        gap: 10px;
    }
    .gl-tabs { border-radius: 12px; }
    .gl-tab  { padding: 8px 14px; font-size: 0.78rem; }
    /* Force all overlays visible on touch devices */
    .gl-item-overlay { opacity: 1; }
    .gl-item-label   { transform: translateY(0); }
}

@media (max-width: 480px) {
    .gl-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 140px;
    }
    .gl-item--wide { grid-column: span 2; }
    .gl-item--tall { grid-row: span 1; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — News List Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --nl-navy:       #1a237e;
    --nl-navy-dark:  #0d1257;
    --nl-navy-light: #e8eaf6;
    --nl-gold:       #c8a951;
    --nl-gold-dark:  #a8893a;
    --nl-gold-light: #f5edce;
    --nl-white:      #ffffff;
    --nl-gray:       #f5f6fa;
    --nl-text:       #3a3a4a;
    --nl-muted:      #6b7280;
    --nl-border:     #e4e6ef;
    --nl-font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --nl-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --nl-dur:        0.26s;
    --nl-radius:     12px;
    --nl-radius-lg:  18px;
}

/* =============================================================
   BANNER
============================================================= */
.dlab-bnr-inr {
    position: relative; background-size: cover;
    background-position: center; min-height: 320px;
    display: flex; align-items: center; padding: 56px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--nl-gold-dark), var(--nl-gold), var(--nl-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--nl-font); font-size: clamp(2rem,5vw,3rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--nl-font); font-size: 0.85rem; font-weight: 500;
    color: var(--nl-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--nl-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--nl-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--nl-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* =============================================================
   LAYOUT HELPERS
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 64px 0; }
.bg-gray       { background: var(--nl-gray) !important; }
.bg-white      { background: var(--nl-white) !important; }

/* =============================================================
   FEATURED ARTICLE
============================================================= */
.nl-featured-section { padding: 56px 0 0; }

.nl-featured-card {
    display: flex; align-items: stretch; gap: 0;
    background: var(--nl-white);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 36px rgba(26,35,126,0.12);
    transition: box-shadow var(--nl-dur) var(--nl-ease),
                transform  var(--nl-dur) var(--nl-ease);
}
.nl-featured-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 56px rgba(26,35,126,0.18);
}

.nl-featured-img-col {
    position: relative; flex: 0 0 50%; overflow: hidden;
}
.nl-featured-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.55s var(--nl-ease);
}
.nl-featured-card:hover .nl-featured-img { transform: scale(1.04); }

.nl-featured-badge {
    position: absolute; top: 20px; left: 20px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--nl-font); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    background: var(--nl-gold); color: var(--nl-navy-dark);
    padding: 6px 14px; border-radius: 20px;
    box-shadow: 0 2px 10px rgba(200,169,81,0.4);
}

.nl-featured-content {
    flex: 1; padding: 40px 44px;
    display: flex; flex-direction: column; justify-content: center; gap: 0;
}

.nl-meta {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-bottom: 16px;
}
.nl-category {
    font-family: var(--nl-font); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--nl-gold-dark); background: var(--nl-gold-light);
    border-radius: 20px; padding: 4px 12px;
}
.nl-date {
    font-family: var(--nl-font); font-size: 0.8rem; font-weight: 500;
    color: var(--nl-muted); display: flex; align-items: center; gap: 5px;
}
.nl-date i { font-size: 0.8rem; }

.nl-featured-title {
    font-family: var(--nl-font); font-size: clamp(1.3rem,2.5vw,1.8rem);
    font-weight: 800; color: var(--nl-navy); margin-bottom: 14px;
    line-height: 1.3; letter-spacing: -0.4px;
}
.nl-featured-title a {
    color: inherit; text-decoration: none;
    transition: color var(--nl-dur);
}
.nl-featured-title a:hover { color: var(--nl-gold-dark); }

.nl-featured-excerpt {
    font-family: var(--nl-font); font-size: 0.92rem; color: var(--nl-muted);
    line-height: 1.85; margin-bottom: 28px; flex: 1;
}

.nl-featured-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-top: 20px; border-top: 1px solid var(--nl-border);
}

.nl-author {
    display: flex; align-items: center; gap: 12px;
}
.nl-author-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--nl-navy-dark), var(--nl-navy));
    color: #fff; font-family: var(--nl-font); font-size: 1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nl-author-info { display: flex; flex-direction: column; gap: 2px; }
.nl-author-name {
    font-family: var(--nl-font); font-size: 0.85rem; font-weight: 700;
    color: var(--nl-navy);
}
.nl-read-time {
    font-family: var(--nl-font); font-size: 0.76rem; color: var(--nl-muted);
    display: flex; align-items: center; gap: 5px;
}

.btn-nl-read {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--nl-font); font-size: 0.86rem; font-weight: 700;
    color: var(--nl-white);
    background: linear-gradient(135deg, var(--nl-navy-dark), var(--nl-navy));
    border-radius: 8px; padding: 12px 22px; text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
    transition: background var(--nl-dur), transform var(--nl-dur), box-shadow var(--nl-dur);
}
.btn-nl-read i { transition: transform var(--nl-dur); }
.btn-nl-read:hover {
    background: linear-gradient(135deg, var(--nl-gold-dark), var(--nl-gold));
    color: var(--nl-navy-dark); transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(200,169,81,0.35); text-decoration: none;
}
.btn-nl-read:hover i { transform: translateX(4px); }

/* =============================================================
   SECTION HEAD ROW (title + filter pills)
============================================================= */
.section-head-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 32px;
}
.nl-section-title {
    font-family: var(--nl-font); font-size: 1.2rem; font-weight: 800;
    color: var(--nl-navy); margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.nl-section-title::before {
    content: ''; display: inline-block; width: 4px; height: 22px;
    background: linear-gradient(180deg, var(--nl-gold), var(--nl-gold-dark));
    border-radius: 2px;
}

.nl-filter-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.nl-pill {
    font-family: var(--nl-font); font-size: 0.78rem; font-weight: 600;
    color: var(--nl-muted); background: var(--nl-white);
    border: 1.5px solid var(--nl-border); border-radius: 20px;
    padding: 6px 16px; text-decoration: none;
    transition: border-color var(--nl-dur), color var(--nl-dur),
                background var(--nl-dur), box-shadow var(--nl-dur);
}
.nl-pill:hover {
    border-color: var(--nl-navy); color: var(--nl-navy);
    text-decoration: none;
}
.nl-pill--active {
    background: var(--nl-navy); color: #fff !important;
    border-color: var(--nl-navy);
    box-shadow: 0 3px 10px rgba(26,35,126,0.25);
}

/* =============================================================
   NEWS GRID
============================================================= */
.nl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

/* =============================================================
   NEWS CARD
============================================================= */
.nl-card {
    background: var(--nl-white);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius);
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(26,35,126,0.07);
    display: flex; flex-direction: column;
    transition: transform var(--nl-dur) var(--nl-ease),
                box-shadow var(--nl-dur) var(--nl-ease);
}
.nl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(26,35,126,0.14);
}

.nl-card-img-link {
    position: relative; height: 210px;
    display: block; overflow: hidden; flex-shrink: 0;
}
.nl-card-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s var(--nl-ease);
}
.nl-card:hover .nl-card-img { transform: scale(1.06); }

.nl-card-cat-badge {
    position: absolute; top: 14px; left: 14px;
    font-family: var(--nl-font); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    background: var(--nl-gold); color: var(--nl-navy-dark);
    padding: 4px 10px; border-radius: 20px;
    box-shadow: 0 2px 8px rgba(200,169,81,0.4);
}

.nl-card-body {
    padding: 20px 22px 22px;
    flex: 1; display: flex; flex-direction: column;
}

.nl-card-meta {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px; flex-wrap: wrap;
}
.nl-card-date, .nl-card-read-time {
    font-family: var(--nl-font); font-size: 0.76rem; font-weight: 500;
    color: var(--nl-muted); display: flex; align-items: center; gap: 5px;
}
.nl-card-date i, .nl-card-read-time i { font-size: 0.78rem; }

.nl-card-title {
    font-family: var(--nl-font); font-size: 0.97rem; font-weight: 800;
    color: var(--nl-navy); margin-bottom: 10px; line-height: 1.45;
}
.nl-card-title a {
    color: inherit; text-decoration: none;
    transition: color var(--nl-dur);
}
.nl-card-title a:hover { color: var(--nl-gold-dark); }

.nl-card-excerpt {
    font-family: var(--nl-font); font-size: 0.84rem; color: var(--nl-muted);
    line-height: 1.8; margin-bottom: 18px; flex: 1;
}

.nl-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding-top: 14px;
    border-top: 1px solid var(--nl-border);
}
.nl-card-author {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--nl-font); font-size: 0.78rem; font-weight: 600;
    color: var(--nl-muted);
}
.nl-card-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--nl-navy-dark), var(--nl-navy));
    color: #fff; font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.nl-card-link {
    font-family: var(--nl-font); font-size: 0.8rem; font-weight: 700;
    color: var(--nl-navy); text-decoration: none; white-space: nowrap;
    display: flex; align-items: center; gap: 5px;
    transition: color var(--nl-dur), gap var(--nl-dur);
}
.nl-card-link i { font-size: 0.75rem; transition: transform var(--nl-dur); }
.nl-card-link:hover { color: var(--nl-gold-dark); text-decoration: none; }
.nl-card-link:hover i { transform: translateX(4px); }

/* =============================================================
   PAGINATION
============================================================= */
.nl-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap;
}
.nl-page-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--nl-font); font-size: 0.85rem; font-weight: 600;
    color: var(--nl-navy); background: var(--nl-white);
    border: 1.5px solid var(--nl-border); border-radius: 8px;
    padding: 10px 18px; text-decoration: none;
    transition: background var(--nl-dur), border-color var(--nl-dur),
                color var(--nl-dur);
}
.nl-page-btn:hover {
    background: var(--nl-navy); color: #fff;
    border-color: var(--nl-navy); text-decoration: none;
}
.nl-page-numbers { display: flex; gap: 6px; }
.nl-page-num {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--nl-font); font-size: 0.85rem; font-weight: 600;
    color: var(--nl-navy); background: var(--nl-white);
    border: 1.5px solid var(--nl-border); text-decoration: none;
    transition: background var(--nl-dur), color var(--nl-dur), border-color var(--nl-dur);
}
.nl-page-num:hover { background: var(--nl-navy-light); text-decoration: none; }
.nl-page-num--active {
    background: var(--nl-navy); color: #fff !important;
    border-color: var(--nl-navy);
    box-shadow: 0 3px 10px rgba(26,35,126,0.3);
}

/* =============================================================
   EMPTY STATE
============================================================= */
.nl-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 72px 24px; text-align: center;
}
.nl-empty i { font-size: 3.5rem; color: var(--nl-border); display: block; }
.nl-empty h4 {
    font-family: var(--nl-font); font-size: 1.1rem; font-weight: 700;
    color: var(--nl-navy); margin: 0;
}
.nl-empty p {
    font-family: var(--nl-font); font-size: 0.9rem;
    color: var(--nl-muted); max-width: 400px; line-height: 1.7; margin: 0;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1199px) {
    .nl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .nl-featured-card { flex-direction: column; }
    .nl-featured-img-col { flex: none; height: 280px; }
    .nl-featured-content { padding: 28px 28px; }
}
@media (max-width: 767px) {
    .content-inner { padding: 40px 0; }
    .dlab-bnr-inr  { min-height: 230px; }
    .nl-grid       { grid-template-columns: 1fr; }
    .section-head-row { flex-direction: column; align-items: flex-start; }
    .nl-featured-img-col { height: 220px; }
}
@media (max-width: 480px) {
    .nl-featured-content { padding: 20px 18px; }
    .nl-featured-footer  { flex-direction: column; align-items: flex-start; }
    .btn-nl-read         { width: 100%; justify-content: center; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — News Detail Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --nd-navy:       #1a237e;
    --nd-navy-dark:  #0d1257;
    --nd-navy-light: #e8eaf6;
    --nd-gold:       #c8a951;
    --nd-gold-dark:  #a8893a;
    --nd-gold-light: #f5edce;
    --nd-white:      #ffffff;
    --nd-gray:       #f5f6fa;
    --nd-text:       #3a3a4a;
    --nd-muted:      #6b7280;
    --nd-border:     #e4e6ef;
    --nd-font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --nd-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --nd-dur:        0.24s;
    --nd-radius:     10px;
    --nd-radius-lg:  16px;
}

/* =============================================================
   BANNER
============================================================= */
.dlab-bnr-inr {
    position: relative; background-size: cover; background-position: center;
    min-height: 300px; display: flex; align-items: center; padding: 52px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--nd-gold-dark), var(--nd-gold), var(--nd-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--nd-font); font-size: clamp(1.8rem,4vw,2.8rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--nd-font); font-size: 0.82rem; font-weight: 500;
    color: var(--nd-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--nd-font); font-size: 0.82rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--nd-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--nd-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* =============================================================
   LAYOUT HELPERS
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 64px 0; }
.bg-gray       { background: var(--nd-gray) !important; }
.bg-white      { background: var(--nd-white) !important; }
.text-center   { text-align: center !important; }
.section-head  { margin-bottom: 40px; }
.section-head .title {
    font-family: var(--nd-font); font-size: clamp(1.3rem,2.5vw,1.7rem);
    font-weight: 800; color: var(--nd-navy); display: inline-block; margin-bottom: 10px;
}
.section-head.text-center .title::after {
    content: ''; display: block; width: 48px; height: 3px;
    background: linear-gradient(90deg, var(--nd-gold), var(--nd-gold-dark));
    border-radius: 2px; margin: 8px auto 0;
}

/* =============================================================
   2-COLUMN LAYOUT (article + sidebar)
============================================================= */
.nd-layout {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 40px;
    align-items: start;
}

/* =============================================================
   ARTICLE — Meta
============================================================= */
.nd-article-meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.nd-category {
    font-family: var(--nd-font); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--nd-gold-dark); background: var(--nd-gold-light);
    border-radius: 20px; padding: 4px 12px;
}
.nd-meta-item {
    font-family: var(--nd-font); font-size: 0.8rem; font-weight: 500;
    color: var(--nd-muted); display: flex; align-items: center; gap: 5px;
}
.nd-meta-item i { font-size: 0.8rem; }

/* =============================================================
   ARTICLE — Title
============================================================= */
.nd-title {
    font-family: var(--nd-font); font-size: clamp(1.5rem,3vw,2.1rem);
    font-weight: 800; color: var(--nd-navy); line-height: 1.25;
    letter-spacing: -0.5px; margin-bottom: 22px;
}

/* =============================================================
   ARTICLE — Author row
============================================================= */
.nd-author-row {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 0; border-top: 1px solid var(--nd-border);
    border-bottom: 1px solid var(--nd-border); margin-bottom: 28px;
}
.nd-author-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--nd-navy-dark), var(--nd-navy));
    color: #fff; font-family: var(--nd-font); font-size: 1.1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.nd-author-info { display: flex; flex-direction: column; gap: 3px; }
.nd-author-name {
    font-family: var(--nd-font); font-size: 0.9rem; font-weight: 700;
    color: var(--nd-navy);
}
.nd-author-role {
    font-family: var(--nd-font); font-size: 0.78rem; color: var(--nd-muted);
}

/* =============================================================
   ARTICLE — Featured image
============================================================= */
.nd-featured-img-wrap {
    margin-bottom: 28px;
    border-radius: var(--nd-radius-lg); overflow: hidden;
    box-shadow: 0 6px 28px rgba(26,35,126,0.12);
}
.nd-featured-img {
    width: 100%; max-height: 460px; object-fit: cover; display: block;
    transition: transform 0.45s var(--nd-ease);
}
.nd-featured-img-wrap:hover .nd-featured-img { transform: scale(1.02); }
.nd-img-caption {
    font-family: var(--nd-font); font-size: 0.78rem; color: var(--nd-muted);
    text-align: center; padding: 10px 16px;
    background: var(--nd-gray); border-top: 1px solid var(--nd-border);
    margin: 0; font-style: italic;
}

/* =============================================================
   ARTICLE — Body content
============================================================= */
.nd-body {
    font-family: var(--nd-font); font-size: 0.97rem; color: var(--nd-text);
    line-height: 1.9; margin-bottom: 32px;
}
.nd-body h2, .nd-body h3, .nd-body h4 {
    font-family: var(--nd-font); font-weight: 800; color: var(--nd-navy);
    margin: 28px 0 12px; line-height: 1.3;
}
.nd-body h2 { font-size: 1.4rem; }
.nd-body h3 { font-size: 1.15rem; }
.nd-body h4 { font-size: 1rem; }
.nd-body p  { margin-bottom: 18px; }
.nd-body a  { color: var(--nd-navy); font-weight: 600; text-decoration: underline; }
.nd-body a:hover { color: var(--nd-gold-dark); }
.nd-body ul, .nd-body ol {
    padding-left: 24px; margin-bottom: 18px;
}
.nd-body li { margin-bottom: 6px; }
.nd-body blockquote {
    border-left: 4px solid var(--nd-gold);
    background: var(--nd-gold-light);
    border-radius: 0 var(--nd-radius) var(--nd-radius) 0;
    padding: 16px 20px; margin: 24px 0;
    font-style: italic; color: var(--nd-navy-dark);
}
.nd-body img {
    max-width: 100%; height: auto;
    border-radius: var(--nd-radius); margin: 16px 0;
    box-shadow: 0 4px 16px rgba(26,35,126,0.1);
}

/* =============================================================
   ARTICLE — Tags
============================================================= */
.nd-tags {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 28px; padding: 18px 0;
    border-top: 1px solid var(--nd-border); border-bottom: 1px solid var(--nd-border);
}
.nd-tags-label {
    font-family: var(--nd-font); font-size: 0.8rem; font-weight: 700;
    color: var(--nd-navy); display: flex; align-items: center; gap: 5px;
}
.nd-tag {
    font-family: var(--nd-font); font-size: 0.76rem; font-weight: 600;
    color: var(--nd-navy); background: var(--nd-navy-light);
    border-radius: 20px; padding: 4px 12px; text-decoration: none;
    transition: background var(--nd-dur), color var(--nd-dur);
}
.nd-tag:hover {
    background: var(--nd-navy); color: #fff; text-decoration: none;
}

/* =============================================================
   ARTICLE — Share bar
============================================================= */
.nd-share-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-bottom: 36px;
}
.nd-share-label {
    font-family: var(--nd-font); font-size: 0.84rem; font-weight: 700;
    color: var(--nd-navy); display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.nd-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.nd-share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--nd-font); font-size: 0.8rem; font-weight: 700;
    border-radius: 7px; padding: 9px 16px; text-decoration: none;
    transition: opacity var(--nd-dur), transform var(--nd-dur);
}
.nd-share-btn:hover { opacity: 0.88; transform: translateY(-2px); text-decoration: none; }
.nd-share-btn i { font-size: 0.95rem; }
.nd-share--fb { background: #1877f2; color: #fff; }
.nd-share--tw { background: #000;    color: #fff; }
.nd-share--wa { background: #25d366; color: #fff; }

/* =============================================================
   ARTICLE — Prev / Next nav
============================================================= */
.nd-article-nav {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; margin-top: 8px;
}
.nd-nav-link {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--nd-white); border: 1.5px solid var(--nd-border);
    border-radius: var(--nd-radius); padding: 18px 20px;
    text-decoration: none; transition: border-color var(--nd-dur),
    box-shadow var(--nd-dur), background var(--nd-dur);
}
.nd-nav-link:hover {
    border-color: var(--nd-navy); background: var(--nd-navy-light);
    box-shadow: 0 4px 16px rgba(26,35,126,0.1); text-decoration: none;
}
.nd-nav-next { text-align: right; }
.nd-nav-direction {
    font-family: var(--nd-font); font-size: 0.75rem; font-weight: 700;
    color: var(--nd-gold-dark); text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 5px;
}
.nd-nav-next .nd-nav-direction { justify-content: flex-end; }
.nd-nav-title {
    font-family: var(--nd-font); font-size: 0.86rem; font-weight: 600;
    color: var(--nd-navy); line-height: 1.4;
}

/* =============================================================
   SIDEBAR
============================================================= */
.nd-sidebar { display: flex; flex-direction: column; gap: 24px; }

.nd-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--nd-font); font-size: 0.84rem; font-weight: 700;
    color: var(--nd-navy); background: var(--nd-navy-light);
    border: 1.5px solid rgba(26,35,126,0.15); border-radius: 8px;
    padding: 12px 18px; text-decoration: none;
    transition: background var(--nd-dur), color var(--nd-dur);
}
.nd-back-btn:hover {
    background: var(--nd-navy); color: #fff; text-decoration: none;
}

/* Sidebar widget */
.nd-sidebar-widget {
    background: var(--nd-white); border: 1px solid var(--nd-border);
    border-radius: var(--nd-radius-lg); overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,35,126,0.07);
}
.nd-widget-title {
    font-family: var(--nd-font); font-size: 0.9rem; font-weight: 800;
    color: var(--nd-white); margin: 0;
    background: linear-gradient(135deg, var(--nd-navy-dark), var(--nd-navy));
    padding: 14px 18px;
    border-bottom: 3px solid var(--nd-gold);
}

/* Recent articles */
.nd-recent-list { display: flex; flex-direction: column; }
.nd-recent-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; text-decoration: none;
    border-bottom: 1px solid var(--nd-border);
    transition: background var(--nd-dur);
}
.nd-recent-item:last-child { border-bottom: none; }
.nd-recent-item:hover { background: var(--nd-navy-light); text-decoration: none; }

.nd-recent-img-wrap {
    width: 62px; height: 52px; border-radius: 8px;
    overflow: hidden; flex-shrink: 0;
}
.nd-recent-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.4s var(--nd-ease);
}
.nd-recent-item:hover .nd-recent-img { transform: scale(1.08); }

.nd-recent-content { flex: 1; min-width: 0; }
.nd-recent-date {
    font-family: var(--nd-font); font-size: 0.72rem; color: var(--nd-muted);
    display: block; margin-bottom: 4px;
}
.nd-recent-title {
    font-family: var(--nd-font); font-size: 0.82rem; font-weight: 700;
    color: var(--nd-navy); line-height: 1.4; margin: 0;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Category list */
.nd-category-list {
    list-style: none; padding: 8px 0; margin: 0;
}
.nd-category-list li { border-bottom: 1px solid var(--nd-border); }
.nd-category-list li:last-child { border-bottom: none; }
.nd-category-list li a {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--nd-font); font-size: 0.84rem; font-weight: 500;
    color: var(--nd-text); padding: 12px 18px; text-decoration: none;
    transition: background var(--nd-dur), color var(--nd-dur), padding-left var(--nd-dur);
}
.nd-category-list li a i { color: var(--nd-gold-dark); font-size: 0.9rem; }
.nd-category-list li a:hover {
    background: var(--nd-navy-light); color: var(--nd-navy);
    padding-left: 24px; text-decoration: none;
}

/* Sidebar CTA */
.nd-sidebar-cta {
    background: linear-gradient(135deg, var(--nd-navy-dark), var(--nd-navy));
    border-radius: var(--nd-radius-lg); padding: 28px 22px;
    text-align: center; position: relative; overflow: hidden;
}
.nd-sidebar-cta::before {
    content: ''; position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,0.06); pointer-events: none;
}
.nd-cta-icon {
    width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 14px;
    background: rgba(200,169,81,0.2);
    display: flex; align-items: center; justify-content: center;
}
.nd-cta-icon i { font-size: 1.4rem; color: var(--nd-gold); }
.nd-sidebar-cta h5 {
    font-family: var(--nd-font); font-size: 1rem; font-weight: 800;
    color: #fff; margin-bottom: 8px;
}
.nd-sidebar-cta p {
    font-family: var(--nd-font); font-size: 0.82rem;
    color: rgba(255,255,255,0.72); line-height: 1.65; margin-bottom: 18px;
}
.nd-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--nd-font); font-size: 0.85rem; font-weight: 700;
    color: var(--nd-navy-dark); background: var(--nd-gold);
    border-radius: 8px; padding: 12px 22px; text-decoration: none;
    transition: background var(--nd-dur), transform var(--nd-dur), box-shadow var(--nd-dur);
}
.nd-cta-btn:hover {
    background: #fff; color: var(--nd-navy-dark);
    transform: translateY(-2px); box-shadow: 0 6px 18px rgba(200,169,81,0.4);
    text-decoration: none;
}
.nd-cta-btn i { transition: transform var(--nd-dur); }
.nd-cta-btn:hover i { transform: translateX(3px); }

/* =============================================================
   RELATED ARTICLES
============================================================= */
.nd-related-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.nd-related-card {
    background: var(--nd-white); border: 1px solid var(--nd-border);
    border-radius: var(--nd-radius); overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,35,126,0.07);
    transition: transform var(--nd-dur), box-shadow var(--nd-dur);
}
.nd-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(26,35,126,0.13);
}
.nd-related-img-link {
    position: relative; height: 180px; display: block; overflow: hidden;
}
.nd-related-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s var(--nd-ease);
}
.nd-related-card:hover .nd-related-img { transform: scale(1.06); }
.nd-related-cat {
    position: absolute; top: 12px; left: 12px;
    font-family: var(--nd-font); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    background: var(--nd-gold); color: var(--nd-navy-dark);
    padding: 3px 9px; border-radius: 20px;
}
.nd-related-body { padding: 16px 18px 20px; }
.nd-related-date {
    font-family: var(--nd-font); font-size: 0.74rem; color: var(--nd-muted);
    display: flex; align-items: center; gap: 5px; margin-bottom: 8px;
}
.nd-related-title {
    font-family: var(--nd-font); font-size: 0.9rem; font-weight: 800;
    color: var(--nd-navy); line-height: 1.4; margin-bottom: 14px;
}
.nd-related-title a {
    color: inherit; text-decoration: none; transition: color var(--nd-dur);
}
.nd-related-title a:hover { color: var(--nd-gold-dark); }
.nd-related-link {
    font-family: var(--nd-font); font-size: 0.8rem; font-weight: 700;
    color: var(--nd-navy); text-decoration: none;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color var(--nd-dur);
}
.nd-related-link i { transition: transform var(--nd-dur); }
.nd-related-link:hover { color: var(--nd-gold-dark); text-decoration: none; }
.nd-related-link:hover i { transform: translateX(4px); }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1199px) {
    .nd-layout { grid-template-columns: 1fr 280px; gap: 32px; }
}
@media (max-width: 991px) {
    .nd-layout         { grid-template-columns: 1fr; }
    .nd-sidebar        { order: -1; flex-direction: row; flex-wrap: wrap; }
    .nd-back-btn       { width: 100%; }
    .nd-sidebar-widget { flex: 1; min-width: 260px; }
    .nd-sidebar-cta    { flex: 1; min-width: 220px; }
    .nd-related-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .content-inner   { padding: 40px 0; }
    .dlab-bnr-inr    { min-height: 220px; }
    .nd-sidebar      { flex-direction: column; }
    .nd-article-nav  { grid-template-columns: 1fr; }
    .nd-related-grid { grid-template-columns: 1fr; }
    .nd-share-bar    { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .nd-title        { font-size: 1.3rem; }
    .nd-share-buttons { flex-wrap: wrap; }
    .nd-share-btn    { flex: 1; justify-content: center; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — Events Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --ev-navy:        #1a237e;
    --ev-navy-dark:   #0d1257;
    --ev-navy-light:  #e8eaf6;
    --ev-gold:        #c8a951;
    --ev-gold-dark:   #a8893a;
    --ev-gold-light:  #f5edce;
    --ev-green:       #1b5e20;
    --ev-green-light: #e8f5e9;
    --ev-orange:      #e65100;
    --ev-orange-light:#fff3e0;
    --ev-purple:      #4a148c;
    --ev-purple-light:#ede7f6;
    --ev-red:         #b71c1c;
    --ev-red-light:   #ffebee;
    --ev-white:       #ffffff;
    --ev-gray:        #f5f6fa;
    --ev-text:        #3a3a4a;
    --ev-muted:       #6b7280;
    --ev-border:      #e4e6ef;
    --ev-font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ev-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ev-dur:         0.26s;
    --ev-radius:      12px;
    --ev-radius-lg:   18px;
}

/* =============================================================
   BANNER
============================================================= */
.dlab-bnr-inr {
    position: relative; background-size: cover;
    background-position: center; min-height: 330px;
    display: flex; align-items: center; padding: 56px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--ev-gold-dark), var(--ev-gold), var(--ev-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--ev-font); font-size: clamp(2rem,5vw,3rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--ev-font); font-size: 0.85rem; font-weight: 500;
    color: var(--ev-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--ev-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--ev-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--ev-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* =============================================================
   LAYOUT HELPERS
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 72px 0; }
.bg-white      { background: var(--ev-white) !important; }
.bg-gray       { background: var(--ev-gray)  !important; }
.text-center   { text-align: center !important; }

.section-head        { margin-bottom: 48px; }
.section-head .title {
    font-family: var(--ev-font); font-size: clamp(1.5rem,3vw,2rem);
    font-weight: 800; color: var(--ev-navy); margin-bottom: 12px;
    display: inline-block; letter-spacing: -0.4px;
}
.section-head.text-center .title::after {
    content: ''; display: block; width: 52px; height: 3px;
    background: linear-gradient(90deg, var(--ev-gold), var(--ev-gold-dark));
    border-radius: 2px; margin: 10px auto 0;
}
.section-head p {
    font-family: var(--ev-font); font-size: 0.95rem;
    color: var(--ev-muted); max-width: 540px; margin: 0 auto; line-height: 1.7;
}

/* =============================================================
   UPCOMING EVENTS — stacked card list
============================================================= */
.ev-upcoming-list {
    display: flex; flex-direction: column; gap: 20px;
}

.ev-card {
    display: flex; align-items: stretch; gap: 0;
    background: var(--ev-white);
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-radius-lg);
    overflow: hidden;
    box-shadow: 0 3px 18px rgba(26,35,126,0.08);
    transition: transform var(--ev-dur) var(--ev-ease),
                box-shadow var(--ev-dur) var(--ev-ease);
}
.ev-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 44px rgba(26,35,126,0.15);
}

/* ── Date badge (left panel) ── */
.ev-date-badge {
    background: linear-gradient(135deg, var(--ev-navy-dark), var(--ev-navy));
    min-width: 90px; padding: 0 20px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px; text-align: center; flex-shrink: 0;
    position: relative;
}
.ev-date-badge::after {
    content: ''; position: absolute;
    top: 0; right: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--ev-gold), var(--ev-gold-dark));
}
.ev-date-day {
    font-family: var(--ev-font); font-size: 2.2rem; font-weight: 800;
    color: var(--ev-gold); line-height: 1;
}
.ev-date-month {
    font-family: var(--ev-font); font-size: 0.75rem; font-weight: 700;
    color: var(--ev-white); text-transform: uppercase; letter-spacing: 1px;
}
.ev-date-year {
    font-family: var(--ev-font); font-size: 0.7rem; font-weight: 500;
    color: rgba(255,255,255,0.55); margin-top: 2px;
}

/* ── Divider ── */
.ev-card-divider {
    width: 1px; background: var(--ev-border);
    margin: 18px 0; flex-shrink: 0;
}

/* ── Event content ── */
.ev-card-content {
    flex: 1; padding: 22px 26px; display: flex; flex-direction: column; gap: 0;
}
.ev-card-top {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 10px;
}

/* Category pills */
.ev-category {
    font-family: var(--ev-font); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    border-radius: 20px; padding: 3px 11px;
}
.ev-cat--academic     { background: var(--ev-navy-light);   color: var(--ev-navy); }
.ev-cat--sports       { background: var(--ev-gold-light);   color: var(--ev-gold-dark); }
.ev-cat--cultural     { background: var(--ev-purple-light); color: var(--ev-purple); }
.ev-cat--ceremony     { background: var(--ev-green-light);  color: var(--ev-green); }
.ev-cat--announcement { background: var(--ev-orange-light); color: var(--ev-orange); }
.ev-cat--community    { background: var(--ev-red-light);    color: var(--ev-red); }

/* Today badge */
.ev-today-badge {
    font-family: var(--ev-font); font-size: 0.7rem; font-weight: 700;
    color: var(--ev-white); background: var(--ev-red);
    border-radius: 20px; padding: 3px 10px;
    display: inline-flex; align-items: center; gap: 4px;
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(183,28,28,0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(183,28,28,0); }
}

.ev-card-title {
    font-family: var(--ev-font); font-size: 1.05rem; font-weight: 800;
    color: var(--ev-navy); margin-bottom: 8px; line-height: 1.35;
}
.ev-card-desc {
    font-family: var(--ev-font); font-size: 0.87rem;
    color: var(--ev-muted); line-height: 1.75; margin-bottom: 14px;
}
.ev-card-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
}
.ev-meta-item {
    font-family: var(--ev-font); font-size: 0.8rem; font-weight: 600;
    color: var(--ev-navy); display: flex; align-items: center; gap: 6px;
}
.ev-meta-item i { color: var(--ev-gold-dark); font-size: 0.85rem; }

/* ── Action column (right) ── */
.ev-card-action {
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: space-between;
    padding: 22px 26px 22px 12px; gap: 16px; flex-shrink: 0;
}
.btn-ev-details {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ev-font); font-size: 0.83rem; font-weight: 700;
    color: var(--ev-white);
    background: linear-gradient(135deg, var(--ev-navy-dark), var(--ev-navy));
    border-radius: 8px; padding: 11px 18px; text-decoration: none;
    white-space: nowrap;
    transition: background var(--ev-dur), transform var(--ev-dur), box-shadow var(--ev-dur);
}
.btn-ev-details i { transition: transform var(--ev-dur); }
.btn-ev-details:hover {
    background: linear-gradient(135deg, var(--ev-gold-dark), var(--ev-gold));
    color: var(--ev-navy-dark); transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(200,169,81,0.35); text-decoration: none;
}
.btn-ev-details:hover i { transform: translateX(3px); }

.ev-countdown {
    font-family: var(--ev-font); font-size: 0.76rem; font-weight: 600;
    color: var(--ev-muted); display: flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.ev-countdown i { color: var(--ev-gold-dark); }

/* =============================================================
   EMPTY STATE
============================================================= */
.ev-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 72px 24px; text-align: center;
}
.ev-empty i    { font-size: 3.5rem; color: var(--ev-border); display: block; }
.ev-empty h4   {
    font-family: var(--ev-font); font-size: 1.1rem; font-weight: 700;
    color: var(--ev-navy); margin: 0;
}
.ev-empty p    {
    font-family: var(--ev-font); font-size: 0.9rem; color: var(--ev-muted);
    max-width: 420px; line-height: 1.75; margin: 0;
}

/* =============================================================
   PAST EVENTS — card grid
============================================================= */
.ev-past-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ev-past-card {
    background: var(--ev-white);
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-radius);
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(26,35,126,0.07);
    display: flex; flex-direction: column;
    transition: transform var(--ev-dur) var(--ev-ease),
                box-shadow var(--ev-dur) var(--ev-ease),
                opacity    var(--ev-dur) var(--ev-ease);
    opacity: 0.92;
}
.ev-past-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(26,35,126,0.13);
    opacity: 1;
}

.ev-past-img-wrap {
    position: relative; height: 190px; overflow: hidden; flex-shrink: 0;
}
.ev-past-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(20%);
    transition: transform 0.5s var(--ev-ease), filter 0.4s var(--ev-ease);
}
.ev-past-card:hover .ev-past-img { transform: scale(1.06); filter: grayscale(0%); }

/* Placeholder when no image */
.ev-past-img-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--ev-navy-dark), var(--ev-navy));
    display: flex; align-items: center; justify-content: center;
}
.ev-past-img-placeholder i { font-size: 2.5rem; color: rgba(255,255,255,0.25); }

.ev-past-cat-badge {
    position: absolute; top: 12px; left: 12px;
    font-family: var(--ev-font); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    background: var(--ev-navy); color: var(--ev-white);
    padding: 4px 10px; border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Past card body */
.ev-past-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }

.ev-past-meta {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
}
.ev-past-date, .ev-past-venue {
    font-family: var(--ev-font); font-size: 0.76rem; font-weight: 600;
    color: var(--ev-muted); display: flex; align-items: center; gap: 5px;
}
.ev-past-date i, .ev-past-venue i { color: var(--ev-gold-dark); font-size: 0.8rem; }

.ev-past-title {
    font-family: var(--ev-font); font-size: 0.95rem; font-weight: 800;
    color: var(--ev-navy); margin-bottom: 8px; line-height: 1.4;
}
.ev-past-desc {
    font-family: var(--ev-font); font-size: 0.84rem; color: var(--ev-muted);
    line-height: 1.75; margin-bottom: 16px; flex: 1;
}
.ev-past-link {
    font-family: var(--ev-font); font-size: 0.8rem; font-weight: 700;
    color: var(--ev-navy); text-decoration: none; margin-top: auto;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color var(--ev-dur);
}
.ev-past-link i { transition: transform var(--ev-dur); }
.ev-past-link:hover { color: var(--ev-gold-dark); text-decoration: none; }
.ev-past-link:hover i { transform: translateX(4px); }

/* =============================================================
   CTA STRIP
============================================================= */
.ev-cta-strip {
    background: linear-gradient(135deg, var(--ev-navy-dark), var(--ev-navy));
    position: relative; overflow: hidden;
}
.ev-cta-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.ev-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; padding: 44px 0; position: relative; z-index: 1; flex-wrap: wrap;
}
.ev-cta-text h4 {
    font-family: var(--ev-font); font-size: 1.2rem; font-weight: 800;
    color: #fff; margin-bottom: 6px;
}
.ev-cta-text p {
    font-family: var(--ev-font); font-size: 0.9rem;
    color: rgba(255,255,255,0.72); line-height: 1.65; margin: 0; max-width: 520px;
}
.btn-ev-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ev-font); font-size: 0.9rem; font-weight: 700;
    color: var(--ev-navy-dark); background: var(--ev-gold);
    border: none; border-radius: 8px; padding: 14px 28px;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: background var(--ev-dur), transform var(--ev-dur), box-shadow var(--ev-dur);
}
.btn-ev-cta:hover {
    background: #fff; color: var(--ev-navy-dark);
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,169,81,0.35);
    text-decoration: none;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991px) {
    .content-inner      { padding: 52px 0; }
    .ev-past-grid       { grid-template-columns: repeat(2, 1fr); }
    .ev-card-action     { padding: 18px 18px 18px 8px; }
}

@media (max-width: 767px) {
    .content-inner      { padding: 40px 0; }
    .dlab-bnr-inr       { min-height: 240px; }
    .ev-past-grid       { grid-template-columns: 1fr; }
    .ev-cta-inner       { flex-direction: column; }
    .btn-ev-cta         { width: 100%; justify-content: center; }

    /* Stack the event card on mobile */
    .ev-card            { flex-direction: column; }
    .ev-date-badge {
        flex-direction: row; gap: 10px; min-width: auto;
        padding: 14px 20px; justify-content: flex-start;
        border-radius: 0;
    }
    .ev-date-badge::after {
        top: auto; right: 0; left: 0; bottom: 0;
        width: 100%; height: 4px;
        background: linear-gradient(90deg, var(--ev-gold), var(--ev-gold-dark));
    }
    .ev-date-day   { font-size: 1.5rem; }
    .ev-card-divider { display: none; }
    .ev-card-content { padding: 18px 20px 4px; }
    .ev-card-action {
        flex-direction: row; align-items: center; justify-content: space-between;
        padding: 12px 20px 20px; flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .dlab-bnr-inr  { min-height: 200px; }
    .ev-card-action { gap: 10px; }
    .btn-ev-details { width: 100%; justify-content: center; }
}
/* =============================================================
   PANEKAR SECONDARY SCHOOL — Leadership & Staff Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --ld-navy:        #1a237e;
    --ld-navy-dark:   #0d1257;
    --ld-navy-light:  #e8eaf6;
    --ld-gold:        #c8a951;
    --ld-gold-dark:   #a8893a;
    --ld-gold-light:  #f5edce;
    --ld-white:       #ffffff;
    --ld-gray:        #f5f6fa;
    --ld-text:        #3a3a4a;
    --ld-muted:       #6b7280;
    --ld-border:      #e4e6ef;
    --ld-font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ld-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ld-dur:         0.26s;
    --ld-radius:      12px;
    --ld-radius-lg:   18px;
}

/* =============================================================
   BANNER
============================================================= */
.dlab-bnr-inr {
    position: relative; background-size: cover; background-position: center;
    min-height: 330px; display: flex; align-items: center; padding: 56px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--ld-gold-dark), var(--ld-gold), var(--ld-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--ld-font); font-size: clamp(2rem,5vw,3rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--ld-font); font-size: 0.85rem; font-weight: 500;
    color: var(--ld-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--ld-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--ld-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--ld-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* =============================================================
   LAYOUT HELPERS
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 72px 0; }
.bg-white      { background: var(--ld-white) !important; }
.bg-gray       { background: var(--ld-gray)  !important; }
.text-center   { text-align: center !important; }
.section-head  { margin-bottom: 48px; }
.section-head .title {
    font-family: var(--ld-font); font-size: clamp(1.5rem,3vw,2rem);
    font-weight: 800; color: var(--ld-navy); display: inline-block;
    letter-spacing: -0.4px; margin-bottom: 12px;
}
.section-head.text-center .title::after {
    content: ''; display: block; width: 52px; height: 3px;
    background: linear-gradient(90deg, var(--ld-gold), var(--ld-gold-dark));
    border-radius: 2px; margin: 10px auto 0;
}
.section-head p {
    font-family: var(--ld-font); font-size: 0.95rem;
    color: var(--ld-muted); max-width: 540px; margin: 0 auto; line-height: 1.75;
}

/* =============================================================
   INTRO STRIP
============================================================= */
.ld-intro-strip {
    background: linear-gradient(135deg, var(--ld-navy-dark), var(--ld-navy));
    position: relative; overflow: hidden;
}
.ld-intro-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.ld-intro-inner {
    display: flex; align-items: center; gap: 0; padding: 36px 0;
    position: relative; z-index: 1;
}
.ld-intro-stat {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 0 40px; flex-shrink: 0;
}
.ld-stat-num {
    font-family: var(--ld-font); font-size: 2.6rem; font-weight: 900;
    color: var(--ld-gold); line-height: 1;
}
.ld-stat-label {
    font-family: var(--ld-font); font-size: 0.8rem; font-weight: 600;
    color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 1px;
    margin-top: 4px;
}
.ld-intro-divider {
    width: 1px; height: 60px; background: rgba(255,255,255,0.15); flex-shrink: 0;
}
.ld-intro-text {
    flex: 1; padding: 0 40px;
}
.ld-intro-text p {
    font-family: var(--ld-font); font-size: 0.92rem;
    color: rgba(255,255,255,0.75); line-height: 1.8; margin: 0;
}

/* =============================================================
   LEADERS GRID  (auto-fit: 1 large + rest equal)
============================================================= */
.ld-leaders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

/* Featured card (first leader — Principal) is wider */
.ld-leader-card--featured {
    grid-column: span 2;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
}

.ld-leader-card {
    background: var(--ld-white);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 20px rgba(26,35,126,0.09);
    transition: transform var(--ld-dur) var(--ld-ease),
                box-shadow var(--ld-dur) var(--ld-ease);
    position: relative;
}
.ld-leader-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--ld-gold-dark), var(--ld-gold));
}
.ld-leader-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(26,35,126,0.16);
}

/* Photo area */
.ld-leader-photo-wrap {
    position: relative; overflow: hidden;
    height: 260px; flex-shrink: 0;
}
.ld-leader-card--featured .ld-leader-photo-wrap {
    width: 280px; height: auto; flex-shrink: 0;
}
.ld-leader-photo {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s var(--ld-ease);
}
.ld-leader-card:hover .ld-leader-photo { transform: scale(1.05); }
.ld-leader-photo-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(13,18,87,0.35) 0%, transparent 60%);
}

/* Initials fallback */
.ld-leader-initials {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--ld-navy-dark), var(--ld-navy));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ld-font); font-size: 4rem; font-weight: 900;
    color: rgba(200,169,81,0.45);
}

/* Info block */
.ld-leader-info {
    padding: 24px 26px; flex: 1; display: flex; flex-direction: column; gap: 0;
}
.ld-leader-role {
    font-family: var(--ld-font); font-size: 0.7rem; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--ld-gold-dark); background: var(--ld-gold-light);
    border-radius: 20px; padding: 4px 12px;
    display: inline-block; margin-bottom: 10px;
}
.ld-leader-name {
    font-family: var(--ld-font); font-size: 1.1rem; font-weight: 800;
    color: var(--ld-navy); margin-bottom: 8px; line-height: 1.3;
}
.ld-leader-card--featured .ld-leader-name { font-size: 1.35rem; }
.ld-leader-qual {
    font-family: var(--ld-font); font-size: 0.8rem; color: var(--ld-muted);
    display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.ld-leader-qual i { color: var(--ld-gold-dark); }
.ld-leader-bio {
    font-family: var(--ld-font); font-size: 0.86rem; color: var(--ld-muted);
    line-height: 1.8; margin-bottom: 14px; flex: 1;
}
.ld-leader-email {
    font-family: var(--ld-font); font-size: 0.8rem; font-weight: 600;
    color: var(--ld-navy); text-decoration: none;
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ld-border);
    transition: color var(--ld-dur);
}
.ld-leader-email i { color: var(--ld-gold-dark); }
.ld-leader-email:hover { color: var(--ld-gold-dark); text-decoration: none; }

/* =============================================================
   DEPARTMENT FILTER PILLS
============================================================= */
.ld-filter-row {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center; margin-bottom: 40px;
}
.ld-pill {
    font-family: var(--ld-font); font-size: 0.8rem; font-weight: 600;
    color: var(--ld-muted); background: var(--ld-white);
    border: 1.5px solid var(--ld-border); border-radius: 20px;
    padding: 8px 18px; text-decoration: none;
    transition: border-color var(--ld-dur), color var(--ld-dur),
                background var(--ld-dur), box-shadow var(--ld-dur);
}
.ld-pill:hover {
    border-color: var(--ld-navy); color: var(--ld-navy); text-decoration: none;
}
.ld-pill--active {
    background: var(--ld-navy); color: #fff !important;
    border-color: var(--ld-navy);
    box-shadow: 0 3px 12px rgba(26,35,126,0.25);
}

/* =============================================================
   TEACHERS GRID — 4 columns
============================================================= */
.ld-teachers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 48px;
}

.ld-teacher-card {
    background: var(--ld-white);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 2px 12px rgba(26,35,126,0.07);
    transition: transform var(--ld-dur) var(--ld-ease),
                box-shadow var(--ld-dur) var(--ld-ease);
}
.ld-teacher-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 38px rgba(26,35,126,0.14);
}

/* Teacher photo */
.ld-teacher-photo-wrap {
    position: relative; height: 200px; overflow: hidden; flex-shrink: 0;
}
.ld-teacher-photo {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s var(--ld-ease);
}
.ld-teacher-card:hover .ld-teacher-photo { transform: scale(1.07); }

/* Initials fallback */
.ld-teacher-initials {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--ld-navy-dark), var(--ld-navy));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ld-font); font-size: 2.8rem; font-weight: 900;
    color: rgba(200,169,81,0.4);
}

/* Department badge on photo */
.ld-dept-badge {
    position: absolute; bottom: 10px; left: 10px;
    font-family: var(--ld-font); font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.6px; text-transform: uppercase;
    background: var(--ld-navy); color: var(--ld-white);
    padding: 3px 9px; border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Teacher info */
.ld-teacher-info {
    padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.ld-teacher-name {
    font-family: var(--ld-font); font-size: 0.92rem; font-weight: 800;
    color: var(--ld-navy); margin-bottom: 3px; line-height: 1.3;
}
.ld-teacher-role {
    font-family: var(--ld-font); font-size: 0.75rem; font-weight: 600;
    color: var(--ld-muted); display: block; margin-bottom: 8px;
}

/* Subject tags */
.ld-teacher-subjects {
    display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px;
}
.ld-subject-tag {
    font-family: var(--ld-font); font-size: 0.68rem; font-weight: 600;
    color: var(--ld-navy); background: var(--ld-navy-light);
    border-radius: 20px; padding: 3px 9px;
}

/* Qualification line */
.ld-teacher-qual {
    font-family: var(--ld-font); font-size: 0.75rem; color: var(--ld-muted);
    display: flex; align-items: center; gap: 5px; margin-top: auto;
    padding-top: 10px; border-top: 1px solid var(--ld-border);
}
.ld-teacher-qual i { color: var(--ld-gold-dark); font-size: 0.8rem; }

/* =============================================================
   PAGINATION
============================================================= */
.ld-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
}
.ld-page-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ld-font); font-size: 0.85rem; font-weight: 600;
    color: var(--ld-navy); background: var(--ld-white);
    border: 1.5px solid var(--ld-border); border-radius: 8px;
    padding: 10px 18px; text-decoration: none;
    transition: background var(--ld-dur), border-color var(--ld-dur), color var(--ld-dur);
}
.ld-page-btn:hover {
    background: var(--ld-navy); color: #fff;
    border-color: var(--ld-navy); text-decoration: none;
}
.ld-page-numbers { display: flex; gap: 6px; }
.ld-page-num {
    width: 42px; height: 42px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ld-font); font-size: 0.85rem; font-weight: 600;
    color: var(--ld-navy); background: var(--ld-white);
    border: 1.5px solid var(--ld-border); text-decoration: none;
    transition: background var(--ld-dur), color var(--ld-dur), border-color var(--ld-dur);
}
.ld-page-num:hover {
    background: var(--ld-navy-light); text-decoration: none;
}
.ld-page-num--active {
    background: var(--ld-navy); color: #fff !important;
    border-color: var(--ld-navy);
    box-shadow: 0 3px 12px rgba(26,35,126,0.3);
}

/* =============================================================
   EMPTY STATE
============================================================= */
.ld-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 64px 24px; text-align: center;
}
.ld-empty i { font-size: 3.5rem; color: var(--ld-border); }
.ld-empty h4 {
    font-family: var(--ld-font); font-size: 1.05rem; font-weight: 700;
    color: var(--ld-navy); margin: 0;
}
.ld-empty p {
    font-family: var(--ld-font); font-size: 0.9rem; color: var(--ld-muted);
    max-width: 380px; line-height: 1.7; margin: 0;
}
.ld-empty-link {
    font-family: var(--ld-font); font-size: 0.85rem; font-weight: 700;
    color: var(--ld-white); background: var(--ld-navy);
    border-radius: 8px; padding: 10px 22px; text-decoration: none;
    transition: background var(--ld-dur);
}
.ld-empty-link:hover { background: var(--ld-navy-dark); text-decoration: none; }

/* =============================================================
   CTA STRIP
============================================================= */
.ld-cta-strip {
    background: linear-gradient(135deg, var(--ld-navy-dark), var(--ld-navy));
    position: relative; overflow: hidden;
}
.ld-cta-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.ld-cta-inner {
    display: flex; align-items: center; gap: 24px; padding: 44px 0;
    position: relative; z-index: 1; flex-wrap: wrap;
}
.ld-cta-icon {
    width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0;
    background: rgba(200,169,81,0.18);
    display: flex; align-items: center; justify-content: center;
}
.ld-cta-icon i { font-size: 1.6rem; color: var(--ld-gold); }
.ld-cta-text { flex: 1; min-width: 220px; }
.ld-cta-text h4 {
    font-family: var(--ld-font); font-size: 1.15rem; font-weight: 800;
    color: #fff; margin-bottom: 6px;
}
.ld-cta-text p {
    font-family: var(--ld-font); font-size: 0.88rem;
    color: rgba(255,255,255,0.7); line-height: 1.65; margin: 0;
}
.btn-ld-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ld-font); font-size: 0.9rem; font-weight: 700;
    color: var(--ld-navy-dark); background: var(--ld-gold);
    border-radius: 8px; padding: 14px 28px; text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
    transition: background var(--ld-dur), transform var(--ld-dur), box-shadow var(--ld-dur);
}
.btn-ld-cta:hover {
    background: #fff; color: var(--ld-navy-dark);
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200,169,81,0.35);
    text-decoration: none;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1199px) {
    .ld-teachers-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    .content-inner              { padding: 52px 0; }
    .ld-teachers-grid           { grid-template-columns: repeat(2, 1fr); }
    .ld-leader-card--featured   { grid-column: span 1; flex-direction: column !important; }
    .ld-leader-card--featured .ld-leader-photo-wrap { width: 100%; height: 240px; }
    .ld-intro-inner             { flex-wrap: wrap; gap: 20px; }
    .ld-intro-text              { flex: 100%; padding: 0 16px; }
    .ld-intro-divider           { display: none; }
    .ld-intro-stat              { flex: 1; }
}

@media (max-width: 767px) {
    .dlab-bnr-inr     { min-height: 240px; }
    .content-inner    { padding: 40px 0; }
    .ld-teachers-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .ld-leaders-grid  { grid-template-columns: 1fr; }
    .ld-cta-inner     { flex-direction: column; text-align: center; }
    .btn-ld-cta       { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .ld-teachers-grid { grid-template-columns: 1fr; }
    .ld-intro-stat    { flex: 100%; }
    .ld-page-btn span { display: none; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — Contact Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --ct-navy:       #1a237e;
    --ct-navy-dark:  #0d1257;
    --ct-navy-light: #e8eaf6;
    --ct-gold:       #c8a951;
    --ct-gold-dark:  #a8893a;
    --ct-gold-light: #f5edce;
    --ct-white:      #ffffff;
    --ct-gray:       #f5f6fa;
    --ct-text:       #3a3a4a;
    --ct-muted:      #6b7280;
    --ct-border:     #e4e6ef;
    --ct-success:    #1b5e20;
    --ct-success-bg: #e8f5e9;
    --ct-error:      #b71c1c;
    --ct-error-bg:   #ffebee;
    --ct-font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ct-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --ct-dur:        0.24s;
    --ct-radius:     10px;
    --ct-radius-lg:  16px;
}

/* =============================================================
   BANNER
============================================================= */
.dlab-bnr-inr {
    position: relative; background-size: cover; background-position: center;
    min-height: 320px; display: flex; align-items: center; padding: 56px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--ct-gold-dark), var(--ct-gold), var(--ct-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--ct-font); font-size: clamp(2rem,5vw,3rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--ct-font); font-size: 0.85rem; font-weight: 500;
    color: var(--ct-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--ct-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--ct-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--ct-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* =============================================================
   LAYOUT HELPERS
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 72px 0; }
.bg-white      { background: var(--ct-white) !important; }

/* =============================================================
   INFO STRIP — 4 cards
============================================================= */
.ct-info-strip {
    background: linear-gradient(135deg, var(--ct-navy-dark), var(--ct-navy));
    position: relative; overflow: hidden;
}
.ct-info-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.ct-info-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0; position: relative; z-index: 1;
}
.ct-info-card {
    display: flex; align-items: flex-start; gap: 18px;
    padding: 36px 28px;
    border-right: 1px solid rgba(255,255,255,0.1);
    transition: background var(--ct-dur);
}
.ct-info-card:last-child { border-right: none; }
.ct-info-card:hover { background: rgba(255,255,255,0.05); }
.ct-info-icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: rgba(200,169,81,0.18);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(200,169,81,0.3);
    transition: background var(--ct-dur);
}
.ct-info-card:hover .ct-info-icon { background: rgba(200,169,81,0.28); }
.ct-info-icon i { font-size: 1.3rem; color: var(--ct-gold); }
.ct-info-content h5 {
    font-family: var(--ct-font); font-size: 0.78rem; font-weight: 800;
    color: var(--ct-gold); text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 6px;
}
.ct-info-content p {
    font-family: var(--ct-font); font-size: 0.86rem;
    color: rgba(255,255,255,0.78); line-height: 1.75; margin: 0;
}
.ct-info-content p a {
    color: rgba(255,255,255,0.85); text-decoration: none;
    transition: color var(--ct-dur);
}
.ct-info-content p a:hover { color: var(--ct-gold); }

/* =============================================================
   FORM + SIDEBAR LAYOUT
============================================================= */
.ct-main-layout {
    display: grid; grid-template-columns: 1fr 340px; gap: 48px;
    align-items: start;
}

/* =============================================================
   CONTACT FORM
============================================================= */
.ct-form-header { margin-bottom: 28px; }
.ct-form-title {
    font-family: var(--ct-font); font-size: clamp(1.4rem,2.5vw,1.9rem);
    font-weight: 800; color: var(--ct-navy); margin-bottom: 8px; letter-spacing: -0.4px;
    position: relative; display: inline-block;
}
.ct-form-title::after {
    content: ''; position: absolute; left: 0; bottom: -6px;
    width: 48px; height: 3px;
    background: linear-gradient(90deg, var(--ct-gold), var(--ct-gold-dark));
    border-radius: 2px;
}
.ct-form-header p {
    font-family: var(--ct-font); font-size: 0.9rem; color: var(--ct-muted);
    line-height: 1.7; margin: 16px 0 0;
}

/* Alert messages */
.ct-alert {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--ct-font); font-size: 0.88rem; font-weight: 600;
    padding: 14px 18px; border-radius: var(--ct-radius);
    margin-bottom: 20px; border-left: 4px solid;
}
.ct-alert i { font-size: 1.1rem; flex-shrink: 0; }
.ct-alert--success {
    color: var(--ct-success); background: var(--ct-success-bg);
    border-color: var(--ct-success);
}
.ct-alert--error {
    color: var(--ct-error); background: var(--ct-error-bg);
    border-color: var(--ct-error);
}

.ct-form { display: flex; flex-direction: column; gap: 18px; }

.ct-form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.ct-field-group { display: flex; flex-direction: column; gap: 6px; }

.ct-label {
    font-family: var(--ct-font); font-size: 0.82rem; font-weight: 700;
    color: var(--ct-navy);
}
.ct-required { color: var(--ct-error); margin-left: 2px; }

.ct-input-wrap { position: relative; }
.ct-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 0.9rem; color: var(--ct-muted); pointer-events: none;
    transition: color var(--ct-dur);
}
.ct-input-icon--textarea { top: 16px; transform: none; }

.ct-input {
    width: 100%; font-family: var(--ct-font); font-size: 0.88rem;
    color: var(--ct-text); background: var(--ct-white);
    border: 1.5px solid var(--ct-border); border-radius: var(--ct-radius);
    padding: 12px 14px 12px 40px; outline: none; appearance: none;
    transition: border-color var(--ct-dur), box-shadow var(--ct-dur);
}
.ct-input:focus {
    border-color: var(--ct-navy);
    box-shadow: 0 0 0 3px rgba(26,35,126,0.1);
}
.ct-input:focus + .ct-input-icon,
.ct-input-wrap:focus-within .ct-input-icon { color: var(--ct-navy); }
.ct-input::placeholder { color: #adb5bd; }
.ct-textarea { padding-top: 14px; padding-left: 40px; resize: vertical; min-height: 140px; }

/* Select arrow */
.ct-select-wrap { position: relative; }
.ct-select { cursor: pointer; padding-right: 36px; }
.ct-select-arrow {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 0.75rem; color: var(--ct-muted); pointer-events: none;
}

.ct-form-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-top: 8px;
}
.ct-privacy-note {
    font-family: var(--ct-font); font-size: 0.78rem; color: var(--ct-muted);
    display: flex; align-items: center; gap: 6px; margin: 0;
}
.ct-privacy-note i { color: var(--ct-gold-dark); }
.btn-ct-submit {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--ct-font); font-size: 0.9rem; font-weight: 700;
    color: var(--ct-white);
    background: linear-gradient(135deg, var(--ct-navy-dark), var(--ct-navy));
    border: none; border-radius: var(--ct-radius);
    padding: 14px 28px; cursor: pointer; white-space: nowrap;
    transition: background var(--ct-dur), transform var(--ct-dur), box-shadow var(--ct-dur);
}
.btn-ct-submit i { transition: transform var(--ct-dur); }
.btn-ct-submit:hover {
    background: linear-gradient(135deg, var(--ct-gold-dark), var(--ct-gold));
    color: var(--ct-navy-dark); transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(200,169,81,0.35);
}
.btn-ct-submit:hover i { transform: translateX(3px); }

/* =============================================================
   SIDEBAR
============================================================= */
.ct-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* Map placeholder */
.ct-map-wrap {
    border-radius: var(--ct-radius-lg); overflow: hidden;
    background: linear-gradient(135deg, var(--ct-navy-dark), var(--ct-navy));
    min-height: 240px; position: relative;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--ct-border);
    box-shadow: 0 4px 18px rgba(26,35,126,0.12);
}
.ct-map-wrap::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, transparent, transparent 30px,
        rgba(200,169,81,0.04) 30px, rgba(200,169,81,0.04) 60px);
    pointer-events: none;
}
.ct-map-overlay {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 32px 24px; text-align: center;
}
.ct-map-pin {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(200,169,81,0.2); border: 2px solid var(--ct-gold);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
    animation: pin-pulse 2.5s infinite;
}
@keyframes pin-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,169,81,0.35); }
    50%       { box-shadow: 0 0 0 12px rgba(200,169,81,0); }
}
.ct-map-pin i { font-size: 1.4rem; color: var(--ct-gold); }
.ct-map-label {
    font-family: var(--ct-font); font-size: 0.86rem; font-weight: 600;
    color: rgba(255,255,255,0.85); line-height: 1.6; margin: 0;
}
.ct-map-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ct-font); font-size: 0.8rem; font-weight: 700;
    color: var(--ct-navy-dark); background: var(--ct-gold);
    border-radius: 8px; padding: 10px 18px; text-decoration: none; margin-top: 4px;
    transition: background var(--ct-dur), transform var(--ct-dur);
}
.ct-map-btn:hover {
    background: #fff; color: var(--ct-navy-dark);
    transform: translateY(-2px); text-decoration: none;
}

/* Quick links widget */
.ct-quick-links {
    background: var(--ct-white); border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg); overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,35,126,0.07);
}
.ct-quick-title {
    font-family: var(--ct-font); font-size: 0.88rem; font-weight: 800;
    color: var(--ct-white); margin: 0;
    background: linear-gradient(135deg, var(--ct-navy-dark), var(--ct-navy));
    padding: 14px 18px; border-bottom: 3px solid var(--ct-gold);
}
.ct-quick-list { list-style: none; padding: 6px 0; margin: 0; }
.ct-quick-list li { border-bottom: 1px solid var(--ct-border); }
.ct-quick-list li:last-child { border-bottom: none; }
.ct-quick-list li a {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--ct-font); font-size: 0.84rem; font-weight: 500;
    color: var(--ct-text); padding: 12px 18px; text-decoration: none;
    transition: background var(--ct-dur), color var(--ct-dur), padding-left var(--ct-dur);
}
.ct-quick-list li a i { color: var(--ct-gold-dark); font-size: 0.9rem; flex-shrink: 0; }
.ct-quick-list li a:hover {
    background: var(--ct-navy-light); color: var(--ct-navy);
    padding-left: 24px; text-decoration: none;
}

/* Social card */
.ct-social-card {
    background: var(--ct-white); border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg); padding: 22px 20px;
    box-shadow: 0 2px 12px rgba(26,35,126,0.07); text-align: center;
}
.ct-social-title {
    font-family: var(--ct-font); font-size: 0.88rem; font-weight: 800;
    color: var(--ct-navy); margin-bottom: 14px;
}
.ct-social-links { display: flex; justify-content: center; gap: 10px; }
.ct-social-btn {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: #fff; text-decoration: none;
    transition: opacity var(--ct-dur), transform var(--ct-dur);
}
.ct-social-btn:hover { opacity: 0.85; transform: translateY(-3px); text-decoration: none; }
.ct-social--fb { background: #1877f2; }
.ct-social--tw { background: #000; }
.ct-social--wa { background: #25d366; }
.ct-social--yt { background: #ff0000; }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1199px) {
    .ct-main-layout { grid-template-columns: 1fr 300px; gap: 36px; }
    .ct-info-grid   { grid-template-columns: repeat(2, 1fr); }
    .ct-info-card   { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .ct-info-card:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 991px) {
    .content-inner  { padding: 52px 0; }
    .ct-main-layout { grid-template-columns: 1fr; }
    .ct-sidebar     { flex-direction: row; flex-wrap: wrap; gap: 20px; }
    .ct-map-wrap    { flex: 1; min-width: 240px; }
    .ct-quick-links { flex: 1; min-width: 240px; }
    .ct-social-card { width: 100%; }
}
@media (max-width: 767px) {
    .dlab-bnr-inr  { min-height: 240px; }
    .content-inner { padding: 40px 0; }
    .ct-info-grid  { grid-template-columns: 1fr; }
    .ct-info-card  { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .ct-info-card:nth-child(odd) { border-right: none; }
    .ct-form-row   { grid-template-columns: 1fr; }
    .ct-form-footer { flex-direction: column; align-items: flex-start; }
    .btn-ct-submit  { width: 100%; justify-content: center; }
    .ct-sidebar     { flex-direction: column; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — FAQ Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --fq-navy:       #1a237e;
    --fq-navy-dark:  #0d1257;
    --fq-navy-light: #e8eaf6;
    --fq-gold:       #c8a951;
    --fq-gold-dark:  #a8893a;
    --fq-gold-light: #f5edce;
    --fq-white:      #ffffff;
    --fq-gray:       #f5f6fa;
    --fq-text:       #3a3a4a;
    --fq-muted:      #6b7280;
    --fq-border:     #e4e6ef;
    --fq-font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fq-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --fq-dur:        0.26s;
    --fq-radius:     10px;
    --fq-radius-lg:  16px;
}

/* =============================================================
   BANNER
============================================================= */
.dlab-bnr-inr {
    position: relative; background-size: cover; background-position: center;
    min-height: 320px; display: flex; align-items: center; padding: 56px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.85), rgba(26,35,126,0.65));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--fq-gold-dark), var(--fq-gold), var(--fq-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--fq-font); font-size: clamp(1.8rem,4vw,2.8rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.banner-sub {
    font-family: var(--fq-font); font-size: 0.85rem; font-weight: 500;
    color: var(--fq-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--fq-font); font-size: 0.85rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--fq-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--fq-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* =============================================================
   LAYOUT HELPERS
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 64px 0; }
.bg-white      { background: var(--fq-white) !important; }

/* =============================================================
   SEARCH STRIP
============================================================= */
.fq-search-strip {
    background: var(--fq-gray);
    border-bottom: 1px solid var(--fq-border);
    padding: 28px 0;
}
.fq-search-wrap {
    position: relative; max-width: 560px; margin: 0 auto;
    display: flex; align-items: center;
}
.fq-search-icon {
    position: absolute; left: 18px; font-size: 1rem;
    color: var(--fq-muted); pointer-events: none;
}
.fq-search-input {
    width: 100%; font-family: var(--fq-font); font-size: 0.95rem;
    color: var(--fq-text); background: var(--fq-white);
    border: 1.5px solid var(--fq-border); border-radius: 50px;
    padding: 14px 48px; outline: none;
    transition: border-color var(--fq-dur), box-shadow var(--fq-dur);
    box-shadow: 0 2px 12px rgba(26,35,126,0.07);
}
.fq-search-input:focus {
    border-color: var(--fq-navy);
    box-shadow: 0 0 0 3px rgba(26,35,126,0.1), 0 2px 12px rgba(26,35,126,0.07);
}
.fq-search-input::placeholder { color: #adb5bd; }
.fq-search-clear {
    position: absolute; right: 16px; background: none; border: none;
    font-size: 0.8rem; color: var(--fq-muted); cursor: pointer; padding: 4px;
    transition: color var(--fq-dur);
}
.fq-search-clear:hover { color: var(--fq-navy); }
.fq-search-hint {
    font-family: var(--fq-font); font-size: 0.82rem; color: var(--fq-muted);
    text-align: center; margin: 10px 0 0;
}
.fq-search-hint a {
    color: var(--fq-navy); font-weight: 600; text-decoration: none;
    transition: color var(--fq-dur);
}
.fq-search-hint a:hover { color: var(--fq-gold-dark); }

/* =============================================================
   CATEGORY TAB ROW
============================================================= */
.fq-tab-row {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center; margin-bottom: 44px;
}
.fq-tab {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--fq-font); font-size: 0.82rem; font-weight: 600;
    color: var(--fq-muted); background: var(--fq-white);
    border: 1.5px solid var(--fq-border); border-radius: 20px;
    padding: 9px 18px; cursor: pointer;
    transition: border-color var(--fq-dur), color var(--fq-dur),
                background var(--fq-dur), box-shadow var(--fq-dur);
}
.fq-tab i { font-size: 0.88rem; }
.fq-tab:hover {
    border-color: var(--fq-navy); color: var(--fq-navy);
}
.fq-tab--active {
    background: var(--fq-navy); color: #fff !important;
    border-color: var(--fq-navy);
    box-shadow: 0 3px 12px rgba(26,35,126,0.25);
}

/* =============================================================
   FAQ SECTION GROUP
============================================================= */
.fq-section {
    margin-bottom: 44px;
}
.fq-section-title {
    font-family: var(--fq-font); font-size: 1.05rem; font-weight: 800;
    color: var(--fq-navy); margin-bottom: 18px;
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--fq-border);
    position: relative;
}
.fq-section-title::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 56px; height: 2px;
    background: linear-gradient(90deg, var(--fq-gold), var(--fq-gold-dark));
    border-radius: 2px;
}
.fq-section-title i { color: var(--fq-gold-dark); font-size: 1.1rem; }

/* =============================================================
   ACCORDION GROUP
============================================================= */
.fq-accordion-group {
    display: flex; flex-direction: column; gap: 10px;
}
.fq-item {
    background: var(--fq-white);
    border: 1.5px solid var(--fq-border);
    border-radius: var(--fq-radius);
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(26,35,126,0.05);
    transition: border-color var(--fq-dur), box-shadow var(--fq-dur);
}
.fq-item:hover { border-color: rgba(26,35,126,0.25); }

/* Question button */
.fq-question {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 22px;
    background: none; border: none; cursor: pointer; text-align: left;
    transition: background var(--fq-dur);
}
.fq-question:hover { background: var(--fq-gray); }
.fq-question--open { background: var(--fq-navy-light); }
.fq-question--open:hover { background: var(--fq-navy-light); }

.fq-question span {
    font-family: var(--fq-font); font-size: 0.93rem; font-weight: 700;
    color: var(--fq-navy); line-height: 1.45; flex: 1;
    transition: color var(--fq-dur);
}
.fq-question--open span { color: var(--fq-navy-dark); }

/* Chevron */
.fq-chevron {
    font-size: 0.75rem; color: var(--fq-muted); flex-shrink: 0;
    transition: transform var(--fq-dur) var(--fq-ease), color var(--fq-dur);
}
.fq-question--open .fq-chevron {
    transform: rotate(180deg); color: var(--fq-navy);
}

/* Left gold accent bar on open */
.fq-question--open {
    border-left: 4px solid var(--fq-gold);
    padding-left: 18px;
}

/* Answer panel */
.fq-answer {
    max-height: 0; overflow: hidden; padding: 0 22px;
    transition: max-height 0.38s var(--fq-ease), padding-bottom 0.22s var(--fq-ease);
}
.fq-answer p {
    font-family: var(--fq-font); font-size: 0.88rem; color: var(--fq-muted);
    line-height: 1.85; margin: 0;
}

/* =============================================================
   NO RESULTS
============================================================= */
.fq-no-results {
    flex-direction: column; align-items: center; gap: 12px;
    padding: 64px 24px; text-align: center;
}
.fq-no-results i { font-size: 3rem; color: var(--fq-border); display: block; }
.fq-no-results h4 {
    font-family: var(--fq-font); font-size: 1.05rem; font-weight: 700;
    color: var(--fq-navy); margin: 0;
}
.fq-no-results p {
    font-family: var(--fq-font); font-size: 0.9rem; color: var(--fq-muted);
    max-width: 360px; line-height: 1.7; margin: 0;
}
.fq-no-results p a {
    color: var(--fq-navy); font-weight: 600; text-decoration: none;
}
.fq-no-results p a:hover { color: var(--fq-gold-dark); }

/* =============================================================
   CTA STRIP
============================================================= */
.fq-cta-strip {
    background: linear-gradient(135deg, var(--fq-navy-dark), var(--fq-navy));
    position: relative; overflow: hidden;
}
.fq-cta-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-55deg, transparent, transparent 40px,
        rgba(200,169,81,0.05) 40px, rgba(200,169,81,0.05) 80px);
    pointer-events: none;
}
.fq-cta-inner {
    display: flex; align-items: center; gap: 24px;
    padding: 44px 0; position: relative; z-index: 1; flex-wrap: wrap;
}
.fq-cta-icon {
    width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0;
    background: rgba(200,169,81,0.18);
    display: flex; align-items: center; justify-content: center;
}
.fq-cta-icon i { font-size: 1.6rem; color: var(--fq-gold); }
.fq-cta-text { flex: 1; min-width: 220px; }
.fq-cta-text h4 {
    font-family: var(--fq-font); font-size: 1.15rem; font-weight: 800;
    color: #fff; margin-bottom: 6px;
}
.fq-cta-text p {
    font-family: var(--fq-font); font-size: 0.88rem;
    color: rgba(255,255,255,0.7); line-height: 1.65; margin: 0;
}
.btn-fq-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--fq-font); font-size: 0.9rem; font-weight: 700;
    color: var(--fq-navy-dark); background: var(--fq-gold);
    border-radius: 8px; padding: 14px 28px; text-decoration: none;
    white-space: nowrap; flex-shrink: 0;
    transition: background var(--fq-dur), transform var(--fq-dur), box-shadow var(--fq-dur);
}
.btn-fq-cta:hover {
    background: #fff; color: var(--fq-navy-dark);
    transform: translateY(-2px); box-shadow: 0 8px 22px rgba(200,169,81,0.35);
    text-decoration: none;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 991px) {
    .content-inner { padding: 48px 0; }
    .fq-tab-row    { gap: 8px; }
}
@media (max-width: 767px) {
    .dlab-bnr-inr  { min-height: 240px; }
    .content-inner { padding: 36px 0; }
    .fq-tab        { font-size: 0.78rem; padding: 8px 14px; }
    .fq-cta-inner  { flex-direction: column; }
    .btn-fq-cta    { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .fq-tab-row    { justify-content: flex-start; }
    .fq-question   { padding: 14px 16px; }
    .fq-answer     { padding: 0 16px; }
}


/* =============================================================
   PANEKAR SECONDARY SCHOOL — Event Detail Page
   Font: Inter | Navy #1a237e | Gold #c8a951
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --ed-navy:        #1a237e;
    --ed-navy-dark:   #0d1257;
    --ed-navy-light:  #e8eaf6;
    --ed-gold:        #c8a951;
    --ed-gold-dark:   #a8893a;
    --ed-gold-light:  #f5edce;
    --ed-green:       #1b5e20;
    --ed-green-light: #e8f5e9;
    --ed-orange:      #e65100;
    --ed-orange-light:#fff3e0;
    --ed-purple:      #4a148c;
    --ed-purple-light:#ede7f6;
    --ed-red:         #b71c1c;
    --ed-red-light:   #ffebee;
    --ed-white:       #ffffff;
    --ed-gray:        #f5f6fa;
    --ed-text:        #3a3a4a;
    --ed-muted:       #6b7280;
    --ed-border:      #e4e6ef;
    --ed-font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ed-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ed-dur:         0.24s;
    --ed-radius:      10px;
    --ed-radius-lg:   16px;
}

/* =============================================================
   BANNER
============================================================= */
.dlab-bnr-inr {
    position: relative; background-size: cover; background-position: center;
    min-height: 310px; display: flex; align-items: center; padding: 52px 0;
}
.dlab-bnr-inr.overlay-black-middle::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(13,18,87,0.86), rgba(26,35,126,0.68));
}
.dlab-bnr-inr::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--ed-gold-dark), var(--ed-gold), var(--ed-gold-dark));
}
.dlab-bnr-inr .container { position: relative; z-index: 1; }
.dlab-bnr-inr-entry h1 {
    font-family: var(--ed-font); font-size: clamp(1.6rem,3.5vw,2.4rem);
    font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.4px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3); line-height: 1.25;
}
.banner-sub {
    font-family: var(--ed-font); font-size: 0.82rem; font-weight: 500;
    color: var(--ed-gold); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 14px; display: block;
}
.breadcrumb-row ul.list-inline {
    list-style: none; display: flex; align-items: center;
    justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
}
.breadcrumb-row ul.list-inline li {
    font-family: var(--ed-font); font-size: 0.82rem; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb-row ul.list-inline li::before { content: '/'; color: var(--ed-gold); }
.breadcrumb-row ul.list-inline li:first-child::before { display: none; }
.breadcrumb-row ul.list-inline li a {
    color: var(--ed-gold); text-decoration: none; font-weight: 600;
}
.breadcrumb-row ul.list-inline li a:hover { color: #fff; }

/* =============================================================
   LAYOUT HELPERS
============================================================= */
.section-full  { width: 100%; }
.content-inner { padding: 64px 0; }
.bg-white      { background: var(--ed-white) !important; }

/* =============================================================
   2-COLUMN LAYOUT
============================================================= */
.ed-layout {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 40px;
    align-items: start;
}

/* =============================================================
   STATUS BAR
============================================================= */
.ed-status-bar {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 16px;
}

/* Category pill — same colour system as events list */
.ed-category {
    font-family: var(--ed-font); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    border-radius: 20px; padding: 4px 12px;
}
.ed-cat--academic     { background: var(--ed-navy-light);   color: var(--ed-navy); }
.ed-cat--sports       { background: var(--ed-gold-light);   color: var(--ed-gold-dark); }
.ed-cat--cultural     { background: var(--ed-purple-light); color: var(--ed-purple); }
.ed-cat--ceremony     { background: var(--ed-green-light);  color: var(--ed-green); }
.ed-cat--announcement { background: var(--ed-orange-light); color: var(--ed-orange); }
.ed-cat--community    { background: var(--ed-red-light);    color: var(--ed-red); }

/* Status badges */
.ed-today-badge, .ed-upcoming-badge, .ed-past-badge {
    font-family: var(--ed-font); font-size: 0.72rem; font-weight: 700;
    border-radius: 20px; padding: 4px 12px;
    display: inline-flex; align-items: center; gap: 5px;
}
.ed-today-badge {
    background: var(--ed-red); color: #fff;
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(183,28,28,0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(183,28,28,0); }
}
.ed-upcoming-badge { background: var(--ed-navy-light); color: var(--ed-navy); }
.ed-past-badge     { background: var(--ed-gray);       color: var(--ed-muted); }

/* =============================================================
   TITLE
============================================================= */
.ed-title {
    font-family: var(--ed-font); font-size: clamp(1.5rem,2.8vw,2rem);
    font-weight: 800; color: var(--ed-navy); line-height: 1.25;
    letter-spacing: -0.4px; margin-bottom: 28px;
}

/* =============================================================
   DETAILS STRIP — 4 icon cards in a row
============================================================= */
.ed-details-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px; margin-bottom: 30px;
    padding: 22px; border-radius: var(--ed-radius-lg);
    background: var(--ed-gray); border: 1px solid var(--ed-border);
}
.ed-detail-item {
    display: flex; align-items: flex-start; gap: 12px;
}
.ed-detail-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: var(--ed-white); border: 1px solid var(--ed-border);
    display: flex; align-items: center; justify-content: center;
}
.ed-detail-icon i { font-size: 0.95rem; color: var(--ed-gold-dark); }
.ed-detail-text { display: flex; flex-direction: column; gap: 2px; }
.ed-detail-label {
    font-family: var(--ed-font); font-size: 0.7rem; font-weight: 700;
    color: var(--ed-muted); text-transform: uppercase; letter-spacing: 0.6px;
}
.ed-detail-value {
    font-family: var(--ed-font); font-size: 0.86rem; font-weight: 700;
    color: var(--ed-navy); line-height: 1.35;
}

/* =============================================================
   EVENT IMAGE
============================================================= */
.ed-img-wrap {
    margin-bottom: 28px; border-radius: var(--ed-radius-lg); overflow: hidden;
    box-shadow: 0 6px 28px rgba(26,35,126,0.12);
}
.ed-img {
    width: 100%; max-height: 440px; object-fit: cover; display: block;
    transition: transform 0.45s var(--ed-ease);
}
.ed-img-wrap:hover .ed-img { transform: scale(1.02); }

/* =============================================================
   BODY CONTENT
============================================================= */
.ed-body {
    font-family: var(--ed-font); font-size: 0.97rem; color: var(--ed-text);
    line-height: 1.9; margin-bottom: 32px;
}
.ed-body p { margin-bottom: 16px; }
.ed-body p:last-child { margin-bottom: 0; }

/* =============================================================
   SHARE BAR
============================================================= */
.ed-share-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 20px 0; border-top: 1px solid var(--ed-border);
    border-bottom: 1px solid var(--ed-border); margin-bottom: 32px;
}
.ed-share-label {
    font-family: var(--ed-font); font-size: 0.84rem; font-weight: 700;
    color: var(--ed-navy); display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.ed-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ed-font); font-size: 0.8rem; font-weight: 700;
    border-radius: 7px; padding: 9px 16px; text-decoration: none;
    transition: opacity var(--ed-dur), transform var(--ed-dur);
}
.ed-share-btn i { font-size: 0.95rem; }
.ed-share-btn:hover { opacity: 0.85; transform: translateY(-2px); text-decoration: none; }
.ed-share--fb { background: #1877f2; color: #fff; }
.ed-share--tw { background: #000;    color: #fff; }
.ed-share--wa { background: #25d366; color: #fff; }

/* =============================================================
   PREV / NEXT NAV
============================================================= */
.ed-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.ed-nav-link {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--ed-white); border: 1.5px solid var(--ed-border);
    border-radius: var(--ed-radius); padding: 18px 20px;
    text-decoration: none;
    transition: border-color var(--ed-dur), background var(--ed-dur), box-shadow var(--ed-dur);
}
.ed-nav-link:hover {
    border-color: var(--ed-navy); background: var(--ed-navy-light);
    box-shadow: 0 4px 16px rgba(26,35,126,0.1); text-decoration: none;
}
.ed-nav-next { text-align: right; }
.ed-nav-direction {
    font-family: var(--ed-font); font-size: 0.74rem; font-weight: 700;
    color: var(--ed-gold-dark); text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 5px;
}
.ed-nav-next .ed-nav-direction { justify-content: flex-end; }
.ed-nav-title {
    font-family: var(--ed-font); font-size: 0.86rem; font-weight: 600;
    color: var(--ed-navy); line-height: 1.4;
}

/* =============================================================
   SIDEBAR
============================================================= */
.ed-sidebar { display: flex; flex-direction: column; gap: 22px; }

.ed-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ed-font); font-size: 0.84rem; font-weight: 700;
    color: var(--ed-navy); background: var(--ed-navy-light);
    border: 1.5px solid rgba(26,35,126,0.15); border-radius: 8px;
    padding: 12px 18px; text-decoration: none;
    transition: background var(--ed-dur), color var(--ed-dur);
}
.ed-back-btn:hover {
    background: var(--ed-navy); color: #fff; text-decoration: none;
}

/* Sidebar widget shell */
.ed-sidebar-widget {
    background: var(--ed-white); border: 1px solid var(--ed-border);
    border-radius: var(--ed-radius-lg); overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,35,126,0.07);
}
.ed-widget-title {
    font-family: var(--ed-font); font-size: 0.88rem; font-weight: 800;
    color: var(--ed-white); margin: 0;
    background: linear-gradient(135deg, var(--ed-navy-dark), var(--ed-navy));
    padding: 14px 18px; border-bottom: 3px solid var(--ed-gold);
}

/* Quick info list */
.ed-info-list {
    list-style: none; padding: 8px 0; margin: 0;
}
.ed-info-list li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--ed-border);
}
.ed-info-list li:last-child { border-bottom: none; }
.ed-info-list li > i {
    font-size: 0.95rem; color: var(--ed-gold-dark);
    flex-shrink: 0; margin-top: 2px;
}
.ed-info-list li > div {
    display: flex; flex-direction: column; gap: 2px;
}
.ed-info-label {
    font-family: var(--ed-font); font-size: 0.68rem; font-weight: 700;
    color: var(--ed-muted); text-transform: uppercase; letter-spacing: 0.5px;
}
.ed-info-val {
    font-family: var(--ed-font); font-size: 0.84rem; font-weight: 600;
    color: var(--ed-navy);
}

/* Upcoming events list in sidebar */
.ed-upcoming-list { display: flex; flex-direction: column; }
.ed-upcoming-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; text-decoration: none;
    border-bottom: 1px solid var(--ed-border);
    transition: background var(--ed-dur);
}
.ed-upcoming-item:last-child { border-bottom: none; }
.ed-upcoming-item:hover { background: var(--ed-navy-light); text-decoration: none; }

.ed-upcoming-date {
    min-width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--ed-navy-dark), var(--ed-navy));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ed-up-day {
    font-family: var(--ed-font); font-size: 1rem; font-weight: 800;
    color: var(--ed-gold); line-height: 1;
}
.ed-up-month {
    font-family: var(--ed-font); font-size: 0.58rem; font-weight: 700;
    color: rgba(255,255,255,0.7); text-transform: uppercase;
}
.ed-upcoming-content { flex: 1; min-width: 0; }
.ed-up-cat {
    font-family: var(--ed-font); font-size: 0.65rem; font-weight: 700;
    color: var(--ed-gold-dark); text-transform: uppercase; letter-spacing: 0.5px;
    display: block; margin-bottom: 2px;
}
.ed-up-title {
    font-family: var(--ed-font); font-size: 0.82rem; font-weight: 700;
    color: var(--ed-navy); line-height: 1.35; margin: 0 0 3px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ed-up-venue {
    font-family: var(--ed-font); font-size: 0.72rem; color: var(--ed-muted);
    display: flex; align-items: center; gap: 4px;
}

/* Sidebar CTA */
.ed-sidebar-cta {
    background: linear-gradient(135deg, var(--ed-navy-dark), var(--ed-navy));
    border-radius: var(--ed-radius-lg); padding: 26px 22px;
    text-align: center; position: relative; overflow: hidden;
}
.ed-sidebar-cta::before {
    content: ''; position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,0.05); pointer-events: none;
}
.ed-cta-icon {
    width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px;
    background: rgba(200,169,81,0.2);
    display: flex; align-items: center; justify-content: center;
}
.ed-cta-icon i { font-size: 1.3rem; color: var(--ed-gold); }
.ed-sidebar-cta h5 {
    font-family: var(--ed-font); font-size: 0.95rem; font-weight: 800;
    color: #fff; margin-bottom: 8px;
}
.ed-sidebar-cta p {
    font-family: var(--ed-font); font-size: 0.82rem;
    color: rgba(255,255,255,0.7); line-height: 1.65; margin-bottom: 16px;
}
.ed-cta-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--ed-font); font-size: 0.84rem; font-weight: 700;
    color: var(--ed-navy-dark); background: var(--ed-gold);
    border-radius: 8px; padding: 11px 20px; text-decoration: none;
    transition: background var(--ed-dur), transform var(--ed-dur);
}
.ed-cta-btn:hover {
    background: #fff; color: var(--ed-navy-dark);
    transform: translateY(-2px); text-decoration: none;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1199px) {
    .ed-layout { grid-template-columns: 1fr 280px; gap: 32px; }
}
@media (max-width: 991px) {
    .content-inner { padding: 48px 0; }
    .ed-layout     { grid-template-columns: 1fr; }
    .ed-sidebar    { order: -1; flex-direction: row; flex-wrap: wrap; }
    .ed-back-btn   { width: 100%; }
    .ed-sidebar-widget { flex: 1; min-width: 240px; }
    .ed-sidebar-cta    { flex: 1; min-width: 200px; }
    .ed-details-strip  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .dlab-bnr-inr  { min-height: 230px; }
    .content-inner { padding: 36px 0; }
    .ed-sidebar    { flex-direction: column; }
    .ed-nav        { grid-template-columns: 1fr; }
    .ed-share-bar  { flex-direction: column; align-items: flex-start; }
    .ed-share-buttons { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .ed-details-strip { grid-template-columns: 1fr; }
    .ed-share-btn  { flex: 1; justify-content: center; }
}


/*
 * application_form_additions.css
 * Add these rules to your existing  static/css/application_form.css
 * ─────────────────────────────────────────────────────────────────
 */

/* ── Validation error summary banner ──────────────────────────── */
.af-error-summary {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff3e0;
    border: 1.5px solid #e65100;
    border-left: 5px solid #e65100;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.af-error-summary i {
    font-size: 22px;
    color: #e65100;
    flex-shrink: 0;
    margin-top: 2px;
}
.af-error-summary strong {
    display: block;
    color: #bf360c;
    font-size: 15px;
    margin-bottom: 2px;
}
.af-error-summary span {
    color: #6d4c41;
    font-size: 13px;
}

/* ── Inline field error state ─────────────────────────────────── */
.af-field-error .af-input,
.af-field-error .af-select,
.af-field-error .af-textarea {
    border-color: #e53935 !important;
    background: #fff8f8;
}
.af-error-msg {
    display: block;
    color: #e53935;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

/* ── Disabled apply button ────────────────────────────────────── */
.btn-adm-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   APPLICATION SUCCESS PAGE  (application_success.html)
   ═══════════════════════════════════════════════════════════════ */

.afs-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(26,35,126,.10);
    padding: 48px 40px;
    text-align: center;
    margin-bottom: 40px;
}

/* Success icon */
.afs-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}
.afs-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #2e7d32, #43a047);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(46,125,50,.30);
}
.afs-icon i {
    font-size: 38px;
    color: #fff;
}

.afs-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 10px;
}
.afs-subtitle {
    font-size: 15px;
    color: #546e7a;
    max-width: 520px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

/* Reference number box */
.afs-ref-box {
    background: #e8eaf6;
    border: 2px dashed #1a237e;
    border-radius: 10px;
    padding: 20px 28px;
    margin: 0 auto 32px;
    max-width: 420px;
}
.afs-ref-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5c6bc0;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.afs-ref-number {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #1a237e;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.afs-ref-hint {
    display: block;
    font-size: 12px;
    color: #78909c;
}

/* Summary table */
.afs-summary {
    text-align: left;
    margin-bottom: 28px;
}
.afs-summary-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8eaf6;
}
.afs-summary-table {
    width: 100%;
    border-collapse: collapse;
}
.afs-summary-table tr:not(:last-child) td {
    border-bottom: 1px solid #f0f0f0;
}
.afs-summary-table td {
    padding: 9px 4px;
    font-size: 14px;
    vertical-align: top;
}
.afs-label {
    color: #78909c;
    font-weight: 600;
    width: 42%;
    padding-right: 12px;
}
.afs-value {
    color: #263238;
    font-weight: 500;
}

/* Status badge */
.afs-status-badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.afs-status--pending {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}
.afs-status--under_review {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}
.afs-status--accepted {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.afs-status--rejected {
    background: #ffebee;
    color: #b71c1c;
    border: 1px solid #ef9a9a;
}

/* Documents confirmed */
.afs-docs {
    text-align: left;
    background: #f5f6fa;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 28px;
}
.afs-docs-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 10px;
}
.afs-docs-title i { margin-right: 6px; }
.afs-docs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}
.afs-docs-list li {
    font-size: 13px;
    color: #37474f;
}
.afs-docs-list li i {
    color: #2e7d32;
    margin-right: 5px;
}

/* Next steps */
.afs-next-steps {
    text-align: left;
    margin-bottom: 32px;
}
.afs-steps-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a237e;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8eaf6;
}
.afs-steps-title i { margin-right: 6px; }
.afs-steps-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.afs-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.afs-step-num {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: #1a237e;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.afs-step-text {
    font-size: 14px;
    color: #37474f;
    line-height: 1.6;
    padding-top: 4px;
}
.afs-step-text strong { color: #1a237e; }

/* Action buttons */
.afs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}
.btn-afs-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a237e;
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.btn-afs-primary:hover { background: #0d1454; color: #fff; }
.btn-afs-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #1a237e;
    border: 2px solid #1a237e;
    padding: 11px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}
.btn-afs-outline:hover {
    background: #1a237e;
    color: #fff;
}

@media (max-width: 575px) {
    .afs-card { padding: 28px 18px; }
    .afs-ref-number { font-size: 22px; }
    .afs-actions { flex-direction: column; }
    .btn-afs-primary,
    .btn-afs-outline { justify-content: center; }
}