/* ==========================================================================
   Setup Local Company Page Styles
   ========================================================================== */

/* --- GLOBAL VARIABLES & RESET --- */
/* --- HERO SECTION --- */
/* --- UNIQUE TIMELINE --- */
/* --- GRIDS (Requirements & Post-Inc) --- */
/* --- CTA SECTION --- */
/* --- RESPONSIVE DESIGN --- */


:root {
    --primary: #1a2a44;
    --primary-light: #2c4266;
    --accent-green: #9fcc2e;
    --accent-teal: #26a69a;
    --accent-orange: #e29513;
    --bg-light: #f8fafc;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --glass-white: #ffffff;
    --glass-border: rgba(0, 0, 0, 0.1);
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-bold: 0 10px 40px rgba(0, 0, 0, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Helvetica', Arial, sans-serif;
    background: url('assets/site-background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: var(--text-dark);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
.govt-text strong {
    font-family: 'Helvetica', Arial, sans-serif;
}

.container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 50px;
}

/* Main Dashboard Grid Layout */
.main-layout-grid {
    display: grid;
    grid-template-columns: 1.2fr 3.5fr;
    gap: 40px;
    padding: 40px 0;
    align-items: stretch;
}

.whats-new,
.graphic-sliding {
    grid-column: span 3;
}

.sidebar-announcements {
    height: 100%;
}

.sidebar-announcements .white-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sidebar-announcements .white-box h3 {
    margin-bottom: 25px !important;
    color: var(--primary) !important;
    font-size: 1.5rem;
}

.item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-list li {
    padding: 12px 16px;
    background: #f1f5f9;
    border-radius: 10px;
    border-left: 4px solid var(--accent-orange);
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-list li:hover {
    background: white;
    transform: translateX(4px);
}

.item-list li i {
    color: var(--primary);
    font-size: 1.1rem;
}

.btn-read {
    margin-top: 20px;
    align-self: flex-start;
    background: var(--primary);
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-read:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.content-dashboard {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 30px;
}

.white-box {
    background: white;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.glass-box {
    background: var(--glass-white);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow-soft);
}

/* Dashboard Cells */
.dashboard-cell {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: var(--transition-smooth);
    background: white;
    box-shadow: var(--shadow-soft);
}

.dashboard-cell:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-bold);
}

.hero-slider {
    grid-column: span 6;
    height: 400px;
    overflow: hidden;
    border-radius: 12px;
}

.slider-wrapper {
    display: flex;
    height: 100%;
}

.hero-slider .hero-item {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 40px;
    background: linear-gradient(135deg, rgba(26, 42, 68, 0.8) 0%, rgba(30, 58, 138, 0.4) 50%, rgba(26, 42, 68, 0.8) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: none;
    /* Disable animation for images to keep them steady */
    position: relative;
    overflow: hidden;
}

.hero-slider .hero-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/image/palbeu-pattern.png') repeat;
    opacity: 0.12;
    /* Increased opacity */
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

.hero-slider .hero-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
    z-index: 2;
}/* Service Card Spans */
.service-section-card {
    grid-column: span 2;
    background: white;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0px !important;
    border: none !important;
}

.header-icon {
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary);
}

.card-header h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
}

.btn-login {
    background: linear-gradient(to right, #fdb913, #f58220);
    color: white;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(245, 130, 32, 0.3);
    transition: var(--transition-smooth);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 130, 32, 0.4);
}

.icon-circle {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.arrow-links,
.purple-links,
.news-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arrow-links li a,
.purple-links li a {
    text-decoration: none;
    font-size: 0.95rem;
    color: #000;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-smooth);
}

.arrow-links li a:hover,
.purple-links li a:hover,
.news-links li a:hover {
    color: var(--accent-orange);
}

.arrow-links li a::before {
    content: '→';
    color: #ccc;
    font-weight: bold;
}

.purple-links li a::before {
    content: '→';
    color: #ccc;
    font-weight: bold;
}


.purple-links li a {
    color: #000;
    font-weight: 600;
}

.news-links li {
    padding-left: 20px;
    position: relative;
    border-left: 5px solid var(--accent-orange);
    padding-bottom: 10px;
}

.news-links li a {
    text-decoration: none;
    color: #000;
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
    line-height: 1.4;
    transition: var(--transition-smooth);
}

.news-links li a i {
    font-size: 0.8rem;
    margin-left: 5px;
    color: #0056b3;
}

.news-links li:hover {
    border-left-color: var(--accent-orange);
}

/* News/Whats New */
.whats-new {
    background: linear-gradient(to bottom right, #ffffff, #f0f7ff);
    border-left: 6px solid var(--accent-orange);
    position: relative;
    overflow: hidden;
}

.whats-new::after {
    content: '"';
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 8rem;
    color: rgba(26, 42, 68, 0.05);
    font-family: 'Helvetica', Arial, sans-serif;
}

.whats-new h4 {
    font-family: 'Helvetica', Arial, sans-serif;
    color: var(--primary);
    margin-bottom: 25px;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

.news-slide p {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 500;
    line-height: 1.6;
    font-style: italic;
    padding-right: 40px;
}

.mini-slider-container {
    overflow: hidden;
    height: 100%;
    position: relative;
}

.mini-slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.news-slide,
.mini-slide {
    flex: 0 0 100%;
    height: 100%;
}

/* Graphic Sliding */
.graphic-sliding {
    box-shadow: var(--shadow-bold);
    border-radius: 12px;
    overflow: hidden;
}

.graphic-sliding .mini-slider-container {
    min-height: 250px;
}

.graphic-sliding .mini-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.5s ease;
}

.graphic-sliding .mini-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
}/* Location Span */
/* Video Section Removal */
/* Responsive */
@media (max-width: 1024px) {
    .main-layout-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 0;
    }

    .content-dashboard {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }

    .hero-slider,
    .service-section-card,
    .whats-new,
    .graphic-sliding {
        grid-column: auto !important;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .main-layout-grid {
        padding: 20px 0;
        gap: 15px;
    }

    .glass-box {
        padding: 20px;
    }

    .content-dashboard {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hero-slider {
        height: 250px;
    }

    .service-section-card {
        padding: 20px;
    }

    .card-header h3 {
        font-size: 1.2rem;
    }

    .premium-footer {
        padding: 40px 0 0;
    }

    .footer-grid {
        gap: 30px;
    }

    .footer-col {
        padding: 20px;
    }

    .links-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Footer map responsive */
    .footer-map-box {
        height: 220px;
    }
}

@media (max-width: 420px) {
    /* Allow wrapping again on very narrow screens so long portal
       names don't overflow the column */
    .footer-links li a {
        white-space: normal;
    }
}

/* Premium Footer Overhaul */
.premium-footer {
    background: var(--primary);
    color: white;
    padding: 80px 0 0;
    background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent);
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    position: relative;
    border-top: 5px solid #fdb913;
    box-shadow: 0 -10px 40px rgba(253, 185, 19, 0.15);
    /* Subtle border glow */
    overflow: hidden;
}

.premium-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26, 42, 68, 0.9), rgba(26, 42, 68, 0.98));
    z-index: 1;
}

.footer-map-box {
    margin-top: 25px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    height: 250px;
}

.footer-map-box iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(0.3) contrast(1.1);
    border-radius: 12px;
    border: none;
}

@media (max-width: 768px) {
    .footer-map-box {
        height: 150px;
    }
}

.footer-content {
    position: relative;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 60px;
    animation: fadeInUp 1s ease-out;
    /* Smooth entrance */
}

.footer-col {
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Soft glass effect */
    transition: var(--transition-smooth);
}

.footer-col:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.footer-col h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 12px;
    color: var(--accent-orange);
    letter-spacing: 1px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #fdb913;
    border-radius: 2px;
}

/* Brand Column */
.brand-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 25px 0;
    line-height: 1.8;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.social-links a:hover {
    transform: translateY(-5px) rotate(8deg);
    /* Added slight rotation */
}

/* Contact List */
.footer-contact-list {
    list-style: none;
    padding: 0;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact-list i {
    color: #fdb913;
    margin-top: 4px;
    font-size: 1rem;
}

/* Links Columns */
.links-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
    display: inline-block;
    white-space: nowrap;
}

.footer-links li a:hover {
    color: white;
    transform: translateX(8px);
}

/* Footer Bottom */
.footer-bottom {
    position: relative;
    z-index: 2;
    padding: 30px 0;
    background: rgba(0, 0, 0, 0.2);
}

.footer-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin-bottom: 25px;
}

.footer-bottom p {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1024px) {    .hero-item {
        height: 300px;
    }

    .footer-grid {
        flex-direction: column;
        gap: 40px;
    }
}

:root {
    --primary-color: #283c5a;
    --primary-dark: #1a2a3a;
    --primary-gradient: linear-gradient(135deg, #283c5a 0%, #1a2a3a 100%);
    --secondary-color: #f7941d;
    --secondary-glow: 0 0 15px rgba(247, 148, 29, 0.4);
    --accent-color: #ffcc33;
    --accent-gradient: linear-gradient(135deg, #f7941d 0%, #ffcc33 100%);
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --text-dark: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.15);
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius-lg: 20px;
    --border-light-orange: rgba(247, 148, 29, 0.2);
    --link-purple: #8a2be2;
    --link-blue: #2c5cc5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica', Arial, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* Legacy nav styles kept for backward compat */
.branding h1 {
    font-size: 1.2rem;
    color: var(--primary-color);
    letter-spacing: -0.5px;
}

/* Hero Section */
.hero {
    background: var(--primary-gradient);
    padding: 6rem 8%;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 40%;
    height: 200%;
    background: radial-gradient(circle, rgba(247, 148, 29, 0.1) 0%, transparent 70%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h2 {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 1rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.2rem;
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}/* Layout with Sidebar */
.page-container {
    display: flex;
    max-width: 1700px;
    margin: 3rem auto;
    padding: 0 50px 0 0; 
    gap: 3rem;
}

.sidebar {
    width: 380px;
    position: sticky;
    top: 100px;
    height: fit-content;
    background: white;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- MOBILE RESPONSIVE FIX --- */
@media (max-width: 1024px) {
    .page-container {
        flex-direction: column; /* Stacks sidebar on top of content */
        margin: 1rem auto;
        padding: 0 20px; /* Adds equal padding on both sides for mobile */
        gap: 2rem;
    }

    .sidebar {
        width: 100%; /* Sidebar takes full width */
        position: static; /* Removes sticky behavior for mobile */
        padding: 20px;
        box-sizing: border-box; /* Ensures padding doesn't increase width */
    }

    .content-area {
        width: 100%;
    }
}

.sidebar h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.side-nav {
    list-style: none;
}

.side-nav li {
    margin-bottom: 0.7rem;
}

.side-nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    display: block;
    border-radius: 12px;
    transition: var(--transition-smooth);
    background-color: var(--bg-light, #f8fafc);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 4px solid transparent;
    white-space: normal;
    word-wrap: break-word;
}

.side-nav a:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
    border-color: transparent;
    border-left: 4px solid var(--accent-orange);
}

.side-nav a.active {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
    border-color: transparent;
    border-left: 4px solid var(--accent-orange);
}

/* Main Content: Categories & Tabs */
.content-area {
    flex: 1;
}

.guide-category {
    background: var(--bg-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: var(--transition-smooth);
}

.guide-category:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

/* --- Tablet Responsive (Max 1100px) --- */
@media (max-width: 1100px) {
    .guide-category {
        padding: 2rem;       /* Slightly tighter padding */
        margin-bottom: 2rem;
        border-radius: 20px; /* Standardize corners for tablet */
    }
}

/* --- Mobile Responsive (Max 768px) --- */
@media (max-width: 768px) {
    .guide-category {
        /* Reduce padding significantly so content can breathe */
        padding: 1.7rem !important;     
        margin-bottom: 1.5rem;
        
        /* Smaller radius looks better on small screens */
        border-radius: 16px; 
        
        /* Optional: Lighten shadow for a cleaner mobile look */
        box-shadow: var(--shadow-sm); 
    }
}

/* --- Extra Small Mobile (Max 400px) --- */
@media (max-width: 400px) {
    .guide-category {
        padding: 1.2rem 1rem; /* Very tight horizontal padding for small phones */
        margin-bottom: 1rem;
    }
}

/* Before You Start Module */
.before-you-start {
    background: var(--bg-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-light-orange);
    transition: var(--transition-smooth);
}

.before-you-start:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.before-you-start .module-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.before-you-start .module-header .icon {
    font-size: 2rem;
}

.before-you-start .module-header h2 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;
}

.before-you-start .module-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.before-you-start .module-list li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
}

.before-you-start .module-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--text-muted);
    font-weight: 300;
}

.before-you-start .module-list a {
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.before-you-start .module-list li:first-child a {
    color: #2c5cc5;
}

.before-you-start .module-list li:not(:first-child) a {
    color: var(--link-blue);
}

.before-you-start .module-list a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    cursor: pointer;
}

.category-title-group h2 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 2.22rem;
    color: var(--secondary-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.category-title-group p {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-style: italic;
}

/* --- Tablet Responsive (Max 1100px) --- */
@media (max-width: 1100px) {
    .category-title-group h2 {
        font-size: 1.8rem; /* Scaled down for tablet */
        margin-bottom: 0.4rem;
    }
}

/* --- Mobile Responsive (Max 768px) --- */
@media (max-width: 768px) {
    .category-title-group h2 {
        font-size: 1.8rem !important; /* Better fit for phone screens */
        margin-bottom: 0px !important;
        letter-spacing: -0.2px; /* Tighter for smaller screens */
    }

    .category-title-group p {
        font-size: 0.85rem; /* Slightly smaller italic text */
    }
}

/* --- Extra Small Mobile (Max 400px) --- */
@media (max-width: 400px) {
    .category-title-group h2 {
        font-size: 1.3rem; /* Prevents overflow on very narrow phones */
    }
}

.collapse-icon {
    width: 36px;
    height: 36px;
    background: var(--bg-light);
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-weight: 800;
    transition: var(--transition-smooth);
    margin-top: 5px;
}

/* --- Tablet Responsive (Max 1100px) --- */
@media (max-width: 1100px) {
    .collapse-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
}

/* --- Mobile Responsive (Max 768px) --- */
@media (max-width: 768px) {
    .collapse-icon {
        /* Smaller size for mobile headers */
        width: 28px; 
        height: 28px;
        font-size: 0.85rem;
        border-radius: 6px;
        margin-top: 2px;
        
        /* Ensure it doesn't touch the very edge of the screen */
        margin-left: 10px;
    }
}

.guide-category:hover .collapse-icon {
    background: var(--secondary-color);
    color: white;
}

/* Advanced Tabs */
.category-tabs {
    display: flex;
    background: var(--bg-light);
    padding: 6px;
    border-radius: 16px;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}

.tab {
    flex: 1;
    padding: 0.8rem;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 1;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.tab.active {
    color: var(--text-dark);
    background: var(--accent-gradient);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.tab-content {
    display: none;
    animation: fadeInSlide 0.5s forwards;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Internal Guide Styling - Simplified 2-Column Grid */
.links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.guide-link {
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-smooth);
}

@media screen and (max-width: 600px) {
    .links-grid {
        display: block !important; /* Forces items to stack like standard paragraphs */
    }
    
    .links-grid .guide-link {
        display: flex !important; /* Keeps the inside of the link pretty */
        margin-bottom: 1.5rem;   /* Adds the gap back since 'gap' only works on grids */
        width: 100% !important;
    }

    .link-title {
        font-weight: 600;
        font-size: 1.1rem !important;
        color: var(--primary-color);
        transition: var(--transition-smooth);
    }
}

.link-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-color);
    transition: var(--transition-smooth);
}

.guide-link:hover {
    background: white;
    border-color: var(--secondary-color);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.guide-link:hover .link-title {
    color: var(--secondary-color);
}

.guide-link::after {
    content: '→';
    font-size: 1.2rem;
    color: var(--secondary-color);
    opacity: 0.5;
    transition: var(--transition-smooth);
}

.guide-link:hover::after {
    opacity: 1;
    transform: translateX(5px);
}

/* Footer Premium */
footer {
    background: var(--primary-dark);
    padding: 5rem 50px 3rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4rem;
    max-width: 1700px;
    margin: 0 auto 4rem;
}

.footer-col h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1.8rem;
    position: relative;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--secondary-color);
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 0.8rem;
}

.footer-col a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.footer-col a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

.footer-bottom {
    text-align: center;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

/* Who Must Register Page Components */
.guide-sidebar {
    width: 380px;
    position: sticky;
    top: 100px;
    height: fit-content;
    background: white;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.guide-sidebar h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-list li {
    margin-bottom: 0.7rem;
}

.guide-list li a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    display: block;
    border-radius: 12px;
    transition: var(--transition-smooth);
    background-color: var(--bg-light, #f8fafc);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 4px solid transparent;
    white-space: normal;
    word-wrap: break-word;
}

.guide-list li a:hover {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
    border-color: transparent;
    border-left: 4px solid var(--accent-orange);
}

.guide-list li a.active,
.guide-list li.active a {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: var(--shadow-md);
    border-color: transparent;
    border-left: 4px solid var(--accent-orange);
}

/* Top toolbar */
.toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
}/* Video container */
.video-container {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.video-thumbnail {
    width: 100%;
    border-radius: 12px;
    display: block;
    margin-bottom: 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FF0000;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(255, 0, 0, 0.6);
    transition: transform 0.3s ease;
}

/* TABLET (typically 768px and below) */
@media (max-width: 992px) {
    .video-play-btn {
        display: none;
    }
}

/* MOBILE (typically 480px and below) */
@media (max-width: 480px) {
    .video-play-btn {
        display: none;
    }
}

.video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.video-play-btn::after {
    content: '';
    border-style: solid;
    border-width: 18px 0 18px 30px;
    border-color: transparent transparent transparent white;
    margin-left: 8px;
}

.video-watch-yt {
    background: #FF0000;
    color: white;
    border: none;
    padding: 0.9rem 1.8rem;
    border-radius: 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.video-watch-yt:hover {
    background: #cc0000;
    transform: translateY(-2px);
}

.video-caption {
    font-style: italic;
    color: black;
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
}

/* Intro text and links */
/* Floating chat widget */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .page-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        position: static;
    }

    .side-nav {
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        padding-bottom: 1rem;
    }

    .side-nav a,
    .guide-list li a {
        white-space: nowrap;
    }

    /* Who Must Register Page Responsive */
    .guide-sidebar {
        width: 100%;
        position: static;
        margin-bottom: 2rem;
    }

    .guide-list {
        display: flex;
        overflow-x: auto;
        gap: 0.7rem;
        padding-bottom: 1rem;
    }

    .guide-list li {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .toolbar {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .video-container {
        padding: 1.5rem;
    }

    .video-thumbnail {
        width: 100%;
        height: auto;
    }}

/* MOBILE RESPONSIVE (768px and below) */
@media screen and (max-width: 768px) {
    .side-nav {
        /* 1. Change direction from horizontal to vertical */
        flex-direction: column;

        /* 2. Remove horizontal scroll as it's no longer needed */
        overflow-x: visible; 
        
        /* 3. Optional: Ensure the nav takes full width */
        width: 100%;
        
        /* Reset padding-bottom if the horizontal scroll gap isn't needed */
        padding-bottom: 0;
    }

    .side-nav > *,
    .guide-list > li {
        /* 5. Ensure each nav item stretches to fill the column width */
        width: 100%;
        text-align: left; 
    }

    .side-nav a,
    .guide-list li a {
        white-space: normal;
        word-break: break-word;
    }

    .guide-list {
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 0;
    }

    .guide-list li {
        flex-shrink: unset;
        margin-bottom: 0.7rem;
    }
}

/* ==========================================================================
   Sub-Page Layout & Components
   ========================================================================== */
.breadcrumb-nav {
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.breadcrumb-nav a {
    color: white;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.breadcrumb-nav a:hover {
    color: var(--accent-orange);
}

.breadcrumb-separator {
    margin: 0 10px;
}

.breadcrumb-current {
    color: var(--accent-orange);
    font-weight: 600;
}

.sub-page-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    padding: 80px 60px;
    color: white;
    margin-bottom: 60px;
    background: linear-gradient(135deg, #1a2a44 0%, #1e3a8a 60%, #1a2a44 100%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    display: flex;
    align-items: center;
    box-shadow: 0 15px 35px rgba(26, 42, 68, 0.2);
}

/* Subtle pattern overlay for premium feel */
.sub-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('assets/image/palbeu-pattern.png') repeat;
    opacity: 0.12;
    /* Increased opacity for better visibility */
    pointer-events: none;
    mix-blend-mode: overlay;
}

.hero-overlay-dark {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-content-limited {
    max-width: 800px;
}

.hero-title-large {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-desc-large {
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Tablet Layout (max-width: 1024px) */
@media (max-width: 1024px) {
    .hero-title-large {
        font-size: 2.2rem;
        letter-spacing: -0.5px;
    }
    
    .hero-desc-large {
        font-size: 1.1rem;
    }
}

/* Mobile Layout (max-width: 768px) */
@media (max-width: 768px) {
    .hero-title-large {
        font-size: 1.8rem; /* Scaled down for phones */
        margin-bottom: 15px;
        letter-spacing: 0; /* Easier to read on small screens */
    }

    .hero-desc-large {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* Tablet Layout (max-width: 1024px) */
@media (max-width: 1024px) {
    .sub-page-hero {
        padding: 60px 40px;
        margin-bottom: 40px;
        border-radius: 20px;
    }
}

/* Mobile Layout (max-width: 768px) */
@media (max-width: 768px) {
    .sub-page-hero {
        /* Reduce padding significantly for small screens */
        padding: 40px 25px; 
        margin-bottom: 30px;
        
        /* Smaller radius looks better on mobile */
        border-radius: 16px; 
        
        /* Ensure content stacks or centers if needed */
        flex-direction: column;
        text-align: center; 
        justify-content: center;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .sub-page-hero {
        padding: 40px 20px;
        /* Optional: disable complex animation on very old low-power phones */
        animation: none; 
        background-size: cover;
    }
}

/* ==========================================================================
   "What We Do" Page Styles
   ========================================================================== */
.function-card {
    border-left: 6px solid var(--accent-orange);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.function-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-left-color: var(--accent-orange);
}

.function-card h2 {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--primary);
    font-size: 1.75rem;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 15px;
}

.function-card h2 i {
    background: var(--accent-orange);
    color: white;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.25rem;
}

.functions-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.functions-list li {
    position: relative;
    padding-left: 35px;
    line-height: 1.6;
    color: var(--text-dark);
    font-size: 1.05rem;
}

.functions-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--accent-orange);
    font-size: 0.9rem;
    background: rgba(255, 152, 65, 0.1);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.sub-section-title {
    color: var(--primary);
    font-size: 1.4rem;
    margin: 30px 0 20px;
    padding-left: 15px;
    border-left: 4px solid var(--accent-orange);
}

/* --- TABLET RESPONSIVE (iPads & Small Laptops) --- */
@media (min-width: 769px) and (max-width: 1100px) {
    .white-box.glass-box.function-card {
        padding: 25px; /* Slightly tighter than desktop */
    }

    .functions-list {
        /* This forces exactly 2 columns on tablets */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }

    .functions-list li {
        padding: 20px 15px 15px 45px;
        font-size: 1rem;
        min-height: 100px; /* Ensures boxes look uniform if text length varies */
    }

    .category-header h2 {
        font-size: 1.3rem;
    }
}

/* ---  MOBILE RESPONSIVE OVERRIDES --- */
@media (max-width: 768px) {
    .white-box.glass-box.function-card {
        padding: 15px; /* Reduce outer padding to give inner boxes more room */
    }

    .functions-list {
        grid-template-columns: 1fr; /* Force single column so boxes aren't thin */
        gap: 12px;
    }

    .functions-list li {
        padding: 15px 15px 15px 45px; /* Tighter padding for mobile */
        font-size: 0.95rem;
    }

    .functions-list li::before {
        left: 10px;
        top: 18px;
        width: 22px;
        height: 22px;
    }
}

/* Fix for very small screens (iPhone SE) */
@media (max-width: 400px) {
    .category-header {
        padding: 15px;
    }
    
    .functions-list li {
        padding-left: 40px;
    }
}

/* ==========================================================================
   About Office Page Styles
   ========================================================================== */

.mandate-section {
    margin-bottom: 60px; 
    border-left: 6px solid orange;
}

.mandate-title {
    color: var(--primary); 
    margin-bottom: 25px; 
    font-size: 2rem; 
    display: flex; 
    align-items: center; 
    gap: 15px;
}

.mandate-content {
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.8;
}

/* MOBILE RESPONSIVE (768px and below) */
@media screen and (max-width: 768px) {
    .mandate-title {
        /* 1. Scale down font size so it doesn't wrap awkwardly */
        font-size: 1.5rem; 
        
        /* 2. Allow icon and text to stack if the title is very long */
        flex-wrap: wrap; 
        text-align: left !important;
        
        margin-bottom: 15px;
        gap: 10px;
    }

    .mandate-content {
        /* 4. Slightly smaller font for better readability on small screens */
        font-size: 1rem; 
        line-height: 1.6;
        text-align: left; /* Keep body text left-aligned for readability */
    }
}

.mandate-paragraph {
    margin-bottom: 20px;
}

.architecture-section {
    margin-bottom: 60px; 
    overflow-x: 100%; 
    background: white url('assets/image/palbeu-pattern.png') repeat;
}

.architecture-title {
    color: var(--primary); 
    margin-bottom: 0px; 
    font-size: 2.2rem; 
    text-align: center; 
    font-weight: 700; 
    letter-spacing: -0.5px;
}

/* TABLET RESPONSIVE (1024px and below) */
@media screen and (max-width: 1024px) {
    .architecture-title {
        font-size: 1.8rem; /* Slightly smaller for tablets */
        margin-bottom: 35px; /* Reduce bottom spacing */
    }
}

/* MOBILE RESPONSIVE (768px and below) */
@media screen and (max-width: 768px) {
    .architecture-title {
        /* 1. Scale font significantly for small screens */
        font-size: 1.5rem; 
        
        /* 2. Reduce margin so content doesn't feel miles away */
        margin-bottom: 25px; 
        
        /* 3. Tighten letter spacing for smaller scale */
        letter-spacing: 0; 
        
        /* 4. Add horizontal padding so long titles don't touch screen edges */
        padding-left: 15px;
        padding-right: 15px;
        
        /* 5. Ensure line-height is tight but readable */
        line-height: 1.3;
    }
}/* TABLET RESPONSIVE (Typically 1024px and below) */


/* MOBILE RESPONSIVE (Typically 600px and below) */

.mission-vision-section {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
    margin-top: 40px;
    margin-bottom: 60px;
}

/* Mobile Responsive (768px and below) */
@media screen and (max-width: 768px) {
    .mission-vision-section {
        /* Switch from side-by-side to stacked */
        grid-template-columns: 1fr;
        
        /* Reduce gap so the "Mission" and "Vision" boxes feel connected */
        gap: 25px;
        
        /* Adjust top margin for mobile spacing */
        margin-top: 30px;
        
        /* Ensure equal horizontal padding so it stays centered */
        padding-left: 20px;
        padding-right: 20px;
    }
}

.mission-card {
    border-left: 6px solid orange; 
    margin-bottom: 0; 
    background: linear-gradient(to bottom, white, rgb(255, 250, 240));
}

.vision-card {
    border-left: 6px solid orange; 
    margin-bottom: 0; 
    background: linear-gradient(to bottom, white, rgb(230, 235, 245));
}

.mission-vision-title {
    color: var(--primary); 
    margin-bottom: 20px; 
    font-size: 1.8rem; 
    display: flex; 
    align-items: center; 
    gap: 15px;
}

.mission-vision-content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-dark);
}

/* MOBILE RESPONSIVE (768px and below) */
@media screen and (max-width: 768px) {
    .mission-vision-title {
        /* 1. Scale down font for mobile */
        font-size: 1.4rem; 

        /* 3. Allow icon to wrap if title is long */
        flex-wrap: wrap; 
        gap: 10px;
        margin-bottom: 15px;
    }

    .mission-vision-content {
        /* 4. Adjust font and spacing for readability */
        font-size: 1rem; 
        line-height: 1.6;   
    }
}

.divisions-section {
    margin-bottom: 60px; 
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,250,240,0.9) 100%); 
    box-shadow: 0 8px 32px rgba(226, 149, 19, 0.15); 
    border-radius: 24px; 
    position: relative; 
    overflow: hidden;
}

.divisions-title {
    color: var(--primary); 
    margin-bottom: 40px; 
    font-size: 2.4rem; 
    font-weight: 800; 
    text-align: center; 
    position: relative; 
    padding-top: 20px;
}

/* MOBILE RESPONSIVE (768px and below) */
@media screen and (max-width: 768px) {
    .divisions-title {
        /* 1. Scale font size so long words don't overflow */
        font-size: 1.6rem; 
        
        /* 2. Tighten spacing for smaller screens */
        margin-bottom: 50px; 
        padding-top: 15px;
        
        /* 3. Ensure comfortable line-height for wrapped text */
        line-height: 1.2;
        
        /* 4. Add horizontal padding as a safety buffer */
        padding-left: 15px;
        padding-right: 15px;
        
        /* 5. Keep it centered */
        display: block;
        width: 100%;
    }
}

.divisions-title-divider {
    width: 80px; 
    height: 3px; 
    background: var(--accent-orange); 
    margin: 15px auto 0; 
    border-radius: 2px;
}

.divisions-grid {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 35px;
}

/* Mobile Responsive (768px and below) */
@media screen and (max-width: 768px) {
    .divisions-grid {
        /* Force the grid into a single column */
        grid-template-columns: 1fr;
        
        /* Optional: Reduce the gap for smaller screens so there isn't too much white space */
        gap: 20px;
    }
}

.overview-card {
    background: white; 
    border-radius: 16px; 
    padding: 30px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); 
    transition: all 0.3s ease; 
    position: relative; 
    overflow: hidden; 
    border-top: 3px solid var(--accent-orange);
}

.overview-card::before {
    content: '';
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 60px; 
    height: 60px; 
    background: var(--accent-orange); 
    opacity: 0.1; 
    border-radius: 0 0 0 60px;
}

.overview-title {
    color: var(--primary); 
    font-weight: 700; 
    font-size: 1.3rem; 
    margin-bottom: 15px; 
    position: relative; 
    z-index: 1;
}

.overview-description {
    color: var(--text-muted); 
    margin-bottom: 20px; 
    line-height: 1.6; 
    position: relative; 
    z-index: 1;
}/* ==========================================================================
   What We Do Page Styles - Enhanced List Styling
   ========================================================================== */

.functions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.functions-list li {
    padding: 30px 20px 16px 45px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 12px;
    
    transition: var(--transition-smooth);
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.functions-list li::before {
    content: "▸";
    position: absolute;
    left: 12px;
    top: 30px;
    transform: none;
    color: var(--accent-orange);
    font-size: 1.2rem;
    font-weight: bold;
}

.functions-list li:hover {
    background: #fff;
    box-shadow: var(--shadow-soft);
    transform: translateX(4px);
    border-left-color: var(--primary);
}

.functions-list li:hover::before {
    color: var(--primary);
}

/* Alternative numbered list style */
.functions-list.numbered li {
    counter-increment: function-counter;
    padding-left: 50px;
}

.functions-list.numbered li::before {
    content: counter(function-counter);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--accent-orange);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Alternative bullet style */
.functions-list.bullets li::before {
    content: "•";
    font-size: 1.5rem;
    color: var(--accent-orange);
}

/* Alternative dash style */
.functions-list.dashes li::before {
    content: "—";
    font-size: 1.2rem;
    color: var(--accent-orange);
    font-weight: 300;
}

/* ==========================================================================
   "Who is Who" Page Styles
   ========================================================================== */

.staff-directory-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin-top: 40px;
}

.division-section:first-child {
    border-top: none;
    padding-top: 0;
}

.division-title {
    color: var(--primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Tablet Layout (max-width: 1024px) */
@media (max-width: 1024px) {
    .division-title {
        font-size: 1.7rem;
        margin-bottom: 25px;
        gap: 12px;
    }
}

/* Mobile Layout (max-width: 768px) */
@media (max-width: 768px) {
    .division-title {
        font-size: 1.4rem; /* Smaller size for mobile screens */
        margin-bottom: 20px;
        gap: 10px;
        letter-spacing: 0; /* Removing negative spacing makes it easier to read on small screens */
        flex-wrap: wrap; /* Allows icons/text to wrap if the title is very long */
    }
}

.division-title i {
    color: var(--accent-orange);
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.staff-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
}

.staff-card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), white);
}

.staff-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-color: rgba(247, 148, 29, 0.4);
}

.staff-card.vacant {
    background: rgba(0, 0, 0, 0.02);
    border-style: dashed;
    border-left-style: solid;
    opacity: 0.8;
}

.staff-photo-wrapper {
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
    background: #f1f5f9;
}

/* NEW: cover container */
.photo-cover {
    position: absolute;
    inset: 0; /* fills entire wrapper */
}

/* IMPORTANT: force full coverage */
.photo-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover zoom fix */
.staff-card:hover .photo-cover img {
    transform: scale(1.08);
}
.staff-card:hover .staff-photo {
    transform: scale(1.08);
}

.staff-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--primary-light);
    opacity: 0.5;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.staff-card.vacant .staff-photo-wrapper {
    background: #f8fafc;
    opacity: 0.6;
}

.staff-info h3 {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 5px;
    font-weight: 700;
}

.staff-role {
    font-size: 0.95rem;
    color: var(--accent-orange);
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.staff-details {
    margin-top: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 15px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.detail-item i {
    width: 16px;
    color: var(--primary);
    opacity: 0.7;
}

.status-badge {
    position: absolute;
    bottom: 30px;
    right: 20px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 2;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
}

.status-badge.present {
    background: rgba(74, 222, 128, 0.15);
    color: #166534;
}

.status-badge.vacant {
    background: rgba(148, 163, 184, 0.15);
    color: #475569;
}

/* ==========================================================================
   Organogram & About Office Styles
   ========================================================================== */

.organogram-tree {
    min-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}/* TABLET & MOBILE (Typically 1024px and below) */
@media screen and (max-width: 1024px) {
    .organogram-tree {
        /* 1. Kill the fixed width so it fits the screen */
        min-width: 100% !important; 
        width: 100%;
        
        /* 2. Ensure flex centering is strictly enforced */
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }}/* ==========================================================================
   "Laws & Regulations" Page Styles
   ========================================================================== */

.law-section {
    margin-bottom: 60px;
}

.law-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.law-card {
    display: flex;
    align-items: center;
    gap: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 20px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

/* Tablet Layout (max-width: 1024px) */
@media (max-width: 1024px) {
    .law-section {
        margin-bottom: 40px;
    }
    
    .law-grid {
        /* Reduce min-width to allow two columns on tablets */
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }
}

/* Mobile Layout (max-width: 768px) */
@media (max-width: 768px) {
    .law-section {
        margin-bottom: 30px;
    }

    .law-grid {
        /* Force a single column on mobile */
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 20px;
    }
}

.law-info {
    flex: 1;
}

.law-info h3 {
    font-size: 1.25rem;
    color: var(--primary);
    margin-bottom: 10px;
    line-height: 1.4;
    font-weight: 700;
}

/* Tablet & Mobile Layout */
@media (max-width: 768px) {
    .law-info h3 {
        /* Slightly smaller to prevent title from taking up too much vertical space */
        font-size: 1.15rem; 
        margin-bottom: 8px;
        line-height: 1.3; /* Tighter line height for mobile wrapping */
    }
}

/* Small Mobile Layout */
@media (max-width: 480px) {
    .law-info h3 {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }
}

.law-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.law-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.law-meta i {
    color: var(--accent-orange);
}

.law-download-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.law-card:hover {
    transform: translateY(-8px);
    border-color: rgba(247, 148, 29, 0.3);
}

.law-card:hover .law-download-btn {
    background: var(--accent-orange);
    color: white;
    transform: rotate(360deg);
}/* ==========================================================================
   Responsive Adjustments for New Pages
   ========================================================================== */

@media (max-width: 1200px) {
  .page-container {
    flex-direction: column;
    gap: 2rem;
  }
  .guide-sidebar {
    width: 100%;
    position: static;
  }
  .guide-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 1024px) {
  .main-layout-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 0;
  }
  .content-dashboard {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
  }
  .hero-slider {
    height: 300px;
    grid-column: 1 / -1;
  }}

@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }
  .main-layout-grid {
    padding: 1.5rem 0;
    gap: 1.5rem;
  }
  .content-dashboard {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-slider {
    height: 250px;
  }
  .service-section-card {
    padding: 1.5rem;
  }
  .card-header h3 {
    font-size: 1.15rem;
  }  .guide-sidebar {
    padding: 1.5rem;
  }
  .guide-list {
    grid-template-columns: 1fr;
  }
  .video-container {
    padding: 1.5rem;
  }
  .premium-footer {
    padding: 3rem 1rem 1.5rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .links-columns {
    grid-template-columns: 1fr;
  }}

@media (max-width: 480px) {
  .toolbar {
    flex-direction: column;
    gap: 0.75rem;
  }  .guide-category {
    padding: 2rem 1.5rem;
  }
  .category-title-group h2 {
    font-size: 1.8rem;
  }
}



/* ==========================================================================
   OFFICE REDESIGN - PREMIUM & BHUTANESE IDENTITY
   ========================================================================== */

/* Palbeu Pattern Backgrounds */
.about-main-content {

    position: relative;
    padding: 60px 0;
}

.about-main-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L60 20 L70 10 L80 20 L70 30 L80 40 L70 50 L80 60 L70 70 L60 60 L50 70 L40 60 L30 70 L20 60 L30 50 L20 40 L30 30 L20 20 L30 10 L40 20 Z' stroke='rgba(26, 42, 68, 0.03)' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    opacity: 0.6;
    z-index: 0;
}

.about-main-content>* {
    position: relative;
    z-index: 1;
}

/* Modernized Organogram */
.organogram-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}/* Connector Styles */
/* Division Overview Enhanced */
/* Animations */
.fade-up {
    animation: fadeInUp 0.8s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(247, 148, 29, 0.1);
    color: var(--secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 5px;
    border: 1px solid rgba(247, 148, 29, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hover-lift {
    transition: var(--transition-smooth);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-bold);
}

/* ==========================================================================
   "How-To Guides" Page Styles
   ========================================================================== */

.content-area {
    flex: 1;
}

.guide-category {
    background: var(--bg-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.02);
    transition: var(--transition-smooth);
}

.guide-category:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

/* Before You Start Module */
.before-you-start {
    background: var(--bg-white);
    border-radius: var(--border-radius-lg);
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-light-orange);
    transition: var(--transition-smooth);
}

.before-you-start:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.before-you-start .module-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.before-you-start .module-header .icon {
    font-size: 2rem;
}

.before-you-start .module-header h2 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;
}

.before-you-start .module-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.before-you-start .module-list li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
}

.before-you-start .module-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--text-muted);
    font-weight: 300;
}

.before-you-start .module-list a {
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.before-you-start .module-list li:first-child a {
    color: var(--link-purple);
}

.before-you-start .module-list li:not(:first-child) a {
    color: var(--link-blue);
}

.before-you-start .module-list a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    cursor: pointer;
}

.category-title-group h2 {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 2rem;
    color: var(--secondary-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.category-title-group p {
    color: var(--text-muted);
    font-size: 0.95rem;
    font-style: italic;
}

.collapse-icon {
    width: 36px;
    height: 36px;
    background: var(--bg-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-weight: 800;
    transition: var(--transition-smooth);
    margin-top: 5px;
}

.guide-category:hover .collapse-icon {
    background: var(--secondary-color);
    color: white;
}

/* Advanced Tabs */
.category-tabs {
    display: flex;
    background: var(--bg-light);
    padding: 6px;
    border-radius: 16px;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}

.tab {
    flex: 1;
    padding: 0.8rem;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 1;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}

.tab.active {
    color: var(--text-dark);
    background: var(--accent-gradient);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.tab-content {
    display: none;
    animation: fadeInSlide 0.5s forwards;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}





.contact-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 80px;
    max-width: 1400px;
    
    /* 1. Centers the grid container itself */
    margin-left: auto;
    margin-right: auto;
    
    /* 2. Centers the content inside the grid cells */
    justify-content: center; 
}

/* Tablet and Mobile */
@media (max-width: 1024px) {
    .contact-content-grid {
        grid-template-columns: 1fr; /* Stacked */
        
        /* 3. Ensures the single column stays centered */
        justify-items: center; 
        
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .contact-form-container h2 {
        font-size: 1.7rem;
        line-height: 50px;   
    }
}

.contact-info-panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 22px;
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.info-card:hover {
    transform: translateY(-4px);
    border-color: rgba(247, 148, 29, 0.4);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.info-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), #004fb0);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.info-details h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--accent-orange);
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.info-details p {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
}

.contact-form-container {
    padding: 50px;
}

/* Mobile */
@media (max-width: 700px) {
    .contact-form-container {
        padding: 40px !important;
    }
}

.contact-form-container h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.contact-form-container p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.map-wrapper {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-lg);
    margin-bottom: 80px;
    position: relative;
}

.map-overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    pointer-events: none;
}

@media (max-width: 1024px) {
.contact-content-grid {
  grid-template-columns: 1fr;
}}/* Tablet Responsive (2 Columns) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Forces exactly 2 columns */
        gap: 40px; /* Space between the columns */
        align-items: start;
    }

    .footer-col.links-col {
        grid-column: span 2; /* This makes the "Useful Links" take the full bottom row */
        margin-top: 20px;
    }
    
    .links-columns {
        display: flex;
        justify-content: space-between;
    }
}


/* ===== "Send us a Message" header ===== */
.form-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
}

.form-header-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #004fb0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 8px 20px rgba(0, 79, 176, 0.25);
}

.form-header h2 {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.form-header p {
    font-size: 1rem;
    color: var(--text-muted, #64748b);
    line-height: 1.6;
}

/* ===== Contact form layout ===== */
.contact-form-container .wpcf7-form p {
    margin: 0 !important;
}

.contact-form-container .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 32px;
}

.contact-form-container .form-group {
    margin-bottom: 32px;
}

.contact-form-container .form-row .form-group {
    margin-bottom: 0;
}

.contact-form-container label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 8px;
    letter-spacing: 0.2px;
}

.contact-form-container .wpcf7-form-control-wrap {
    position: relative;
    display: block;
}

/* Field icons, matched via CF7's own data-name attributes */
.contact-form-container .wpcf7-form-control-wrap::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 16px;
    top: 16px;
    color: var(--accent-orange);
    font-size: 0.95rem;
    pointer-events: none;
}

.contact-form-container .wpcf7-form-control-wrap[data-name="your-name"]::before { content: "\f007"; }
.contact-form-container .wpcf7-form-control-wrap[data-name="your-email"]::before { content: "\f0e0"; }
.contact-form-container .wpcf7-form-control-wrap[data-name="your-phone"]::before { content: "\f095"; }
.contact-form-container .wpcf7-form-control-wrap[data-name="your-message"]::before {
    content: "\f27a";
    top: 18px;
}

/* Inputs & textarea */
.contact-form-container input.form-control,
.contact-form-container textarea.form-control {
    width: 100%;
    padding: 14px 16px 14px 44px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--primary);
    box-sizing: border-box;
    margin: 0;
    transition: var(--transition-smooth, all 0.3s ease);
}

.contact-form-container textarea.form-control {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.contact-form-container input.form-control::placeholder,
.contact-form-container textarea.form-control::placeholder {
    color: #94a3b8;
}

.contact-form-container input.form-control:hover,
.contact-form-container textarea.form-control:hover {
    border-color: #cbd5e1;
}

.contact-form-container input.form-control:focus,
.contact-form-container textarea.form-control:focus {
    outline: none;
    border-color: var(--accent-orange);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(226, 149, 19, 0.12);
}

/* Validation error state */
.contact-form-container .wpcf7-form-control.wpcf7-not-valid {
    border-color: #e11d48;
    background: #fff1f2;
}

.contact-form-container .wpcf7-not-valid-tip {
    display: block;
    color: #e11d48;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 6px;
}

/* Submit-response banner */
.contact-form-container .wpcf7-response-output {
    margin: 24px 0 0 !important;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1.5px solid transparent;
}

.contact-form-container .wpcf7-form.sent .wpcf7-response-output {
    color: #15803d;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.contact-form-container .wpcf7-form.failed .wpcf7-response-output,
.contact-form-container .wpcf7-form.aborted .wpcf7-response-output {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.contact-form-container .wpcf7-form.invalid .wpcf7-response-output,
.contact-form-container .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-form-container .wpcf7-form.spam .wpcf7-response-output {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
}

.contact-form-container .wpcf7-spinner {
    margin: 0 0 0 14px;
}

/* Submit button */
.contact-form-container .btn-submit {
    color: #fff;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary), #004fb0);
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.2px;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    box-shadow: 0 10px 25px rgba(0, 79, 176, 0.2);
    margin-top: 8px;
}

.contact-form-container .btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 79, 176, 0.3);
}

.contact-form-container .btn-submit:active {
    transform: translateY(-1px);
}

.contact-form-container .wpcf7-form.submitting .btn-submit {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

@media (max-width: 700px) {
    .contact-form-container .form-row {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .form-header {
        flex-direction: column;
        gap: 14px;
    }
}

.hero-section {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
color: white;
padding: 6rem 0 4rem;
position: relative;
overflow: hidden;
}

.hero-pattern {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
}

.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
}

.hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}

.hero-subtitle {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2rem;
}

.main-content {
padding: 4rem 0;
}

.content-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

.section-card {
background: var(--bg-white);
border-radius: 16px;
padding: 3rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
margin-bottom: 3rem;
}

.card-header {
display: flex;
align-items: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--border-color);
}

.card-icon {
width: 64px;
height: 64px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5rem;
font-size: 1.75rem;
}

.card-title {
font-size: 2rem;
font-weight: 700;
color: var(--primary-dark);
margin: 0;
}

.info-box {
background: var(--accent-light);
border: 1px solid var(--accent);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}

.info-box-title {
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
display: flex;
align-items: center;
font-size: 1.25rem;
}

.info-box-title i {
margin-right: 0.75rem;
color: var(--accent);
}

.info-box-content {
color: var(--text-main);
font-size: 1rem;
line-height: 1.7;
}

.importance-badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.35rem 0.85rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}

.badge-critical {
background: var(--danger-light);
color: var(--danger);
}

.badge-high {
background: var(--warning-light);
color: var(--warning);
}

.badge-medium {
background: var(--accent-light);
color: var(--accent);
}

.timeline-section {
margin-top: 3rem;
padding: 2.5rem;
background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
border-radius: 16px;
border: 1px solid var(--accent);
}

.timeline-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 2rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

.timeline-title i {
margin-right: 0.75rem;
color: var(--accent);
}

.timeline-item {
display: flex;
align-items: center;
padding: 1.25rem;
margin-bottom: 1rem;
background: white;
border-radius: 12px;
border-left: 4px solid var(--accent);
transition: all 0.3s ease;
}

.timeline-item:hover {
transform: translateX(4px);
box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.1);
}

.timeline-date {
font-weight: 600;
color: var(--accent);
margin-right: 1.5rem;
min-width: 120px;
font-size: 1rem;
}

.timeline-description {
color: var(--text-main);
font-size: 1rem;
line-height: 1.5;
}

.action-buttons {
display: flex;
gap: 1.5rem;
margin-top: 2.5rem;
flex-wrap: wrap;
justify-content: center;
}

.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
padding: 1rem 2rem;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1.1rem;
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(245, 158, 11, 0.3);
}

.btn-secondary {
background: white;
color: var(--accent);
padding: 1rem 2rem;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
border: 2px solid var(--accent);
transition: all 0.3s ease;
font-size: 1.1rem;
}

.btn-secondary:hover {
background: var(--accent);
color: white;
}

.btn-primary i,
.btn-secondary i {
margin-right: 0.75rem;
}

@media (max-width: 768px) {
.section-card {
  padding: 2rem;
}

.hero-title {
  font-size: 2rem;
}

.hero-subtitle {
  font-size: 1.1rem;
}

.action-buttons {
  flex-direction: column;
  gap: 1rem;
}

.btn-primary,
.btn-secondary {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.importance-badge {
  position: static;
  margin-top: 1rem;
  display: inline-block;
}

.timeline-item {
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
}

.timeline-date {
  margin-right: 0;
  margin-bottom: 0.5rem;
  min-width: auto;
}

.card-header {
  flex-direction: column;
  text-align: center;
}

.card-icon {
  margin-right: 0;
  margin-bottom: 1rem;
}

.card-title {
  font-size: 1.5rem;
}

.content-wrapper {
  padding: 0 1rem;
}

.hero-section {
  padding: 4rem 0 3rem;
}

.main-content {
  padding: 2rem 0;
}}

@media (max-width: 480px) {
.section-card {
  padding: 1.5rem;
}

.hero-title {
  font-size: 1.75rem;
}

.hero-subtitle {
  font-size: 1rem;
}

.timeline-item {
  padding: 0.75rem;
}

.card-title {
  font-size: 1.25rem;
}

.content-wrapper {
  padding: 0 0.75rem;
}

.hero-section {
  padding: 3rem 0 2rem;
}

.main-content {
  padding: 1.5rem 0;
}

.action-buttons {
  margin-top: 1.5rem;
}

.btn-primary,
.btn-secondary {
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
}}

/* Additional responsive improvements */
@media (max-width: 1024px) {
.content-wrapper {
  padding: 0 1.5rem;
}

.section-card {
  padding: 2.5rem;
}
}

@media (min-width: 1200px) {
.content-wrapper {
  max-width: 1400px;
}
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
.btn-primary,
.btn-secondary {
  min-height: 44px;
  min-width: 44px;
}}

/* Print styles */
@media print {
.hero-section,
.site-header,
.premium-footer {
  display: none;
}

.main-content {
  padding: 0;
}

.section-card {
  box-shadow: none;
  border: 1px solid #ccc;
  break-inside: avoid;
}
}

.sidebar-announcements .item-list li a {
  color: inherit;           
  text-decoration: none;    
}

.sidebar-announcements .item-list li a:hover {
  color: inherit;           
  text-decoration: none;    
}


/* =============================================
         ANNOUNCEMENTS PAGE LAYOUT
         ============================================= */
.announcements-main-content {
padding: 20px 0;
}

/* Responsive Design for Announcements */
@media (max-width: 1200px) {
.sidebar-announcements {
  max-width: 100%;
}
}

@media (max-width: 992px) {
.announcements-main-content {
  padding: 15px 0;
}

.sidebar-announcements .white-box {
  padding: 20px;
}

.sidebar-announcements .item-list li {
  font-size: 1rem;
  padding: 20px 10px;
}
}

@media (max-width: 768px) {
.announcements-main-content {
  padding: 10px 0;
}

.sidebar-announcements {
  margin: 0 auto;
  max-width: 100%;
}

.sidebar-announcements .white-box {
  padding: 15px;
}

.sidebar-announcements h3 {
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.sidebar-announcements .item-list {
  margin: 0;
}

.sidebar-announcements .item-list li {
  font-size: 1rem;
  padding: 20px 10px;
  line-height: 1.4;
}

.sidebar-announcements .item-list li i {
  width: 20px;
  font-size: 1rem;
}
}

@media (max-width: 576px) {
.announcements-main-content {
  padding: 8px 0;
}

.sidebar-announcements .white-box {
  padding: 12px;
}

.sidebar-announcements h3 {
  font-size: 1rem;
  margin-bottom: 12px;
}

.sidebar-announcements .item-list li {
  font-size: 0.9rem;
  padding: 15px 10px;
}

.sidebar-announcements .item-list li i {
  width: 18px;
  font-size: 0.9rem;
}
}

@media (max-width: 480px) {
.announcements-main-content {
  padding: 5px 0;
}

.sidebar-announcements .white-box {
  padding: 10px;
}

.sidebar-announcements h3 {
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.sidebar-announcements .item-list li {
  font-size: 0.9rem;
  padding: 15px 10px;
  line-height: 1.3;
}

.sidebar-announcements .item-list li i {
  width: 16px;
  font-size: 0.9rem;
}


/* =============================================
         PRESS RELEASE PAGE LAYOUT
         ============================================= */
.press-release-main-content {
padding: 20px 0;
}

.press-release-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 30px;
}

.press-release-row:last-child {
margin-bottom: 0;
}

.press-release-item {
flex: 1;
min-width: 200px;
text-align: center;
}

.press-release-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 15px 10px;
background: var(--light-gray, #f8f9fa);
border-radius: 10px;
text-decoration: none;
color: var(--text-dark, #1a2a44);
transition: all 0.3s ease;
border: 1px solid var(--border-color, #e2e8f0);
height: 100%;
}

.press-release-link .content-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}

.press-release-link:hover {
background: var(--accent-orange, #fdb913);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(253,185,19,0.3);
}

.press-release-link i:first-child {
font-size: 1.5rem;
color: var(--primary-blue, #1a2a44);
transition: color 0.3s ease;
}

.press-release-link:hover i:first-child {
color: white;
}

.press-release-link span {
font-size: 0.9rem;
font-weight: 600;
line-height: 1.4;
flex: 1;
text-align: center;
}

.press-release-link i:last-child {
font-size: 0.8rem;
opacity: 0.7;
transition: opacity 0.3s ease;
flex-shrink: 0;
}

.press-release-link:hover i:last-child {
opacity: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
.press-release-row {
  gap: 15px;
}

.press-release-item {
  min-width: 180px;
}

.press-release-link {
  padding: 14px 10px;
}
}

@media (max-width: 992px) {
.press-release-row {
  gap: 12px;
  margin-bottom: 25px;
}

.press-release-item {
  min-width: 160px;
}

.press-release-link {
  padding: 12px 8px;
}

.press-release-link span {
  font-size: 0.85rem;
}

.press-release-link i:first-child {
  font-size: 1.4rem;
}
}

@media (max-width: 768px) {
.press-release-row {
  flex-direction: column;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
}

.press-release-item {
  min-width: auto;
  width: 100%;
  max-width: 320px;
}

.press-release-link {
  padding: 15px 12px;
}

.press-release-link i:first-child {
  font-size: 1.3rem;
}

.press-release-link span {
  font-size: 0.9rem;
}
}

@media (max-width: 576px) {
.press-release-row {
  gap: 12px;
  margin-bottom: 15px;
}

.press-release-item {
  max-width: 280px;
}

.press-release-link {
  padding: 12px 10px;
}

.press-release-link i:first-child {
  font-size: 1.2rem;
}

.press-release-link span {
  font-size: 0.85rem;
}

.press-release-link i:last-child {
  font-size: 0.7rem;
}
}

@media (max-width: 480px) {
.press-release-main-content {
  padding: 15px 0;
}

.press-release-row {
  gap: 10px;
  margin-bottom: 12px;
}

.press-release-item {
  max-width: 250px;
}

.press-release-link {
  padding: 10px 8px;
  gap: 6px;
}

.press-release-link i:first-child {
  font-size: 1.1rem;
}

.press-release-link .content-row {
  gap: 6px;
}

.press-release-link span {
  font-size: 0.8rem;
}

.press-release-link i:last-child {
  font-size: 0.65rem;
}
}

@media (max-width: 360px) {
.press-release-main-content {
  padding: 10px 0;
}

.press-release-row {
  gap: 8px;
  margin-bottom: 10px;
}

.press-release-item {
  max-width: 220px;
}

.press-release-link {
  padding: 8px 6px;
  gap: 4px;
}

.press-release-link i:first-child {
  font-size: 1rem;
}

.press-release-link .content-row {
  gap: 4px;
}

.press-release-link span {
  font-size: 0.75rem;
}

.press-release-link i:last-child {
  font-size: 0.6rem;
}

/* Announcement Content Display Styles */
}

/* Announcement Content Display Styles */
/* Responsive styles for announcement content */


/* Annual Returns Page Styles */
.annual-returns-page {
--primary-dark: #0f172a;
--primary: #1e293b;
--accent: #f59e0b;
--accent-hover: #d97706;
--accent-light: #fef3c7;
--teal: #0d9488;
--teal-light: #ccfbf1;
--success: #10b981;
--success-light: #d1fae5;
--warning: #f59e0b;
--warning-light: #fef3c7;
--danger: #ef4444;
--danger-light: #fee2e2;
--text-main: #334155;
--text-muted: #64748b;
--bg-body: #f8fafc;
--bg-white: #ffffff;
--border-color: #e2e8f0;
}

.annual-returns-page .hero-section {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
color: white;
padding: 6rem 0 4rem;
position: relative;
overflow: hidden;
}

/* Basic test styles to ensure CSS is loading */
.annual-returns-page {
background: #f8fafc !important;
}

.annual-returns-page .hero-title {
color: white !important;
font-size: 3rem !important;
text-align: center !important;
}

.annual-returns-page .hero-pattern {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
}

.annual-returns-page .hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
}

.annual-returns-page .hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}

.annual-returns-page .hero-subtitle {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2rem;
}

.annual-returns-page .main-content {
padding: 4rem 0;
}

.annual-returns-page .content-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

.annual-returns-page .section-card {
background: var(--bg-white);
border-radius: 16px;
padding: 3rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
margin-bottom: 3rem;
}

.annual-returns-page .card-header {
display: flex;
align-items: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--border-color);
}

.annual-returns-page .card-icon {
width: 64px;
height: 64px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5rem;
font-size: 1.75rem;
}

.annual-returns-page .annual-returns-icon {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
}

.annual-returns-page .card-title {
font-size: 2rem;
font-weight: 700;
color: var(--primary-dark);
margin: 0;
}

.annual-returns-page .info-box {
background: var(--accent-light);
border: 1px solid var(--accent);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}

.annual-returns-page .info-box-title {
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
display: flex;
align-items: center;
font-size: 1.25rem;
}

.annual-returns-page .info-box-title i {
margin-right: 0.75rem;
color: var(--accent);
}

.annual-returns-page .info-box-content {
color: var(--text-main);
font-size: 1rem;
line-height: 1.7;
}

.annual-returns-page .requirements-list {
margin: 2.5rem 0;
}

.annual-returns-page .requirements-list h3 {
font-size: 1.5rem;
color: var(--primary-dark);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}

.annual-returns-page .requirements-list h3 i {
margin-right: 0.75rem;
color: var(--accent);
}

.annual-returns-page .requirement-item {
display: flex;
align-items: flex-start;
padding: 1.5rem;
margin-bottom: 1.25rem;
background: var(--bg-body);
border-radius: 12px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
position: relative;
}

.annual-returns-page .requirement-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
border-color: var(--accent);
}

.annual-returns-page .requirement-number {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-right: 1.25rem;
flex-shrink: 0;
}

.annual-returns-page .requirement-content {
flex: 1;
}

.annual-returns-page .requirement-title {
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 0.75rem;
font-size: 1.2rem;
}

.annual-returns-page .requirement-description {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
}

.annual-returns-page .importance-badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.35rem 0.85rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}

.annual-returns-page .badge-critical {
background: var(--danger-light);
color: var(--danger);
}

.annual-returns-page .badge-high {
background: var(--warning-light);
color: var(--warning);
}

.annual-returns-page .badge-medium {
background: var(--accent-light);
color: var(--accent);
}

.annual-returns-page .timeline-section {
margin-top: 3rem;
padding: 2.5rem;
background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
border-radius: 16px;
border: 1px solid var(--accent);
}

.annual-returns-page .timeline-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 2rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

.annual-returns-page .timeline-title i {
margin-right: 0.75rem;
color: var(--accent);
}

.annual-returns-page .timeline-item {
display: flex;
align-items: center;
padding: 1.25rem;
margin-bottom: 1rem;
background: white;
border-radius: 12px;
border-left: 4px solid var(--accent);
transition: all 0.3s ease;
}

.annual-returns-page .timeline-item:hover {
transform: translateX(4px);
box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.1);
}

.annual-returns-page .timeline-date {
font-weight: 600;
color: var(--accent);
margin-right: 1.5rem;
min-width: 120px;
font-size: 1rem;
}

.annual-returns-page .timeline-description {
color: var(--text-main);
font-size: 1rem;
line-height: 1.5;
}

.annual-returns-page .action-buttons {
display: flex;
gap: 1.5rem;
margin-top: 2.5rem;
flex-wrap: wrap;
justify-content: center;
}

.annual-returns-page .btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
padding: 1rem 2rem;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1.1rem;
}

.annual-returns-page .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(245, 158, 11, 0.3);
}

.annual-returns-page .btn-secondary {
background: white;
color: var(--accent);
padding: 1rem 2rem;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
border: 2px solid var(--accent);
transition: all 0.3s ease;
font-size: 1.1rem;
}

.annual-returns-page .btn-secondary:hover {
background: var(--accent);
color: white;
}

.annual-returns-page .btn-primary i,
.annual-returns-page .btn-secondary i {
margin-right: 0.75rem;
}

.annual-returns-page .penalties-section {
background: var(--danger-light);
border: 1px solid var(--danger);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}

.annual-returns-page .penalties-title {
font-weight: 600;
color: var(--danger);
margin-bottom: 1rem;
display: flex;
align-items: center;
font-size: 1.25rem;
}

.annual-returns-page .penalties-title i {
margin-right: 0.75rem;
}

.annual-returns-page .penalties-content {
color: var(--text-main);
font-size: 1rem;
line-height: 1.7;
}

.annual-returns-page .penalties-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}

.annual-returns-page .penalties-list li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}

.annual-returns-page .penalties-list li:before {
content: "⚠";
position: absolute;
left: 0;
color: var(--danger);
}

/* Desktop Styles (Default) */
.annual-returns-page .resources-grid-container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 2rem !important;
margin-top: 2rem !important;
}

.annual-returns-page .resource-box {
padding: 2rem !important;
background: var(--bg-body) !important;
border-radius: 12px !important;
border: 1px solid var(--border-color) !important;
}

/* Annual Returns Responsive Styles */
@media (max-width: 768px) {
  .annual-returns-page .section-card {
    padding: 2rem;
  }
  
  .annual-returns-page .hero-title {
    font-size: 2rem;
  }
  
  .annual-returns-page .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .annual-returns-page .action-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  
  .annual-returns-page .btn-primary,
  .annual-returns-page .btn-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  
  .annual-returns-page .requirement-item {
    padding: 1.25rem;
    flex-direction: column;
    text-align: left;
  }
  
  .annual-returns-page .requirement-number {
    margin-right: 0;
    margin-bottom: 1rem;
    align-self: flex-start;
  }
  
  .annual-returns-page .importance-badge {
    position: static;
    margin-top: 1rem;
    display: inline-block;
  }
  
  .annual-returns-page .timeline-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
  }
  
  .annual-returns-page .timeline-date {
    margin-right: 0;
    margin-bottom: 0.5rem;
    min-width: auto;
  }
  
  .annual-returns-page .card-header {
    flex-direction: column;
    text-align: center;
  }
  
  .annual-returns-page .card-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .annual-returns-page .card-title {
    font-size: 1.5rem;
  }
  
  .annual-returns-page .content-wrapper {
    padding: 0 1rem;
  }
  
  .annual-returns-page .hero-section {
    padding: 4rem 0 3rem;
  }
  
  .annual-returns-page .main-content {
    padding: 2rem 0;
  }
}

@media (max-width: 480px) {
  .annual-returns-page .section-card {
    padding: 1.5rem;
  }
  
  .annual-returns-page .hero-title {
    font-size: 1.75rem;
  }
  
  .annual-returns-page .hero-subtitle {
    font-size: 1rem;
  }
  
  .annual-returns-page .requirement-item {
    padding: 1rem;
  }
  
  .annual-returns-page .timeline-item {
    padding: 0.75rem;
  }
  
  .annual-returns-page .card-title {
    font-size: 1.25rem;
  }
  
  .annual-returns-page .content-wrapper {
    padding: 0 0.75rem;
  }
  
  .annual-returns-page .hero-section {
    padding: 3rem 0 2rem;
  }
  
  .annual-returns-page .main-content {
    padding: 1.5rem 0;
  }
  
  .annual-returns-page .action-buttons {
    margin-top: 1.5rem;
  }
  
  .annual-returns-page .btn-primary,
  .annual-returns-page .btn-secondary {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }
}

/* Additional responsive improvements */
@media (max-width: 1024px) {
  .annual-returns-page .content-wrapper {
    padding: 0 1.5rem;
  }
  
  .annual-returns-page .section-card {
    padding: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .annual-returns-page .content-wrapper {
    max-width: 1400px;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  .annual-returns-page .btn-primary,
  .annual-returns-page .btn-secondary {
    min-height: 44px;
    min-width: 44px;
  }
  
  .annual-returns-page .requirement-item {
    min-height: 44px;
  }
}

/* Print styles */
@media print {
  .annual-returns-page .hero-section,
  .annual-returns-page .site-header,
  .annual-returns-page .premium-footer {
    display: none;
  }
  
  .annual-returns-page .main-content {
    padding: 0;
  }
  
  .annual-returns-page .section-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}

@media (max-width: 724px) {
  .annual-returns-page .section-card {
    padding: 1.5rem !important;
  }
  
  .annual-returns-page .timeline-section {
    padding: 10px;
  }
  
  .annual-returns-page .timeline-title {
    font-size: 17px;
    text-align: left;
  }
}

/* Additional resource styles */
.annual-returns-page .resource-icon {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
}

.annual-returns-page .resource-title {
color: var(--primary-dark);
margin-bottom: 1.5rem;
}

.annual-returns-page .resource-title .pdf-icon {
color: var(--danger);
margin-right: 0.75rem;
}

.annual-returns-page .resource-title .link-icon {
color: var(--accent);
margin-right: 0.75rem;
}

.annual-returns-page .resource-list {
list-style: none;
padding: 0;
margin: 0;
}

.annual-returns-page .resource-list li {
margin-bottom: 1rem;
}

.annual-returns-page .resource-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}

.annual-returns-page .resource-link:hover {
text-decoration: underline;
}

.annual-returns-page .resource-link i {
margin-right: 0.75rem;
}

/* MOBILE ONLY CHANGES (Screens smaller than 768px) */
@media (max-width: 768px) {
  .annual-returns-page .resources-grid-container {
    /* Reduces minimum width so it fits small screens and tightens gap */
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .annual-returns-page .resource-box {
    /* Reduces padding significantly so content isn't squashed */
    padding: 1.25rem !important;
  }
}



.staff-images {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;        /* space between images */
    margin-top: 100px; /* space above images */
}

.staff-photo {
    width: 500px;     /* set image width */
    height: auto;
    display: block;
    margin-top: 50px;
}


.signature-section {
  text-align: right;
  margin-top: 40px;
  padding: 20px;
}

.signature-image img {
  max-width: 150px;
  height: auto;
  margin-bottom: 10px;
}

.signature-name h4 {
  font-weight: 600;
  font-size: 18px;
  margin: 0;
}

/* Responsive for tablet and mobile */
@media (max-width: 768px) {
  .signature-section {
    text-align: center;
    padding: 15px;
    margin-top: 30px;
  }

  .signature-image img {
    max-width: 120px;
    margin: 0 auto 10px;
    display: block;
  }

  .signature-name h4 {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .signature-section {
    padding: 10px;
    margin-top: 20px;
  }

  .signature-image img {
    max-width: 100px;
  }

  .signature-name h4 {
    font-size: 15px;
  }
}


.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.custom-table {
  width: 100%;
  min-width: 700px; /* forces scroll instead of squishing */
  border-collapse: collapse;
  margin-top: 15px;
  border: 2px solid #000; /* outer solid border */
}

.custom-table th,
.custom-table td {
  border: 1px solid #000; /* solid inner borders */
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.custom-table th {
  background: #f2f2f2; /* light solid header background */
  font-weight: 600;
}

.custom-table tr:nth-child(even) {
  background: #fafafa;
}


/* Page-specific styles for annual returns */
.annual-returns-page {
--primary-dark: #0f172a;
--primary: #1e293b;
--accent: #f59e0b;
--accent-hover: #d97706;
--accent-light: #fef3c7;
--teal: #0d9488;
--teal-light: #ccfbf1;
--success: #10b981;
--success-light: #d1fae5;
--warning: #f59e0b;
--warning-light: #fef3c7;
--danger: #ef4444;
--danger-light: #fee2e2;
--text-main: #334155;
--text-muted: #64748b;
--bg-body: #f8fafc;
--bg-white: #ffffff;
--border-color: #e2e8f0;
}
.hero-section {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
color: white;
padding: 6rem 0 4rem;
position: relative;
overflow: hidden;
}
/* Desktop Styles (Default) */
.resources-grid-container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 2rem !important;
margin-top: 2rem !important;
}
.resource-box {
padding: 2rem !important;
background: var(--bg-body) !important;
border-radius: 12px !important;
border: 1px solid var(--border-color) !important;
}
.hero-pattern {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
margin: 0 auto;
padding: 0 2rem;
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.hero-subtitle {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2rem;
}
.main-content {
padding: 4rem 0;
}
.content-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.section-card {
background: var(--bg-white);
border-radius: 16px;
padding: 3rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
margin-bottom: 3rem;
}
.card-header {
display: flex;
align-items: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--border-color);
}
.card-icon {
width: 64px;
height: 64px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5rem;
font-size: 1.75rem;
}
.annual-returns-icon {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
}
.card-title {
font-size: 2rem;
font-weight: 700;
color: var(--primary-dark);
margin: 0;
}
.info-box {
background: var(--accent-light);
border: 1px solid var(--accent);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.info-box-title {
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
display: flex;
align-items: center;
font-size: 1.25rem;
}
.info-box-title i {
margin-right: 0.75rem;
color: var(--accent);
}
.info-box-content {
color: var(--text-main);
font-size: 1rem;
line-height: 1.7;
}
.requirements-list {
margin: 2.5rem 0;
}
.requirements-list h3 {
font-size: 1.5rem;
color: var(--primary-dark);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.requirements-list h3 i {
margin-right: 0.75rem;
color: var(--accent);
}
.requirement-item {
display: flex;
align-items: flex-start;
padding: 1.5rem;
margin-bottom: 1.25rem;
background: var(--bg-body);
border-radius: 12px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
position: relative;
}
.requirement-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
border-color: var(--accent);
}
.requirement-number {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-right: 1.25rem;
flex-shrink: 0;
}
.requirement-content {
flex: 1;
}
.requirement-title {
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 0.75rem;
font-size: 1.2rem;
}
.requirement-description {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
}
.importance-badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.35rem 0.85rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.badge-critical {
background: var(--danger-light);
color: var(--danger);
}
.badge-high {
background: var(--warning-light);
color: var(--warning);
}
.badge-medium {
background: var(--accent-light);
color: var(--accent);
}
.timeline-section {
margin-top: 3rem;
padding: 2.5rem;
background: linear-gradient(135deg, var(--accent-light), var(--accent-light));
border-radius: 16px;
border: 1px solid var(--accent);
}
.timeline-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 2rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-title i {
margin-right: 0.75rem;
color: var(--accent);
}
.timeline-item {
display: flex;
align-items: center;
padding: 1.25rem;
margin-bottom: 1rem;
background: white;
border-radius: 12px;
border-left: 4px solid var(--accent);
transition: all 0.3s ease;
}
.timeline-item:hover {
transform: translateX(4px);
box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.1);
}
.timeline-date {
font-weight: 600;
color: var(--accent);
margin-right: 1.5rem;
min-width: 120px;
font-size: 1rem;
}
.timeline-description {
color: var(--text-main);
font-size: 1rem;
line-height: 1.5;
}
.action-buttons {
display: flex;
gap: 1.5rem;
margin-top: 2.5rem;
flex-wrap: wrap;
justify-content: center;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: white;
padding: 1rem 2rem;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1.1rem;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(245, 158, 11, 0.3);
}
.btn-secondary {
background: white;
color: var(--accent);
padding: 1rem 2rem;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
border: 2px solid var(--accent);
transition: all 0.3s ease;
font-size: 1.1rem;
}
.btn-secondary:hover {
background: var(--accent);
color: white;
}
.btn-primary i,
.btn-secondary i {
margin-right: 0.75rem;
}
.penalties-section {
background: var(--danger-light);
border: 1px solid var(--danger);
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}
.penalties-title {
font-weight: 600;
color: var(--danger);
margin-bottom: 1rem;
display: flex;
align-items: center;
font-size: 1.25rem;
}
.penalties-title i {
margin-right: 0.75rem;
}
.penalties-content {
color: var(--text-main);
font-size: 1rem;
line-height: 1.7;
}
.penalties-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.penalties-list li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.penalties-list li:before {
content: "⚠";
position: absolute;
left: 0;
color: var(--danger);
}
@media (max-width: 768px) {
.section-card {
padding: 2rem;
}
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.action-buttons {
flex-direction: column;
gap: 1rem;
}
.btn-primary,
.btn-secondary {
width: 100%;
justify-content: center;
text-align: center;
}
.requirement-item {
padding: 1.25rem;
flex-direction: column;
text-align: left;
}
.requirement-number {
margin-right: 0;
margin-bottom: 1rem;
align-self: flex-start;
}
.importance-badge {
position: static;
margin-top: 1rem;
display: inline-block;
}
.timeline-item {
flex-direction: column;
align-items: flex-start;
padding: 1rem;
}
.timeline-date {
margin-right: 0;
margin-bottom: 0.5rem;
min-width: auto;
}
.card-header {
flex-direction: column;
text-align: center;
}
.card-icon {
margin-right: 0;
margin-bottom: 1rem;
}
.card-title {
font-size: 1.5rem;
}
.content-wrapper {
padding: 0 1rem;
}
.hero-section {
padding: 4rem 0 3rem;
}
.main-content {
padding: 2rem 0;
}
}
@media (max-width: 480px) {
.section-card {
padding: 1.5rem;
}
.hero-title {
font-size: 1.75rem;
}
.hero-subtitle {
font-size: 1rem;
}
.requirement-item {
padding: 1rem;
}
.timeline-item {
padding: 0.75rem;
}
.card-title {
font-size: 1.25rem;
}
.content-wrapper {
padding: 0 0.75rem;
}
.hero-section {
padding: 3rem 0 2rem;
}
.main-content {
padding: 1.5rem 0;
}
.action-buttons {
margin-top: 1.5rem;
}
.btn-primary,
.btn-secondary {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
}
/* Additional responsive improvements */
@media (max-width: 1024px) {
.content-wrapper {
padding: 0 1.5rem;
}
.section-card {
padding: 2.5rem;
}
}
@media (min-width: 1200px) {
.content-wrapper {
max-width: 1400px;
}
}
/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
.btn-primary,
.btn-secondary {
min-height: 44px;
min-width: 44px;
}
.requirement-item {
min-height: 44px;
}
}
/* Print styles */
@media print {
.hero-section,
.site-header,
.premium-footer {
display: none;
}
.main-content {
padding: 0;
}
.section-card {
box-shadow: none;
border: 1px solid #ccc;
break-inside: avoid;
}
}
@media (max-width: 724px) {
  .section-card {
    padding: 1.5rem !important;
  }
  .timeline-section {
    padding: 10px;
  }
  .timeline-title {
    font-size: 17px;
    text-align: left;
  }
}

/* MOBILE ONLY CHANGES (Screens smaller than 768px) */
@media (max-width: 768px) {
  .resources-grid-container {
    /* Reduces minimum width so it fits small screens and tightens gap */
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .resource-box {
    /* Reduces padding significantly so content isn't squashed */
    padding: 1.25rem !important;
  }
}

.white-info-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}


.restricted-words-table {
  margin-top: 30px;
  margin-bottom: 30px;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.guide-table th,
.guide-table td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  text-align: left;
}

.guide-table thead {
  background: #f5f7fa;
  font-weight: 600;
}

.guide-table tr:nth-child(even) {
  background: #fafafa;
}



.content-area{
    overflow: visible ;
    height: auto ;
    position: static ;
}

.mandate-section,
.mission-vision-section,
.architecture-section,
.divisions-section{
    scroll-margin-top: 140px; /* height of your header */
}


.law-file-link {
  color: inherit;          /* keep same color as surrounding text */
  text-decoration: none;   /* remove underline */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.law-file-link + .law-file-link {
  margin-left: 1rem;
}