/* ===================================
   MQYC Custom Theme - Main Stylesheet
   =================================== */

/* ===================================
   1. CSS VARIABLES & ROOT
   =================================== */

:root {
    --primary-color: #1b7a3e;
    --primary-light: #2a9c54;
    --primary-dark: #0f4620;
    /* RGB form of primary for rgba shadows */
    --primary-rgb: 27,122,62;
    --secondary-color: #f39c12;
    --accent-color: #1a1a1a;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --text-color: #333333;
    --text-light: #666666;
    --border-color: #e0e0e0;
    --success-color: #27ae60;
    --error-color: #e74c3c;

    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    --font-size-base: 16px;
    --line-height: 1.6;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;

    --transition: all 0.3s ease;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
}



/* ===================================
   2. GLOBAL STYLES
   =================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--text-color);
    background-color: var(--white);
}

body.menu-open {
    overflow: hidden;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
    font-family: inherit;
}

a:hover {
    color: var(--hover-color);
}

button,
input,
textarea,
select {
    font-family: var(--font-family);
    font-size: inherit;
}

/* ===================================
   3. SOCIAL STRIP (TOP BAR)
   =================================== */

.social-strip {
    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%);
    padding: 10px 0;
    border-bottom: 5px solid #0052a3;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1001;
    min-height: 19px;
    max-height: 44px;
    display: flex;
    align-items: center;
}

body {
    padding-top: 0;
}

.social-container {
    
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    /* background-color: rgba(255, 255, 255, 0.2); */
    color: var(--white);
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.9rem;
    transition: var(--transition);
    border: none;
    text-decoration: none;
    line-height: 1;
}

.social-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.social-icon:hover {
    color: #f39c12;
    /* transform: scale(1.12) translateY(-2px); */
    box-shadow: #f39c12;
}

/* ===================================
   4. TYPOGRAPHY
   =================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--accent-color);
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
}

@media (max-width: 768px) {
    h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 1.5rem;
    }
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: var(--spacing-md);
    color: var(--text-light);
}

/* ===================================
   4. CONTAINER & LAYOUT
   =================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.mqyc-main {
    min-height: auto;
    padding-top: 0;
}

section {
    padding: var(--spacing-2xl) 0;
}

section.mqyc-services,
section.mqyc-events,
section.mqyc-gallery,
section.mqyc-contact {
    background-color: var(--light-bg);
}

/* Section Titles */
.section-title {
    text-align: center;
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: var(--spacing-lg);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-2xl);
}

.schedule-hero {
    background: linear-gradient(180deg, rgba(27,122,62,0.95) 0%, rgba(19,78,35,0.95) 100%);
    color: var(--white);
    padding: var(--spacing-2xl) 0 2rem;
}

.schedule-hero-page {
    position: relative;
    min-height: 560px;
    padding-bottom: 0;
}

.schedule-hero-page .faq-hero-content {
    padding: 80px 24px;
}

.schedule-hero-page .faq-hero-eyebrow,
.schedule-hero-page .faq-hero-headline,
.schedule-hero-page .faq-hero-sub {
    text-align: center;
}

.schedule-hero-page .faq-hero-headline {
    font-size: clamp(3rem, 5vw, 4.8rem);
}

.schedule-hero-page .faq-hero-sub {
    max-width: 680px;
    margin: 0 auto;
}

.schedule-intro {
    padding: 70px 0 10px;
    text-align: center;
}

.schedule-intro .section-title {
    max-width: 920px;
    margin: 0 auto;
}

.schedule-intro .section-copy {
    max-width: 760px;
    margin: 1rem auto 0;
    color: var(--text-light);
}

.schedule-table-section {
    padding: var(--spacing-2xl) 0 3rem;
}

.schedule-table-wrapper {
    overflow-x: auto;
    margin-top: var(--spacing-lg);
    background-color: #ffffff;
    border-radius: 28px;
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(27,122,62,0.16);
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 960px;
    table-layout: fixed;
    border: 1px solid rgba(27,122,62,0.16);
}

.schedule-table th,
.schedule-table td {
    padding: 1rem 1rem;
    border-bottom: 1px solid rgba(27,122,62,0.12);
    border-right: 1px solid rgba(27,122,62,0.08);
    text-align: left;
    vertical-align: top;
    font-size: 0.95rem;
    line-height: 1.7;
    word-break: break-word;
    background-color: #ffffff;
}

.schedule-table th:last-child,
.schedule-table td:last-child {
    border-right: none;
}

.schedule-table thead th {
    background-color: rgba(27,122,62,0.18);
    color: #134a29;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
    border-bottom: 2px solid rgba(27,122,62,0.25);
}

.schedule-table tbody tr:nth-child(odd) {
    background-color: rgba(237,250,242,0.85);
}

.schedule-table tbody tr:hover {
    background-color: rgba(222,246,226,0.95);
}

.schedule-table th:first-child,
.schedule-table td:first-child {
    width: 12%;
    background-color: rgba(226,246,232,0.95);
    font-weight: 700;
}

.schedule-table td:first-child {
    color: rgba(18,74,31,0.95);
}

.schedule-table tbody td:nth-child(2) {
    background-color: rgba(237,250,242,0.95);
}

.schedule-table tbody td:nth-child(3) {
    background-color: rgba(244,251,248,0.92);
}

.schedule-table tbody td:nth-child(4) {
    background-color: rgba(239,250,245,0.95);
}

.schedule-table tbody td:nth-child(5) {
    background-color: rgba(248,251,249,0.95);
}

.schedule-table tbody td:nth-child(6) {
    background-color: rgba(254,254,248,0.95);
}

.schedule-table th:nth-child(2),
.schedule-table td:nth-child(2) {
    width: 16%;
}

.schedule-table th:nth-child(3),
.schedule-table td:nth-child(3) {
    width: 16%;
}

.schedule-table th:nth-child(4),
.schedule-table td:nth-child(4) {
    width: 18%;
}

.schedule-table th:nth-child(5),
.schedule-table td:nth-child(5) {
    width: 19%;
}

.schedule-table th:nth-child(6),
.schedule-table td:nth-child(6) {
    width: 19%;
}

.schedule-notes {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-left: 4px solid var(--primary-color);
    background-color: rgba(255,255,255,0.96);
    color: var(--text-color);
}

.schedule-notes a {
    color: var(--primary-color);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .schedule-hero-page {
        min-height: 520px;
    }

    .faq-hero-content {
        padding: 60px 24px;
    }
}

@media (max-width: 900px) {
    .schedule-hero-page {
        min-height: 460px;
    }

    .faq-hero-content {
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {
    .schedule-hero-page {
        padding-bottom: 40px;
        min-height: 440px;
    }

    .faq-reel-wrapper {
        padding: 0 40px;
    }

    .faq-vcol {
        width: 280px;
    }

    .schedule-intro {
        padding: 60px 0 0;
    }

    .schedule-table {
        min-width: 840px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.95rem 0.85rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    .schedule-hero-page {
        min-height: 340px;
    }

    .faq-reel-wrapper {
        padding: 0 24px;
    }

    .faq-vcol {
        width: 220px;
    }

    .faq-hero-eyebrow,
    .faq-hero-sub {
        font-size: 0.95rem;
    }

    .faq-hero-headline {
        font-size: clamp(32px, 7vw, 46px);
    }

    .schedule-table {
        min-width: 640px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.85rem 0.7rem;
        font-size: 0.88rem;
    }
}

@media (max-width: 520px) {
    .schedule-hero-page {
        min-height: 320px;
    }

    .faq-vcol {
        width: 180px;
    }

    .schedule-table {
        min-width: 520px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.75rem 0.65rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 420px) {
    .faq-hero-content {
        padding: 30px 18px;
    }

    .schedule-table {
        min-width: 480px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.65rem 0.55rem;
        font-size: 0.82rem;
    }
}

.schedule-table-section {
    padding: var(--spacing-2xl) 0 3rem;
}

.schedule-table-wrapper {
    overflow-x: auto;
    margin-top: var(--spacing-lg);
    background-color: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 960px;
    table-layout: fixed;
}

.schedule-table th,
.schedule-table td {
    padding: 1.1rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    text-align: left;
    vertical-align: top;
    font-size: 0.95rem;
    line-height: 1.7;
    word-break: break-word;
}

.schedule-table thead th {
    background-color: rgba(27,122,62,0.08);
    color: var(--accent-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}

.schedule-table tbody tr:nth-child(odd) {
    background-color: rgba(27,122,62,0.025);
}

.schedule-table tbody tr:hover {
    background-color: rgba(27,122,62,0.08);
}

.schedule-table th:first-child,
.schedule-table td:first-child {
    width: 12%;
}

.schedule-table th:nth-child(2),
.schedule-table td:nth-child(2) {
    width: 16%;
}

.schedule-table th:nth-child(3),
.schedule-table td:nth-child(3) {
    width: 16%;
}

.schedule-table th:nth-child(4),
.schedule-table td:nth-child(4) {
    width: 18%;
}

.schedule-table th:nth-child(5),
.schedule-table td:nth-child(5) {
    width: 19%;
}

.schedule-table th:nth-child(6),
.schedule-table td:nth-child(6) {
    width: 19%;
}

.schedule-notes {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-left: 4px solid var(--primary-color);
    background-color: rgba(255,255,255,0.96);
    color: var(--text-color);
}

.schedule-notes a {
    color: var(--primary-color);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .schedule-hero .section-title {
        font-size: clamp(2rem, 3vw, 2.5rem);
    }

    .schedule-hero .section-copy {
        font-size: 0.98rem;
    }
}

@media (max-width: 1024px) {
    .schedule-hero-page {
        min-height: 520px;
    }

    .faq-hero-content {
        padding: 60px 24px;
    }
}

@media (max-width: 900px) {
    .schedule-hero-page {
        min-height: 460px;
    }

    .faq-hero-content {
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {
    .schedule-hero-page {
        padding-bottom: 40px;
        min-height: 440px;
    }

    .faq-reel-wrapper {
        padding: 0 40px;
    }

    .faq-vcol {
        width: 280px;
    }

    .schedule-intro {
        padding: 60px 0 0;
    }

    .schedule-table {
        min-width: 840px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.95rem 0.85rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 640px) {
    .schedule-hero-page {
        min-height: 340px;
    }

    .faq-reel-wrapper {
        padding: 0 24px;
    }

    .faq-vcol {
        width: 220px;
    }

    .faq-hero-eyebrow,
    .faq-hero-sub {
        font-size: 0.95rem;
    }

    .faq-hero-headline {
        font-size: clamp(32px, 7vw, 46px);
    }

    .schedule-table {
        min-width: 640px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.85rem 0.7rem;
        font-size: 0.88rem;
    }
}

@media (max-width: 520px) {
    .schedule-hero-page {
        min-height: 320px;
    }

    .faq-vcol {
        width: 180px;
    }

    .schedule-table {
        min-width: 520px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.75rem 0.65rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 420px) {
    .faq-hero-content {
        padding: 30px 18px;
    }

    .schedule-table {
        min-width: 480px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.65rem 0.55rem;
        font-size: 0.82rem;
    }
}

/* ===================================
   5. HEADER & NAVIGATION
   =================================== */

.mqyc-header {
    background-color: transparent;
    box-shadow: none;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
}

.mqyc-header.scrolled {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    /* Disable sticky header on mobile for better usability */
    .mqyc-header {
        position: static;
        top: auto;
        box-shadow: none;
    }
}


.mqyc-navbar {
    min-height: 100px;
    height: auto;
    display: flex;
    align-items: center;
    padding: 0.85rem 0;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    gap: clamp(0.75rem, 1.25vw, 1.25rem);
}

.navbar-logo {
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    transition: color 0.3s ease;
}

.mqyc-header.scrolled .navbar-logo {
    color: var(--primary-color);
}

.navbar-logo a {
    color: inherit;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    height: 50px;
}

.logo-img {
    max-height: 50px;
    width: auto;
    display: block;
}

.logo-text {
    color: inherit !important;
}

/* Menu Toggle (Mobile) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 6px;
    color: var(--primary-color);
    z-index: 1002;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: currentColor;
    border-radius: 2px;
    transition: var(--transition);
}

.mqyc-header:not(.scrolled) .menu-toggle {
    color: var(--white);
}

.mqyc-header.scrolled .menu-toggle {
    color: var(--accent-color);
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

/* Navigation Menu */
.navbar-nav {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: clamp(0.8rem, 1.15vw, 1.2rem);
    align-items: center;
    margin: 0 !important;
    flex-wrap: nowrap;
}

.navbar-nav li {
    margin: 0 !important;
}

.navbar-nav a {
    font-weight: 500;
    font-size: 0.94rem;
    color: var(--white);
    transition: var(--transition);
    padding: 0.5rem 0;
    line-height: 1.2;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.navbar-menu.active .navbar-nav a,
.navbar-menu.active .navbar-nav .sub-menu a {
    color: var(--accent-color);
}

.navbar-menu.active .navbar-nav a:hover,
.navbar-menu.active .navbar-nav .sub-menu a:hover {
    color: var(--primary-color);
    border-bottom-color: transparent;
}

.mqyc-header.scrolled .navbar-nav a {
    color: var(--text-color);
}

@media (max-width: 1200px) {
    .navbar-nav {
        gap: 0.65rem;
    }

    .navbar-nav a {
        font-size: 0.95rem;
    }

    .academy-nav-title {
        font-size: 0.96rem;
    }

    .btn_donate,
    .btn_enroll {
        min-width: 84px;
        font-size: 0.85rem;
    }
}

@media (max-width: 1024px) {
    .navbar-nav a {
        font-size: 0.92rem;
    }

    .navbar-nav .academy-nav-title {
        font-size: 0.92rem;
        padding-right: 0.2rem;
    }

    .academy-nav-title .academy-full {
        display: none;
    }

    .academy-nav-title .academy-short {
        display: inline;
    }
}

@media (max-width: 820px) {
    .navbar-nav .academy-nav-title {
        padding-right: 0;
    }
}

@media (max-width: 1024px) {
    .navbar-container {
        padding: 0 1rem;
    }

    .navbar-nav {
        gap: 0.55rem;
    }

    .navbar-nav a {
        font-size: 0.88rem;
    }
}

@media (max-width: 768px) {
    .navbar-menu.active .navbar-nav a {
        color: var(--accent-color) !important;
    }

    .navbar-nav .academy-nav-title {
        font-size: 0.98rem;
    }

    .navbar-nav {
        gap: 0.75rem;
    }

    .navbar-nav a {
        font-size: 0.95rem;
    }

    .navbar-menu {
        padding-top: calc(5rem + 1rem);
    }

    .header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .btn_enroll,
    .btn_donate {
        min-width: 100px;
    }

    .academy-nav-title .academy-full {
        display: none;
    }

    .academy-nav-title .academy-short {
        display: inline;
    }

    .navbar-menu.active .navbar-nav a:hover {
        color: var(--primary-color) !important;
    }

    .navbar-nav a {
        font-size: 0.95rem;
        padding: 0.55rem 0;
    }

    .navbar-container {
        padding: 0 16px;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
    }

    .header-actions {
        margin-left: auto;
        gap: 0.5rem;
    }

    .btn_donate,
    .btn_enroll {
        align-items: center;
        justify-content: center;
        min-width: 92px;
        padding: 0 14px;
        height: 34px;
        font-size: 0.85rem;
    }

    .navbar-logo,
    .btn_donate,
    .menu-toggle {
        flex-shrink: 0;
    }
}

.navbar-nav a:hover {
    color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}

.mqyc-header.scrolled .navbar-nav a:hover {
    color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}

.navbar-menu {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* ===================================
   6. BUTTONS
   =================================== */
.btn_donate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-decoration: none;
    background-color: var(--secondary-color);
    color: var(--white);
    height: 34px;
    border-radius: 999px;
    padding: 0 14px;
    min-width: 90px;
    font-size: 0.9rem;
    line-height: 1;
}

.btn_donate,
.btn_enroll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: var(--transition);
    text-decoration: none;
    background-color: var(--secondary-color);
    color: var(--white);
    height: 34px;
    border-radius: 999px;
    padding: 0 14px;
    min-width: 90px;
    font-size: 0.9rem;
    line-height: 1;
}

.btn_enroll {
    margin-right: 0;
    background-color: var(--secondary-color);
}

.btn_donate {
    margin-left: 0;
}

.btn_enroll:hover,
.btn_donate:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

@media (max-width: 768px) {
    .btn_donate,
    .btn_enroll {
        height: 32px;
        padding: 0 12px;
        min-width: 82px;
        font-size: 0.84rem;
    }

    .navbar-nav .academy-nav-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .btn_donate {
        height: 32px;
        padding: 5px 12px;
        min-width: 100px;
        font-size: 0.85rem;
    }
}

/* Make campaign CTA buttons responsive */
.expansion-cta .btn {
    display: inline-block;
    min-width: 180px;
    padding: 14px 36px;
    font-size: 1rem;
}

@media (max-width: 992px) {
    .expansion-cta .btn {
        padding: 12px 28px;
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .expansion-cta .btn {
        padding: 10px 24px;
        font-size: 0.9rem;
        display: block;
        width: 100%;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .expansion-cta .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 9px 18px;
        font-size: 0.85rem;
    }
}
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    text-decoration: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

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

.btn-secondary:hover {
    background-color: #e67e0d;
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-lg);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

@media (max-width: 768px) {
    .btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* ===================================
   7. HERO SECTION
   =================================== */

.mqyc-hero {
    height: 110vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .mqyc-hero {
        height: auto;
        min-height: 75vh;
        padding-top: 30px;
        align-items: flex-start;
    }

    .hero-content {
        margin-top: 24px;
        height: auto;
        padding: 0 18px;
    }

    .hero-title {
        font-size: clamp(2.2rem, 7vw, 3.3rem);
    }

    .hero-subtitle-main {
        font-size: clamp(1.8rem, 6vw, 2.6rem);
        margin-bottom: 1.2rem;
    }

    .hero-description {
        font-size: 0.98rem;
        margin-bottom: 1.2rem;
    }

    .hero-buttons {
        gap: 12px;
    }
}

/* Hero Slides Container */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 70, 32, 0.72); /* Consistent primary dark green brand tint overlay */
    z-index: 2;
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--white);
    animation: fadeInUp 1s ease-out;
    max-width: 1200px;
    padding: 0 var(--spacing-lg);
    margin-top: 200px;
    height: 550px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hero-subtitle-top {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
    color: #ffd700;
    animation: slideInDown 0.8s ease-out 0.2s backwards;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.hero-title {
    font-size: 4.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--white);
    font-weight: 700;
    line-height: 1.1;
    animation: slideInUp 0.8s ease-out 0.4s backwards;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);
    font-family: 'Abril Fatface', serif;
}

.hero-highlight {
    color: #ffd700;
    text-decoration: underline;
    font-weight: 600;
}

.hero-subtitle-main {
    font-size: 3.5rem;
    margin-bottom: var(--spacing-xl);
    color: var(--white);
    font-weight: 700;
    animation: slideInUp 0.8s ease-out 0.6s backwards;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
    color: rgba(255, 255, 255, 0.95);
    animation: fadeInUp 0.8s ease-out 0.8s backwards;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.hero-buttons {
    margin-bottom: 35px;
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 1s backwards;
    
}

/* Hero Indicators/Dots */
.hero-indicators {
    
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 12px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.indicator.active {
    background-color: var(--white);
    border-color: var(--white);
    transform: scale(1.3);
}

.indicator:hover {
    border-color: var(--white);
}

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

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

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


/* ===================================
   8. MISSION & PRAYER TIMINGS SECTION
   =================================== */

.mqyc-mission-prayer {
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.mission-prayer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 992px) {
    .mission-prayer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .prayer-widget {
        max-width: 100%;
        box-shadow: none;
        border: none;
        background-color: rgba(255, 255, 255, 0.96);
    }

    .prayer-widget .widget-date-bar {
        padding: 18px 14px;
    }

    .prayer-widget .date-info {
        gap: 2px;
    }

    .prayer-widget .current-gregorian-date {
        font-size: 0.95rem;
    }

    .prayer-widget .current-hijri-date {
        font-size: 0.75rem;
    }

    .prayer-widget .widget-sub-header,
    .prayer-widget .prayer-row {
        grid-template-columns: 1.5fr 0.9fr 0.9fr;
        padding: 12px 16px;
        font-size: 0.88rem;
        text-align: center;
    }

    .prayer-widget .widget-sub-header {
        padding: 10px 16px;
        letter-spacing: 0.5px;
    }

    .prayer-widget .prayer-row {
        gap: 8px;
    }

    .prayer-widget .iqamah-time {
        align-items: center;
        text-align: center;
    }

    .prayer-widget .prayer-name-col {
        gap: 10px;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .prayer-widget .prayer-icon {
        font-size: 1rem;
    }

    .prayer-widget .widget-jumuah-bar {
        padding: 16px 16px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .prayer-widget {
        box-shadow: none;
        border: none;
        background-color: rgba(255, 255, 255, 0.96);
    }

    .prayer-widget .widget-sub-header,
    .prayer-widget .prayer-row {
        grid-template-columns: 1.2fr 1fr 1fr;
        column-gap: 10px;
        row-gap: 8px;
        text-align: center;
        justify-items: center;
    }

    .prayer-widget .widget-sub-header span,
    .prayer-widget .prayer-row span,
    .prayer-widget .prayer-row .start-time,
    .prayer-widget .prayer-row .iqamah-time {
        font-size: 0.82rem;
    }

    .prayer-widget .prayer-row {
        padding: 10px 14px;
        line-height: 1.3;
    }

    .prayer-widget .prayer-name-col {
        gap: 8px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .prayer-widget .widget-jumuah-bar {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 14px 14px;
        text-align: center;
    }

    .prayer-widget .widget-jumuah-bar .jumuah-label {
        display: block;
        margin-top: 4px;
    }
}

/* Left Column: Mission Content */
.mission-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mission-tagline {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.mission-title {
    font-family: 'Abril Fatface', serif;
    font-style: normal;
    font-weight: normal;
    font-size: 3.438rem;
    line-height: 1.3em;
    text-transform: capitalize;
    color: var(--primary-dark);
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .mission-title {
        font-size: 2.4rem;
    }
}

.mission-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.75;
    margin-bottom: 35px;
    max-width: 600px;
}

.btn-about {
    display: inline-flex;
    align-items: center;
    background-color: #e0b016; /* warm amber golden color */
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 32px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(224, 176, 22, 0.3);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-about:hover {
    background-color: #c79a0f;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224, 176, 22, 0.4);
    color: #000;
}

.btn-about .arrow {
    margin-left: 8px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.btn-about:hover .arrow {
    transform: translateX(4px);
}

/* Right Column: Prayer Times Widget */
.prayer-widget-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.prayer-widget {
    width: 100%;
    max-width: 440px;
    background-color: var(--white);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.prayer-widget .widget-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0;
    color: var(--white);
}

.prayer-widget .widget-date-bar {
    background-image: url('https://images.unsplash.com/photo-1542838132-92c53300491e?w=800&fit=crop&q=60'); /* Mosque texture backdrop */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px 15px;
    color: var(--white);
    text-align: center;
}

.prayer-widget .widget-date-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(15, 70, 32, 0.88); /* Beautiful dark green overlay */
    z-index: 1;
}

.prayer-widget .date-arrow {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 2;
    transition: var(--transition);
}

.prayer-widget .date-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
}

.prayer-widget .date-info {
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prayer-widget .date-info {
    align-items: center;
}

.prayer-widget .current-gregorian-date {
    font-size: 1.05rem;
    font-weight: 600;
}

.prayer-widget .current-hijri-date {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.5px;
}

.prayer-widget .widget-sub-header {
    background-color: rgba(27, 122, 62, 0.12); /* Light primary green tint */
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 10px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: right;
}

.prayer-widget .widget-sub-header span:first-child {
    text-align: left;
}

.prayer-widget .widget-times-table {
    display: flex;
    flex-direction: column;
}

.prayer-widget .prayer-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 15px 20px;
    border-bottom: 1px solid #f2f2f2;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: right;
}

.prayer-widget .prayer-row:last-child {
    border-bottom: none;
}

.prayer-widget .prayer-row.sunrise-row {
    background-color: #fafafa;
}

.prayer-widget .prayer-name-col {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.prayer-widget .prayer-icon {
    font-size: 1.15rem;
    opacity: 0.75;
}

.prayer-widget .prayer-name {
    font-weight: 700;
    color: #333;
}

.prayer-widget .start-time {
    color: #666;
}

.prayer-widget .iqamah-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-weight: 700;
    color: #111;
}

.prayer-widget .iqamah-main {
    font-weight: 700;
    color: #111;
}

.prayer-widget .iqamah-note {
    font-size: 0.72rem;
    font-weight: 500;
    color: #6b7280;
    line-height: 1.2;
    font-style: italic;
}

.prayer-widget .prayer-notes {
    background-color: #fafafa;
    padding: 10px 20px 14px;
    border-top: 1px solid #f2f2f2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prayer-widget .prayer-note-line {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.45;
    min-height: 1.05em;
}

.prayer-widget .text-red {
    color: var(--secondary-color) !important; /* Gold highlight matching primary CTA buttons */
    font-weight: 800;
}

.prayer-widget .widget-jumuah-bar {
    background-color: var(--primary-color); /* Green jumuah bar */
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    font-size: 1rem;
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.prayer-widget .widget-jumuah-bar .jumuah-label {
    color: var(--secondary-color); /* Gold Jumu'ah text label */
}

.prayer-widget .widget-footer {
    padding: 18px;
    text-align: center;
    background-color: var(--white);
    border-top: 1px solid #f0f0f0;
}

.prayer-widget .btn-monthly-calendar {
    font-weight: 700;
    color: var(--primary-color);
    font-size: 0.95rem;
    text-decoration: underline;
    transition: var(--transition);
}

.prayer-widget .btn-monthly-calendar:hover {
    color: var(--primary-light);
}

/* ===================================
   8.b MISSION FEATURES (cards under mission)
   =================================== */

.mqyc-mission-features {
        background-color: var(--white);
}

.features-intro {
    margin-bottom: 60px;
}

.features-intro .mission-description {
    max-width: 100%;
    margin-bottom: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 40px;
    align-items: stretch;
}

.feature-card {
    background-color: var(--white);
    border: 1px solid rgba(226, 196, 141, 0.45); /* soft warm border */
    border-radius: 18px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(20,20,20,0.06);
    border-color: var(--secondary-color);
}

.feature-card:hover .feature-icon {
    background-color: rgba(243,156,18,0.08);
    color: var(--secondary-color);
}

.feature-card:hover {
    box-shadow: 0 18px 40px rgba(243,156,18,0.12);
}

.feature-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: rgba(250, 245, 235, 0.9);
    flex-shrink: 0;
    color: var(--accent-color);
    transition: color 0.3s ease, background-color 0.3s ease;
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    display: block;
    color: inherit;
}

.feature-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent-color);
    margin: 0;
}

.feature-desc {
    margin: 0;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    
    
    .features-intro {
        margin-bottom: 40px;
    }
    
    .feature-card {
        padding: 20px 16px;
        gap: 14px;
    }
    
    .feature-title {
        font-size: 1rem;
    }
    
    .feature-desc {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    
    .feature-card {
        padding: 16px;
        gap: 12px;
    }
    
    .feature-icon {
        width: 48px;
        height: 48px;
    }
    
    .feature-title {
        font-size: 0.95rem;
    }
    
    .feature-desc {
        font-size: 0.8rem;
        line-height: 1.5;
    }
}

/* ===================================
   8.c ANNOUNCEMENT SECTION
   =================================== */

.mqyc-announcement {
    padding: 60px 0;
    background-color: var(--white);
}

.announcement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 992px) {
    .announcement-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.announcement-label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--secondary-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.announcement-title {
    font-family: 'Abril Fatface', serif;
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--primary-dark);
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .announcement-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .announcement-title {
        font-size: 2.2rem;
    }
    
    .mqyc-announcement {
        padding: 50px 0;
    }
    
    .announcement-grid {
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .announcement-title {
        font-size: 1.75rem;
    }
    
    .announcement-text {
        font-size: 0.9rem;
    }
    
    .announcement-buttons .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

.announcement-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 30px;
}

.announcement-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.announcement-buttons .btn {
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.announcement-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-image {
    width: 100%;
    max-width: 500px;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

@media (max-width: 768px) {
    .announcement-buttons {
        flex-direction: column;
    }

    .announcement-buttons .btn {
        width: 100%;
    }
}

/* Announcement Modal Styles */
.announcement-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10010;
}

.announcement-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.announcement-modal-content {
    position: relative;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-lg);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: announcement-modal-enter 0.3s ease;
}

@keyframes announcement-modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.announcement-modal-close {
    position: absolute;
.announcement-image-wrapper .announcement-image,
.announcement-image-wrapper img,
.expansion-image img,
.expansion-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .announcement-image-wrapper,
    .expansion-image {
        margin-bottom: 12px;
    }
}
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: var(--transition);
    z-index: 10;
}

.announcement-modal-close:hover {
    background-color: var(--light-bg);
    color: var(--error-color);
}

.announcement-modal-body {
    padding: 40px;
}

.announcement-modal-body h2 {
    font-size: 1.75rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
}

.announcement-modal-body p,
.announcement-modal-body div {
    color: var(--text-color);
    line-height: var(--line-height);
    margin-bottom: 16px;
    font-size: 1rem;
}

.announcement-modal-body p:last-child,
.announcement-modal-body div:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .announcement-modal-content {
        width: 95%;
        max-height: 85vh;
    }

    .announcement-modal-body {
        padding: 24px;
    }

    .announcement-modal-body h2 {
        font-size: 1.5rem;
    }
}

/* ===================================
   8.d EXPANSION CAMPAIGN SECTION
   =================================== */

.mqyc-expansion {
    padding: 70px 0;
    background-color: var(--white);
}

.expansion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 992px) {
    .expansion-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 768px) {
    .expansion-grid {
        gap: 28px;
    }
}

@media (max-width: 480px) {
    .expansion-grid {
        gap: 20px;
    }
}

.expansion-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.08);
    object-fit: cover;
}

.expansion-title {
    font-family: 'Abril Fatface', serif;
    font-size: 2.6rem;
    margin: 8px 0 18px 0;
    color: var(--accent-color);
}

@media (max-width: 992px) {
    .expansion-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .expansion-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .expansion-title {
        font-size: 1.4rem;
        margin: 8px 0 12px 0;
    }
}

@media (max-width: 992px) {
    .expansion-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .expansion-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .expansion-title {
        font-size: 1.4rem;
        margin: 8px 0 12px 0;
    }
}

.expansion-desc {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .expansion-desc {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .expansion-desc {
        font-size: 0.9rem;
        margin-bottom: 12px;
        line-height: 1.6;
    }
}

@media (max-width: 768px) {
    .expansion-desc {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .expansion-desc {
        font-size: 0.9rem;
        margin-bottom: 12px;
        line-height: 1.6;
    }
}

.campaign-progress {
    margin: 30px 0 28px 0;
}

.progress-circle-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .progress-circle-container {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 480px) {
    .progress-circle-container {
        width: 140px;
        height: 140px;
        margin: 0 auto 16px;
    }
}

@media (max-width: 768px) {
    .progress-circle-container {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 480px) {
    .progress-circle-container {
        width: 140px;
        height: 140px;
        margin: 0 auto 16px;
    }
}

.progress-circle-container::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: rgba(244, 196, 48, 0.9);
    box-shadow: 0 0 22px rgba(244, 196, 48, 0.18);
    animation: progressGlow 2.2s linear infinite;
    pointer-events: none;
}

.progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: #e5e6e7;
    stroke-width: 12;
}

.progress-circle-fill {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 628;
    stroke-dashoffset: 628;
    filter: drop-shadow(0 0 18px rgba(124, 207, 138, 0.35));
}

.progress-circle-container.animate .progress-circle-fill {
    animation: fillCircle 1.8s ease-out forwards;
}

.progress-circle-container.animate .progress-text {
    animation: textFadeIn 1.2s ease-out forwards;
}

@keyframes progressGlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fillCircle {
    to {
        stroke-dashoffset: calc(628 - (628 * var(--progress, 0) / 100));
    }
}

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

.progress-text {
    position: absolute;
    top: 30%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.progress-percent {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
}

.progress-label {
    font-size: 0.85rem;
    color: rgba(84, 95, 110, 0.95);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .progress-percent {
        font-size: 2.4rem;
    }
    
    .progress-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .progress-percent {
        font-size: 2rem;
    }
    
    .progress-label {
        font-size: 0.75rem;
        margin-top: 2px;
    }
}

@media (max-width: 768px) {
    .progress-percent {
        font-size: 2.4rem;
    }
    
    .progress-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .progress-percent {
        font-size: 2rem;
    }
    
    .progress-label {
        font-size: 0.75rem;
        margin-top: 2px;
    }
}

.progress-details {
    display: flex;
    justify-content: center;
    gap: 40px;
    text-align: center;
}

@media (max-width: 768px) {
    .progress-details {
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .progress-details {
        gap: 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .progress-details {
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .progress-details {
        gap: 20px;
        font-size: 0.9rem;
    }
}

.progress-raised,
.progress-goal {
    display: flex;
    flex-direction: column;
}

.progress-raised strong,
.progress-goal strong {
    font-size: 1.4rem;
    color: var(--accent-color);
    font-weight: 700;
    margin-bottom: 2px;
}

.progress-raised span,
.progress-goal span {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .progress-raised strong,
    .progress-goal strong {
        font-size: 1.2rem;
    }
    
    .progress-raised span,
    .progress-goal span {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .progress-raised strong,
    .progress-goal strong {
        font-size: 1rem;
    }
    
    .progress-raised span,
    .progress-goal span {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .progress-circle-container {
        width: 160px;
        height: 160px;
    }
    
    .progress-percent {
        font-size: 2.2rem;
    }
    
    .progress-details {
        gap: 30px;
    }
}

.expansion-cta { 
    margin-top: 28px; 
    display: flex; 
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .expansion-cta {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .expansion-cta {
        gap: 10px;
        flex-direction: column;
    }
    
    .expansion-cta .btn {
        width: 100%;
        padding: 9px 18px !important;
        font-size: 0.85rem !important;
    }
}

/* Gradient for circular progress */
defs#progress-defs {
    display: none;
}

@media (max-width: 992px) {
    .expansion-grid { grid-template-columns: 1fr; }
}

/* ===================================
   8.e EXPANSION POPUP MODAL
   =================================== */

body.popup-open {
    overflow: hidden;
}

body.popup-open main,
body.popup-open footer {
    filter: blur(6px);
    transition: filter 0.3s ease;
}

body.popup-open .menu-toggle,
body.popup-open .navbar-menu {
    z-index: 1 !important;
    pointer-events: none !important;
}

.expansion-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    padding: 20px;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: visible;
}

.expansion-popup-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.expansion-popup-card {
    position: relative;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    animation: popupSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popupSlideIn {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    z-index: 20;
    transition: all 0.2s ease;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}

.popup-close:hover {
    background: #222;
    transform: rotate(90deg);
}

.popup-card-header {
    position: relative;
    padding: 18px 18px 0 18px;
}

.popup-card-content {
    display: flex;
    flex-direction: column;
}

.popup-card-image {
    width: 100%;
    height: 260px;
    overflow: hidden;
    position: relative;
}

.popup-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.popup-card-body {
    padding: 32px 28px 28px;
}

.popup-card-headline {
    font-family: 'Abril Fatface', serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--accent-color);
    line-height: 1.3;
    margin: 0 0 16px 0;
}

.popup-card-description {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.popup-card-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.popup-card-buttons .btn {
    flex: 1;
    padding: 12px 24px;
    font-size: 0.95rem;
    text-align: center;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.popup-donate-btn {
    background: #F4C430;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.popup-donate-btn:hover {
    background: #E6B800;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(244, 196, 48, 0.3);
}

.popup-donate-btn span {
    font-size: 1.2em;
}

.popup-see-more-btn {
    background: var(--primary-color);
    color: var(--white);
    border: 1.5px solid var(--primary-color);
}

.popup-see-more-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}

/* Tablet responsive */
@media (max-width: 768px) {
    .expansion-popup-card {
        max-width: 90vw;
    }

    .popup-card-body {
        padding: 24px 20px 20px;
    }

    .popup-card-headline {
        font-size: 1.4rem;
    }

    .popup-card-description {
        font-size: 0.9rem;
    }
}

/* Scroll to Top Button */
.mqyc-scroll-top-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #14562b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    cursor: pointer;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    padding: 0;
}

.mqyc-scroll-top-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.mqyc-scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.mqyc-scroll-top-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22);
}

/* Mobile-friendly prayer calendar styling */
@media (max-width: 768px) {
    .prayer-widget {
        max-width: 100%;
        box-shadow: none;
        border: none;
        background-color: rgba(255, 255, 255, 0.96);
    }

    .prayer-widget .widget-date-bar {
        padding: 18px 14px;
    }

    .prayer-widget .date-info {
        gap: 2px;
    }

    .prayer-widget .current-gregorian-date {
        font-size: 0.95rem;
    }

    .prayer-widget .current-hijri-date {
        font-size: 0.75rem;
    }

    .prayer-widget .widget-sub-header,
    .prayer-widget .prayer-row {
        grid-template-columns: 1.5fr 0.9fr 0.9fr;
        padding: 12px 16px;
        font-size: 0.88rem;
        text-align: center;
    }

    .prayer-widget .widget-sub-header {
        padding: 10px 16px;
        letter-spacing: 0.5px;
    }

    .prayer-widget .prayer-row {
        gap: 8px;
    }

    .prayer-widget .prayer-name-col {
        gap: 10px;
        justify-content: center;
        text-align: center;
    }

    .prayer-widget .prayer-icon {
        font-size: 1rem;
    }

    .prayer-widget .widget-jumuah-bar {
        padding: 16px 16px;
        font-size: 0.95rem;
    }
}

@media (max-width: 560px) {
    .prayer-widget .widget-sub-header,
    .prayer-widget .prayer-row {
        grid-template-columns: 1.2fr 1fr 1fr;
        column-gap: 10px;
        row-gap: 8px;
        text-align: center;
        justify-items: center;
    }

    .prayer-widget .widget-sub-header span,
    .prayer-widget .prayer-row span,
    .prayer-widget .prayer-row .start-time,
    .prayer-widget .prayer-row .iqamah-time {
        font-size: 0.82rem;
    }

    .prayer-widget .prayer-row {
        padding: 10px 14px;
        line-height: 1.3;
    }

    .prayer-widget .prayer-name-col {
        gap: 8px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .prayer-widget .widget-jumuah-bar {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 14px 14px;
        text-align: center;
    }

    .prayer-widget .widget-jumuah-bar .jumuah-label {
        display: block;
        margin-top: 4px;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .expansion-popup-overlay {
        padding: 16px;
    }

    .expansion-popup-card {
        max-width: 100%;
        border-radius: 16px;
    }

    .popup-card-body {
        padding: 20px 16px 16px;
    }

    .popup-card-headline {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .popup-card-description {
        font-size: 0.85rem;
        margin-bottom: 18px;
    }

    .popup-card-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .popup-card-buttons .btn {
        flex: 1;
        padding: 11px 20px;
        font-size: 0.9rem;
    }

    .popup-close {
        width: 32px;
        height: 32px;
        top: 12px;
        right: 12px;
    }

    .popup-close svg {
        width: 20px;
        height: 20px;
    }
}

/* ===================================
   8.d VIDEO SECTION WITH OVERLAY
   =================================== */

.mqyc-video-section {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    margin-top: 0;
    overflow: hidden;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.video-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(243, 156, 18, 0.55), rgba(243, 156, 18, 0.55));
    z-index: 1;
    pointer-events: none;
}

.video-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 3;
    position: relative;
    text-align: center;
    width: 100%;
}

.video-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
    max-width: 800px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    margin: 0;
}

@media (max-width: 992px) {
    .video-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .video-title {
        font-size: 1.75rem;
    }
    
    .mqyc-video-section {
        min-height: 350px;
    }
}

@media (max-width: 480px) {
    .video-title {
        font-size: 1.4rem;
    }
    
    .mqyc-video-section {
        min-height: 300px;
        padding: 30px 0;
    }
    
    .video-content {
        gap: 20px;
    }
    
    .btn-large {
        padding: 10px 24px !important;
        font-size: 0.85rem !important;
    }
}

.donate-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.video-play-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 3px solid var(--secondary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: var(--white);
}

.video-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--white);
}

.video-play-btn svg {
    width: 32px;
    height: 32px;
    display: block;
}

@media (max-width: 768px) {
    .video-play-btn {
        width: 64px;
        height: 64px;
        border-width: 2px;
    }
    
    .video-play-btn svg {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .video-play-btn {
        width: 56px;
        height: 56px;
        border-width: 2px;
    }
    
    .video-play-btn svg {
        width: 24px;
        height: 24px;
    }
}

.btn-large {
    padding: 16px 48px !important;
    font-size: 1.1rem !important;
}

@media (max-width: 768px) {
    .btn-large {
        padding: 12px 32px !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .btn-large {
        padding: 10px 24px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 768px) {
    .btn-large {
        padding: 12px 32px !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .btn-large {
        padding: 10px 24px !important;
        font-size: 0.85rem !important;
    }
}

/* Animated Arrow pointing to Donate button */
.animated-arrow {
    color: var(--white);
    animation: bounce 2s infinite;
}

.animated-arrow svg {
    width: 32px;
    height: 32px;
    display: block;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

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

/* Clickable video overlay */
.video-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
}

/* Fullscreen Video Modal */
.video-fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fullscreen-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
}

.fullscreen-video {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.modal-close-fullscreen {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    font-size: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10000;
    line-height: 1;
    padding: 0;
}

.modal-close-fullscreen:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .fullscreen-video-wrapper {
        max-width: 100%;
    }
    
    .modal-close-fullscreen {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

/* ===================================
   8.e COMMUNITY THRIVES SECTION
   =================================== */

.mqyc-community-thrives {
    padding: 60px 0;
    background-color: var(--light-bg);
}

.thrives-header {
    text-align: center;
    margin-bottom: 50px;
}

.thrives-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.thrives-subtitle {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--secondary-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.thrives-title {
    font-family: 'Abril Fatface', serif;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--primary-dark);
    margin: 0;
}

@media (max-width: 992px) {
    .thrives-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .thrives-title {
        font-size: 2rem;
    }
    
    .mqyc-community-thrives {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .thrives-title {
        font-size: 1.6rem;
    }
    
    .thrives-subtitle {
        font-size: 0.75rem;
    }
    
    .thrives-content {
        gap: 16px;
    }
    
    .thrives-card {
        padding: 16px;
        gap: 12px;
    }
    
    .thrives-card-icon {
        width: 40px;
        height: 40px;
    }
    
    .thrives-card-title {
        font-size: 1rem;
    }
    
    .thrives-card-desc {
        font-size: 0.85rem;
    }
}

.thrives-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 992px) {
    .thrives-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.thrives-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.thrives-card {
    display: flex;
    gap: 20px;
    padding: 24px;
    background-color: var(--white);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.thrives-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.thrives-card-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thrives-card-icon svg {
    width: 100%;
    height: 100%;
}

.thrives-card-text {
    flex: 1;
}

.thrives-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-color);
    margin: 0 0 8px 0;
}

.thrives-card-desc {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.thrives-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.thrives-image {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

@media (max-width: 768px) {
    .mqyc-community-thrives {
        padding: 40px 0;
    }

    .thrives-header {
        margin-bottom: 40px;
    }

    .thrives-content {
        gap: 20px;
    }

    .thrives-card {
        padding: 16px;
    }
}

/* ===================================
   8.f VIDEO FULLSCREEN MODAL
   =================================== */

.video-fullscreen-modal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fullscreen-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
}

.fullscreen-video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.modal-close-fullscreen {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: var(--white);
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s ease;
}

.modal-close-fullscreen:hover {
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .mqyc-video-section {
        min-height: 350px;
        padding: 40px 0;
    }

    .video-content {
        gap: 30px;
    }

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

    .animated-arrow svg {
        width: 24px;
        height: 24px;
    }

    .fullscreen-video-wrapper {
        aspect-ratio: 16 / 9;
    }

    .modal-close-fullscreen {
        top: -40px;
    }
}

/* ===================================
   9. EVENTS SECTION
   =================================== */

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.event-card {
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-lg);
}

.event-image {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.event-date {
    padding: var(--spacing-md) var(--spacing-lg);
}

.date-badge {
    display: inline-block;
    background-color: var(--primary-light);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.event-content {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.event-content h3 {
    margin-bottom: var(--spacing-sm);
}

.event-content p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-md);
}

.learn-more {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.learn-more:hover {
    border-bottom-color: var(--primary-color);
}

/* ===================================
   10. DONATION SECTION
   =================================== */

.mqyc-donation {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--white);
    padding: var(--spacing-2xl) var(--spacing-lg);
    text-align: center;
}

.donation-content h2 {
    font-family: 'Abril Fatface', serif;
    color: var(--white);
    margin-bottom: var(--spacing-md);
    font-size: 2.5rem;
    font-weight: 700;
}

.donation-content p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.donation-buttons {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
}

/* ===================================
   11. GALLERY SECTION
   =================================== */

.mqyc-gallery {
    padding: 60px 0;
    background-color: var(--white);
}

.gallery-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 28px;
}

.gallery-tab {
    background: var(--primary-color);
    border: none;
    border-radius: 999px;
    padding: 14px 24px;
    color: var(--white);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.gallery-tab.active {
    background: var(--secondary-color);
    color: #fff;
}

.gallery-panel {
    display: none;
}

.gallery-panel.active {
    display: block;
}

.gallery-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}

.gallery-carousel-inner {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.gallery-carousel-track {
    display: flex;
    gap: 16px;
    transition: transform 0.35s ease;
    will-change: transform;
}

.gallery-carousel-item {
    flex: 0 0 50%;
    max-width: 50%;
    min-height: auto;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--box-shadow);
}

@media (min-width: 1200px) {
    .gallery-carousel-item {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

.gallery-carousel-item img.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 1024px) {
    .gallery-carousel-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .gallery-carousel-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .gallery-carousel {
        gap: 14px;
    }

    .gallery-carousel-track {
        gap: 14px;
    }

    .gallery-tab {
        padding: 12px 18px;
        font-size: 0.95rem;
    }

    .gallery-nav {
        width: 44px;
        height: 44px;
        font-size: 26px;
    }

    .gallery-carousel-item.video-card h4 {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .gallery-tab {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.gallery-card {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    background: #fff;
    aspect-ratio: 16 / 9;
}

.gallery-card .gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-card.is-hidden {
    display: none;
}

.gallery-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.gallery-load-more {
    border: none;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--white);
    padding: 12px 24px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.gallery-load-more:hover {
    background: var(--secondary-color);
}

.gallery-nav {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--primary-dark);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.gallery-nav:hover {
    background: var(--secondary-color);
}

.gallery-carousel-item.video-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--box-shadow);
}

.gallery-carousel-item.video-card .video-card-inner {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}

.gallery-carousel-item.video-card iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ensure uploaded <video> elements fill the same area as embedded iframes */
.gallery-carousel-item.video-card .video-card-inner video,
.gallery-carousel-item.video-card .video-card-inner .gallery-video-upload {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}

.gallery-carousel-item.video-card h4 {
    margin: 0;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    grid-auto-rows: 260px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.gallery-item.span-1 {
    grid-column: span 1;
}

.gallery-item.span-2 {
    grid-column: span 2;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

.gallery-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.video-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.video-card:hover {
    transform: translateY(-4px);
}

.video-card-inner {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}

.video-card-inner iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-card h4 {
    margin: 0;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.video-playlist {
    margin-top: 32px;
    width: 100%;
}

.video-playlist-title {
    margin: 0 0 20px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
}

.video-playlist-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gallery-masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        grid-auto-rows: 220px;
    }

    .gallery-video-grid,
    .video-playlist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        grid-auto-rows: 160px;
    }

    .gallery-item.span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-masonry {
        grid-template-columns: 1fr;
        gap: 12px;
        grid-auto-rows: auto;
    }

    .gallery-video-grid,
    .video-playlist-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item,
    .gallery-item.span-1,
    .gallery-item.span-2 {
        grid-column: span 1;
        height: 200px;
    }

    .mqyc-gallery {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-masonry {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .gallery-item {
        height: 150px;
    }
}

/* ===================================
   11.a SERVICES BANNER SECTION
   =================================== */

.mqyc-services-banner {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%), 
                url('../images/service-section-banner-image.webp') center/cover;
    padding: 100px var(--spacing-lg);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    box-sizing: border-box;
}

.services-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(15, 70, 32, 0.6) 0%, rgba(15, 70, 32, 0.4) 100%);
    z-index: 1;
}

.services-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    max-width: 800px;
}

.services-banner-label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--secondary-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.services-banner-title {
    font-family: 'Abril Fatface', serif;
    font-size: 3rem;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--white);
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.services-banner-highlight {
    color: var(--secondary-color);
}

.services-banner-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 30px;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.services-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

.btn-arrow {
    transition: transform 0.3s ease;
    display: inline-block;
}

.services-banner-btn:hover .btn-arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .mqyc-services-banner {
        min-height: 250px;
        padding: 60px var(--spacing-lg);
    }

    .services-banner-title {
        font-size: 2rem;
    }

    .services-banner-description {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .mqyc-services-banner {
        min-height: 200px;
        padding: 40px var(--spacing-md);
    }

    .services-banner-title {
        font-size: 1.5rem;
    }

    .services-banner-label {
        font-size: 0.75rem;
    }

    .services-banner-description {
        font-size: 0.9rem;
    }
}

/* ===================================
   11.b SERVICES OFFERINGS SECTION
   =================================== */

.mqyc-services-offerings {
    padding: 80px 0;
    background-color: var(--white);
}

.offerings-header-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 60px;
}

.offerings-header-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.offerings-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--secondary-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.offerings-title {
    font-family: 'Abril Fatface', serif;
    font-size: 2.8rem;
    font-weight: normal;
    line-height: 1.2;
    color: var(--primary-dark);
    margin: 0;
}

.offerings-header-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.offerings-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-light);
    margin: 0;
}

/* ===================================
   OFFERINGS GRID - SERVICE CARDS
   =================================== */

.offerings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: var(--spacing-2xl);
}

.offerings-grid .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.offerings-grid .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at right bottom, rgba(27, 122, 62, 0.28) 0%, rgba(27, 122, 62, 0.20) 18%, rgba(27, 122, 62, 0.10) 34%, rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.45s ease, transform 0.45s ease;
    z-index: 1;
}

.offerings-grid .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(27, 122, 62, 0.18);
}

.offerings-grid .service-card:hover::before {
    opacity: 1;
    transform: scale(1.12);
}

.service-image-wrapper,
.service-content {
    position: relative;
    z-index: 2;
}

.service-image-wrapper {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative;
    background-color: var(--light-bg);
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.35s ease;
    filter: brightness(1);
}

.offerings-grid .service-card:hover .service-image {
    filter: brightness(0.96);
}

.service-image-overlay {
    display: none;
}

.service-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 12px;
}

.service-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.3;
    margin: 0;
}

.service-description {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.service-content .btn-sm {
    align-self: flex-start;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===================================
   SERVICES SECTION - RESPONSIVE
   =================================== */

.mqyc-services {
    background-color: var(--light-bg);
    padding: var(--spacing-2xl) 0;
}

.services-header {
    margin-bottom: var(--spacing-2xl);
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin-top: var(--spacing-2xl);
}

.service-card {
    background-color: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-card:hover {
    box-shadow: var(--box-shadow-lg);
    transform: translateY(-4px);
}

.service-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
}

.service-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.service-icon {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
}

.service-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.service-card-title {
    font-size: clamp(1rem, 4vw, 1.3rem);
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.3;
    margin: 0;
}

.service-card-description {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.service-card-footer {
    display: flex;
    align-items: center;
    margin-top: var(--spacing-sm);
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px 0;
}

.service-card-link:hover {
    color: var(--primary-light);
    gap: 10px;
}

.service-link-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.service-card:hover .service-link-icon {
    transform: translateX(4px);
}

/* Responsive Grid - Desktop (1200px+) */
@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }
    
    .service-card-inner {
        padding: var(--spacing-lg);
    }
}

/* Tablet & Medium Desktop (992px - 1199px) */
@media (max-width: 1199px) and (min-width: 993px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    
    .mqyc-services {
        padding: 60px 0;
    }
}

/* Small Tablet & Landscape (768px - 992px) */
@media (max-width: 992px) {
    .mqyc-services {
        padding: 50px 0;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .service-card-inner {
        padding: 20px;
    }
    
    .service-card-title {
        font-size: clamp(1rem, 5vw, 1.2rem);
    }
    
    .service-card-description {
        font-size: 0.9rem;
    }
}

/* Large Mobile (600px - 767px) */
@media (max-width: 767px) {
    .mqyc-services {
        padding: 40px 0;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .services-header {
        margin-bottom: 30px;
    }
    
    .section-title {
        font-size: clamp(1.8rem, 6vw, 2.2rem);
        margin-bottom: 12px;
        padding-bottom: 16px;
    }
    
    .section-subtitle {
        font-size: clamp(0.95rem, 3vw, 1.05rem);
    }
    
    .service-card {
        border-radius: 12px;
    }
    
    .service-card-inner {
        padding: 18px;
        gap: 12px;
    }
    
    .service-icon {
        font-size: 2.8rem;
    }
    
    .service-card-title {
        font-size: 1.1rem;
    }
    
    .service-card-description {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    .service-card-link {
        font-size: 0.85rem;
    }
}

/* Small Mobile (480px - 599px) */
@media (max-width: 599px) {
    .mqyc-services {
        padding: 30px 0;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    
    .services-header {
        margin-bottom: 24px;
    }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 10px;
        padding-bottom: 14px;
    }
    
    .section-subtitle {
        font-size: 0.95rem;
    }
    
    .service-card-inner {
        padding: 16px;
        gap: 10px;
    }
    
    .service-icon {
        font-size: 2.5rem;
    }
    
    .service-icon-wrapper {
        margin-bottom: 8px;
    }
    
    .service-card-title {
        font-size: 1rem;
        line-height: 1.3;
    }
    
    .service-card-description {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    .service-card-link {
        font-size: 0.8rem;
    }
}

/* Tiny Mobile (320px - 479px) */
@media (max-width: 479px) {
    .container {
        padding: 0 12px;
    }
    
    .mqyc-services {
        padding: 24px 0;
    }
    
    .services-grid {
        gap: 12px;
    }
    
    .services-header {
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 8px;
        padding-bottom: 12px;
    }
    
    .section-title::after {
        width: 50px;
        height: 3px;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 16px;
    }
    
    .service-card {
        border-radius: 10px;
    }
    
    .service-card-inner {
        padding: 14px;
        gap: 10px;
    }
    
    .service-icon {
        font-size: 2.2rem;
    }
    
    .service-icon-wrapper {
        margin-bottom: 4px;
    }
    
    .service-card-title {
        font-size: 0.95rem;
    }
    
    .service-card-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    
    .service-card-link {
        font-size: 0.75rem;
    }
}

/* Legacy Responsive Grid - Maintain for offerings sections */
@media (max-width: 1200px) {
    .offerings-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    
    .service-image-wrapper {
        height: 220px;
    }
}

@media (max-width: 1024px) {
    .offerings-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
}

@media (max-width: 992px) {
    .offerings-header-wrapper { 
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    .offerings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .offerings-title {
        font-size: 2.2rem;
    }

    .mqyc-services-offerings {
        padding: 60px 0;
    }
    
    .service-image-wrapper {
        height: 200px;
    }
    
    .service-content {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .offerings-header-wrapper { 
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .offerings-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .offerings-header {
        margin-bottom: 40px;
    }

    .offerings-title {
        font-size: 1.8rem;
    }

    .service-image-wrapper {
        height: 220px;
    }

    .offerings-grid .service-card {
        border-radius: 10px;
    }

    .service-content {
        padding: 20px;
        gap: 10px;
    }

    .service-title {
        font-size: 1.1rem;
    }

    .service-description {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .offerings-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

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

    .offerings-description {
        font-size: 0.9rem;
    }

    .service-image-wrapper {
        height: 180px;
    }

    .service-content {
        padding: 16px;
    }

    .service-title {
        font-size: 1rem;
    }

    .service-description {
        font-size: 0.8rem;
    }

    .btn-sm {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }
}

/* ===================================
   12. CONTACT SECTION
   =================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.contact-form input,
.contact-form textarea {
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--white);
    transition: var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(27, 122, 62, 0.1);
}

.contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.info-item h4 {
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

.info-item p {
    color: var(--text-light);
    margin-bottom: 0;
}

.info-item a {
    color: var(--primary-color);
    font-weight: 600;
}

.form-feedback {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--primary-color);
}

.form-feedback.error {
    color: var(--error-color);
}

.form-feedback.success {
    color: var(--success-color);
}

/* Page-specific hero and content styling */
.contact-hero,
.government-hero {
    padding: 90px 0 60px;
    background: linear-gradient(180deg, rgba(27, 122, 62, 0.93) 0%, rgba(15, 70, 32, 0.95) 100%);
    color: #ffffff;
}

.contact-hero-inner,
.government-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.page-eyebrow {
    display: inline-block;
    margin-bottom: var(--spacing-md);
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85rem;
}

.contact-hero h1,
.government-hero h1 {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    margin: 0 0 var(--spacing-md);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.contact-hero p,
.government-hero p {
    margin: 0 auto;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.8;
}

.contact-hero-actions {
    margin-top: var(--spacing-2xl);
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.contact-details-grid,
.government-grid,
.government-contact-grid {
    display: grid;
    gap: 28px;
}

.contact-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-card,
.gov-card,
.support-card {
    background: var(--white);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(27, 122, 62, 0.12);
}

.contact-card h3,
.gov-card h3,
.support-card h3 {
    margin-top: 0;
    margin-bottom: 18px;
    color: var(--accent-color);
    font-size: 1.4rem;
}

.contact-card p,
.gov-card p,
.support-card p {
    color: var(--text-light);
    line-height: 1.8;
    margin: 0;
}

.contact-card a,
.gov-card a,
.support-card a {
    color: var(--primary-color);
    font-weight: 600;
}

.gov-card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.government-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.government-note {
    margin: var(--spacing-2xl) auto 0;
    max-width: 760px;
    color: var(--text-light);
    line-height: 1.8;
}

@media (max-width: 900px) {
    .contact-details-grid,
    .government-contact-grid,
    .government-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-hero,
    .government-hero {
        padding: 70px 0 40px;
    }
}

/* ===================================
   FAQ PAGE CSS
   Add this block to your main stylesheet.
   Uses: --primary-color, --primary-light,
         --primary-dark, --secondary-color,
         --accent-color, --light-bg
   =================================== */


/* ─────────────────────────────────────────────
   1. HERO — 2-column vertical image reel
   CSS-only seamless loop (same as Contact/About)
───────────────────────────────────────────── */

.faq-hero {
    position: relative;
    height: 520px;
    overflow: hidden;
    background: var(--primary-dark, #0f4620);
}

/* Reel columns container */
.faq-reel-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 0 80px;
    pointer-events: none;
}

/* Individual column — width matches contact page */
.faq-vcol {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 400px;
    flex-shrink: 0;
    will-change: transform;
}

/* Seamless: column is 2× its natural height → move ±50% */
.faq-vcol--up   { animation: faqUp   24s linear infinite; }
.faq-vcol--down { animation: faqDown 30s linear infinite; }

@keyframes faqUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes faqDown {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* Rectangular image tiles */
.faq-rimg {
    width: 100%;
    height: 150px;
    border-radius: 12px;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    backface-visibility: hidden;
    transform: translateZ(0);
}
.faq-rimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Overlays */
.faq-hero-dim {
    position: absolute;
    inset: 0;
    background: rgba(6, 20, 10, 0.62);
    pointer-events: none;
    z-index: 3;
}
.faq-hero-fade-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom, var(--primary-dark, #0f4620), transparent);
    pointer-events: none;
    z-index: 4;
}


/* Hero text */
.faq-hero-content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 80px 24px 50px;
    pointer-events: none;
}

.faq-hero-eyebrow {
    display: inline-block;
    font-family: 'Abril Fatface', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.30);
    padding: 6px 20px;
    border-radius: 40px;
}

.faq-hero-headline {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(34px, 6vw, 70px);
    font-weight: 700;
    line-height: 1.08;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.50);
}
.faq-hero-headline em {
    font-style: italic;
    color: #ffd700;
    font-weight: 600;
}

.faq-hero-sub {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    max-width: 560px;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .faq-vcol--up,
    .faq-vcol--down { animation: none; }
}


/* ─────────────────────────────────────────────
   2. SEARCH BAR
───────────────────────────────────────────── */

.faq-search-section {
    background: var(--light-bg, #f8f9fa);
    padding: 36px 0 32px;
    border-bottom: 1px solid rgba(27, 122, 62, 0.10);
}

.faq-search-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Search field with icon */
.faq-search-field {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.faq-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.faq-search-input {
    width: 100%;
    padding: 13px 44px 13px 46px;
    font-size: 15px;
    font-family: inherit;
    color: var(--accent-color, #1a1a1a);
    background: #ffffff;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-search-input:focus {
    border-color: var(--primary-color, #1b7a3e);
    box-shadow: 0 0 0 3px rgba(27, 122, 62, 0.12);
}
.faq-search-input::placeholder { color: #aaa; }

/* Clear button inside field */
.faq-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.faq-search-clear:hover {
    color: var(--primary-color, #1b7a3e);
    background: rgba(27, 122, 62, 0.08);
}

/* Result count pill */
.faq-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color, #1b7a3e);
    background: rgba(27, 122, 62, 0.10);
    border: 1px solid rgba(27, 122, 62, 0.20);
    padding: 8px 18px;
    border-radius: 40px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* No results message */
.faq-no-results {
    margin-top: 16px;
    font-size: 14px;
    color: #777;
    font-style: italic;
}
.faq-no-results a {
    color: var(--primary-color, #1b7a3e);
    font-weight: 600;
    text-decoration: underline;
}


/* ─────────────────────────────────────────────
   3. FAQ CONTENT — categorised accordion
───────────────────────────────────────────── */

.faq-content {
    background: #ffffff;
    padding: 64px 0 80px;
}

/* Category block */
.faq-category {
    margin-bottom: 52px;
}
.faq-category:last-child { margin-bottom: 0; }

.faq-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Abril Fatface', serif;
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(27, 122, 62, 0.18);
}

.faq-cat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(27, 122, 62, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #1b7a3e);
    flex-shrink: 0;
}

/* Accordion wrapper */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Single item */
.faq-item {
    border: 1.5px solid rgba(27, 122, 62, 0.12);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item:hover {
    border-color: rgba(27, 122, 62, 0.30);
    box-shadow: 0 4px 16px rgba(27, 122, 62, 0.08);
}
.faq-item--open {
    border-color: var(--primary-color, #1b7a3e);
    box-shadow: 0 6px 24px rgba(27, 122, 62, 0.12);
}

/* Question button */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.2s ease;
}
.faq-question:hover {
    background: rgba(27, 122, 62, 0.04);
}
.faq-item--open .faq-question {
    background: rgba(27, 122, 62, 0.05);
}

.faq-q-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-color, #1a1a1a);
    line-height: 1.45;
    flex: 1;
}
.faq-item--open .faq-q-text {
    color: var(--primary-color, #1b7a3e);
}

/* Chevron icon */
.faq-q-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(27, 122, 62, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #1b7a3e);
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.2s ease;
}
.faq-item--open .faq-q-icon {
    transform: rotate(180deg);
    background: var(--primary-color, #1b7a3e);
    color: #ffffff;
}

/* Answer panel */
.faq-answer {
    padding: 0 22px 22px;
    animation: faqSlideIn 0.28s ease;
}
.faq-answer p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 10px;
}
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a {
    color: var(--primary-color, #1b7a3e);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.faq-answer a:hover { color: var(--primary-dark, #0f4620); }

/* Divider between question and answer */
.faq-item--open .faq-question {
    border-bottom: 1px solid rgba(27, 122, 62, 0.12);
}

@keyframes faqSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ─────────────────────────────────────────────
   4. CTA BANNER
───────────────────────────────────────────── */

.faq-cta {
    background: var(--primary-dark, #0f4620);
    padding: 64px 0;
}

.faq-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.faq-cta-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-cta-eyebrow {
    font-family: 'Abril Fatface', serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd700;
}

.faq-cta-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
}

.faq-cta-body {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 520px;
    line-height: 1.8;
}

.faq-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.faq-cta-actions .btn {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Override secondary button on dark bg */
.faq-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.30);
}
.faq-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
}


/* ─────────────────────────────────────────────
   5. RESPONSIVE
───────────────────────────────────────────── */

/* ≤ 1024px */
@media (max-width: 1024px) {
    .faq-hero { height: 460px; }
    .faq-vcol { width: 170px; }
    .faq-rimg { height: 135px; }
    .faq-reel-wrapper { padding: 0 40px; gap: 16px; }
}

/* ≤ 768px */
@media (max-width: 768px) {
    .faq-hero { height: 400px; }
    .faq-reel-wrapper { padding: 0 20px; gap: 12px; }
    .faq-vcol { width: 140px; }
    .faq-rimg { height: 118px; border-radius: 10px; }

    .faq-hero-headline { font-size: clamp(24px, 6vw, 34px); }
    .faq-hero-sub      { font-size: 14px; }

    .faq-search-section { padding: 28px 0 24px; }
    .faq-search-wrapper { flex-direction: column; align-items: stretch; }
    .faq-count          { text-align: center; }

    .faq-content  { padding: 48px 0 60px; }
    .faq-category { margin-bottom: 40px; }

    .faq-cta-inner   { flex-direction: column; align-items: flex-start; gap: 24px; }
    .faq-cta-actions { width: 100%; }
    .faq-cta-actions .btn { flex: 1; justify-content: center; }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .faq-hero          { height: 320px; }
    .faq-reel-wrapper  { padding: 0 12px; gap: 10px; }
    .faq-vcol          { width: 120px; }
    .faq-rimg          { height: 100px; border-radius: 8px; }
    .faq-hero-sub      { display: none; }

    .faq-question { padding: 16px 16px; }
    .faq-q-text   { font-size: 15px; }
    .faq-answer   { padding: 0 16px 18px; }
}

/* ===================================
   FAQ PAGE CSS — end
   =================================== */

/* ===================================
   POLICY PAGES CSS (Privacy, Terms, Cookie)
   =================================== */

.policy-hero {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--primary-color, #1b7a3e) 0%, var(--primary-dark, #0f4620) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.policy-hero-inner {
    text-align: center;
    padding: 0 24px;
    z-index: 2;
}

.policy-hero-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}

.policy-hero-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.policy-content {
    background: var(--white);
    padding: 80px 0;
}

.policy-section {
    margin-bottom: 56px;
    padding-bottom: 0;
}

.policy-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-dark, #0f4620);
    margin: 0 0 16px;
    line-height: 1.3;
}

.policy-subsection-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-color, #1b7a3e);
    margin: 24px 0 12px;
    line-height: 1.4;
}

.policy-text {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.8;
    margin: 0 0 14px;
}

.policy-text a {
    color: var(--primary-color, #1b7a3e);
    text-decoration: none;
    border-bottom: 1px solid var(--primary-color, #1b7a3e);
    transition: color 0.2s ease;
}

.policy-text a:hover {
    color: var(--primary-dark, #0f4620);
}

.policy-list {
    margin: 14px 0;
    padding-left: 24px;
    list-style: disc;
    color: #333;
    line-height: 1.8;
}

.policy-list li {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.policy-contact-info {
    background: rgba(27, 122, 62, 0.06);
    border-left: 4px solid var(--primary-color, #1b7a3e);
    padding: 16px 20px;
    border-radius: 4px;
    margin: 16px 0;
}

.policy-contact-info p {
    margin: 6px 0;
    font-size: 0.95rem;
    color: #333;
}

.policy-contact-info strong {
    color: var(--primary-dark, #0f4620);
}

@media (max-width: 768px) {
    .policy-hero {
        height: 240px;
    }

    .policy-hero-title {
        font-size: clamp(22px, 5vw, 40px);
    }

    .policy-content {
        padding: 60px 0;
    }

    .policy-section {
        margin-bottom: 40px;
    }

    .policy-section-title {
        font-size: 1.2rem;
    }

    .policy-subsection-title {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .policy-hero {
        height: 200px;
    }

    .policy-hero-title {
        font-size: 1.8rem;
    }

    .policy-content {
        padding: 40px 0;
    }

    .policy-section {
        margin-bottom: 32px;
    }

    .policy-section-title {
        font-size: 1.1rem;
    }

    .policy-text,
    .policy-list li {
        font-size: 0.9rem;
    }
}

/* ===================================
   POLICY PAGES CSS — end
   =================================== */

/* ===================================
   13. FOOTER
   =================================== */

.mqyc-footer {
    background: #050505;
    color: #f4f4f4;
    position: relative;
    overflow: hidden;
}

.footer-background {
    position: absolute;
    inset: 0;
    background-image: url('../images/footer-skyline.svg');
    background-size: cover;
    background-position: top center;
    opacity: 0.16;
    pointer-events: none;
}

.footer-container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 180px var(--spacing-lg) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-branding {
    min-width: 280px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.footer-logo-link,
.footer-logo img,
.footer-logo .custom-logo-link img {
    display: block;
    max-width: 180px;
    height: auto;
}

.footer-description {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.8;
    font-size: 0.95rem;
    max-width: 420px;
}

.footer-links h4,
.footer-services h4,
.footer-contact h4 {
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 18px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.footer-column ul li {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.75;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: #f4c430;
}

.footer-contact-meta {
    display: grid;
    gap: 16px;
}

.contact-block h5 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    color: #f4c430;
}

.contact-block h5 a {
    color: #f4c430;
    text-decoration: none;
}

.contact-block h5 a:hover {
    color: #ffc966;
}

.contact-block p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.footer-socials .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: var(--secondary-color);
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.footer-socials .social-icon:hover {
    background: rgba(243,156,18,0.14);
    transform: translateY(-2px);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.footer-legal-links a {
    color: #f4c430;
    text-decoration: none;
}

.footer-legal-links a:hover {
    color: #ffd865;
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-container {
        padding: 140px var(--spacing-md) var(--spacing-md);
    }

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

    .footer-bottom {
        flex-direction: row;
        gap: 30px;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .footer-container {
        padding: 80px 12px 12px;
    }

    /* Hide full footer grid on small screens and keep only footer-bottom */
    .footer-grid {
        display: none;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .footer-legal-links {
        gap: 12px;
    }

    .footer-logo {
        gap: 10px;
    }

    .footer-logo-name {
        font-size: 0.95rem;
    }

    .footer-description,
    .footer-column ul li,
    .footer-badge-label,
    .footer-badge-link {
        font-size: 0.92rem;
    }
}

/* ===================================
   14. RESPONSIVE DESIGN
   =================================== */

/* ===================================
   15. REVIEWS / TESTIMONIALS CAROUSEL
   =================================== */

.mqyc-reviews {
    
    background-color: var(--white);
}

.reviews-section-title {
    font-family: 'Abril Fatface', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--primary-dark);
    text-align: center;
    margin: 0 0 40px;
}

.reviews-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

/* Left Badge Section */
.reviews-badge-section {
    flex-shrink: 0;
    width: 150px;
}

.google-rating-badge {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #e8e8e8;
}

.badge-label {
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1.2px;
    color: var(--accent-color);
    margin-bottom: 8px;
}

.badge-stars {
    color: #ffc107;
    font-size: 1.3rem;
    margin-bottom: 4px;
    letter-spacing: 2px;
}

.badge-count {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 12px;
    line-height: 1.3;
}

.google-logo {
    display: flex;
    justify-content: center;
}

/* Carousel Wrapper with Navigation */
.carousel-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

/* Carousel Section */
.carousel-section {
    flex: 1;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.carousel-container {
    overflow: hidden;
    border-radius: 12px;
    max-width: 100%;
}

.carousel-content {
    display: flex;
    gap: 16px;
    animation: scrollRight 80s linear infinite;
}

@keyframes scrollRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.carousel-container:hover .carousel-content {
    animation-play-state: paused;
}

.review-slide {
    flex-shrink: 0;
    width: 280px;
}

.review-item {
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    height: 100%;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-item:hover {
    border-color: #d0d0d0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.review-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-info {
    flex: 1;
}

.review-author {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-color);
    margin: 0;
}

.review-role {
    font-size: 0.8rem;
    color: var(--text-light);
    margin: 4px 0 0;
}

.review-options-btn {
    color: #999;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 4px 8px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.review-options-btn:hover { color: var(--accent-color); }

.review-rating-stars {
    display: flex;
    gap: 2px;
}

.star-icon {
    color: #ffc107;
    font-size: 1rem;
}

.star-icon.empty {
    opacity: 0.2;
}

.review-content {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

/* Force review comment text to black for plugin-generated review cards */
.mqyc-reviews .wp-gr .grw-review-inner,
.mqyc-reviews .wp-gr .grw-review-inner p,
.mqyc-reviews .wp-gr .grw-review-inner span,
.mqyc-reviews .reviews-plugin-widget .ti-widget .ti-review,
.mqyc-reviews .reviews-plugin-widget .ti-widget .ti-review * {
    color: #000000 !important;
}

/* Navigation Chevron Buttons */
.review-nav-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--primary-dark);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #fff;
    z-index: 10;
    padding: 0;
    font-size: 0;
    flex-shrink: 0;
}

.review-nav-btn:hover {
    background: var(--secondary-color);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
    /* transform: scale(1.08); */
}

.review-nav-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Match plugin chevron buttons to gallery chevrons */
.rpi .rpi-ltgt {
    margin: calc(-1 * var(--slider-btn-pos) + var(--slider-offset, 0px));
    position: var(--slider-btn-position, absolute) !important;
    padding: var(--slider-btn-padding) !important;
    border-radius: 50% !important;
    border: var(--slider-btn-bw, 0) solid var(--slider-btn-bc, transparent) !important;
    background-color: var(--primary-dark) !important;
    color: #fff !important;
    box-shadow: var(--slider-btn-shadow, 0 4px 12px rgba(0,0,0,0.12)) !important;
    transition: background-color .2s ease-in-out, transform .15s ease !important;
    z-index: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rpi .rpi-ltgt:hover,
.rpi .rpi-ltgt:active {
    background-color: var(--secondary-color) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
    transform: scale(1.06) !important;
}

/* Giving Border to the review cards to match the gallery cards */
.wp-gr .grw-header-inner, .wp-gr .grw-review-inner {
    position: relative !important;
    margin: 4px !important;
    padding: 16px !important;
    width: 100% !important;
    border: 2px solid var(--primary-color);
    border-radius: 60px;
}

/* Keep background unchanged on focus (prevents persistent hover after click),
   but show a subtle focus ring for keyboard users */
.rpi .rpi-ltgt:focus {
    background-color: var(--primary-dark) !important;
}

.rpi .rpi-ltgt:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.06), 0 0 0 3px rgba(243,156,18,0.12) !important;
}

.reviews-plugin-shell {
    width: 100%;
    position: relative;
}

.reviews-plugin-widget {
    width: 100%;
}

.reviews-plugin-widget .ti-widget .ti-controls,
.reviews-plugin-widget .ti-widget .ti-prev,
.reviews-plugin-widget .ti-widget .ti-next {
    display: none !important;
}

.rpi-ltgt.rpi-gt::after, .rpi-ltgt.rpi-lt::before {
    position: relative !important;
    content: '' !important;
    display: block !important;
    width: var(--slider-btn-size) !important;
    height: var(--slider-btn-size) !important;
    background-color: #ffffff !important;
}


/* Responsive */
@media (max-width: 1024px) {
    .reviews-wrapper { gap: 30px; }
    .review-slide { width: 260px; }
    .carousel-wrapper { gap: 12px; }
    .review-nav-btn { width: 40px; height: 40px; }
    .review-nav-btn svg { width: 18px; height: 18px; }
    .social-strip {
        display: none !important;
    }
}

/* Gallery responsive carousel */
.gallery-carousel {
    display: flex;
    align-items: center;
    gap: 18px;
}

.gallery-carousel-inner {
    width: 100%;
}

@media (max-width: 1024px) {
    .gallery-carousel-item {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .gallery-carousel-item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .gallery-carousel {
        gap: 12px;
    }

    .reviews-wrapper { flex-direction: column; }
    .reviews-badge-section { width: 100%; }
    .review-slide { width: 100%; }
    .carousel-wrapper {
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        position: relative;
    }
    .review-nav-btn { 
        width: 40px;
        height: 40px;
    }
    .review-nav-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Position chevrons on left/right for easy thumb access */
    .review-nav-btn.prev {
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }

    .review-nav-btn.next {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }
}

@media (max-width: 480px) {
    .reviews-section-title { font-size: 1.8rem; }
    .review-slide { width: 100%; }
    .review-item { padding: 12px; }
    .review-avatar { width: 40px; height: 40px; }
    .review-author { font-size: 0.9rem; }

    /* Stop auto-scrolling on small screens, show one slide at a time */
    .carousel-content {
        animation: none !important;
        display: flex !important;
        transition: transform 0.35s ease;
    }
    .carousel-container {
        overflow: hidden;
    }
}

/* ===================================
   16. JOIN MQYC FAMILY + LOCATION
   =================================== */

.mqyc-join-family {
    padding: 70px 0;
    background-color: var(--white);
}

.join-family-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.3fr) minmax(320px, 1.05fr);
    gap: 40px;
    align-items: stretch;
}

.join-family-left,
.join-family-right,
.join-family-location {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.join-family-left,
.join-family-right {
    justify-content: stretch;
}

.join-family-cta-card,
.join-family-form-card,
.prayer-widget-wrapper {
    background: #ffffff;
    border: 2px solid rgba(220, 220, 220, 0.9);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

.join-family-cta-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(27, 122, 62, 0.12);
    color: var(--secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    width: fit-content;
}

.join-family-title {
    font-family: 'Abril Fatface', serif;
    font-size: 2.4rem;
    line-height: 1.05;
    color: var(--primary-dark);
    margin: 0;
}

.join-family-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-light);
    margin: 0;
}

.join-family-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.join-family-cta-actions .btn {
    flex: 1;
    min-width: 150px;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 700;
}

.join-family-form-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-card-header h3 {
    font-size: 1.8rem;
    margin: 0;
    color: var(--primary-dark);
}

.form-fields-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-fields-row input,
.join-family-form-card textarea {
    width: 100%;
    border: 1px solid #dcdcdc;
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #fafafa;
}

.form-fields-row input:focus,
.join-family-form-card textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(27, 122, 62, 0.08);
}

.join-family-form-card textarea {
    min-height: 130px;
    resize: vertical;
}

.form-checkbox-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.form-checkbox-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-light);
    background: #fafafa;
    border: 1px solid #dcdcdc;
    border-radius: 16px;
    padding: 12px 14px;
}

.form-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.form-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

.form-privacy input {
    margin-top: 4px;
}

.form-submit-btn {
    width: 100%;
    padding: 16px 24px;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
}

.join-family-location {
    gap: 20px;
}

.location-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ececec;
}

.location-title {
    font-family: 'Abril Fatface', serif;
    font-size: 2rem;
    color: var(--primary-dark);
    margin: 0 0 10px;
}

.location-text {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-light);
    margin: 0;
}

.location-map {
    width: 100%;
    flex: 1;
    min-height: 520px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
}

.location-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 1024px) {
    .join-family-grid {
        gap: 32px;
    }
    .location-map {
        min-height: 460px;
    }
}

@media (max-width: 768px) {
    .join-family-grid { grid-template-columns: 1fr; }
    .join-family-cta-card,
    .join-family-form-card,
    .join-family-location {
        padding: 28px;
    }
    .join-family-title {
        font-size: 2rem;
    }
    .join-family-cta-actions {
        flex-direction: column;
    }
    .form-fields-row {
        grid-template-columns: 1fr;
    }
    .form-checkbox-row {
        grid-template-columns: 1fr;
    }
    .location-map {
        min-height: 420px;
    }
}

@media (max-width: 480px) {
    .mqyc-join-family { padding: 50px 0; }
    .join-family-cta-card,
    .join-family-form-card,
    .join-family-location { padding: 20px; }
    .join-family-title { font-size: 1.6rem; }
    .join-family-cta-actions { flex-direction: column; }
    .join-family-cta-actions .btn { width: 100%; }
    .form-fields-row { gap: 12px; }
    .form-checkbox-row { grid-template-columns: 1fr; }
    .location-map { min-height: 340px; }
}


/* Tablets (md) */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Social Strip */
    .social-strip {
        padding: 10px 0;
        min-height: 44px;
    }

    .social-container {
        flex-direction: row;
        gap: 8px;
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
        gap: 8px;
    }

    .social-icon {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }

    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 10001;
        padding: 10px;
        border-radius: 12px;
        background: var(--primary-color);
        color: var(--white);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    .menu-toggle span {
        background-color: currentColor;
    }

    .navbar-menu {
        display: none;
        position: fixed;
        top: 100px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        background-color: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        padding: calc(var(--spacing-lg) + 1rem) var(--spacing-lg) var(--spacing-lg);
        box-shadow: var(--box-shadow);
        z-index: 9998;
        backdrop-filter: blur(10px);
    }

    .navbar-menu.active {
        display: flex;
    }

    .navbar-nav {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .navbar-nav li {
        width: 100%;
    }

    .navbar-nav a {
        display: block;
        width: 100%;
        border-bottom: none;
        padding: 0.85rem 0;
        color: var(--primary-color);
        font-weight: 600;
    }

    .navbar-menu.active {
        background-color: rgba(255, 255, 255, 0.98);
    }

    .navbar-menu.active .navbar-nav a:hover {
        color: var(--secondary-color) !important;
        border-bottom-color: transparent;
    }

    .mqyc-header.scrolled .navbar-menu.active {
        background-color: rgba(255, 255, 255, 0.98);
    }

    .navbar-menu.active .navbar-nav a {
        color: var(--primary-color);
    }

    .navbar-menu.active .navbar-nav a:hover {
        color: var(--secondary-color);
    }

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

    .hero-subtitle-main {
        
        font-size: 2.2rem;
    }

    .hero-subtitle-top {
        font-size: 0.95rem;
    }

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

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-indicators {
        bottom: 20px;
        gap: 10px;
    }

    .indicator {
        width: 10px;
        height: 10px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-info {
        grid-template-columns: 1fr;
    }

    section {
        padding: var(--spacing-xl) 0;
    }
}

/* Mobile (sm) */
@media (max-width: 480px) {
    :root {
        --spacing-2xl: 2rem;
        --spacing-xl: 1.5rem;
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Social Strip */
    .social-strip {
        padding: 8px 0;
        min-height: 40px;
    }

    .social-container {
        padding: 0 var(--spacing-md);
        flex-direction: row;
        gap: 6px;
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
        gap: 6px;
    }

    .social-icon {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
        border-radius: 50%;
    }

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

    .hero-subtitle-main {
        font-size: 1.5rem;
    }

    .hero-subtitle-top {
        
        font-size: 0.85rem;
        letter-spacing: 2px;
    }

    .hero-description {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-indicators {
        bottom: 15px;
        gap: 8px;
    }

    .indicator {
        width: 8px;
        height: 8px;
    }

    .section-title::after {
        width: 40px;
    }

    .services-grid,
    .events-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .donation-buttons {
        flex-direction: column;
    }

    .donation-buttons .btn {
        width: 100%;
    }

    /* section {
        padding: var(--spacing-lg) 0;
    } */

    .footer-grid {
        gap: var(--spacing-lg);
    }
}

/* ===================================
   15. UTILITY CLASSES
   =================================== */

.text-center {
    text-align: center;
}

.text-white {
    color: var(--white);
}

.bg-primary {
    background-color: var(--primary-color);
}

.mt-1 {
    margin-top: var(--spacing-sm);
}

.mt-2 {
    margin-top: var(--spacing-md);
}

.mt-3 {
    margin-top: var(--spacing-lg);
}

.mb-1 {
    margin-bottom: var(--spacing-sm);
}

.mb-2 {
    margin-bottom: var(--spacing-md);
}

.mb-3 {
    margin-bottom: var(--spacing-lg);
}

/* ===================================
   16. ANIMATIONS
   =================================== */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

/* ===================================
   17. DESKTOP DROPDOWN NAVIGATION & SUBMENUS
   =================================== */

/* Desktop only dropdown rules */
@media (min-width: 769px) {
    .navbar-nav li {
        position: relative;
    }

    /* Target children menus */
    .navbar-nav .menu-item-has-children > a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    /* Small downward chevron */
    .navbar-nav .menu-item-has-children > a::after {
        content: '▼';
        font-size: 0.7rem;
        transition: transform 0.3s ease;
        display: inline-block;
    }

    /* Rotate chevron on hover */
    .navbar-nav .menu-item-has-children:hover > a::after {
        transform: rotate(180deg);
    }

    /* Submenu dropdown container */
    .navbar-nav .sub-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(15px);
        background-color: var(--white);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        padding: 12px 0;
        min-width: 280px;
        list-style: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
        z-index: 1010;
        border-top: 4px solid var(--primary-color);
        display: block; /* ensure block layout */
        margin: 0;
    }

    /* Trigger dropdown display */
    .navbar-nav li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    /* Submenu links style */
    .navbar-nav .sub-menu li {
        width: 100%;
        margin: 0 !important;
    }

    .navbar-nav .sub-menu a {
        display: block;
        padding: 10px 24px;
        color: var(--text-color) !important;
        font-size: 0.95rem;
        font-weight: 500;
        text-align: left;
        border-bottom: none !important;
        background: transparent;
        transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
        white-space: nowrap;
    }

    /* Premium hover micro-animation: shift right, change color and background */
    .navbar-nav .sub-menu a:hover {
        background-color: var(--light-bg);
        color: var(--primary-color) !important;
        padding-left: 30px;
        border-bottom-color: transparent !important;
    }
}

/* ===================================
   18. MOBILE DROPDOWN NAVIGATION
   =================================== */

@media (max-width: 768px) {
    /* Target children menus */
    .navbar-nav .menu-item-has-children > a {
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .navbar-nav .menu-item-has-children > a::after {
        content: '▼';
        font-size: 0.75rem;
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .navbar-nav li.active-dropdown > a::after {
        transform: rotate(180deg);
    }

    .navbar-nav .sub-menu {
        display: none;
        width: 100%;
        list-style: none;
        padding: 5px 0 10px 15px;
        margin: 0;
        border-left: 2px solid var(--primary-color);
    }

    .navbar-nav .sub-menu li {
        width: 100%;
        margin: 0 !important;
    }

    .navbar-nav .sub-menu a {
        display: block;
        padding: 8px 10px;
        color: var(--text-color) !important;
        font-size: 0.95rem;
        font-weight: 500;
        text-align: left;
        border-bottom: none !important;
    }

    .navbar-nav .sub-menu a:hover {
        color: var(--primary-color) !important;
    }
}

/* ===================================
   19. CUSTOM SERVICE PAGES TEMPLATE
   =================================== */

/* Hero Banner */
.service-page-hero {
    position: relative;
    background-color: var(--primary-dark);
    background-image: linear-gradient(135deg, var(--primary-dark) 0%, #082911 100%);
    color: var(--white);
    padding: 160px 0 80px; /* High padding on desktop to clear fixed header */
    text-align: center;
    overflow: hidden;
}

.service-hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0);
    background-size: 24px 24px;
    opacity: 0.8;
    pointer-events: none;
}

.service-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.service-breadcrumbs a {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500;
    border-bottom: none !important;
}

.service-breadcrumbs a:hover {
    color: var(--secondary-color) !important;
}

.breadcrumb-separator {
    color: rgba(255, 255, 255, 0.4);
}

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

.service-hero-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.service-hero-title {
    font-family: 'Abril Fatface', serif;
    font-size: 3.5rem;
    color: var(--white);
    margin-bottom: 15px;
    line-height: 1.18;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

.service-hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 700px;
    margin: 0 auto;
    font-weight: 400;
}

.service-image-panel {
    margin-bottom: 30px;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 280px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.02));
}

.service-page-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-hero-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.service-hero-icon::before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.3));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.service-activities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.activity-card {
    background-color: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
    display: grid;
    gap: 16px;
    min-height: 180px;
}

.activity-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(27, 122, 62, 0.16), rgba(27, 122, 62, 0.05));
    position: relative;
}

.activity-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--primary-color);
    transform: translate(-50%, -50%);
}

.activity-content h3 {
    font-family: 'Abril Fatface', serif;
    font-size: 1.1rem;
    color: var(--primary-color, #1b7a3e);
    margin-bottom: 10px;
}

.activity-content p {
    margin: 0;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Page Layout */
.service-page-layout {
    background-color: var(--light-bg);
    padding: 80px 0;
}

.service-layout-grid {
    display: grid;
    grid-template-columns: 2.1fr 0.9fr;
    gap: 40px;
    align-items: start;
}

/* Left: Main Content Column */
.service-content-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    box-sizing: border-box; /* ensure padding counted inside width */
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
}

/* Prevent images and media inside content cards from overflowing */
.service-content-card img,
.service-content-card .service-page-image,
.service-content-card video,
.service-content-card iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Make sure immediate children don't force overflow */
.service-content-card > * {
    min-width: 0;
    box-sizing: border-box;
}

.content-heading {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2.1rem, 2.6vw, 2.6rem);
    color: var(--primary-color, #1b7a3e);
    margin-bottom: 24px;
    border-left: 6px solid var(--secondary-color);
    padding-left: 18px;
    line-height: 1.18;
}

.overview-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 35px;
}

/* Features list styling */
.service-features-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.service-feature-card {
    display: flex;
    gap: 20px;
    background-color: var(--light-bg);
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid var(--primary-color);
}

.service-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}

.feature-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    line-height: 1;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(27, 122, 62, 0.16), rgba(255, 255, 255, 0.08));
    position: relative;
}

/* .feature-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--primary-color);
    transform: translate(-50%, -50%);
} */

.feature-text h3 {
    font-family: 'Abril Fatface', serif;
    font-size: 1.25rem;
    color: var(--primary-color, #1b7a3e);
    margin-bottom: 8px;
}

.feature-text p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 0;
}

/* Dynamic widget on Prayers Page */
.service-custom-widget {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
}

.service-custom-widget .prayer-widget {
    margin: 0;
    box-shadow: none;
    border: none;
}

/* Right: Sidebar Column */
.service-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.service-sidebar-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.sidebar-heading {
    font-family: 'Abril Fatface', serif;
    font-size: 1.45rem;
    color: var(--primary-color, #1b7a3e);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(27, 122, 62, 0.15);
}

/* Sidebar Navigation List */
.service-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.service-quick-links-sidebar {
    margin-bottom: 0;
}

.service-quick-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(27, 122, 62, 0.1);
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(27, 122, 62, 0.16);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.service-quick-link-btn:hover,
.service-quick-link-btn:focus-visible {
    background: var(--primary-color);
    color: var(--white);
    transform: translateY(-1px);
}

.sidebar-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-nav-list li {
    margin: 0 !important;
}

.sidebar-nav-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--text-color) !important;
    font-weight: 500;
    font-size: 0.95rem;
    border-bottom: none !important;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    background-color: var(--light-bg);
}

.nav-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color);
    display: inline-block;
}
.sidebar-nav-list li.active a,
.sidebar-nav-list a:hover {
    background-color: var(--primary-color);
    color: var(--white) !important;
    transform: translateX(5px); /* Premium micro-animation shift */
}

.sidebar-nav-list li.active a .nav-bullet,
.sidebar-nav-list a:hover .nav-bullet {
    filter: brightness(2);
}

/* Sidebar Inquiry Form */
.sidebar-contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

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

.sidebar-input,
.sidebar-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.95rem;
    background-color: var(--light-bg);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-color);
}

.sidebar-input:focus,
.sidebar-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(27, 122, 62, 0.15);
}

.readonly-input {
    background-color: #e9ecef;
    cursor: not-allowed;
    color: var(--text-light);
}

.sidebar-textarea {
    height: 120px;
    resize: none;
}

.sidebar-contact-form .form-submit-btn {
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 0.95rem;
}

/* Sidebar Center Details */
.detail-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(27, 122, 62, 0.12);
    border: 1px solid rgba(27, 122, 62, 0.16);
    position: relative;
}

.detail-icon::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--primary-color);
}

.detail-text strong {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.detail-text span {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.4;
}

/* Responsive Rules */
@media (max-width: 992px) {
    .service-layout-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
        box-sizing: border-box;
    }

    .service-page-layout {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        padding: 60px 0;
    }
    
    .service-activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-sidebar,
    .service-sidebar-card,
    .sidebar-contact-form,
    .sidebar-nav-list,
    .sidebar-nav-list a,
    .service-quick-links,
    .service-quick-link-btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .service-quick-links {
        gap: 10px;
    }

    .service-quick-link-btn {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .service-page-hero {
        padding: 80px 0 40px;
        overflow-x: hidden;
    }

    .service-quick-links {
        flex-direction: column;
        align-items: stretch;
    }

    .service-quick-link-btn {
        width: 100%;
        text-align: center;
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .service-sidebar-card {
        padding: 22px;
    }

    .service-layout-grid {
        width: 100%;
        box-sizing: border-box;
        padding: 0 0 0 0;
    }

    .service-content-card,
    .service-sidebar-card {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .service-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .service-sidebar-card {
        padding: 22px;
    }

    .service-sidebar-card .sidebar-nav-list a,
    .service-sidebar-card .sidebar-contact-form {
        min-width: 0;
    }

    .sidebar-contact-form {
        overflow: hidden;
    }

    .service-sidebar {
        overflow-x: hidden;
    }

    .service-page-hero .container,
    .service-page-layout {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
    
    .service-page-hero .container {
        overflow-x: hidden;
    }

    .service-hero-title {
        font-size: clamp(1.6rem, 5vw, 2.4rem);
        max-width: 100%;
        margin: 0 auto 12px;
        line-height: 1.2;
        word-break: break-word;
        padding: 0;
    }
    
    .service-hero-subtitle {
        font-size: clamp(0.9rem, 2.5vw, 1.1rem);
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        line-height: 1.6;
        word-break: break-word;
        max-width: 95%;
    }

    .service-hero-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 12px;
    }
    
    .service-content-card,
    .service-sidebar-card,
    .activity-card,
    .service-feature-card,
    .service-custom-widget {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .service-content-card,
    .service-sidebar-card {
        padding: 24px;
    }
    
    .content-heading {
        font-size: clamp(1.2rem, 4vw, 1.6rem);
        margin-bottom: 16px;
        padding-left: 12px;
        border-left-width: 4px;
    }
    
    .service-features-grid {
        gap: 16px;
    }
    
    .service-feature-card {
        padding: 18px;
        gap: 14px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: flex-start;
    }

    .feature-text {
        min-width: 0;
        width: 100%;
    }

    .feature-text h3,
    .feature-text p,
    .activity-content h3,
    .activity-content p,
    .overview-text,
    .sidebar-nav-list a {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .feature-text h3 {
        font-size: clamp(1rem, 3.5vw, 1.2rem);
        margin-bottom: 6px;
    }

    .feature-text p,
    .activity-content p {
        font-size: clamp(0.8rem, 2.5vw, 0.95rem);
        line-height: 1.6;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .service-activities-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 16px;
    }

    .activity-card {
        min-height: auto;
        padding: 18px;
        gap: 12px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: flex-start;
    }

    .service-sidebar {
        gap: 20px;
    }

    .sidebar-nav-list {
        gap: 6px;
    }
    
    .sidebar-nav-list a {
        font-size: clamp(0.85rem, 2.5vw, 0.95rem);
        padding: 12px 14px;
        gap: 10px;
    }

    .service-breadcrumbs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 0;
        font-size: 0.85rem;
    }

    .hero-minar-left,
    .hero-minar-right {
        display: none;
    }

    .service-hero-animation {
        display: none;
    }
    
    .sidebar-heading {
        font-size: clamp(1.1rem, 3.5vw, 1.3rem);
    }
    
    .overview-text {
        font-size: clamp(0.85rem, 2.5vw, 1rem);
        line-height: 1.7;
    }
    
    .activity-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    
    .service-image-panel {
        min-height: 200px;
    }
}

/* Small Mobile & Portrait Tablet (600px - 767px) */
@media (max-width: 767px) {
    .service-page-layout {
        padding: 40px 0;
    }
    
    .service-page-hero {
        padding: 70px 0 35px;
        overflow-x: hidden;
    }
    
    .service-content-card,
    .service-sidebar-card {
        padding: 20px;
        border-radius: 12px;
    }
    
    .service-feature-card {
        padding: 16px;
        gap: 12px;
    }
    
    .activity-card {
        padding: 16px;
    }
    
    .content-heading {
        font-size: 1.4rem;
        margin-bottom: 14px;
    }
    
    .sidebar-contact-form .form-submit-btn {
        width: 100%;
        padding: 12px 16px;
    }
}

/* Extra Small Mobile (480px - 599px) */
@media (max-width: 599px) {
    .service-page-hero {
        padding: 60px 0 30px;
    }
    
    .service-page-hero .container,
    .service-page-layout {
        padding-left: 12px;
        padding-right: 12px;
    }

    .service-hero-title {
        font-size: clamp(1.4rem, 6vw, 2rem);
        margin-bottom: 8px;
    }

    .service-hero-subtitle {
        font-size: clamp(0.85rem, 3vw, 1rem);
        line-height: 1.5;
        margin-bottom: 12px;
    }
    
    .service-hero-icon {
        width: 52px;
        height: 52px;
    }
    
    .service-content-card,
    .service-sidebar-card {
        padding: 16px;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    
    .content-heading {
        font-size: 1.25rem;
        margin-bottom: 12px;
        padding-left: 10px;
    }
    
    .overview-text {
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 18px;
    }
    
    .service-features-grid {
        gap: 12px;
    }
    
    .service-feature-card {
        padding: 14px;
        gap: 10px;
        border-left-width: 3px;
    }
    
    .feature-icon {
        width: 44px;
        height: 44px;
    }
    
    .feature-text h3 {
        font-size: 1rem;
        margin-bottom: 4px;
    }
    
    .feature-text p {
        font-size: 0.8rem;
    }
    
    .service-activities-grid {
        gap: 12px;
    }
    
    .activity-card {
        padding: 14px;
        gap: 10px;
    }
    
    .activity-icon {
        width: 36px;
        height: 36px;
    }
    
    .activity-content h3 {
        font-size: 0.95rem;
        margin-bottom: 4px;
    }
    
    .activity-content p {
        font-size: 0.8rem;
    }
    
    .sidebar-heading {
        font-size: 1.1rem;
        margin-bottom: 16px;
        padding-bottom: 10px;
    }
    
    .sidebar-nav-list a {
        font-size: 0.9rem;
        padding: 10px 12px;
    }
    
    .sidebar-input,
    .sidebar-textarea {
        font-size: 0.9rem;
        padding: 10px 12px;
    }
    
    .sidebar-textarea {
        height: 100px;
    }
    
    .sidebar-contact-form {
        gap: 12px;
    }
}

/* Tiny Mobile (320px - 479px) */
@media (max-width: 479px) {
    .service-page-hero {
        padding: 50px 0 25px;
    }
    
    .service-page-hero .container,
    .service-page-layout {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .service-hero-title {
        font-size: 1.3rem;
        margin-bottom: 8px;
        line-height: 1.15;
    }

    .service-hero-subtitle {
        font-size: 0.8rem;
        line-height: 1.5;
        max-width: 90%;
    }
    
    .service-hero-icon {
        width: 48px;
        height: 48px;
    }
    
    .service-breadcrumbs {
        font-size: 0.75rem;
        gap: 4px;
    }
    
    .service-page-layout {
        padding: 30px 0;
    }
    
    .service-content-card,
    .service-sidebar-card {
        padding: 14px;
        border-radius: 8px;
        margin-bottom: 16px;
    }
    
    .content-heading {
        font-size: 1.1rem;
        margin-bottom: 10px;
        padding-left: 8px;
        border-left-width: 3px;
    }
    
    .overview-text {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 14px;
    }
    
    .service-features-grid {
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .service-feature-card {
        padding: 12px;
        gap: 8px;
        border-left-width: 3px;
        border-radius: 8px;
    }
    
    .feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    
    .feature-text h3 {
        font-size: 0.9rem;
        margin-bottom: 3px;
        line-height: 1.2;
    }
    
    .feature-text p {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    
    .service-activities-grid {
        gap: 10px;
        margin-top: 12px;
    }
    
    .activity-card {
        padding: 12px;
        gap: 8px;
        min-height: auto;
    }
    
    .activity-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
    
    .activity-content h3 {
        font-size: 0.9rem;
        margin-bottom: 3px;
        line-height: 1.2;
    }
    
    .activity-content p {
        font-size: 0.75rem;
        line-height: 1.4;
        margin: 0;
    }
    
    .sidebar-heading {
        font-size: 1rem;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    
    .sidebar-nav-list {
        gap: 4px;
    }
    
    .sidebar-nav-list a {
        font-size: 0.85rem;
        padding: 8px 10px;
    }
    
    .nav-bullet {
        width: 8px;
        height: 8px;
    }
    
    .sidebar-input,
    .sidebar-textarea {
        font-size: 0.85rem;
        padding: 8px 10px;
    }
    
    .sidebar-textarea {
        height: 80px;
    }
    
    .sidebar-contact-form {
        gap: 10px;
    }
    
    .sidebar-contact-form .form-submit-btn {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
    
    .detail-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    
    .detail-text strong {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }
    
    .detail-text span {
        font-size: 0.85rem;
    }
    
    .detail-item {
        gap: 12px;
        margin-bottom: 16px;
    }
}

/* ===================================
        margin-bottom: 16px;
    }

    .feature-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .feature-text h3 {
        font-size: 0.98rem;
    }

    .feature-text p,
    .activity-content p,
    .overview-text,
    .sidebar-nav-list a {
        font-size: 0.86rem;
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .service-activities-grid {
        gap: 12px;
    }

    .activity-card {
        padding: 14px;
    }

    .sidebar-nav-list a {
        padding: 10px 10px;
    }

    .service-breadcrumbs {
        padding: 0 5px;
        gap: 6px;
    }

    .sidebar-contact-form .form-submit-btn {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.86rem;
    }

    .service-sidebar {
        gap: 16px;
    }
}

/* ===================================
   20. HERO MASJID MINAR FRAMING BACKGROUNDS
   =================================== */

.hero-minar-left,
.hero-minar-right {
    position: absolute;
    bottom: 0;
    width: 150px;
    height: 420px;
    pointer-events: none;
    z-index: 1;
    color: rgba(255, 255, 255, 0.05); /* very faint white stroke */
    transition: transform 1.5s ease-out, opacity 1.5s ease-out;
    opacity: 0; /* starts transparent for animation */
}

.hero-minar-left svg,
.hero-minar-right svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-minar-left {
    left: 40px;
    animation: minarSlideUpLeft 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-minar-right {
    right: 40px;
    transform: scaleX(-1);
    animation: minarSlideUpRight 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

@keyframes minarSlideUpRight {
    from {
        transform: translateY(60px) scaleX(-1);
        opacity: 0;
    }
    to {
        transform: translateY(0) scaleX(-1);
        opacity: 1;
    }
}

/* ===================================
   ABOUT PAGE
   =================================== */

.about-page {
    background-color: #fbfaf7;
}

.about-hero {
    padding-top: 80px;
    padding-bottom: 70px;
}

.about-hero-grid,
.about-summary-grid,
.about-board-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: 40px;
    align-items: start;
}

.about-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
}

.about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.about-summary-content p,
.about-board-contact-card p {
    line-height: 1.85;
    margin-bottom: 1.4rem;
    color: var(--text-light);
}

.about-video-card,
.about-board-contact-card {
    background: var(--primary-color);
    border: 2px solid rgba(220, 220, 220, 0.9);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}

.about-video-card .section-title {
    margin-bottom: 24px;
    text-align: left;
}

.about-page .section-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary-color, #1b7a3e);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1.2rem;
}

.about-video-wrapper {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 24px;
    background: #000;
}

.about-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Board Members Grid */
.about-board-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.board-member-card {
    background: #ffffff;
    border: 2px solid rgba(220, 220, 220, 0.9);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.board-member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    border-color: var(--accent-color);
}

.board-member-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-color), #7ccf8a);
}

.board-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.board-member-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #ffffff;
    font-family: 'Abril Fatface', serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.board-member-image--placeholder span {
    display: inline-block;
}

.board-member-card:hover .board-member-image img {
    transform: scale(1.05);
}

.board-member-info {
    padding: 24px;
}

.board-member-info h3 {
    font-family: 'Abril Fatface', serif;
    font-size: 1.35rem;
    color: var(--primary-color, #1b7a3e);
    font-weight: 700;
    margin: 0 0 8px;
}

.board-member-role {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.board-member-desc {
    font-size: 0.95rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.6;
}

.about-board-contact {
    text-align: center;
    padding: 40px 32px;
    background: rgba(27, 122, 62, 0.06);
    border-radius: 20px;
    background-color: #f4c430;  
    border: 1px solid rgba(27, 122, 62, 0.12);
    
}

.about-board-contact p {
    font-size: 1.05rem;
    margin-bottom: 20px;
}

.about-board-contact a {
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.about-board-contact a:hover {
    text-decoration: underline;
    color: var(--primary-color); 
}

/* Projects Showcase - Staggered Layout */
.about-projects {
    padding-top: 80px;
    padding-bottom: 80px;
    background: linear-gradient(180deg, #fbfaf7 0%, #ffffff 100%);
}

.projects-showcase {
    display: grid;
    gap: 80px;
    margin-top: 60px;
}

.project-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.project-item--right {
    grid-template-columns: 1fr 1fr;
    direction: rtl;
}

.project-item--right > * {
    direction: ltr;
}

.project-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    height: 400px;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-item--left .project-image {
    animation: slideInLeft 0.8s ease-out;
}

.project-item--right .project-image {
    animation: slideInRight 0.8s ease-out;
}

.project-item:hover .project-image img {
    transform: scale(1.08);
}

.project-content {
    padding: 20px 0;
}

.project-content h3 {
    font-size: 2rem;
    color: var(--accent-color);
    margin: 0 0 16px;
    font-weight: 700;
}

.project-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-light);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-60px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(60px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Statistics Section */
.about-statistics {
    background: linear-gradient(135deg, var(--accent-color) 0%, #7ccf8a 100%);
    padding: 80px 0;
    color: #ffffff;
}

.about-statistics .section-title {
    color: #ffffff;
}

.about-statistics .section-title::after {
    background-color: rgba(255, 255, 255, 0.8);
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    margin-top: 60px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 40px 32px;
    text-align: center;
    transition: all 0.4s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-8px);
}

.stat-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 24px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.students-icon::before { content: '👥'; }
.services-icon::before { content: '🎓'; }
.teachers-icon::before { content: '👨‍🏫'; }
.families-icon::before { content: '👨‍👩‍👧‍👦'; }

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 12px;
}

.stat-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-description {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 1024px) {
    .about-hero-grid,
    .about-summary-grid,
    .about-board-grid {
        grid-template-columns: 1fr;
    }

    .about-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .project-item--right {
        direction: ltr;
    }

    .project-item--right > * {
        direction: ltr;
    }

    .project-image {
        height: 350px;
    }

    .project-content h3 {
        font-size: 1.7rem;
    }

    .statistics-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .about-hero {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .about-hero-image img,
    .about-video-card,
    .about-board-contact-card {
        box-shadow: none;
        border-radius: 20px;
    }

    .about-board-members-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 24px;
    }

    .board-member-image {
        height: 200px;
    }

    .board-member-info {
        padding: 16px;
    }

    .board-member-info h3 {
        font-size: 1.1rem;
    }

    .board-member-desc {
        font-size: 0.85rem;
    }

    .about-projects {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .projects-showcase {
        gap: 60px;
    }

    .project-item {
        gap: 30px;
    }

    .project-image {
        height: 300px;
        border-radius: 18px;
    }

    .project-content h3 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .project-content p {
        font-size: 0.95rem;
    }

    .about-statistics {
        padding: 60px 0;
    }

    .statistics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .stat-card {
        padding: 30px 20px;
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 16px;
        font-size: 1.6rem;
    }

    .stat-number {
        font-size: 2.5rem;
    }

    .stat-label {
        font-size: 1rem;
    }

    .stat-description {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .about-hero {
        padding-top: 40px;
        padding-bottom: 30px;
    }

    .about-board-members-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 16px;
    }

    .board-member-card {
        border-radius: 16px;
    }

    .board-member-image {
        height: 160px;
    }

    .board-member-info {
        padding: 12px;
    }

    .board-member-info h3 {
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    .board-member-role {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }

    .board-member-desc {
        font-size: 0.8rem;
        display: none;
    }

    .about-projects {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .projects-showcase {
        gap: 40px;
    }

    .project-item {
        gap: 20px;
    }

    .project-image {
        height: 250px;
        border-radius: 16px;
    }

    .project-content h3 {
        font-size: 1.2rem;
    }

    .project-content p {
        font-size: 0.9rem;
    }

    .statistics-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 24px 16px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.9rem;
    }
}

/* Specific z-index to overlay nicely on front-page hero slideshow images but behind content */
.mqyc-hero .hero-minar-left,
.mqyc-hero .hero-minar-right {
    z-index: 2;
    height: 500px;
    width: 180px;
}

@media (max-width: 1024px) {
    .hero-minar-left,
    .hero-minar-right {
        width: 120px;
        height: 320px;
    }
    .mqyc-hero .hero-minar-left,
    .mqyc-hero .hero-minar-right {
        height: 400px;
        width: 140px;
    }
    .hero-minar-left { left: 20px; }
    .hero-minar-right { right: 20px; }
}

/* Hide on mobile devices to prevent overlaps and keep text readable */
@media (max-width: 768px) {
    .hero-minar-left,
    .hero-minar-right {
        display: none !important;
    }
}

.about-hero-eyebrow {
    display: inline-block;
    font-family: 'Abril Fatface', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.30);
    padding: 6px 20px;
    border-radius: 40px;
}

/* ===================================
   21. About Us Page
   =================================== */

/* ===================================
   21. About Us Page Css file of entire page start
   =================================== */
   /* =============================================================
   ABOUT PAGE — REEL HERO + INTRO + ANIMATED STATISTICS
   Paste this entire block into your main CSS file.
   Uses your existing CSS variables:
     --primary-color, --primary-light, --primary-dark,
     --secondary-color, --accent-color, --light-bg
   ============================================================= */


/* ─────────────────────────────────────────────
   1. REEL HERO — seamless infinite scroll + overlay text
───────────────────────────────────────────── */

.about-reel-hero {
    position: relative;
    height: 480px;
    overflow: hidden;
    background: var(--primary-dark, #0f4620);
    /* spacing from header — push reel rows down so first row isn't kissing the navbar */
    padding-top: 0;
}

/* ── Track: holds all reel rows stacked ── */
.reel-track-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 48px 0 20px;   /* 48px top padding = visual breathing room from header */
    pointer-events: none;
}

/* ── Each row is a wide flex strip ── */
.reel-row {
    display: flex;
    gap: 20px;
    will-change: transform;
    flex-shrink: 0;
}

/*
   Seamless loop trick:
   Images are duplicated 3× in PHP (array_merge × 3).
   We animate exactly -33.333% — one third of the total strip.
   When the animation resets, it's back to a visually identical frame → no flicker.
*/
.reel-row--left  { animation: reelLeft  40s linear infinite; }
.reel-row--right { animation: reelRight 48s linear infinite; }
.reel-row--slow  { animation: reelLeft  60s linear infinite; }

@keyframes reelLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}
@keyframes reelRight {
    from { transform: translateX(-33.333%); }
    to   { transform: translateX(0); }
}

/* ── Circular images ── */
.reel-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
}
.reel-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Dark scrim so overlay text is legible over moving images ── */
.reel-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(10, 38, 18, 0.58);
    z-index: 3;
    pointer-events: none;
}

/* ── Overlay text container ── */
.reel-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    gap: 12px;
    pointer-events: none;
}

/* Small eyebrow / footer lines */
.reel-overlay-line {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Main headline */
.reel-overlay-headline {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.50);
}
.reel-overlay-headline em {
    font-style: italic;
    color: #ffd700;
    font-weight: 600;
}

/* ── Top fade: dark → transparent (blends with header/navbar) ── */
.reel-fade-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom, var(--primary-dark, #0f4620) 0%, transparent 100%);
    pointer-events: none;
    z-index: 5;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .reel-row--left,
    .reel-row--right,
    .reel-row--slow { animation: none; }
}


/* ─────────────────────────────────────────────
   2. ABOUT INTRO — text section below the reel
───────────────────────────────────────────── */

.about-intro {
    background: #ffffff;
    padding: 64px 0 72px;
}

.about-intro-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border: 2px solid var(--primary-light, #2a9c54);
    padding: 40px 32px;
    border-radius: 24px;
    
}

/* Eyebrow pill */
.about-intro-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--primary-color, #1b7a3e);
    background: rgba(27, 122, 62, 0.09);
    border: 1px solid rgba(27, 122, 62, 0.25);
    padding: 5px 18px;
    border-radius: 40px;
}

/* Headline */
.about-intro-headline {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
}
.about-intro-headline em {
    font-style: italic;
    color: #ffd700;
    font-weight: 600;
}

/* Body paragraph */
.about-intro-body {
    font-size: 17px;
    line-height: 1.75;
    color: #555;
    max-width: 580px;
    margin: 0;
}

/* CTA row */
.about-intro-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}


/* ─────────────────────────────────────────────
   3. STATISTICS — animated count-up on scroll
───────────────────────────────────────────── */

.about-statistics {
    background: var(--primary-dark, #0f4620);
    padding: 80px 0 90px;
}

.stats-header {
    text-align: center;
    margin-bottom: 52px;
}
.stats-header .section-title {
    color: #ffffff;
    margin-bottom: 10px;
}
.stats-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

/* Grid: 4 columns on desktop, adapts down */
.statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ── Individual stat card ── */
.stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px 24px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    /* Start hidden — JS adds .stat-card--visible to trigger reveal */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease, background 0.25s ease, border-color 0.25s ease;
}
.stat-card--visible {
    opacity: 1;
    transform: translateY(0);
}
.stat-card:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(42, 156, 84, 0.45);
}

/* Icon circle */
.stat-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(42, 156, 84, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-light, #2a9c54);
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* Animated number */
.stat-number-wrap {
    line-height: 1;
}
.stat-number {
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* Label + description */
.stat-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-light, #2a9c54);
    margin: 0;
}
.stat-description {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* Progress bar */
.stat-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 6px;
}
.stat-bar-fill {
    height: 100%;
    width: 0;                           /* starts at 0 */
    background: var(--primary-light, #2a9c54);
    border-radius: 99px;
    transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-bar-fill--active {
    width: var(--bar-pct, 80%);         /* JS adds this class */
}

@media (prefers-reduced-motion: reduce) {
    .stat-card { opacity: 1; transform: none; transition: none; }
    .stat-bar-fill { transition: none; width: var(--bar-pct, 80%); }
}


/* ─────────────────────────────────────────────
   4. RESPONSIVE BREAKPOINTS
───────────────────────────────────────────── */

/* Tablet landscape — 1024px */
@media (max-width: 1024px) {
    .statistics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-reel-hero {
        height: 420px;
    }
    .reel-img {
        width: 125px;
        height: 125px;
    }
}

/* Tablet portrait — 768px */
@media (max-width: 768px) {
    .about-reel-hero {
        height: 360px;
    }
    .reel-img {
        width: 105px;
        height: 105px;
    }
    .reel-row {
        gap: 14px;
    }
    .reel-track-wrapper {
        gap: 16px;
        padding-top: 52px;
    }
    .reel-overlay-headline {
        font-size: clamp(22px, 5vw, 34px);
    }

    .about-intro {
        padding: 48px 0 56px;
    }
    .about-intro-body {
        font-size: 16px;
    }
    .about-intro-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
    }
    .about-intro-actions .btn {
        text-align: center;
    }

    .about-statistics {
        padding: 60px 0 70px;
    }
    .stats-header {
        margin-bottom: 36px;
    }
    .statistics-grid {
        gap: 16px;
    }
    .stat-card {
        padding: 24px 18px 20px;
    }
}

/* Mobile — 480px */
@media (max-width: 480px) {
    .about-reel-hero {
        height: 300px;
    }
    /* Hide slow row on small phones to avoid overcrowding */
    .reel-row--slow {
        display: none;
    }
    .reel-img {
        width: 88px;
        height: 88px;
    }
    .reel-row {
        gap: 12px;
    }
    .reel-track-wrapper {
        gap: 12px;
        padding-top: 44px;
    }
    .reel-overlay-line {
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .about-intro {
        padding: 40px 0 48px;
    }

    .statistics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .stat-card {
        padding: 20px 14px 16px;
        gap: 8px;
        border-radius: 12px;
    }
    .stat-icon-wrap {
        width: 48px;
        height: 48px;
    }
    .stat-icon-wrap svg {
        width: 24px;
        height: 24px;
    }
    .stat-number {
        font-size: 32px;
    }
    .stat-description {
        display: none; /* hide long desc on very small screens */
    }
}

/* Very small — 360px */
@media (max-width: 360px) {
    .statistics-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   END CSS — about-reel-hero.css
   ============================================================= */
/* ===================================
   22. About Us Page Css file of entire page end
   =================================== */
   /* ===================================
   23. Team Page CSS — start
   Uses the same CSS variables as the About page:
   --primary-color, --primary-light, --primary-dark,
   --secondary-color, --accent-color, --light-bg
   =================================== */


/* ─────────────────────────────────────────────
   1. HERO — full-bleed image with overlay text
───────────────────────────────────────────── */

.team-hero {
    position: relative;
    height: 520px;
    overflow: hidden;
    background: var(--primary-dark, #0f4620);
}

/* Solid primary hero background matching FAQ styling */
.team-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--primary-dark, #0f4620);
}
.team-hero-bg img {
    display: none;
}

/* Dark scrim */
.team-hero-scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 38, 18, 0.62);
    z-index: 2;
}

/* Top fade blends into navbar */
.team-hero-fade-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom, var(--primary-dark, #0f4620) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* Overlay text */
.team-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    gap: 14px;
}

.team-hero-eyebrow {
    
    display: inline-block;
    font-family: 'Abril Fatface', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.30);
    padding: 6px 30px;
    border-radius: 40px;
    margin-top: 100px;
}

.team-hero-headline {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(40px, 6vw, 76px);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.50);
}
.team-hero-headline em {
    font-style: italic;
    color: #ffd700;
    font-weight: 600;
}

.team-hero-sub {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 560px;
    line-height: 1.8;
    margin: 0;
}


/* ─────────────────────────────────────────────
   1b. HERO FLOATING IMAGE COLUMNS
   Left column  → scrolls downward  (infinite loop)
   Right column → scrolls upward    (infinite loop)
───────────────────────────────────────────── */

/* Column containers */
.team-hero-col {
    position: absolute;
    top: 0;
    width: 400px;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;

}

.team-hero-col--left  { left: calc(50% - 410px); }
.team-hero-col--right { left: calc(50% + 10px); }

/* Soft fade at top and bottom edges */
.team-hero-col::before,
.team-hero-col::after {
    content: '';
    position: absolute;
    height: 120px;
    z-index: 2;
    pointer-events: none;
}
.team-hero-col::before {
    top: 0;
    background: linear-gradient(to bottom, var(--primary-dark, #0f4620) 0%, transparent 100%);
}
.team-hero-col::after {
    bottom: 0;
    background: linear-gradient(to top, var(--primary-dark, #0f4620) 0%, transparent 100%);
}

/* The moving strip */
.team-hero-col-strip {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 0;
    will-change: transform;
}

/* Left → scrolls UP (same direction / duration as FAQ left column) */
.team-hero-col--left .team-hero-col-strip { animation: faqUp 24s linear infinite; }
/* Right → scrolls DOWN (same direction / duration as FAQ right column) */
.team-hero-col--right .team-hero-col-strip { animation: faqDown 30s linear infinite; }

/* Second strip sits directly below with no extra padding */
.team-hero-col-strip + .team-hero-col-strip {
    padding-top: 0;
}

/* Reuse FAQ keyframes (faqUp / faqDown) defined earlier to keep animations consistent */

/* Individual photo tiles */
.team-hero-col-img {
    width: 100%;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.10);
    flex-shrink: 0;
}
.team-hero-col-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.72) saturate(0.85);
    transition: filter 0.3s ease;
}

/* Pause on hover + brighten */
.team-hero-col:hover .team-hero-col-strip {
    animation-play-state: paused;
}
.team-hero-col:hover .team-hero-col-img img {
    filter: brightness(0.90) saturate(1);
}

/* Hide on tablet/mobile — too narrow */
@media (max-width: 1100px) {
    .team-hero-col {
        width: 280px;
    }
    .team-hero-col--left { left: 12px; right: auto; }
    .team-hero-col--right { right: 12px; left: auto; }
}

@media (max-width: 900px) {
    .team-hero {
        overflow: hidden;
    }
    .team-hero-col {
        display: flex;
        width: 180px;
        top: 64px;
        height: calc(100% - 128px);
    }

    /* .team-hero-col--left { left: 12px; right: auto; }
    .team-hero-col--right { right: 12px; left: auto; } */

    .team-hero-col-strip {
        padding: 10px 8px 0;
        gap: 12px;
    }

    .team-hero-col-img { height: 100px; border-radius: 10px; }
    .team-hero-col-img img { height: 100%; }
}

@media (max-width: 768px) {
    .team-hero-col {
        width: 250px;
        height: calc(100% - 140px);
    }
    .team-hero-col--left { left: 8px; }
    .team-hero-col--right { right: 8px; left: auto; }
    .team-hero-col-strip { gap: 10px; padding: 8px 8px 0; }
    .team-hero-col-img { height: 90px; }
    .team-hero {
        height: auto;
        min-height: 340px;
        padding: 56px 0 16px;
    }
    .team-hero-overlay { padding: 0 20px; gap: 14px; }
}

@media (max-width: 600px) {
    .team-hero-col {
        width: 180px;
        top: 54px;
        height: calc(100% - 120px);
    }
    .team-hero-col-img { height: 80px; }
    .team-hero { min-height: 320px; padding: 52px 0 14px; }
    .team-board-grid { grid-template-columns: 1fr; gap: 14px; }
    .team-stat-item { padding: 14px 12px; }
    .team-stats-bar {
        display: none;
    }
}

@media (max-width: 480px) {
    .team-hero { padding: 48px 0 12px; min-height: 300px; }
    .team-hero-headline { font-size: clamp(2rem, 8vw, 2.4rem); }
    .team-stats-grid { grid-template-columns: 1fr; }
    .team-board-grid { grid-template-columns: 1fr; gap: 12px; }
    .team-stats-bar {
        display: none;
    }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .team-hero-col { display: none; }
}


/* ─────────────────────────────────────────────
   2. STATS BAR — quick team numbers
───────────────────────────────────────────── */

.team-stats-bar {
    background: var(--primary-dark, #0f4620);
    padding: 0 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.team-stats-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 40px 0;
}

.team-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 48px;

    /* start hidden — JS adds .team-stat-item--visible */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.team-stat-item--visible {
    opacity: 1;
    transform: translateY(0);
}

.team-stat-number {
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 500;
    color: #ffffff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.team-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--primary-light, #2a9c54);
}

/* Vertical dividers */
.team-stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   3. SECTION HEADER — reused across sections
───────────────────────────────────────────── */

.team-section-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.team-section-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary-color);
    background: rgba(27, 122, 62, 0.09);
    border: 1px solid rgba(27, 122, 62, 0.25);
    padding: 5px 18px;
    border-radius: 40px;
}

.team-section-header .section-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
}

.team-section-desc {
    font-size: 16px;
    line-height: 1.75;
    color: #666;
    margin: 0;
}


/* ─────────────────────────────────────────────
   4. SCROLL REVEAL — [data-reveal] base
───────────────────────────────────────────── */

[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .team-stat-item { opacity: 1; transform: none; transition: none; }
}


/* ─────────────────────────────────────────────
   5. LEADERSHIP — featured Imam card
───────────────────────────────────────────── */

.team-leadership {
    background: #ffffff;
    padding: 88px 0 80px;
}

.team-featured-card {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 56px;
    align-items: center;
    background: #ffffff;
    border: 2px solid var(--primary-light, #2a9c54);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(27, 122, 62, 0.12);
    padding: 0;

    /* transition delay for reveal */
    transition-delay: 0.1s;
}

/* Image side */
.team-featured-img {
    position: relative;
    height: 100%;
    min-height: 480px;
}
.team-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.team-featured-img-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--primary-color, #1b7a3e);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 40px;
}

/* Text side */
.team-featured-body {
    padding: 48px 48px 48px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.team-featured-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-color, #1b7a3e);
}

.team-featured-name {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 4px 0 2px;
    line-height: 1.2;
}

.team-featured-role {
    font-size: 14px;
    color: #888;
    font-weight: 500;
    margin: 0;
}

.team-featured-bio {
    font-size: 15px;
    line-height: 1.80;
    color: #555;
    margin: 0;
    border-left: 3px solid var(--primary-light, #2a9c54);
    padding-left: 18px;
}

/* Tags */
.team-featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* CTA row */
.team-featured-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}


/* ─────────────────────────────────────────────
   6. SHARED TAG STYLE
───────────────────────────────────────────── */

.team-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color, #1b7a3e);
    background: rgba(27, 122, 62, 0.09);
    border: 1px solid rgba(27, 122, 62, 0.22);
    padding: 4px 12px;
    border-radius: 40px;
    letter-spacing: 0.04em;
}
.team-tag--sm {
    font-size: 11px;
    padding: 3px 10px;
}


/* ─────────────────────────────────────────────
   7. BOARD GRID — hover-reveal member cards
───────────────────────────────────────────── */

.team-board {
    background: var(--light-bg, #f7faf8);
    padding: 88px 0 96px;
}

.team-board-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* Card shell */
.team-member-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(27, 122, 62, 0.10);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.team-member-card:hover {
    box-shadow: 0 12px 40px rgba(27, 122, 62, 0.15);
    transform: translateY(-6px);
    border-color: rgba(27, 122, 62, 0.30);
}

/* Stagger reveal delays */
.team-board-grid .team-member-card:nth-child(1) { transition-delay: 0.05s; }
.team-board-grid .team-member-card:nth-child(2) { transition-delay: 0.12s; }
.team-board-grid .team-member-card:nth-child(3) { transition-delay: 0.19s; }
.team-board-grid .team-member-card:nth-child(4) { transition-delay: 0.26s; }
.team-board-grid .team-member-card:nth-child(5) { transition-delay: 0.33s; }
.team-board-grid .team-member-card:nth-child(6) { transition-delay: 0.40s; }
.team-board-grid .team-member-card:nth-child(7) { transition-delay: 0.47s; }

/* Image area with hover overlay */
.team-member-img-wrap {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: var(--primary-dark, #0f4620);
}
.team-member-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.team-member-avatar {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #ffffff;
    font-family: 'Abril Fatface', serif;
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.team-member-avatar span {
    display: inline-block;
}

.team-member-card:hover .team-member-img-wrap img,
.team-member-card:hover .team-member-avatar {
    transform: scale(1.06);
    filter: brightness(0.45);
}

/* Hover overlay — slides up */
.team-member-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.team-member-card:hover .team-member-overlay {
    opacity: 1;
    transform: translateY(0);
}

.team-member-overlay-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.90);
    margin: 0;
}

.team-member-contact-btn {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--primary-color, #1b7a3e);
    padding: 7px 18px;
    border-radius: 40px;
    text-decoration: none;
    transition: background 0.25s ease;
}
.team-member-contact-btn:hover {
    background: var(--primary-light, #2a9c54);
}

/* Info row below image */
.team-member-info {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-member-name {
    font-family: 'Abril Fatface', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
    line-height: 1.3;
}

.team-member-role {
    font-size: 13px;
    color: var(--primary-color, #1b7a3e);
    font-weight: 500;
    margin: 0 0 4px;
}

.team-member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}


/* ─────────────────────────────────────────────
   7b. TEAM TEACHERS — Teacher Grid Section
   ───────────────────────────────────────────── */

.team-teachers {
    padding: 88px 0 96px;
    background: var(--light-bg, #f8f9fa);
}

.team-teachers-subsection {
    margin-bottom: 72px;
}

.team-teachers-subsection:last-child {
    margin-bottom: 0;
}

.team-teachers-subsection-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color, #1b7a3e);
    margin-bottom: 32px;
    margin-top: 0;
    padding-top: 24px;
}

.team-teachers-subsection:first-child .team-teachers-subsection-title {
    padding-top: 0;
}

.team-teachers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 1024px) {
    .team-teachers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 740px) {
    .team-teachers-grid {
        grid-template-columns: 1fr;
    }
}

/* Teacher card shell */
.team-teacher-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(27, 122, 62, 0.10);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-teacher-card:hover {
    box-shadow: 0 8px 24px rgba(27, 122, 62, 0.12);
    transform: translateY(-4px);
    border-color: rgba(27, 122, 62, 0.25);
}

/* Stagger reveal delays for teachers grid */
.team-teachers-grid .team-teacher-card:nth-child(1) { transition-delay: 0.05s; }
.team-teachers-grid .team-teacher-card:nth-child(2) { transition-delay: 0.10s; }
.team-teachers-grid .team-teacher-card:nth-child(3) { transition-delay: 0.15s; }
.team-teachers-grid .team-teacher-card:nth-child(4) { transition-delay: 0.20s; }
.team-teachers-grid .team-teacher-card:nth-child(5) { transition-delay: 0.25s; }
.team-teachers-grid .team-teacher-card:nth-child(6) { transition-delay: 0.30s; }
.team-teachers-grid .team-teacher-card:nth-child(7) { transition-delay: 0.35s; }
.team-teachers-grid .team-teacher-card:nth-child(8) { transition-delay: 0.40s; }
.team-teachers-grid .team-teacher-card:nth-child(9) { transition-delay: 0.45s; }
.team-teachers-grid .team-teacher-card:nth-child(10) { transition-delay: 0.50s; }
.team-teachers-grid .team-teacher-card:nth-child(11) { transition-delay: 0.55s; }
.team-teachers-grid .team-teacher-card:nth-child(12) { transition-delay: 0.60s; }
.team-teachers-grid .team-teacher-card:nth-child(13) { transition-delay: 0.65s; }

/* Image area for teacher card */
.team-teacher-img-wrap {
    position: relative;
    height: 270px;
    overflow: hidden;
    background: var(--primary-dark, #0f4620);
}

.team-teacher-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.team-teacher-card:hover .team-teacher-img-wrap img {
    transform: scale(1.04);
    filter: brightness(0.9);
}

/* Info section below image */
.team-teacher-info {
    padding: 18px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.team-teacher-name {
    font-family: 'Abril Fatface', serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
    line-height: 1.3;
}

.team-teacher-role {
    font-size: 12px;
    color: var(--secondary-color, #f39c12);
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-teacher-qualifications {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-light, #666666);
}

.team-teacher-qualifications li {
    padding: 3px 0;
    position: relative;
    padding-left: 14px;
}

.team-teacher-qualifications li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--secondary-color, #f39c12);
    font-weight: bold;
}

/* Reveal animation */
.team-teacher-card[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.team-teacher-card[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}


/* ─────────────────────────────────────────────
   8. WAQF NOTICE — mission callout strip
───────────────────────────────────────────── */

.team-waqf-notice {
    background: var(--primary-dark, #0f4620);
    padding: 64px 0;
}

.team-waqf-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 40px 44px;
}

.team-waqf-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(42, 156, 84, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-light, #2a9c54);
    flex-shrink: 0;
}

.team-waqf-text {
    flex: 1;
}
.team-waqf-text h3 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
}
.team-waqf-text p {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.team-waqf-actions {
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   9. CONTACT CTA
───────────────────────────────────────────── */

.team-contact-cta {
    background: #ffffff;
    padding: 80px 0 88px;
}

.team-cta-inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border: 2px solid var(--primary-light, #2a9c54);
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 12px 36px rgba(42, 156, 84, 0.12);
}

.team-cta-headline {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
    line-height: 1.15;
}

.team-cta-body {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin: 0;
}
.team-cta-body a {
    color: var(--primary-color, #1b7a3e);
    font-weight: 700;
    text-decoration: none;
}
.team-cta-body a:hover {
    text-decoration: underline;
}


/* ─────────────────────────────────────────────
   10. RESPONSIVE BREAKPOINTS
───────────────────────────────────────────── */

/* Tablet landscape — 1100px */
@media (max-width: 1100px) {
    .team-featured-card {
        grid-template-columns: 300px 1fr;
        gap: 36px;
    }
    .team-board-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet — 900px */
@media (max-width: 900px) {
    .team-featured-card {
        grid-template-columns: 1fr;
    }
    .team-featured-img {
        min-height: 320px;
    }
    .team-featured-img-badge {
        bottom: 16px;
        left: 16px;
    }
    .team-featured-body {
        padding: 32px 32px 36px;
    }
    .team-board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .team-waqf-inner {
        flex-direction: column;
        text-align: center;
        padding: 36px 28px;
    }
    .team-waqf-actions {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Tablet portrait — 768px */
@media (max-width: 768px) {
    .team-hero {
        height: 420px;
    }
    .team-stats-grid {
        gap: 0;
        padding: 32px 0;
    }
    .team-stat-item {
        padding: 0 28px;
    }
    .team-stat-divider {
        height: 36px;
    }
    .team-section-header {
        margin-bottom: 36px;
    }
    .team-leadership {
        padding: 60px 0 56px;
    }
    .team-board {
        padding: 60px 0 64px;
    }
    .team-contact-cta {
        padding: 60px 0 64px;
    }
}

/* Mobile — 600px */
@media (max-width: 600px) {
    .team-hero {
        height: 380px;
    }
    .team-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 28px 16px;
    }
    .team-stat-item {
        /* show number + label on one line */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px 12px;
    }
    .team-stat-number {
        font-size: clamp(20px, 8vw, 36px);
    }
    .team-stat-label {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0.02em;
        color: rgba(255,255,255,0.9);
    }
    .team-stat-divider {
        display: none;
    }
    .team-board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .team-member-img-wrap {
        height: 200px;
    }
    .team-cta-inner {
        padding: 36px 24px;
    }
    .team-featured-body {
        padding: 24px 20px 28px;
    }
}

@media (max-width: 600px) {
    .team-board-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .team-featured-card {
        gap: 24px;
    }
    .team-hero {
        padding: 60px 0 30px;
        height: auto;
    }
    .team-hero-overlay {
        padding: 0 20px;
        gap: 12px;
    }
    .team-hero-headline {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }
}

/* Mobile — 480px */
@media (max-width: 480px) {
    .team-hero-sub {
        display: none;
    }
    .team-board-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .team-member-img-wrap {
        height: 170px;
    }
    .team-member-name {
        font-size: 14px;
    }
    .team-member-info {
        padding: 14px 14px 16px;
    }
}

/* Very small — 360px */
@media (max-width: 360px) {
    .team-board-grid {
        grid-template-columns: 1fr;
    }
    .team-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   23. Team Page CSS — end
   =================================== */

/* =============================================================
   Global: Hero headline & header sizing consistency (mobile)
   Ensures hero titles and header/nav sizes are visually consistent
   across pages on small screens.
   ============================================================= */
@media (max-width: 768px) {
    /* Normalize hero/title sizes across pages */
    .hero-title,
    .team-hero-headline,
    .faq-hero-headline,
    .service-hero-title,
    .policy-hero-title,
    .donate-hero-content h1,
    .contact-hero-content h1 {
        font-size: clamp(1.9rem, 5.5vw, 2.6rem) !important;
        line-height: 1.12 !important;
        margin: 0 !important;
    }

    /* Reduce hero vertical size and top spacing for consistency */
    .mqyc-hero, .team-hero, .faq-hero, .contact-hero, .donate-hero {
        min-height: 60vh;
        padding-top: 18px;
    }

    /* Header / nav consistent sizing */
    .mqyc-navbar {
        height: 64px;
        align-items: center;
    }

    .navbar-logo .logo-img {
        max-height: 36px;
        width: auto;
    }

    .menu-toggle {
        padding: 8px;
    }

    .navbar-nav a {
        font-size: 0.95rem;
        font-weight: 600;
    }

    .btn_donate {
        height: 34px;
        min-width: 88px;
        font-size: 0.88rem;
    }
}

/* ===================================
   23. Contact Page CSS — start
   =================================== */


/* ─────────────────────────────────────────────
   1. HERO — 2-column vertical image reel
───────────────────────────────────────────── */

.contact-hero {
    position: relative;
    height: 520px;
    overflow: hidden;
    background: var(--primary-dark, #0f4620);
     
}

/* Reel columns container */
.contact-reel-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    padding: 0 80px;
    pointer-events: none;
}

/* Individual column */
.contact-vcol {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 400px;
    flex-shrink: 0;
    will-change: transform;
    justify-content: center;
    align-items: center;
}

/* Seamless: column is 2× its natural height, moves ±50% */
.contact-vcol--up   { animation: contactUp   24s linear infinite; }
.contact-vcol--down { animation: contactDown 30s linear infinite; }

@keyframes contactUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes contactDown {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* Rectangular image tiles */
.contact-rimg {
    width: 100%;
    height: 150px;
    border-radius: 12px;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    backface-visibility: hidden;
    transform: translateZ(0);
}
.contact-rimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Overlays */
.contact-hero-dim {
    position: absolute;
    inset: 0;
    background: rgba(6, 20, 10, 0.62);
    pointer-events: none;
    z-index: 3;
}
.contact-hero-fade-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom, var(--primary-dark, #0f4620), transparent);
    pointer-events: none;
    z-index: 4;
}


/* Hero text */
.contact-hero-content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 80px 24px 50px;
    pointer-events: none;
}

.contact-hero-eyebrow {
    display: inline-block;
    font-family: 'Abril Fatface', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.30);
    padding: 7px 22px;
    border-radius: 40px;
}

.contact-hero-headline {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(32px, 6vw, 60px);
    font-weight: 700;
    line-height: 1.08;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.contact-hero-headline em {
    font-style: italic;
    color: #ffd700;
    font-weight: 600;
}

.contact-hero-sub {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    max-width: 540px;
    margin: 0;
}

.schedule-page {
    background-color: #ecf7ed;
}

.schedule-page .contact-hero {
    background: linear-gradient(180deg, rgba(27, 122, 62, 0.96) 0%, rgba(15, 70, 35, 0.96) 100%);
}

.schedule-page .contact-hero-content {
    max-width: 860px;
    margin: 0 auto;
    padding-top: 100px;
    padding-bottom: 64px;
}

.schedule-page .schedule-table-wrapper {
    border-color: rgba(27, 122, 62, 0.18);
}

.schedule-page .schedule-table th,
.schedule-page .schedule-table td {
    border-bottom-color: rgba(27, 122, 62, 0.12);
}

.schedule-page .schedule-table td {
    background-color: rgba(255, 255, 255, 0.96);
}

.schedule-page .schedule-table tbody tr:nth-child(odd) {
    background-color: rgba(237, 250, 242, 0.95);
}

.schedule-page .schedule-notes {
    background-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .contact-vcol--up,
    .contact-vcol--down { animation: none; }
}


/* ─────────────────────────────────────────────
   2. QUICK CONTACT CARDS STRIP
───────────────────────────────────────────── */

.contact-info-strip {
    background: var(--light-bg, #f8f9fa);
    padding: 40px 0;
    border-bottom: 1px solid rgba(27, 122, 62, 0.1);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.contact-info-card {
    background: #ffffff;
    border: 5px solid var(--primary-light, #2a9c54);
    border-radius: 24px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--primary-dark);
}
.contact-info-card:hover {
    border-color: var(--primary-color, #1b7a3e);
    box-shadow: 0 6px 20px rgba(27, 122, 62, 0.12);
    transform: translateY(-2px);
}

.cic-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(27, 122, 62, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #1b7a3e);
    flex-shrink: 0;
}

.cic-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.cic-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-color, #1b7a3e);
}
.cic-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-color, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ─────────────────────────────────────────────
   3. MAIN LAYOUT — form + sidebar
───────────────────────────────────────────── */

.contact-main {
    background: #ffffff;
    padding: 72px 0 80px;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 52px;
    align-items: start;
    
}

/* Section header shared */
.contact-section-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--secondary-color);
    background: rgba(27, 122, 62, 0.08);
    border: 1px solid rgba(27, 122, 62, 0.22);
    padding: 4px 14px;
    border-radius: 40px;
    margin-bottom: 12px;
}
.contact-section-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    line-height: 1.18;
    margin: 0 0 12px;
}
.contact-section-sub {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin: 0;
}


/* ─────────────────────────────────────────────
   4. CONTACT FORM
───────────────────────────────────────────── */

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

.mqyc-contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    
}

.form-row {
    margin-bottom: 20px;
}
.form-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-color, #1a1a1a);
}
.form-optional {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}
.form-group label span[aria-hidden] {
    color: var(--primary-color, #1b7a3e);
    margin-left: 2px;
}

/* Inputs & textarea */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--accent-color, #1a1a1a);
    background: var(--light-bg, #f8f9fa);
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-color, #1b7a3e);
    box-shadow: 0 0 0 3px rgba(27, 122, 62, 0.12);
    background: #ffffff;
}
.form-group input.input--invalid,
.form-group textarea.input--invalid {
    border-color: #d9534f;
}
.form-group textarea {
    resize: vertical;
    min-height: 130px;
}

/* Select wrapper */
.form-select-wrap {
    position: relative;
}
.form-select-wrap select {
    width: 100%;
    padding: 11px 40px 11px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--accent-color, #1a1a1a);
    background: var(--light-bg, #f8f9fa);
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-select-wrap select:focus {
    border-color: var(--primary-color, #1b7a3e);
    box-shadow: 0 0 0 3px rgba(27, 122, 62, 0.12);
    background: #ffffff;
}
.select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #888;
}

/* Custom checkbox */
.form-group--checkbox .form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.form-group--checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.form-checkmark {
    width: 20px;
    height: 20px;
    border: 1.5px solid #ccc;
    border-radius: 5px;
    background: var(--light-bg, #f8f9fa);
    flex-shrink: 0;
    margin-top: 1px;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
}
.form-group--checkbox input[type="checkbox"]:checked + .form-checkmark {
    background: var(--primary-color, #1b7a3e);
    border-color: var(--primary-color, #1b7a3e);
}
.form-group--checkbox input[type="checkbox"]:checked + .form-checkmark::after {
    content: '';
    position: absolute;
    left: 5px; top: 2px;
    width: 6px; height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.form-group--checkbox a {
    color: var(--primary-color, #1b7a3e);
    text-decoration: underline;
}

/* Submit button full-width */
.btn--full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    font-size: 16px;
}

/* Feedback messages */
.form-feedback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
}
.form-feedback--success {
    background: rgba(27, 122, 62, 0.08);
    border: 1px solid rgba(27, 122, 62, 0.25);
    color: var(--primary-dark, #0f4620);
}
.form-feedback--error {
    background: rgba(217, 83, 79, 0.07);
    border: 1px solid rgba(217, 83, 79, 0.25);
    color: #a94442;
}


/* ─────────────────────────────────────────────
   5. INFO SIDEBAR
───────────────────────────────────────────── */

.contact-info-side {
    background-image: url('../images/image (5).webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 100px;
    border-radius: 15px;
    min-height: 100%;
    overflow: hidden;
}
.contact-form-side{
    padding: 24px 20px;
    border: 2px solid var(--primary-light, #2a9c54);
    border-radius: 24px;
}

.contact-sidebar-card {
    background: var(--light-bg, #f8f9fa);
    border: 2px solid rgba(27, 122, 62, 0.12); 
    padding: 24px 20px;
    margin-top: 168%;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.csb-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(27, 122, 62, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #1b7a3e);
    margin-bottom: 12px;
}
.csb-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color, #1a1a1a);
    margin: 0 0 10px;
}
.csb-sub {
    font-size: 13px;
    color: var(--accent-color, #1a1a1a);
    line-height: 1.55;
    margin: 0 0 14px;
}

/* Office hours list */
.csb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.csb-list li {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
    border-bottom: 1px dashed rgba(27, 122, 62, 0.12);
    padding-bottom: 8px;
}
.csb-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.csb-list li span:last-child {
    font-weight: 500;
    color: var(--accent-color, #1a1a1a);
}

/* Social icons row */
.csb-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.csb-social-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(27, 122, 62, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #1b7a3e);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.csb-social-link:hover {
    background: var(--primary-color, #1b7a3e);
    color: #ffffff;
    border-color: var(--primary-color, #1b7a3e);
}

/* Board email links */
.csb-emails {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.csb-email-link {
    font-size: 14px;
    color: var(--primary-color, #1b7a3e);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}
.csb-email-link:hover {
    text-decoration: underline;
}

.contact-sidebar-card--board {
    border-color: rgba(27, 122, 62, 0.2);
    background: rgba(27, 122, 62, 0.04);
}

/* ─────────────────────────────────────────────
   TOAST NOTIFICATIONS
───────────────────────────────────────────── */

.mqyc-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

.mqyc-toast {
    background: white;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    max-width: 500px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease-out;
    pointer-events: auto;
    border-left: 4px solid var(--primary-color, #1b7a3e);
}

.mqyc-toast.success {
    border-left-color: var(--success-color, #27ae60);
    background: #f0f9f4;
}

.mqyc-toast.error {
    border-left-color: var(--error-color, #e74c3c);
    background: #fef5f5;
}

.mqyc-toast.warning {
    border-left-color: #f39c12;
    background: #fffbf0;
}

.mqyc-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.mqyc-toast.success .mqyc-toast-icon {
    color: var(--success-color, #27ae60);
}

.mqyc-toast.error .mqyc-toast-icon {
    color: var(--error-color, #e74c3c);
}

.mqyc-toast.warning .mqyc-toast-icon {
    color: #f39c12;
}

.mqyc-toast-message {
    flex: 1;
    color: var(--text-color, #333333);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.mqyc-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-light, #666666);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: color 0.2s;
}

.mqyc-toast-close:hover {
    color: var(--text-color, #333333);
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.mqyc-toast.removing {
    animation: slideOutRight 0.3s ease-out forwards;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .mqyc-toast-container {
        left: 10px;
        right: 10px;
        top: 10px;
    }

    .mqyc-toast {
        min-width: auto;
        max-width: 100%;
    }
}

/* ─────────────────────────────────────────────
   6. MAP SECTION
───────────────────────────────────────────── */

.contact-map-section {
    background: var(--light-bg, #f8f9fa);
    padding-top: 72px;
}

.contact-map-header {
    text-align: center;
    margin-bottom: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.contact-map-embed {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid rgba(27, 122, 62, 0.1);
    border-bottom: 1px solid rgba(27, 122, 62, 0.1);
}
.contact-map-embed iframe {
    display: block;
    width: 100%;
    height: 420px;
}

.contact-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 0 64px;
    flex-wrap: wrap;
}
.contact-map-address {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #555;
}
.contact-map-address svg {
    color: var(--primary-color, #1b7a3e);
    flex-shrink: 0;
}
.contact-map-footer .btn {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}


/* ─────────────────────────────────────────────
   7. RESPONSIVE
───────────────────────────────────────────── */

/* Tablet landscape ≤ 1100px */
@media (max-width: 1100px) {
    .contact-layout {
        grid-template-columns: 1fr 320px;
        gap: 36px;
    }
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet portrait ≤ 900px */
@media (max-width: 900px) {
    .contact-hero { height: 440px; }
    .contact-vcol { width: 160px; }
    .contact-rimg { height: 130px; }
    .contact-reel-wrapper { padding: 0 40px; gap: 16px; }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .contact-info-side {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* Tablet / mobile ≤ 768px */
@media (max-width: 768px) {
    .contact-hero { height: 380px; }
    .contact-reel-wrapper { padding: 0 20px; gap: 12px; }
    .contact-vcol { width: 140px; }
    .contact-rimg { height: 116px; border-radius: 10px; }

    .contact-hero-headline { font-size: clamp(24px, 6vw, 34px); }
    .contact-hero-sub { font-size: 14px; }

    .contact-info-strip { padding: 28px 0; }
    .contact-main { padding: 52px 0 60px; }

    .form-row--2col {
        grid-template-columns: 1fr;
    }
}

/* Mobile ≤ 600px */
@media (max-width: 600px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
    }
    .contact-info-side {
        grid-template-columns: 1fr;
    }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
    .contact-hero { height: 320px; }
    .contact-reel-wrapper { padding: 0 12px; gap: 10px; }
    .contact-vcol { width: 120px; }
    .contact-rimg { height: 100px; border-radius: 8px; }

    .contact-hero-sub { display: none; }
    .contact-map-footer { flex-direction: column; align-items: flex-start; }
    .contact-map-footer .btn { width: 100%; justify-content: center; }
}

/* ===================================
   24. Contact Page CSS — end
   =================================== */

   /* ===================================
   GOVERNMENT PAGE CSS
   Add this block to your main stylesheet.
   Consistent with About / Contact / FAQ pages.
   Uses: --primary-color, --primary-light,
         --primary-dark, --secondary-color,
         --accent-color, --light-bg
   =================================== */


/* ─────────────────────────────────────────────
   1. HERO — vertical reel (identical to FAQ/Contact)
───────────────────────────────────────────── */

.gov-hero {
    position: relative;
    height: 520px;
    overflow: hidden;
    background: var(--primary-dark, #0f4620);
}

.gov-reel-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 0 80px;
    pointer-events: none;
}

.gov-vcol {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 400px;
    flex-shrink: 0;
    will-change: transform;
}

.gov-vcol--up   { animation: govUp   24s linear infinite; }
.gov-vcol--down { animation: govDown 30s linear infinite; }

@keyframes govUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
@keyframes govDown {
    0%   { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

.gov-rimg {
    width: 100%;
    height: 150px;
    border-radius: 12px;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    backface-visibility: hidden;
    transform: translateZ(0);
}
.gov-rimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

.gov-hero-dim {
    position: absolute; inset: 0;
    background: rgba(6, 20, 10, 0.62);
    pointer-events: none; z-index: 3;
}
.gov-hero-fade-top {
    position: absolute; top: 0; left: 0; right: 0; height: 90px;
    background: linear-gradient(to bottom, var(--primary-dark, #0f4620), transparent);
    pointer-events: none; z-index: 4;
}


.gov-hero-content {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; gap: 16px;
    padding: 80px 24px 50px;
    pointer-events: none;
}

.gov-hero-eyebrow {
    display: inline-block;
    font-family: 'Abril Fatface', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.30);
    padding: 7px 22px;
    border-radius: 40px;
}

.gov-hero-headline {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(32px, 6vw, 60px);
    font-weight: 700;
    line-height: 1.08;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.gov-hero-headline em {
    font-style: italic;
    color: #ffd700;
    font-weight: 600;
}

.gov-hero-sub {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    max-width: 520px;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .gov-vcol--up, .gov-vcol--down { animation: none; }
}


/* ─────────────────────────────────────────────
   2. TAB NAVIGATION
───────────────────────────────────────────── */

.gov-tabs-section {
    background: var(--light-bg, #f8f9fa);
    border-bottom: 1px solid rgba(27, 122, 62, 0.12);
    position: sticky;
    top: 0;               /* sticks just below the navbar */
    z-index: 50;
    padding: 0;
}

.gov-tab-list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gov-tab-list::-webkit-scrollbar { display: none; }

.gov-tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}
.gov-tab-btn:hover {
    color: var(--primary-color, #1b7a3e);
    background: rgba(27, 122, 62, 0.04);
}
.gov-tab-btn--active {
    color: var(--primary-color, #1b7a3e);
    border-bottom-color: var(--primary-color, #1b7a3e);
    font-weight: 600;
    background: rgba(27, 122, 62, 0.05);
}

.gov-tab-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(27, 122, 62, 0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-color, #1b7a3e);
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.gov-tab-btn--active .gov-tab-icon {
    background: var(--primary-color, #1b7a3e);
    color: #ffffff;
}


/* ─────────────────────────────────────────────
   3. TAB PANELS
───────────────────────────────────────────── */

.gov-content {
    background: #ffffff;
    padding: 56px 0 80px;
}

/* Panel entrance animation */
.gov-panel {
    animation: govPanelIn 0.3s ease;
}
@keyframes govPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Panel header: text left, seal right */
.gov-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 2px solid rgba(27, 122, 62, 0.10);
}

.gov-panel-header-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 620px;
}

.gov-panel-eyebrow {
    display: inline-block;
    font-family: 'Abril Fatface', serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.30);
    padding: 5px 16px;
    border-radius: 40px;
    align-self: flex-start;
}

.gov-panel-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
    line-height: 1.18;
}

.gov-panel-intro {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
    margin: 0;
}

.gov-panel-seal {
    flex-shrink: 0;
    width: 90px; height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(27, 122, 62, 0.15);
    background: var(--light-bg, #f8f9fa);
    display: flex; align-items: center; justify-content: center;
}
.gov-panel-seal img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 8px;
}


/* ─────────────────────────────────────────────
   4. OFFICIALS GRID
───────────────────────────────────────────── */

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


/* ─────────────────────────────────────────────
   5. OFFICIAL CARD
───────────────────────────────────────────── */

.gov-card {
    background: var(--light-bg, #f8f9fa);
    border: 1.5px solid rgba(27, 122, 62, 0.10);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.gov-card:hover {
    border-color: rgba(27, 122, 62, 0.30);
    box-shadow: 0 8px 28px rgba(27, 122, 62, 0.10);
    transform: translateY(-3px);
}

/* Photo area */
.gov-card-photo {
    position: relative;
    width: 100%;
    height: 200px;
    background: rgba(27, 122, 62, 0.06);
    overflow: hidden;
    flex-shrink: 0;
}
.gov-card-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}
.gov-card:hover .gov-card-photo img {
    transform: scale(1.04);
}

/* Fallback initials when no photo */
.gov-card-initials {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    background: rgba(27, 122, 62, 0.08);
    letter-spacing: 0.05em;
}

/* Party badge — corner of photo */
.gov-party-badge {
    position: absolute;
    top: 12px; right: 12px;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    color: #ffffff;
    border: 2px solid rgba(255,255,255,0.5);
}
.gov-party--r { background: #c0392b; }
.gov-party--d { background: #2980b9; }

/* Card body */
.gov-card-body {
    padding: 20px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.gov-card-name {
    font-family: 'Abril Fatface', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
    line-height: 1.25;
}

.gov-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-color, #1a1a1a);
    margin: 0;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gov-card-address {
    font-style: normal;
    font-size: 13px;
    color: #777;
    line-height: 1.6;
    border-top: 1px dashed rgba(27, 122, 62, 0.15);
    padding-top: 10px;
    margin-top: 2px;
}

/* Contact links */
.gov-card-contacts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px dashed rgba(27, 122, 62, 0.15);
    padding-top: 10px;
    margin-top: auto;
}

.gov-contact-link {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s ease;
}
.gov-contact-link:hover { color: var(--primary-color, #1b7a3e); }
.gov-contact-link svg { flex-shrink: 0; color: var(--primary-color, #1b7a3e); }


/* ─────────────────────────────────────────────
   6. DISCLAIMER
───────────────────────────────────────────── */

.gov-disclaimer {
    background: var(--light-bg, #f8f9fa);
    border-top: 1px solid rgba(27, 122, 62, 0.12);
    padding: 36px 0 44px;
}

.gov-disclaimer-inner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 820px;
    margin: 0 auto;
    background: rgba(27, 122, 62, 0.05);
    border: 1px solid rgba(27, 122, 62, 0.15);
    border-radius: 14px;
    padding: 22px 24px;
}
.gov-disclaimer-inner svg {
    flex-shrink: 0;
    color: var(--primary-color, #1b7a3e);
    margin-top: 2px;
}
.gov-disclaimer-inner p {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}
.gov-disclaimer-inner strong {
    color: var(--accent-color, #1a1a1a);
}
.gov-disclaimer-inner em {
    font-style: italic;
    display: block;
    margin-top: 6px;
    color: var(--primary-dark, #0f4620);
}


/* ─────────────────────────────────────────────
   7. RESPONSIVE
───────────────────────────────────────────── */

/* ≤ 1024px */
@media (max-width: 1024px) {
    .gov-hero { height: 460px; }
    .gov-vcol { width: 170px; }
    .gov-rimg { height: 135px; }
    .gov-reel-wrapper { padding: 0 40px; gap: 16px; }

    .gov-officials-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ≤ 900px — tabs scroll horizontally */
@media (max-width: 900px) {
    .gov-tab-btn { padding: 16px 18px; font-size: 13px; }
    .gov-tab-icon { width: 28px; height: 28px; }
    .gov-panel-header { flex-direction: column-reverse; gap: 16px; }
    .gov-panel-seal { width: 72px; height: 72px; }
}

/* ≤ 768px */
@media (max-width: 768px) {
    .gov-hero { height: 400px; }
    .gov-reel-wrapper { padding: 0 20px; gap: 12px; }
    .gov-vcol { width: 140px; }
    .gov-rimg { height: 118px; border-radius: 10px; }
    .gov-hero-headline { font-size: clamp(24px, 6vw, 34px); }
    .gov-hero-sub { font-size: 14px; }

    .gov-tabs-section { position: static; } /* un-stick on mobile */
    .gov-tab-btn { padding: 14px 14px; }
    .gov-tab-label { display: none; }        /* icon only on small screens */
    .gov-tab-icon { width: 36px; height: 36px; }

    .gov-content { padding: 40px 0 56px; }
    .gov-officials-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .gov-card-photo { height: 170px; }
}

/* ≤ 560px */
@media (max-width: 560px) {
    .gov-officials-grid { grid-template-columns: 1fr; }
    .gov-card-photo { height: 200px; }
    .gov-tab-label { display: inline; font-size: 12px; }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .gov-hero { height: 320px; }
    .gov-reel-wrapper { padding: 0 12px; gap: 10px; }
    .gov-vcol { width: 120px; }
    .gov-rimg { height: 100px; border-radius: 8px; }
    .gov-hero-sub { display: none; }
    .gov-disclaimer-inner { flex-direction: column; }
}

/* ===================================
   GOVERNMENT PAGE CSS — end
   =================================== */
/* ===================================
   DONATE PAGE CSS
   Add this entire block to your main stylesheet.
   Uses: --primary-color, --primary-light,
         --primary-dark, --secondary-color,
         --accent-color, --light-bg
   =================================== */


/* ─────────────────────────────────────────────
   1. HERO — vertical reel (same as all pages)
───────────────────────────────────────────── */

.donate-hero {
    position: relative;
    height: 580px;
    overflow: hidden;
    background: var(--primary-dark, #0f4620);
}

.donate-reel-wrapper {
    position: absolute; inset: 0;
    display: flex; flex-direction: row;
    justify-content: center; align-items: flex-start;
    gap: 20px; padding: 0 80px;
    pointer-events: none;
}

.donate-vcol {
    display: flex; flex-direction: column;
    gap: 16px; width: 400px;
    flex-shrink: 0; will-change: transform;
}
.donate-vcol--up   { animation: donateUp   24s linear infinite; }
.donate-vcol--down { animation: donateDown 30s linear infinite; }

@keyframes donateUp   { 0%{transform:translateY(0)}   100%{transform:translateY(-50%)} }
@keyframes donateDown { 0%{transform:translateY(-50%)} 100%{transform:translateY(0)}   }

.donate-rimg {
    width: 100%; height: 150px; border-radius: 12px;
    flex-shrink: 0; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    backface-visibility: hidden; transform: translateZ(0);
}
.donate-rimg img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    pointer-events: none; user-select: none;
}

.donate-hero-dim {
    position: absolute; inset: 0;
    background: rgba(6,20,10,0.60);
    pointer-events: none; z-index: 3;
}
.donate-hero-fade-top {
    position: absolute; top:0;left:0;right:0; height:90px;
    background: linear-gradient(to bottom,var(--primary-dark,#0f4620),transparent);
    pointer-events: none; z-index: 4;
}


.donate-hero-content {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; gap: 18px;
    padding: 80px 24px 50px;
    pointer-events: none;
}

.donate-hero-eyebrow {
    display: inline-block;
    font-family: 'Abril Fatface', serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.30);
    padding: 7px 22px;
    border-radius: 40px;
}

.donate-hero-headline {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(32px, 6vw, 60px);
    font-weight: 700;
    line-height: 1.08;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.donate-hero-headline em {
    font-style: italic;
    color: #ffd700;
    font-weight: 600;
}

.donate-hero-sub {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    max-width: 540px;
    margin: 0;
}

.donate-hero-actions {
    display: flex; gap: 14px;
    flex-wrap: wrap; justify-content: center;
    margin-top: 4px; pointer-events: auto;
}
.donate-hero-btn {
    display: flex; align-items: center; gap: 8px;
}
.btn-outline-white {
    display: inline-block;
    padding: 11px 28px;
    background: transparent;
    color: rgba(255,255,255,0.88);
    border: 1.5px solid rgba(255,255,255,0.40);
    border-radius: 6px; font-size: 15px; font-weight: 500;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
    cursor: pointer;
}
.btn-outline-white:hover {
    border-color: rgba(255,255,255,0.85);
    color: #fff; background: rgba(255,255,255,0.06);
}

@media (prefers-reduced-motion: reduce) {
    .donate-vcol--up, .donate-vcol--down { animation: none; }
}


/* ─────────────────────────────────────────────
   2. SHARED EYEBROW
───────────────────────────────────────────── */

.donate-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(27, 122, 62, 0.12);
    color: var(--secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    width: fit-content;
    border: 1px solid rgba(27, 122, 62, 0.25)
}
.donate-eyebrow--light {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.30);
}


/* ─────────────────────────────────────────────
   3. CAMPAIGN SECTION
───────────────────────────────────────────── */

.donate-campaign {
    background: #fff;
    padding: 72px 0 80px;
}

.donate-campaign-inner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: start;
}

.donate-campaign-copy {
    display: flex; flex-direction: column; gap: 24px;
}

.donate-campaign-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
    line-height: 1.18;
}
.donate-campaign-desc {
    font-size: 16px; color: #555;
    line-height: 1.75; margin: 0;
}

/* Progress bar */
.donate-progress-wrap {
    background: var(--light-bg,#f8f9fa);
    border: 1px solid rgba(27,122,62,0.14);
    border-radius: 16px;
    padding: 22px 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.donate-progress-labels {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; font-weight: 600;
    color: var(--accent-color,#1a1a1a);
}
.donate-goal { color: #888; font-weight: 500; }

.donate-progress-track {
    position: relative;
    width: 100%; height: 14px;
    background: rgba(27,122,62,0.10);
    border-radius: 99px; overflow: hidden;
}
.donate-progress-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--primary-color,#1b7a3e), var(--primary-light,#2a9c54));
    border-radius: 99px;
    transition: width 1.6s cubic-bezier(0.22,1,0.36,1);
}
.donate-progress-fill--active { width: var(--pct, 42%); }

.donate-progress-pct {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: 11px; font-weight: 700;
    color: var(--primary-dark,#0f4620);
}
.donate-progress-note {
    font-size: 13px; color: #888;
    margin: 0; font-style: italic;
}

/* Donation methods */
.donate-methods-title {
    font-family: 'Abril Fatface', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 18px 0 12px;
}
.donate-methods-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.donate-method-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--light-bg,#f8f9fa);
    border: 1.5px solid rgba(27,122,62,0.12);
    border-radius: 12px; padding: 14px 14px;
    text-decoration: none; color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.donate-method-card:hover {
    border-color: var(--primary-color,#1b7a3e);
    box-shadow: 0 4px 16px rgba(27,122,62,0.10);
    transform: translateY(-2px);
}

.dmc-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #fff;
}
.dmc-icon--paypal      { background: #003087; }
.dmc-icon--cashapp     { background: #00c244; }
.dmc-icon--zelle       { background: #6d1ed4; }
.dmc-icon--check       { background: var(--primary-color,#1b7a3e); }
.dmc-icon--creditcard  { background: #1a73e8; }
.dmc-icon--googlepay   { background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc05 100%); }

.dmc-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dmc-label { font-size: 14px; font-weight: 600; color: var(--accent-color,#1a1a1a); }
.dmc-sub   { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmc-arrow { color: #bbb; flex-shrink: 0; }
.donate-method-card:hover .dmc-arrow { color: var(--primary-color,#1b7a3e); }

.donate-tax-note {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: #777;
    margin: 12px 0 0; line-height: 1.55;
}
.donate-tax-note svg { color: var(--primary-color,#1b7a3e); margin-top: 2px; flex-shrink: 0; }
.donate-tax-note strong { color: var(--accent-color,#1a1a1a); }

/* Right image */
.donate-campaign-image {
    position: relative; border-radius: 20px;
    overflow: hidden; aspect-ratio: 4/3;
}
.donate-campaign-image img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.donate-campaign-badge {
    position: absolute; bottom: 20px; left: 20px;
    background: var(--primary-dark,#0f4620);
    color: #fff; border-radius: 10px;
    padding: 10px 16px;
    display: flex; flex-direction: column; gap: 2px;
}
.dcb-top  { font-size: 11px; opacity: .75; letter-spacing: .08em; text-transform: uppercase; }
.dcb-main { font-size: 15px; font-weight: 700; }


/* ─────────────────────────────────────────────
   4. WHY DONATE GRID
───────────────────────────────────────────── */

.donate-why {
    background: var(--light-bg,#f8f9fa);
    padding: 72px 0 80px;
}

.donate-why-header {
    text-align: center; margin-bottom: 48px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.donate-why-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
    line-height: 1.18;
}
.donate-why-sub {
    font-size: 16px; color: #666;
    line-height: 1.7; max-width: 520px; margin: 0;
}

.donate-why-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.donate-why-card {
    background: #fff;
    border: 1.5px solid rgba(27,122,62,0.10);
    border-radius: 16px; padding: 28px 22px;
    display: flex; flex-direction: column; gap: 12px;
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease,
                border-color .2s, box-shadow .2s;
}
.donate-why-card--visible { opacity: 1; transform: translateY(0); }
.donate-why-card:hover {
    border-color: var(--secondary-color,#f39c12);
    /* box-shadow: var(--secondary-color,#f39c12) 0 4px 16px; */
}

.dwc-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(27,122,62,0.09);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-color,#1b7a3e);
}
.donate-why-card h3 {
    font-size: 16px; font-weight: 700;
    color: var(--accent-color,#1a1a1a); margin: 0;
}
.donate-why-card p {
    font-size: 14px; color: #666;
    line-height: 1.7; margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .donate-why-card { opacity:1; transform:none; transition:none; }
}


/* ─────────────────────────────────────────────
   5. PHASES TIMELINE
───────────────────────────────────────────── */

.donate-phases {
    background: #fff;
    padding: 72px 0 80px;
}
.donate-phases-header {
    text-align: center; margin-bottom: 52px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.donate-phases-title {
    font-family: 'Abril Fatface', serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    color: var(--primary-color, #1b7a3e);
    margin: 0;
    line-height: 1.18;
}
.donate-phases-sub {
    font-size: 16px; color: #666;
    line-height: 1.7; max-width: 560px; margin: 0;
}

.donate-phases-list {
    display: flex; flex-direction: column; gap: 0;
}

.donate-phase {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0 28px;
}

/* Timeline indicator column */
.dph-indicator {
    display: flex; flex-direction: column;
    align-items: center; padding-top: 4px;
}
.dph-dot {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 1;
}
.donate-phase--complete .dph-dot {
    background: var(--primary-color,#1b7a3e); color: #fff;
    border: 3px solid var(--primary-color,#1b7a3e);
}
.donate-phase--active .dph-dot {
    background: var(--secondary-color,#f39c12);
    border: 3px solid var(--secondary-color,#f39c12);
}
.dph-dot--pulse {
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%,100%{ box-shadow: 0 0 0 0 rgba(243,156,18,0.5); }
    50%    { box-shadow: 0 0 0 10px rgba(243,156,18,0); }
}
.dph-dot--upcoming {
    background: #e0e0e0; border: 3px solid #ccc;
}

.dph-line {
    width: 2px; flex: 1; min-height: 24px;
    background: rgba(27,122,62,0.15);
    margin: 6px 0;
}
.donate-phase--upcoming .dph-line { display: none; }

/* Content column */
.dph-content {
    padding-bottom: 44px;
    display: flex; flex-direction: column; gap: 14px;
}
.donate-phase:last-child .dph-content { padding-bottom: 0; }

.dph-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dph-badge {
    display: inline-block;
    font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 12px; border-radius: 40px;
}
.dph-badge--complete { background: rgba(27,122,62,.10); color: var(--primary-color,#1b7a3e); border: 1px solid rgba(27,122,62,.22); }
.dph-badge--active   { background: rgba(243,156,18,.12); color: #c97e00; border: 1px solid rgba(243,156,18,.35); }
.dph-badge--upcoming { background: rgba(0,0,0,.05); color: #999; border: 1px solid #ddd; }

.dph-title {
    font-size: 18px; font-weight: 700;
    color: var(--accent-color,#1a1a1a); margin: 0;
}
.dph-title span { font-weight: 400; color: #888; font-size: 15px; }

/* Phase progress bar */
.dph-progress-wrap { display: flex; flex-direction: column; gap: 8px; }
.dph-progress-labels {
    display: flex; justify-content: space-between;
    font-size: 14px; color: #555;
}
.dph-pct { font-weight: 600; color: var(--primary-color,#1b7a3e); }
.donate-phase--active .dph-pct { color: #c97e00; }

.dph-track {
    width: 100%; height: 10px;
    background: rgba(27,122,62,0.10);
    border-radius: 99px; overflow: hidden;
}
.dph-fill {
    height: 100%; width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary-color,#1b7a3e), var(--primary-light,#2a9c54));
    transition: width 1.4s cubic-bezier(0.22,1,0.36,1);
}
.dph-fill--active   { width: var(--pct,0); }
.dph-fill.dph-fill--active[style*="100%"] { background: var(--primary-color,#1b7a3e); }

.donate-phase--active .dph-fill {
    background: linear-gradient(90deg, #c97e00, var(--secondary-color,#f39c12));
}

.dph-goal-label { font-size: 13px; color: #888; font-style: italic; }
.dph-desc { font-size: 15px; color: #555; line-height: 1.75; margin: 0; }

/* Breakdown grid inside phases */
.dph-breakdown {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px;
    background: var(--light-bg,#f8f9fa);
    border: 1px solid rgba(27,122,62,0.10);
    border-radius: 12px; padding: 18px 20px;
}
.dph-breakdown h4 {
    font-size: 13px; font-weight: 600;
    color: var(--primary-color,#1b7a3e);
    margin: 0 0 10px;
}
.dph-breakdown ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.dph-breakdown li {
    font-size: 13px; color: #555; line-height: 1.5;
    padding-left: 12px; position: relative;
}
.dph-breakdown li::before {
    content: '–'; position: absolute; left: 0; color: #ccc;
}

.dph-cta { align-self: flex-start; display: flex; align-items: center; gap: 8px; }


/* ─────────────────────────────────────────────
   6. HADITH QUOTE BANNER
───────────────────────────────────────────── */

.donate-hadith {
    background: var(--primary-dark,#0f4620);
    padding: 64px 0;
}
.donate-hadith-inner {
    max-width: 720px; margin: 0 auto;
    text-align: center;
    display: flex; flex-direction: column;
    align-items: center; gap: 16px;
}
.donate-hadith-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,0.10);
    display: flex; align-items: center; justify-content: center;
    color: rgba(160,230,180,0.9);
}
.donate-hadith-text {
    font-size: clamp(18px,2.8vw,26px);
    font-weight: 600; font-style: italic;
    color: #fff; line-height: 1.5; margin: 0;
    quotes: "\201C" "\201D";
}
.donate-hadith-text::before { content: open-quote; }
.donate-hadith-text::after  { content: close-quote; }
.donate-hadith-source {
    font-size: 14px; font-style: normal;
    color: rgba(140,225,165,0.85);
    font-weight: 500;
}


/* ─────────────────────────────────────────────
   7. TEAM SECTION
───────────────────────────────────────────── */

.donate-team {
    background: var(--light-bg,#f8f9fa);
    padding: 72px 0 80px;
}
.donate-team-header {
    text-align: center; margin-bottom: 44px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.donate-team-title {
    font-size: clamp(22px,3vw,32px); font-weight: 700;
    color: var(--accent-color,#1a1a1a); margin: 0;
}
.donate-team-sub {
    font-size: 16px; color: #666;
    line-height: 1.7; max-width: 560px; margin: 0;
}

.donate-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: 16px;
}

.donate-team-card {
    background: #fff;
    border: 1.5px solid rgba(27,122,62,0.10);
    border-radius: 14px; padding: 22px 16px 18px;
    display: flex; flex-direction: column;
    align-items: center; gap: 12px; text-align: center;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.donate-team-card:hover {
    border-color: rgba(27,122,62,0.28);
    box-shadow: 0 6px 20px rgba(27,122,62,0.09);
    transform: translateY(-2px);
}

.dtc-photo {
    width: 72px; height: 72px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    border: 2.5px solid rgba(27,122,62,0.18);
    background: rgba(27,122,62,0.06);
}
.dtc-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.dtc-initials {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700;
    color: var(--primary-color,#1b7a3e);
}

.dtc-info { display: flex; flex-direction: column; gap: 4px; }
.dtc-name {
    font-size: 14px; font-weight: 600;
    color: var(--accent-color,#1a1a1a); margin: 0;
    line-height: 1.35;
}
.dtc-role {
    font-size: 12px; font-weight: 500;
    color: var(--primary-color,#1b7a3e); margin: 0;
    text-transform: uppercase; letter-spacing: .06em;
}


/* ─────────────────────────────────────────────
   8. FINAL CTA BANNER
───────────────────────────────────────────── */

.donate-final-cta {
    background: var(--primary-dark,#0f4620);
    padding: 64px 0;
}
.donate-final-cta-inner {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
}
.dfci-text {
    display: flex; flex-direction: column; gap: 10px;
}
.dfci-text h2 {
    font-size: clamp(22px,3.5vw,34px); font-weight: 700;
    color: #fff; margin: 0; line-height: 1.2;
}
.dfci-text p {
    font-size: 15px; color: rgba(255,255,255,0.65);
    margin: 0; max-width: 420px; line-height: 1.65;
}
.dfci-actions {
    display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
}
.dfci-actions .btn {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.donate-final-cta .btn-outline-white {
    padding: 11px 24px; font-size: 15px;
}


/* ─────────────────────────────────────────────
   9. RESPONSIVE
───────────────────────────────────────────── */

/* ≤ 1100px */
@media (max-width: 1100px) {
    .donate-campaign-inner { grid-template-columns: 1fr 360px; gap: 44px; }
    .donate-why-grid { grid-template-columns: repeat(2,1fr); }
}

/* ≤ 900px */
@media (max-width: 900px) {
    .donate-hero { height: 480px; }
    .donate-vcol { width: 160px; }
    .donate-rimg { height: 130px; }
    .donate-reel-wrapper { padding:0 40px; gap:14px; }

    .donate-campaign-inner { grid-template-columns: 1fr; }
    .donate-campaign-image { max-width: 480px; }
    .dph-breakdown { grid-template-columns: 1fr; }
}

/* ≤ 768px */
@media (max-width: 768px) {
    .donate-hero { height: 420px; }
    .donate-reel-wrapper { padding:0 20px; gap:12px; }
    .donate-vcol { width: 140px; }
    .donate-rimg { height: 118px; border-radius:10px; }
    .donate-hero-headline { font-size: clamp(24px,6vw,36px); }
    .donate-hero-sub { font-size:14px; }
    .donate-hero-actions { flex-direction:column; align-items:center; }

    .donate-campaign, .donate-why, .donate-phases,
    .donate-team { padding: 52px 0 60px; }

    .donate-methods-grid { grid-template-columns: 1fr; }

    .donate-final-cta-inner { flex-direction:column; align-items:flex-start; }
    .dfci-actions { width:100%; }
    .dfci-actions .btn { flex:1; justify-content:center; }
}

/* ≤ 600px */
@media (max-width: 600px) {
    .donate-why-grid { grid-template-columns: 1fr; }
    .donate-team-grid { grid-template-columns: repeat(2,1fr); }
    .donate-methods-grid { grid-template-columns: 1fr; }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .donate-hero { height: 340px; }
    .donate-reel-wrapper { padding:0 12px; gap:10px; }
    .donate-vcol { width:120px; }
    .donate-rimg { height:100px; border-radius:8px; }
    .donate-hero-sub { display:none; }
    .donate-team-grid { grid-template-columns: repeat(2,1fr); }
    .donate-phase { grid-template-columns: 36px 1fr; gap:0 16px; }
    .dph-dot { width:30px; height:30px; }
}

/* ===================================
   DONATE PAGE CSS — end
   =================================== */

/* ===================================
   UTILITY CLASSES - RESPONSIVE SPACING
   =================================== */

/* Margin Top Utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

/* Margin Bottom Utilities */
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

/* Margin Utilities */
.m-0 { margin: 0; }
.m-1 { margin: 0.5rem; }
.m-2 { margin: 1rem; }
.m-3 { margin: 1.5rem; }
.m-4 { margin: 2rem; }

/* Padding Utilities */
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* Gap Utilities */
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* Responsive Spacing - Tablet and below */
@media (max-width: 768px) {
    .mt-1 { margin-top: 0.4rem; }
    .mt-2 { margin-top: 0.8rem; }
    .mt-3 { margin-top: 1.2rem; }
    .mt-4 { margin-top: 1.6rem; }
    .mt-5 { margin-top: 2.4rem; }
    
    .mb-1 { margin-bottom: 0.4rem; }
    .mb-2 { margin-bottom: 0.8rem; }
    .mb-3 { margin-bottom: 1.2rem; }
    .mb-4 { margin-bottom: 1.6rem; }
    .mb-5 { margin-bottom: 2.4rem; }
    
    .m-1 { margin: 0.4rem; }
    .m-2 { margin: 0.8rem; }
    .m-3 { margin: 1.2rem; }
    .m-4 { margin: 1.6rem; }
}

/* Responsive Spacing - Mobile */
@media (max-width: 480px) {
    .mt-1 { margin-top: 0.3rem; }
    .mt-2 { margin-top: 0.6rem; }
    .mt-3 { margin-top: 0.9rem; }
    .mt-4 { margin-top: 1.2rem; }
    .mt-5 { margin-top: 1.8rem; }
    
    .mb-1 { margin-bottom: 0.3rem; }
    .mb-2 { margin-bottom: 0.6rem; }
    .mb-3 { margin-bottom: 0.9rem; }
    .mb-4 { margin-bottom: 1.2rem; }
    .mb-5 { margin-bottom: 1.8rem; }

    .service-sidebar-card {
        padding: 18px;
    }

    .detail-item {
        gap: 10px;
        margin-bottom: 14px;
    }

    .detail-text span {
        font-size: 0.88rem;
    }
}

/* ===================================
   UTILITY CLASSES — end
   =================================== */