@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');
:root {
--color-primary:       #9b1d6a;
--color-primary-light: #b5287e;
--color-primary-dark:  #6d1049;
--color-secondary:     #e91e8c;
--color-secondary-light: #f06ab5;
--color-accent:        #fce4f3;
--color-danger:        #c0392b;
--color-success:       #27ae60;
--color-warning:       #f39c12;
--color-rose-50:  #fff0f8;
--color-rose-100: #fce4f3;
--color-rose-200: #f9c9e8;
--color-rose-300: #f4a0d4;
--color-rose-400: #ee6db8;
--color-rose-500: #e91e8c;
--color-rose-600: #c8177a;
--color-rose-700: #9b1d6a;
--color-rose-800: #6d1049;
--color-rose-900: #450a2e;
--color-white:   #ffffff;
--color-gray-50: #f8fafc;
--color-gray-100:#f1f5f9;
--color-gray-200:#e2e8f0;
--color-gray-300:#cbd5e1;
--color-gray-400:#94a3b8;
--color-gray-500:#64748b;
--color-gray-600:#475569;
--color-gray-700:#334155;
--color-gray-800:#1e293b;
--color-gray-900:#0f172a;
--font-body:     'Inter', sans-serif;
--font-display:  'Playfair Display', serif;
--font-arabic:   'Noto Naskh Arabic', serif;
--space-xs:  0.25rem;
--space-sm:  0.5rem;
--space-md:  1rem;
--space-lg:  1.5rem;
--space-xl:  2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 9999px;
--shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
--shadow-md:  0 4px 12px rgba(0,0,0,0.08);
--shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
--shadow-xl:  0 16px 40px rgba(0,0,0,0.16);
--transition-fast:   0.15s ease;
--transition-normal: 0.25s ease;
--transition-slow:   0.4s ease;
--container-max:  1280px;
--container-pad:  1.5rem;
--header-height:  72px;
--topbar-height:  38px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
color: var(--color-gray-800);
background: var(--color-white);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body[dir="rtl"] {
font-family: var(--font-arabic);
}
body[dir="rtl"] * {
font-family: var(--font-arabic);
letter-spacing: 0;
}
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
.topbar {
background: var(--color-primary-dark);
height: var(--topbar-height);
display: flex;
align-items: center;
font-size: 0.78rem;
color: rgba(255,255,255,0.75);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.topbar-left { display: flex; align-items: center; gap: 1.25rem; }
.topbar-left a { color: rgba(255,255,255,0.75); transition: color var(--transition-fast); }
.topbar-left a:hover { color: var(--color-secondary); }
.topbar-left i { margin-right: 0.4rem; font-size: 0.7rem; }
[dir="rtl"] .topbar-left i { margin-right: 0; margin-left: 0.4rem; }
.topbar-right { display: flex; align-items: center; gap: 0.75rem; }
.lang-switcher { display: flex; align-items: center; gap: 0.35rem; }
.lang-btn {
padding: 0.2rem 0.55rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
color: rgba(255,255,255,0.6);
border: 1px solid rgba(255,255,255,0.15);
transition: all var(--transition-fast);
letter-spacing: 0.5px;
}
.lang-btn.active, .lang-btn:hover {
background: var(--color-secondary);
color: var(--color-white);
border-color: var(--color-secondary);
}
.site-header {
position: sticky;
top: 0;
z-index: 900;
background: #ffffff;
height: var(--header-height);
box-shadow: 0 2px 12px rgba(0,0,0,0.10);
border-bottom: 3px solid var(--color-secondary);
}
.header-main {
height: 100%;
}
.header-inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0;
}
.site-logo {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
text-decoration: none;
}
.logo-emblem {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 2px rgba(155,29,106,0.15);
padding: 2px;
}
.logo-emblem img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
display: block;
}
.logo-text-wrap {
display: flex;
flex-direction: column;
justify-content: center;
}
.logo-text-main {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: -0.2px;
}
[dir="rtl"] .logo-text-main { font-family: var(--font-arabic); font-size: 0.95rem; }
.logo-text-sub {
font-size: 0.6rem;
color: var(--color-gray-500);
font-weight: 400;
letter-spacing: 0.4px;
text-transform: uppercase;
margin-top: 1px;
}
.main-nav {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-start;
}
[dir="rtl"] .main-nav {
justify-content: flex-end;
}
.nav-list {
display: flex;
align-items: center;
gap: 0;
justify-content: flex-start;
}
[dir="rtl"] .nav-list {
justify-content: flex-end;
flex-direction: row-reverse;
}
.nav-item { position: relative; }
.nav-link {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.5rem 0.85rem;
font-size: 0.84rem;
font-weight: 500;
color: var(--color-gray-700);
transition: color var(--transition-fast);
white-space: nowrap;
border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link.active {
color: var(--color-primary);
border-bottom-color: var(--color-secondary);
}
.nav-link i.fa-chevron-down { font-size: 0.6rem; transition: transform var(--transition-fast); }
.nav-item:hover .nav-link i.fa-chevron-down { transform: rotate(180deg); }
.nav-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--color-white);
box-shadow: var(--shadow-xl);
border-radius: var(--radius-md);
border-top: 3px solid var(--color-secondary);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: all var(--transition-normal);
z-index: 1000;
overflow: hidden;
}
[dir="rtl"] .nav-dropdown { left: auto; right: 0; }
.nav-item:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown a {
display: block;
padding: 0.65rem 1.1rem;
font-size: 0.82rem;
color: var(--color-gray-700);
border-bottom: 1px solid var(--color-gray-100);
transition: all var(--transition-fast);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover {
background: var(--color-accent);
color: var(--color-primary);
padding-left: 1.4rem;
}
[dir="rtl"] .nav-dropdown a:hover { padding-left: 1.1rem; padding-right: 1.4rem; }
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
margin-left: auto;
}
[dir="rtl"] .header-actions { margin-left: 0; margin-right: auto; }
.header-search-btn {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid var(--color-gray-200);
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-600);
transition: all var(--transition-fast);
flex-shrink: 0;
cursor: pointer;
}
.header-search-btn:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
}
.search-overlay {
position: fixed;
inset: 0;
background: rgba(15,36,56,0.92);
z-index: 2000;
display: flex;
align-items: flex-start;
padding-top: 120px;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
backdrop-filter: blur(4px);
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-overlay-inner { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }
.search-form { position: relative; }
.search-input {
width: 100%;
padding: 1.1rem 3.5rem 1.1rem 1.5rem;
font-size: 1.1rem;
background: var(--color-white);
border: none;
border-radius: var(--radius-lg);
outline: none;
color: var(--color-gray-800);
box-shadow: var(--shadow-xl);
}
[dir="rtl"] .search-input { padding: 1.1rem 1.5rem 1.1rem 3.5rem; text-align: right; }
.search-submit {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: var(--color-primary);
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
[dir="rtl"] .search-submit { right: auto; left: 1rem; }
.search-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
color: white;
font-size: 1.5rem;
opacity: 0.7;
transition: opacity var(--transition-fast);
}
.search-close:hover { opacity: 1; }
[dir="rtl"] .search-close { right: auto; left: 1.5rem; }
.hero {
position: relative;
min-height: 540px;
background: var(--color-primary);
overflow: hidden;
display: flex;
align-items: center;
}
.hero-bg {
position: absolute;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1600&q=80');
background-size: cover;
background-position: center;
opacity: 0.18;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--color-rose-900) 0%, var(--color-rose-800) 40%, var(--color-rose-700) 70%, rgba(155,29,106,0.75) 100%);
}
.hero-content {
position: relative;
z-index: 2;
padding: var(--space-4xl) 0;
max-width: 680px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(233,30,140,0.2);
border: 1px solid rgba(233,30,140,0.4);
color: var(--color-secondary-light);
padding: 0.35rem 0.85rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
color: var(--color-white);
line-height: 1.2;
margin-bottom: 1.25rem;
}
[dir="rtl"] .hero-title { font-family: var(--font-arabic); }
.hero-subtitle {
font-size: 1.05rem;
color: rgba(255,255,255,0.78);
line-height: 1.65;
margin-bottom: 2rem;
max-width: 540px;
}
.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-stat-strip {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background: rgba(155,29,106,0.95);
padding: 0.9rem 0;
}
.hero-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.hero-stat-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 2rem;
border-right: 1px solid rgba(255,255,255,0.3);
}
.hero-stat-item:last-child { border-right: none; }
[dir="rtl"] .hero-stat-item { border-right: none; border-left: 1px solid rgba(255,255,255,0.3); }
[dir="rtl"] .hero-stat-item:last-child { border-left: none; }
.hero-stat-item i { font-size: 1.2rem; color: rgba(255,255,255,0.85); }
.hero-stat-value { font-size: 1.15rem; font-weight: 700; color: white; line-height: 1; }
.hero-stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.8); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.88rem;
transition: all var(--transition-normal);
white-space: nowrap;
letter-spacing: 0.2px;
line-height: 1;
}
.btn-primary {
background: var(--color-secondary);
color: var(--color-white);
border: 2px solid var(--color-secondary);
}
.btn-primary:hover {
background: var(--color-secondary-light);
border-color: var(--color-secondary-light);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(233,30,140,0.35);
}
.btn-outline {
background: transparent;
color: var(--color-white);
border: 2px solid rgba(255,255,255,0.5);
}
.btn-outline:hover {
background: rgba(255,255,255,0.12);
border-color: white;
}
.btn-outline-primary {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}
.btn-outline-primary:hover {
background: var(--color-primary);
color: white;
}
.btn-sm { padding: 0.5rem 1rem; font-size: 0.8rem; }
.btn-lg { padding: 0.9rem 2rem; font-size: 0.95rem; }
.btn-danger { background: var(--color-danger); color: white; border: 2px solid var(--color-danger); }
.btn-danger:hover { background: #a32060; border-color: #a32060; }
.section { padding: var(--space-4xl) 0; }
.section-sm { padding: var(--space-2xl) 0; }
.section-bg { background: var(--color-gray-50); }
.section-dark { background: var(--color-primary); color: white; }
.section-dark .section-title { color: white; }
.section-dark .section-subtitle { color: rgba(255,255,255,0.7); }
.section-header { margin-bottom: var(--space-2xl); }
.section-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-secondary);
margin-bottom: 0.6rem;
}
.section-label::before {
content: '';
display: block;
width: 20px;
height: 2px;
background: var(--color-secondary);
}
[dir="rtl"] .section-label { flex-direction: row-reverse; }
[dir="rtl"] .section-label::before { display: none; }
[dir="rtl"] .section-label::after {
content: '';
display: block;
width: 20px;
height: 2px;
background: var(--color-secondary);
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: var(--color-primary);
line-height: 1.25;
margin-bottom: 0.5rem;
}
[dir="rtl"] .section-title { font-family: var(--font-arabic); }
.section-subtitle { color: var(--color-gray-500); font-size: 0.95rem; max-width: 540px; }
.section-header-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.article-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-normal);
display: flex;
flex-direction: column;
height: 100%;
}
.article-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-gray-300);
}
.article-card-image {
position: relative;
overflow: hidden;
aspect-ratio: 16/9;
}
.article-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.article-card:hover .article-card-image img { transform: scale(1.04); }
.article-card-category {
position: absolute;
top: 0.75rem;
left: 0.75rem;
background: var(--color-secondary);
color: white;
padding: 0.25rem 0.65rem;
border-radius: var(--radius-sm);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
[dir="rtl"] .article-card-category { left: auto; right: 0.75rem; }
.article-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.article-card-meta {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 0.75rem;
color: var(--color-gray-400);
margin-bottom: 0.65rem;
}
.article-card-meta i { font-size: 0.7rem; }
.article-card-title {
font-size: 0.97rem;
font-weight: 600;
color: var(--color-gray-800);
line-height: 1.45;
margin-bottom: 0.6rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color var(--transition-fast);
}
.article-card:hover .article-card-title { color: var(--color-primary); }
.article-card-excerpt {
font-size: 0.83rem;
color: var(--color-gray-500);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
margin-bottom: 1rem;
}
.article-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.75rem;
border-top: 1px solid var(--color-gray-100);
margin-top: auto;
}
.read-more {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--color-primary);
transition: gap var(--transition-fast);
}
.read-more:hover { gap: 0.5rem; }
.read-more i { font-size: 0.7rem; }
.article-card-featured {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-gray-200);
transition: all var(--transition-normal);
}
.article-card-featured:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
.article-card-featured .article-card-image {
aspect-ratio: auto;
height: 100%;
min-height: 280px;
}
.article-card-featured .article-card-body {
padding: 2rem;
justify-content: center;
}
.article-card-featured .article-card-title { font-size: 1.15rem; -webkit-line-clamp: 3; }
.article-card-featured .article-card-excerpt { -webkit-line-clamp: 4; }
.pr-card {
background: var(--color-white);
border-radius: var(--radius-md);
padding: 1.25rem 1.5rem;
border: 1px solid var(--color-gray-200);
border-left: 4px solid var(--color-primary);
display: flex;
align-items: flex-start;
gap: 1rem;
transition: all var(--transition-normal);
}
[dir="rtl"] .pr-card { border-left: 1px solid var(--color-gray-200); border-right: 4px solid var(--color-primary); }
.pr-card:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
[dir="rtl"] .pr-card:hover { transform: translateX(-4px); }
.pr-card.urgent { border-left-color: var(--color-danger); }
[dir="rtl"] .pr-card.urgent { border-right-color: var(--color-danger); border-left-color: var(--color-gray-200); }
.pr-card-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 52px;
background: var(--color-accent);
border-radius: var(--radius-md);
padding: 0.5rem 0.35rem;
flex-shrink: 0;
}
.pr-card-date-day { font-size: 1.3rem; font-weight: 700; color: var(--color-primary); line-height: 1; }
.pr-card-date-month { font-size: 0.65rem; text-transform: uppercase; color: var(--color-gray-400); letter-spacing: 0.5px; }
.pr-card-content { flex: 1; }
.pr-badge-urgent {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: var(--color-danger);
color: white;
padding: 0.15rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.4rem;
}
.pr-card-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-gray-800);
line-height: 1.4;
margin-bottom: 0.4rem;
transition: color var(--transition-fast);
}
.pr-card:hover .pr-card-title { color: var(--color-primary); }
.pr-card-excerpt {
font-size: 0.78rem;
color: var(--color-gray-500);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; }
.about-home {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.about-home-image {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4/3;
box-shadow: var(--shadow-xl);
}
.about-home-image img { width: 100%; height: 100%; object-fit: cover; }
.about-home-badge {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
background: var(--color-secondary);
color: white;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-md);
text-align: center;
box-shadow: var(--shadow-lg);
}
[dir="rtl"] .about-home-badge { right: auto; left: 1.5rem; }
.about-home-badge-value { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.about-home-badge-label { font-size: 0.72rem; opacity: 0.85; }
.about-home-content {}
.about-home-title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin-bottom: 1rem;
}
[dir="rtl"] .about-home-title { font-family: var(--font-arabic); }
.about-home-text { color: var(--color-gray-600); line-height: 1.75; margin-bottom: 1.25rem; }
.about-values { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.75rem; }
.about-value-item { display: flex; align-items: center; gap: 0.75rem; }
.about-value-icon {
width: 36px;
height: 36px;
background: var(--color-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 0.85rem;
flex-shrink: 0;
}
.about-value-text { font-size: 0.88rem; color: var(--color-gray-700); font-weight: 500; }
.key-figures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.key-figure-card {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-lg);
padding: 2rem 1.5rem;
text-align: center;
transition: all var(--transition-normal);
}
.key-figure-card:hover {
background: rgba(255,255,255,0.14);
transform: translateY(-3px);
}
.key-figure-icon {
width: 56px;
height: 56px;
background: rgba(233,30,140,0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
color: var(--color-secondary-light);
font-size: 1.3rem;
}
.key-figure-value { font-size: 2rem; font-weight: 800; color: white; line-height: 1; margin-bottom: 0.5rem; }
.key-figure-label { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.leadership-quote {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
align-items: center;
background: var(--color-white);
border-radius: var(--radius-xl);
padding: 3rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-gray-200);
}
[dir="rtl"] .leadership-quote { direction: rtl; }
.leadership-photo {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 3/4;
box-shadow: var(--shadow-md);
}
.leadership-photo img { width: 100%; height: 100%; object-fit: cover; }
.leadership-photo::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(transparent, rgba(109,16,73,0.7));
}
.leadership-name-overlay {
position: absolute;
bottom: 0.75rem;
left: 0;
right: 0;
text-align: center;
color: white;
z-index: 1;
}
.leadership-name-overlay .name { font-weight: 600; font-size: 0.9rem; }
.leadership-name-overlay .role { font-size: 0.72rem; opacity: 0.85; }
.quote-mark { font-size: 4rem; color: var(--color-secondary); line-height: 0.5; margin-bottom: 1rem; font-family: Georgia, serif; }
.quote-text {
font-size: 1.1rem;
font-style: italic;
color: var(--color-gray-700);
line-height: 1.75;
margin-bottom: 1.5rem;
}
[dir="rtl"] .quote-text { font-style: normal; }
.quote-signature { display: flex; flex-direction: column; gap: 0.25rem; }
.quote-name { font-size: 1rem; font-weight: 700; color: var(--color-primary); }
.quote-role { font-size: 0.82rem; color: var(--color-secondary); font-weight: 500; }
.topics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.topic-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
border: 1px solid var(--color-gray-200);
text-align: center;
transition: all var(--transition-normal);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.topic-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.topic-icon {
width: 56px;
height: 56px;
background: var(--color-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 1.3rem;
transition: all var(--transition-normal);
}
.topic-card:hover .topic-icon { background: var(--color-primary); color: white; }
.topic-name { font-size: 0.88rem; font-weight: 600; color: var(--color-gray-700); }
.media-tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; border-bottom: 2px solid var(--color-gray-200); }
.media-tab {
padding: 0.65rem 1.25rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-gray-500);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all var(--transition-fast);
cursor: pointer;
background: none;
}
.media-tab.active, .media-tab:hover {
color: var(--color-primary);
border-bottom-color: var(--color-secondary);
}
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.gallery-item {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-md);
cursor: pointer;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-overlay {
position: absolute;
inset: 0;
background: rgba(155,29,106,0);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-normal);
}
.gallery-item:hover .gallery-overlay { background: rgba(109,16,73,0.6); }
.gallery-overlay i { color: white; font-size: 1.5rem; opacity: 0; transform: scale(0.7); transition: all var(--transition-normal); }
.gallery-item:hover .gallery-overlay i { opacity: 1; transform: scale(1); }
.video-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-gray-200);
transition: all var(--transition-normal);
}
.video-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.video-thumb {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play-btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(109,16,73,0.45);
transition: background var(--transition-normal);
}
.video-card:hover .video-play-btn { background: rgba(109,16,73,0.65); }
.video-play-btn span {
width: 48px;
height: 48px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 1rem;
transition: transform var(--transition-normal);
padding-left: 3px;
}
.video-card:hover .video-play-btn span { transform: scale(1.1); }
.video-duration {
position: absolute;
bottom: 0.6rem;
right: 0.6rem;
background: rgba(0,0,0,0.75);
color: white;
padding: 0.15rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.72rem;
font-weight: 600;
}
[dir="rtl"] .video-duration { right: auto; left: 0.6rem; }
.video-info { padding: 1rem; }
.video-title { font-size: 0.88rem; font-weight: 600; color: var(--color-gray-800); margin-bottom: 0.3rem; line-height: 1.4; }
.video-date { font-size: 0.75rem; color: var(--color-gray-400); }
.download-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-md);
transition: all var(--transition-normal);
}
.download-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.download-icon {
width: 44px;
height: 44px;
background: var(--color-accent);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 1.1rem;
flex-shrink: 0;
}
.download-info { flex: 1; }
.download-title { font-size: 0.88rem; font-weight: 600; color: var(--color-gray-800); margin-bottom: 0.2rem; }
.download-meta { display: flex; gap: 1rem; font-size: 0.72rem; color: var(--color-gray-400); }
.download-meta span { display: flex; align-items: center; gap: 0.3rem; }
.download-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--color-primary);
color: white;
border-radius: 50%;
font-size: 0.8rem;
flex-shrink: 0;
transition: all var(--transition-fast);
}
.download-btn:hover { background: var(--color-secondary); transform: scale(1.05); }
.contact-home-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.contact-info-list { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-info-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info-icon {
width: 44px;
height: 44px;
background: var(--color-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 1rem;
flex-shrink: 0;
}
.contact-info-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-gray-400); margin-bottom: 0.2rem; font-weight: 600; }
.contact-info-value { font-size: 0.88rem; color: var(--color-gray-700); font-weight: 500; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--color-gray-600); }
.form-input, .form-textarea, .form-select {
padding: 0.7rem 1rem;
border: 1px solid var(--color-gray-300);
border-radius: var(--radius-md);
font-size: 0.875rem;
color: var(--color-gray-800);
background: var(--color-white);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
outline: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(155,29,106,0.1);
}
.form-textarea { resize: vertical; min-height: 120px; }
[dir="rtl"] .form-input, [dir="rtl"] .form-textarea, [dir="rtl"] .form-select { text-align: right; }
.form-success {
background: #d4edda;
color: #155724;
padding: 0.85rem 1.25rem;
border-radius: var(--radius-md);
font-size: 0.88rem;
border: 1px solid #c3e6cb;
display: none;
}
.form-success.show { display: block; }
.breadcrumb {
background: var(--color-gray-50);
border-bottom: 1px solid var(--color-gray-200);
padding: 0.65rem 0;
}
.breadcrumb-list {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.breadcrumb-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--color-gray-400);
}
.breadcrumb-item a { color: var(--color-primary); transition: color var(--transition-fast); }
.breadcrumb-item a:hover { color: var(--color-secondary); }
.breadcrumb-item.active { color: var(--color-gray-600); font-weight: 500; }
.breadcrumb-sep { color: var(--color-gray-300); font-size: 0.6rem; }
.page-hero {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
padding: 3rem 0 2.5rem;
position: relative;
overflow: hidden;
}
.page-hero::after {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(233,30,140,0.08);
pointer-events: none;
}
.page-hero-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
color: white;
margin-bottom: 0.5rem;
}
[dir="rtl"] .page-hero-title { font-family: var(--font-arabic); }
.page-hero-subtitle { color: rgba(255,255,255,0.72); font-size: 0.95rem; }
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 2.5rem;
}
.page-btn {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-gray-600);
border: 1px solid var(--color-gray-200);
background: var(--color-white);
transition: all var(--transition-fast);
cursor: pointer;
}
.page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.page-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.member-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-gray-200);
text-align: center;
transition: all var(--transition-normal);
}
.member-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.member-photo { aspect-ratio: 1; overflow: hidden; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.member-card:hover .member-photo img { transform: scale(1.05); }
.member-info { padding: 1.25rem; }
.member-name { font-size: 0.97rem; font-weight: 700; color: var(--color-gray-800); margin-bottom: 0.25rem; }
.member-function { font-size: 0.78rem; color: var(--color-secondary); font-weight: 600; }
.member-bio { font-size: 0.78rem; color: var(--color-gray-500); margin-top: 0.75rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.affiliate-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
}
.affiliate-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.affiliate-logo { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-md); flex-shrink: 0; border: 1px solid var(--color-gray-200); padding: 4px; }
.affiliate-info {}
.affiliate-name { font-size: 0.9rem; font-weight: 600; color: var(--color-gray-800); margin-bottom: 0.2rem; }
.affiliate-region { font-size: 0.72rem; color: var(--color-secondary); font-weight: 600; margin-bottom: 0.3rem; }
.affiliate-desc { font-size: 0.78rem; color: var(--color-gray-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-md); }
.lightbox-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
color: white;
font-size: 2rem;
opacity: 0.75;
transition: opacity var(--transition-fast);
cursor: pointer;
z-index: 1;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-caption {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.85);
font-size: 0.85rem;
text-align: center;
max-width: 600px;
}
.search-header { margin-bottom: 2rem; }
.search-query-form {
display: flex;
gap: 0.75rem;
max-width: 600px;
margin-bottom: 1.5rem;
}
.search-query-input {
flex: 1;
padding: 0.75rem 1.1rem;
border: 2px solid var(--color-gray-200);
border-radius: var(--radius-md);
font-size: 0.95rem;
outline: none;
transition: border-color var(--transition-fast);
}
.search-query-input:focus { border-color: var(--color-primary); }
.search-result-item {
display: flex;
gap: 1.25rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--color-gray-100);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-image { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.search-result-type {
display: inline-block;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-secondary);
margin-bottom: 0.3rem;
}
.search-result-title { font-size: 0.97rem; font-weight: 600; color: var(--color-gray-800); margin-bottom: 0.4rem; transition: color var(--transition-fast); }
.search-result-item:hover .search-result-title { color: var(--color-primary); }
.search-result-excerpt { font-size: 0.82rem; color: var(--color-gray-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.page-404 {
min-height: 65vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 1rem;
}
.page-404-code { font-size: 8rem; font-weight: 800; color: var(--color-gray-200); line-height: 1; margin-bottom: 0; }
.page-404-title { font-size: 1.5rem; font-weight: 700; color: var(--color-gray-700); margin-bottom: 0.75rem; }
.page-404-text { color: var(--color-gray-500); margin-bottom: 2rem; }
.site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.75); margin-top: auto; }
.footer-top { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 3rem; }
.footer-brand { }
.footer-logo { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.footer-logo-emblem {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
padding: 2px;
}
.footer-logo-emblem img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
display: block;
}
.footer-logo-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: white; }
[dir="rtl"] .footer-logo-name { font-family: var(--font-arabic); }
.footer-tagline { font-size: 0.82rem; line-height: 1.6; margin-bottom: 1.25rem; }
.footer-socials { display: flex; gap: 0.6rem; }
.social-btn {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.65);
font-size: 0.8rem;
transition: all var(--transition-fast);
}
.social-btn:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: white; }
.footer-col-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.5); margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a { font-size: 0.82rem; color: rgba(255,255,255,0.65); transition: color var(--transition-fast); display: flex; align-items: center; gap: 0.4rem; }
.footer-links a::before { content: '›'; color: var(--color-secondary); font-size: 0.9rem; }
[dir="rtl"] .footer-links a::before { content: '‹'; }
.footer-links a:hover { color: white; }
.footer-bottom {
padding: 1.25rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.78rem;
color: rgba(255,255,255,0.45);
}
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.45); transition: color var(--transition-fast); }
.footer-bottom-links a:hover { color: rgba(255,255,255,0.8); }
.layout-with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
[dir="rtl"] .layout-with-sidebar { grid-template-columns: 300px 1fr; }
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-widget { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.sidebar-widget-header {
padding: 0.9rem 1.25rem;
background: var(--color-primary);
color: white;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar-widget-header i { color: var(--color-secondary-light); }
.sidebar-widget-body { padding: 1rem 1.25rem; }
.sidebar-news-item { display: flex; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-gray-100); }
.sidebar-news-item:last-child { border-bottom: none; }
.sidebar-news-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.sidebar-news-title { font-size: 0.78rem; font-weight: 600; color: var(--color-gray-700); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sidebar-news-date { font-size: 0.68rem; color: var(--color-gray-400); margin-top: 0.2rem; }
.category-filter-list { display: flex; flex-direction: column; gap: 0.4rem; }
.category-filter-btn {
width: 100%;
text-align: left;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.82rem;
color: var(--color-gray-600);
transition: all var(--transition-fast);
display: flex;
justify-content: space-between;
align-items: center;
}
[dir="rtl"] .category-filter-btn { text-align: right; }
.category-filter-btn:hover, .category-filter-btn.active {
background: var(--color-accent);
color: var(--color-primary);
font-weight: 600;
}
.category-count { background: var(--color-gray-200); color: var(--color-gray-600); padding: 0.1rem 0.45rem; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 700; }
.article-detail-header { margin-bottom: 2rem; }
.article-detail-title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 700;
color: var(--color-primary);
line-height: 1.3;
margin-bottom: 1rem;
}
[dir="rtl"] .article-detail-title { font-family: var(--font-arabic); }
.article-detail-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8rem; color: var(--color-gray-400); margin-bottom: 1.5rem; }
.article-detail-meta span { display: flex; align-items: center; gap: 0.4rem; }
.article-detail-image { width: 100%; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; }
.article-detail-image img { width: 100%; max-height: 440px; object-fit: cover; }
.article-content { color: var(--color-gray-700); line-height: 1.85; font-size: 0.97rem; }
.article-content h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-primary); margin: 2rem 0 0.75rem; }
[dir="rtl"] .article-content h2 { font-family: var(--font-arabic); }
.article-content h3 { font-size: 1.05rem; font-weight: 600; color: var(--color-gray-800); margin: 1.5rem 0 0.6rem; }
.article-content p { margin-bottom: 1.25rem; }
.article-content ul, .article-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
[dir="rtl"] .article-content ul, [dir="rtl"] .article-content ol { padding-left: 0; padding-right: 1.5rem; }
.article-content ul li { list-style: disc; margin-bottom: 0.4rem; }
.article-content ol li { list-style: decimal; margin-bottom: 0.4rem; }
.article-content strong { color: var(--color-gray-800); font-weight: 600; }
.article-content em { color: var(--color-gray-600); }
.article-content blockquote {
border-left: 4px solid var(--color-secondary);
padding: 1rem 1.5rem;
background: var(--color-accent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
margin: 1.5rem 0;
color: var(--color-gray-700);
font-style: italic;
}
[dir="rtl"] .article-content blockquote { border-left: none; border-right: 4px solid var(--color-secondary); border-radius: var(--radius-md) 0 0 var(--radius-md); }
.share-bar { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 0; border-top: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200); margin: 2rem 0; }
.share-label { font-size: 0.82rem; font-weight: 600; color: var(--color-gray-500); }
.share-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border-radius: var(--radius-sm);
font-size: 0.78rem;
font-weight: 600;
color: white;
}
.share-btn.fb { background: #1877f2; }
.share-btn.tw { background: #1da1f2; }
.share-btn.wa { background: #25d366; }
.share-btn.li { background: #0a66c2; }
.org-chart { padding: 2rem 0; }
.org-level { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2.5rem; position: relative; }
.org-level::before {
content: '';
position: absolute;
bottom: -2.5rem;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 2.5rem;
background: var(--color-gray-300);
}
.org-level:last-child::before { display: none; }
.org-node {
background: var(--color-white);
border: 2px solid var(--color-primary);
border-radius: var(--radius-lg);
padding: 1rem 1.5rem;
text-align: center;
min-width: 180px;
box-shadow: var(--shadow-md);
}
.org-node.top { border-color: var(--color-secondary); border-width: 3px; }
.org-node-title { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); }
.org-node-subtitle { font-size: 0.72rem; color: var(--color-gray-500); margin-top: 0.2rem; }
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 44px;
height: 44px;
background: var(--color-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--transition-normal);
z-index: 800;
cursor: pointer;
border: none;
}
[dir="rtl"] .back-to-top { right: auto; left: 2rem; }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--color-secondary); transform: translateY(-2px); }
.notice-banner {
background: var(--color-secondary);
color: white;
padding: 0.65rem 0;
text-align: center;
font-size: 0.82rem;
font-weight: 500;
}
.notice-banner a { color: white; text-decoration: underline; }
.grid-2,
.grid-3,
.grid-4,
.grid-2-1,
.grid-1-2 {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
.about-home { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.contact-home-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.leadership-quote { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.key-figures-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.topics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.layout-with-sidebar { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.main-nav { display: none; }
.nav-toggle { display: flex; }
.topbar-left a:not(:first-child) { display: none; }
.topbar {
height: auto;
padding: 0.4rem 0;
}
.topbar .container {
flex-wrap: wrap;
gap: 0.4rem;
}
:root { --header-height: 60px; --container-pad: 1rem; }
.logo-text-sub { display: none; }
.hero { min-height: 420px; }
.hero-content { padding: 2.5rem 0 3rem; max-width: 100%; }
.hero-title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
.hero-subtitle { font-size: 0.92rem; max-width: 100%; }
.hero-actions { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.hero-actions .btn { width: 100%; max-width: 280px; justify-content: center; }
.hero-stat-strip { display: none; }
.section { padding: 2.5rem 0; }
.section-sm { padding: 1.5rem 0; }
.section-header { margin-bottom: 1.5rem; }
.btn {
min-height: 44px;
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
.btn-sm { min-height: 36px; padding: 0.5rem 0.9rem; font-size: 0.8rem; }
.btn-lg { min-height: 52px; padding: 1rem 2rem; font-size: 1rem; }
.article-card-featured { grid-template-columns: 1fr; }
.article-card-featured .article-card-image { min-height: 200px; }
.form-row { grid-template-columns: 1fr; }
.form-input, .form-textarea, .form-select { min-height: 44px; font-size: 16px;  }
.footer-bottom { flex-direction: column; text-align: center; gap: 0.75rem; }
.footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
.pr-detail-header { flex-direction: column; gap: 1rem; padding: 1.5rem; }
.about-home-image { display: none; }
.sidebar { display: none; }
.share-bar { flex-wrap: wrap; gap: 0.5rem; }
.notice-banner { font-size: 0.72rem; padding: 0.5rem; }
.org-level { flex-direction: column; align-items: center; gap: 1rem; }
.org-node { min-width: 0; width: 100%; max-width: 260px; }
.search-query-form { flex-direction: column; gap: 0.5rem; }
.search-result-item { flex-direction: column; gap: 0.75rem; }
.search-result-image { width: 100%; height: 180px; }
.section-header-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.media-tabs { flex-wrap: wrap; gap: 0.3rem; border-bottom: none; margin-bottom: 1rem; }
.media-tab { border-radius: var(--radius-sm); border: 1px solid var(--color-gray-200); margin-bottom: 0; font-size: 0.78rem; padding: 0.5rem 0.85rem; }
.media-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.page-btn { min-width: 40px; min-height: 40px; }
.download-item { flex-wrap: wrap; }
@media (min-width: 480px) {
.hero-actions { flex-direction: row; flex-wrap: wrap; }
.hero-actions .btn { width: auto; max-width: none; }
.key-figures-grid { grid-template-columns: repeat(2, 1fr); }
.topics-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-grid > .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
:root { --container-pad: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-2-1 { grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.grid-1-2 { grid-template-columns: 1fr 2fr; gap: 1.5rem; }
.gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.key-figures-grid { grid-template-columns: repeat(2, 1fr); }
.topics-grid { grid-template-columns: repeat(3, 1fr); }
.hero { min-height: 480px; }
.hero-content { padding: 3rem 0 4rem; }
.hero-title { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.hero-subtitle { font-size: 1rem; }
.section { padding: 3rem 0; }
.section-header { margin-bottom: 2rem; }
.about-home { gap: 2.5rem; }
.contact-home-grid { gap: 2.5rem; }
.leadership-quote { gap: 2rem; padding: 2rem; }
.logo-text-sub { display: block; }
.topbar-left a:not(:first-child) { display: inline-flex; }
.form-row { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-bottom { flex-direction: row; text-align: left; }
.pr-detail-header { flex-direction: row; }
.section-header-row { flex-direction: row; align-items: flex-end; }
.search-query-form { flex-direction: row; }
.search-result-item { flex-direction: row; }
.search-result-image { width: 120px; height: 80px; }
.org-level { flex-direction: row; }
}
@media (min-width: 900px) {
:root { --header-height: 72px; }
.main-nav { display: flex; }
.nav-toggle { display: none; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-grid { grid-template-columns: repeat(4, 1fr); }
.key-figures-grid { grid-template-columns: repeat(4, 1fr); }
.topics-grid { grid-template-columns: repeat(4, 1fr); }
.hero-stat-strip { display: block; }
.about-home { grid-template-columns: 1fr 1fr; gap: 4rem; }
.about-home-image { display: block; }
.contact-home-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
.leadership-quote { grid-template-columns: 300px 1fr; gap: 3rem; padding: 3rem; }
.layout-with-sidebar { grid-template-columns: 1fr 300px; gap: 2.5rem; }
[dir="rtl"] .layout-with-sidebar { grid-template-columns: 300px 1fr; }
.sidebar { display: flex; }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; }
.footer-grid > .footer-brand { grid-column: 1 / -1; }
.section { padding: var(--space-4xl) 0; }
.hero { min-height: 540px; }
.topbar { height: var(--topbar-height); padding: 0; }
.topbar .container { flex-wrap: nowrap; gap: 1rem; }
.media-tabs { flex-wrap: nowrap; border-bottom: 2px solid var(--color-gray-200); margin-bottom: 2rem; }
.media-tab { border-radius: 0; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.media-tab.active { background: none; border-bottom-color: var(--color-secondary); }
}
@media (min-width: 1100px) {
.footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 3rem; }
.footer-grid > .footer-brand { grid-column: auto; }
}
.mobile-nav {
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
bottom: 0;
background: var(--color-white);
z-index: 850;
overflow-y: auto;
transform: translateX(-110%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 4px 0 20px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
[dir="rtl"] .mobile-nav { transform: translateX(110%); left: auto; }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 2px solid var(--color-secondary);
background: linear-gradient(135deg, #450a2e 0%, #6d1049 100%);
color: white;
}
.mobile-nav-title {
font-size: 0.85rem;
font-weight: 700;
color: white;
opacity: 0.9;
}
.mobile-nav-list {
padding: 0.5rem 0;
flex: 1;
overflow-y: auto;
}
.mobile-nav-item {
border-bottom: 1px solid var(--color-gray-100);
}
.mobile-nav-link {
display: grid;
grid-template-columns: 44px 1fr;
grid-template-areas: "icon text";
align-items: center;
width: 100%;
min-height: 52px;
padding: 0;
font-size: 0.93rem;
font-weight: 500;
color: var(--color-gray-700);
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
[dir="rtl"] .mobile-nav-link {
grid-template-columns: 1fr 44px;
grid-template-areas: "text icon";
}
.mobile-nav-link:hover,
.mobile-nav-link:focus { background: var(--color-gray-50); color: var(--color-primary); }
.mobile-nav-link.active {
color: var(--color-primary);
font-weight: 700;
background: var(--color-accent);
border-left: 3px solid var(--color-secondary);
}
[dir="rtl"] .mobile-nav-link.active {
border-left: none;
border-right: 3px solid var(--color-secondary);
}
.mnav-icon {
grid-area: icon;
width: 44px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
flex-shrink: 0;
}
.mnav-icon i { font-size: 0.9rem; line-height: 1; }
.mnav-text {
grid-area: text;
display: flex;
align-items: center;
height: 52px;
padding: 0 0.75rem;
text-align: left;
line-height: 1.3;
}
[dir="rtl"] .mnav-text {
text-align: right;
justify-content: flex-end;
}
.mobile-submenu {
background: var(--color-gray-50);
display: none;
border-left: 3px solid var(--color-accent);
}
[dir="rtl"] .mobile-submenu {
border-left: none;
border-right: 3px solid var(--color-accent);
}
.mobile-submenu.open { display: block; }
.mobile-submenu a {
display: flex;
flex-direction: row;
align-items: center;
min-height: 44px;
padding: 0 1rem 0 3rem;
font-size: 0.87rem;
color: var(--color-gray-600);
border-bottom: 1px solid var(--color-gray-100);
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
gap: 0.6rem;
}
[dir="rtl"] .mobile-submenu a {
flex-direction: row-reverse;
padding: 0 3rem 0 1rem;
text-align: right;
}
.mobile-submenu a::before {
content: '›';
color: var(--color-secondary);
font-size: 1rem;
flex-shrink: 0;
}
[dir="rtl"] .mobile-submenu a::before { content: '‹'; }
.mnav-sub-text { flex: 1; }
[dir="rtl"] .mnav-sub-text { text-align: right; }
.mobile-submenu a:hover { background: white; color: var(--color-primary); }
.mobile-submenu a:last-child { border-bottom: none; }
.nav-toggle {
display: flex;
width: 42px;
height: 42px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: #ffffff;
border: 1.5px solid var(--color-gray-200);
border-radius: var(--radius-md);
cursor: pointer;
padding: 6px;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.nav-toggle:hover { border-color: var(--color-primary); background: var(--color-accent); }
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-primary);
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.nav-toggle.open { border-color: var(--color-secondary); background: var(--color-accent); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--color-secondary); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--color-secondary); }
.mobile-nav-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0);
z-index: 849;
display: none;
transition: background 0.3s;
}
.mobile-nav-overlay.open {
display: block;
background: rgba(0,0,0,0.4);
}
.contact-section-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 900px) {
.contact-section-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
[dir="rtl"] .topbar-left i { margin-right: 0; margin-left: 0.4rem; }
[dir="rtl"] .topbar-left { flex-direction: row-reverse; }
[dir="rtl"] .hero-content { text-align: right; }
[dir="rtl"] .hero-actions { flex-direction: row-reverse; }
[dir="rtl"] .hero-badge { flex-direction: row-reverse; }
[dir="rtl"] .section-header-row { flex-direction: row-reverse; }
[dir="rtl"] .article-card-meta { flex-direction: row-reverse; }
[dir="rtl"] .read-more { flex-direction: row-reverse; }
[dir="rtl"] .article-card-featured { direction: rtl; }
[dir="rtl"] .footer-grid { direction: rtl; }
[dir="rtl"] .footer-socials { flex-direction: row-reverse; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .footer-links a { flex-direction: row-reverse; }
[dir="rtl"] .pagination { flex-direction: row-reverse; }
[dir="rtl"] .back-to-top { right: auto; left: 2rem; }
[dir="rtl"] .mobile-nav { left: auto; right: 0; }
[dir="rtl"] .search-close { right: auto; left: 1.5rem; }
@media print {
.site-header, .topbar, .search-overlay, .back-to-top, .notice-banner,
.site-footer, .mobile-nav, .mobile-nav-overlay, .breadcrumb,
.share-bar, .nav-toggle { display: none !important; }
body { font-size: 12pt; }
.hero { min-height: auto; padding: 1rem 0; background: none; }
.hero-bg, .hero-overlay { display: none; }
.hero-title, .hero-subtitle { color: #000; }
.container { max-width: 100%; padding: 0; }
}
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
background: var(--color-primary);
color: white;
padding: 0.65rem 1.25rem;
border-radius: var(--radius-md);
z-index: 9999;
font-size: 0.85rem;
font-weight: 600;
transition: top 0.1s;
min-height: 44px;
display: flex;
align-items: center;
}
.skip-link:focus { top: 1rem; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease forwards; }
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-20px); }
to   { opacity: 1; transform: translateX(0); }
}
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-gray-400); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
.tag {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 600;
background: var(--color-rose-100) !important;
color: var(--color-primary) !important;
border: 1px solid var(--color-rose-300) !important;
}
.tag-orange { background: rgba(233,30,140,0.12) !important; color: var(--color-secondary) !important; }
:root {
--gradient-hero:    linear-gradient(135deg, #450a2e 0%, #6d1049 35%, #9b1d6a 65%, #b5287e 100%);
--gradient-primary: linear-gradient(135deg, #9b1d6a 0%, #c8177a 100%);
--gradient-accent:  linear-gradient(135deg, #f9c8e8 0%, #fce4f3 100%);
--gradient-warm:    linear-gradient(135deg, #e91e8c 0%, #f06ab5 100%);
--gradient-deep:    linear-gradient(135deg, #6d1049 0%, #9b1d6a 50%, #e91e8c 100%);
--gradient-soft:    linear-gradient(135deg, #fff0f8 0%, #fce4f3 100%);
--shadow-rose-sm:   0 2px 8px rgba(155,29,106,0.15);
--shadow-rose-md:   0 4px 16px rgba(155,29,106,0.25);
--shadow-rose-lg:   0 8px 32px rgba(155,29,106,0.30);
}
.topbar {
background: linear-gradient(90deg, #450a2e 0%, #6d1049 100%) !important;
}
.site-header {
background: #ffffff !important;
border-bottom: 3px solid var(--color-secondary);
border-image: none;
}
.site-header::after {
display: none;
}
.logo-text-main {
color: var(--color-primary);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
background-clip: unset;
}
.hero-overlay {
background: var(--gradient-hero) !important;
}
.hero-bg { opacity: 0.12; }
.hero-stat-strip {
background: linear-gradient(90deg, #9b1d6a 0%, #c8177a 50%, #e91e8c 100%) !important;
}
.section-dark {
background: var(--gradient-deep) !important;
}
.page-hero {
background: linear-gradient(135deg, #450a2e 0%, #6d1049 40%, #9b1d6a 75%, #b5287e 100%) !important;
position: relative;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 600px 300px at 80% 50%, rgba(233,30,140,0.15) 0%, transparent 70%),
radial-gradient(ellipse 400px 400px at 10% 80%, rgba(240,106,181,0.1) 0%, transparent 60%);
pointer-events: none;
}
.section-bg {
background: linear-gradient(135deg, #fff0f8 0%, #fce4f3 100%) !important;
}
.btn-primary {
background: linear-gradient(135deg, #e91e8c 0%, #c8177a 100%) !important;
border: none !important;
box-shadow: var(--shadow-rose-sm);
}
.btn-primary:hover {
background: linear-gradient(135deg, #f06ab5 0%, #e91e8c 100%) !important;
box-shadow: var(--shadow-rose-md);
transform: translateY(-2px);
}
.btn-outline-primary {
color: var(--color-primary) !important;
border: 2px solid var(--color-primary) !important;
}
.btn-outline-primary:hover {
background: linear-gradient(135deg, #9b1d6a, #e91e8c) !important;
border-color: transparent !important;
color: white !important;
}
.sidebar-widget-header {
background: linear-gradient(135deg, #6d1049 0%, #9b1d6a 100%) !important;
}
.section-label {
color: var(--color-secondary) !important;
}
.section-label::before,
.section-label::after {
background: linear-gradient(90deg, #e91e8c, #f06ab5) !important;
height: 3px;
border-radius: 2px;
}
.article-card:hover {
border-color: var(--color-rose-300) !important;
box-shadow: var(--shadow-rose-md) !important;
}
.article-card-category {
background: linear-gradient(135deg, #e91e8c, #b5287e) !important;
}
.article-card:hover .article-card-title {
color: var(--color-primary) !important;
}
.pr-card {
border-left-color: var(--color-primary) !important;
}
[dir="rtl"] .pr-card { border-right-color: var(--color-primary) !important; }
.pr-card-date {
background: linear-gradient(135deg, #fce4f3, #f9c8e8) !important;
}
.pr-card-date-day { color: var(--color-primary) !important; }
.notice-banner {
background: linear-gradient(90deg, #6d1049 0%, #9b1d6a 50%, #c8177a 100%) !important;
}
.topic-card:hover {
border-color: var(--color-rose-400) !important;
box-shadow: var(--shadow-rose-sm) !important;
}
.topic-icon {
background: linear-gradient(135deg, #fce4f3 0%, #f9c8e8 100%) !important;
color: var(--color-primary) !important;
}
.topic-card:hover .topic-icon {
background: linear-gradient(135deg, #9b1d6a 0%, #e91e8c 100%) !important;
color: white !important;
}
.key-figure-card {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(240,106,181,0.25) !important;
}
.key-figure-card:hover {
background: rgba(255,255,255,0.15) !important;
border-color: rgba(240,106,181,0.45) !important;
}
.key-figure-icon {
background: rgba(233,30,140,0.25) !important;
color: var(--color-rose-200) !important;
}
.leadership-quote {
border: 1px solid var(--color-rose-200) !important;
background: linear-gradient(135deg, #fff 0%, #fff0f8 100%) !important;
}
.quote-mark { color: var(--color-secondary) !important; }
.media-tab.active, .media-tab:hover {
color: var(--color-primary) !important;
border-bottom-color: var(--color-secondary) !important;
}
.gallery-item:hover .gallery-overlay {
background: linear-gradient(135deg, rgba(109,16,73,0.7) 0%, rgba(233,30,140,0.5) 100%) !important;
}
.download-btn {
background: linear-gradient(135deg, #9b1d6a, #c8177a) !important;
}
.download-btn:hover {
background: linear-gradient(135deg, #e91e8c, #f06ab5) !important;
}
.about-value-icon {
background: linear-gradient(135deg, #fce4f3, #f9c8e8) !important;
color: var(--color-primary) !important;
}
.about-home-badge {
background: linear-gradient(135deg, #e91e8c 0%, #9b1d6a 100%) !important;
}
.contact-info-icon {
background: linear-gradient(135deg, #fce4f3, #f9c8e8) !important;
color: var(--color-primary) !important;
}
.download-icon {
background: linear-gradient(135deg, #fce4f3, #f9c8e8) !important;
color: var(--color-primary) !important;
}
.page-btn.active {
background: linear-gradient(135deg, #9b1d6a, #e91e8c) !important;
border-color: transparent !important;
}
.page-btn:hover {
border-color: var(--color-primary) !important;
color: var(--color-primary) !important;
}
.org-node {
border-color: var(--color-primary) !important;
}
.org-node.top {
border-color: var(--color-secondary) !important;
background: linear-gradient(135deg, #fff0f8, #fce4f3) !important;
}
.org-node-title { color: var(--color-primary) !important; }
.member-function { color: var(--color-secondary) !important; }
.member-card:hover {
box-shadow: var(--shadow-rose-md) !important;
}
.affiliate-card:hover {
border-color: var(--color-primary) !important;
box-shadow: var(--shadow-rose-sm) !important;
}
.event-card-type.congress { background: linear-gradient(135deg, #9b1d6a, #6d1049) !important; }
.event-strip-item { border-left-color: var(--color-primary) !important; }
.upcoming-event-date { background: linear-gradient(135deg, #9b1d6a, #c8177a) !important; }
.pr-detail-date-block {
background: linear-gradient(135deg, #6d1049 0%, #9b1d6a 100%) !important;
}
.back-to-top {
background: linear-gradient(135deg, #9b1d6a, #e91e8c) !important;
box-shadow: var(--shadow-rose-md) !important;
}
.back-to-top:hover {
background: linear-gradient(135deg, #e91e8c, #f06ab5) !important;
}
.site-footer {
background: linear-gradient(135deg, #450a2e 0%, #6d1049 60%, #9b1d6a 100%) !important;
}
.footer-top {
border-bottom-color: rgba(240,106,181,0.15) !important;
}
.footer-links a::before { color: var(--color-rose-400) !important; }
.social-btn:hover {
background: linear-gradient(135deg, #e91e8c, #f06ab5) !important;
border-color: transparent !important;
}
.breadcrumb {
background: linear-gradient(90deg, #fff0f8, #fce4f3) !important;
border-bottom-color: var(--color-rose-200) !important;
}
.search-overlay {
background: rgba(69,10,46,0.95) !important;
}
.search-overlay-inner input:focus {
border-color: var(--color-secondary) !important;
box-shadow: 0 0 0 3px rgba(233,30,140,0.2) !important;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
border-color: var(--color-secondary) !important;
box-shadow: 0 0 0 3px rgba(233,30,140,0.15) !important;
}
.governance-card::before {
background: linear-gradient(180deg, #e91e8c, #9b1d6a) !important;
}
.governance-card-icon {
background: linear-gradient(135deg, #fce4f3, #f9c8e8) !important;
color: var(--color-primary) !important;
}
.skip-link {
background: linear-gradient(135deg, #9b1d6a, #e91e8c) !important;
}
.article-content blockquote {
border-left-color: var(--color-secondary) !important;
background: linear-gradient(135deg, #fff0f8, #fce4f3) !important;
}
[dir="rtl"] .article-content blockquote {
border-right-color: var(--color-secondary) !important;
border-left: none !important;
}
.nav-dropdown {
border-top-color: var(--color-secondary) !important;
}
.nav-dropdown a:hover {
color: var(--color-primary) !important;
background: linear-gradient(135deg, #fff0f8, #fce4f3) !important;
}
.category-filter-btn.active {
background: linear-gradient(135deg, #9b1d6a, #e91e8c) !important;
color: white !important;
border-color: transparent !important;
}
.section-title {
background: linear-gradient(135deg, #6d1049, #9b1d6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.section-dark .section-title {
background: none !important;
-webkit-text-fill-color: white !important;
color: white !important;
}
.article-detail-title {
background: linear-gradient(135deg, #6d1049, #9b1d6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pr-related-title,
.pr-detail-title {
background: linear-gradient(135deg, #6d1049, #9b1d6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tag {
background: var(--color-rose-100) !important;
color: var(--color-primary) !important;
border: 1px solid var(--color-rose-300) !important;
}
.tag-orange {
background: rgba(233,30,140,0.12) !important;
color: var(--color-secondary) !important;
}
.mobile-nav-logo {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: contain;
background: white;
padding: 3px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
flex-shrink: 0;
}
.mobile-nav-org {
font-size: 0.82rem;
font-weight: 700;
color: white;
line-height: 1.3;
max-width: 200px;
}
.mobile-nav-abbr {
font-size: 0.68rem;
color: rgba(255,255,255,0.65);
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.mobile-nav-footer {
padding: 1rem 1.5rem;
border-top: 2px solid var(--color-secondary);
background: var(--color-gray-50);
}
.mobile-nav-footer .lang-switcher {
display: flex;
gap: 0.75rem;
}
.mobile-nav-footer .lang-btn {
flex: 1;
text-align: center;
padding: 0.65rem 1rem;
min-height: 44px;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-weight: 600;
border: 1.5px solid var(--color-primary);
color: var(--color-primary);
background: white;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
transition: all var(--transition-fast);
}
.mobile-nav-footer .lang-btn.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.mobile-nav-footer .lang-btn:hover:not(.active) {
background: var(--color-accent);
}
@media (max-width: 360px) {
.logo-emblem { width: 44px; height: 44px; }
.logo-text-main { font-size: 0.9rem; }
.hero { min-height: 360px; }
.hero-title { font-size: clamp(1.3rem, 8vw, 1.7rem); }
.hero-content { padding: 1.75rem 0 2.5rem; }
.hero-badge { font-size: 0.65rem; padding: 0.25rem 0.6rem; }
.btn { padding: 0.65rem 1rem; font-size: 0.85rem; }
.article-card-body { padding: 0.85rem; }
.key-figure-card { padding: 1.25rem 0.75rem; }
.key-figure-value { font-size: 1.5rem; }
.footer-top { padding: 1.75rem 0 1.25rem; }
.social-btn { width: 38px; height: 38px; }
.upcoming-event-date { min-width: 56px; padding: 0.75rem 0.5rem; }
.upcoming-event-day { font-size: 1.4rem; }
.page-hero { padding: 1.75rem 0 1.5rem; }
.page-hero-title { font-size: 1.3rem; }
.pagination { gap: 0.2rem; }
.page-btn { width: 34px; height: 34px; font-size: 0.75rem; }
.pr-card { padding: 0.85rem; }
.affiliate-card { gap: 0.6rem; padding: 0.85rem; }
.affiliate-logo { width: 40px; height: 40px; }
.governance-card { padding: 1rem 1rem 1rem 1.25rem; }
}
@media (max-width: 480px) {
.hero { min-height: 390px; }
.hero-title { font-size: clamp(1.45rem, 6.5vw, 1.9rem); }
.hero-badge { font-size: 0.68rem; }
.article-card-body { padding: 1rem; }
.article-card-title { font-size: 0.92rem; }
.event-card-body { padding: 1rem; }
.pr-card { padding: 1rem; }
.pr-card-title { font-size: 0.88rem; }
.governance-card { padding: 1.1rem 1.1rem 1.1rem 1.4rem; }
.key-figure-card { padding: 1.5rem 1rem; }
.key-figure-value { font-size: 1.6rem; }
.footer-top { padding: 2rem 0 1.5rem; }
.social-btn { width: 40px; height: 40px; font-size: 0.9rem; }
.download-item { gap: 0.75rem; }
.download-icon { width: 40px; height: 40px; font-size: 1rem; }
.pagination { gap: 0.25rem; margin-top: 1.75rem; }
.page-btn { width: 36px; height: 36px; font-size: 0.78rem; }
.affiliate-card { gap: 0.75rem; padding: 1rem; }
.affiliate-logo { width: 44px; height: 44px; }
.member-info { padding: 1rem; }
.member-name { font-size: 0.9rem; }
.upcoming-event-body { padding: 0.75rem 1rem; }
.upcoming-event-day { font-size: 1.5rem; }
.upcoming-event-date { min-width: 62px; padding: 0.75rem 0.5rem; }
}
@media (max-width: 640px) {
.page-hero { padding: 2rem 0 1.75rem; }
.page-hero-title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
.page-hero-subtitle { font-size: 0.88rem; }
.org-level { gap: 0.75rem; }
.org-node { padding: 0.75rem 1rem; }
.org-node-title { font-size: 0.78rem; }
.search-result-item { gap: 0.75rem; padding: 1rem 0; }
.search-result-title { font-size: 0.9rem; }
.section-header-row .btn { align-self: flex-start; }
.leadership-photo { max-height: 280px; max-width: 240px; margin: 0 auto; }
.quote-text { font-size: 0.97rem; }
.upcoming-event-body { padding: 0.75rem 1rem; }
}
@media (max-width: 900px) {
.leadership-photo { max-height: 280px; max-width: 240px; margin: 0 auto; }
.quote-text { font-size: 0.97rem; }
}
.event-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-gray-200);
transition: all var(--transition-normal);
display: flex;
flex-direction: column;
}
.event-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-rose-md);
border-color: var(--color-rose-300);
}
.event-card-image {
position: relative;
aspect-ratio: 16/7;
overflow: hidden;
}
.event-card-image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.event-card:hover .event-card-image img { transform: scale(1.04); }
.event-card-type {
position: absolute;
top: 0.75rem; left: 0.75rem;
padding: 0.22rem 0.65rem;
border-radius: var(--radius-full);
font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
color: white;
background: rgba(155,29,106,0.85);
}
[dir="rtl"] .event-card-type { left: auto; right: 0.75rem; }
.event-card-type.congress   { background: linear-gradient(135deg,#9b1d6a,#6d1049); }
.event-card-type.training   { background: rgba(39,174,96,0.9); }
.event-card-type.seminar    { background: rgba(52,152,219,0.9); }
.event-card-date-badge {
position: absolute;
bottom: 0.75rem; right: 0.75rem;
background: white;
border-radius: var(--radius-md);
padding: 0.4rem 0.7rem;
text-align: center;
box-shadow: var(--shadow-md);
min-width: 48px;
}
[dir="rtl"] .event-card-date-badge { right: auto; left: 0.75rem; }
.event-card-date-day   { font-size: 1.2rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.event-card-date-month { font-size: 0.6rem; text-transform: uppercase; color: var(--color-gray-400); letter-spacing: 0.4px; }
.event-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.event-card-title {
font-size: 0.97rem; font-weight: 600;
color: var(--color-gray-800); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
transition: color var(--transition-fast);
}
.event-card:hover .event-card-title { color: var(--color-primary); }
.event-card-desc {
font-size: 0.82rem; color: var(--color-gray-500);
line-height: 1.55;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
flex: 1;
}
.event-card-meta {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.75rem; color: var(--color-gray-400);
}
.event-card-meta i { font-size: 0.7rem; color: var(--color-secondary); }
.upcoming-event-item {
display: flex;
align-items: stretch;
gap: 0;
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-gray-200);
transition: all var(--transition-normal);
}
.upcoming-event-item:hover {
box-shadow: var(--shadow-rose-sm);
border-color: var(--color-rose-200);
transform: translateX(4px);
}
[dir="rtl"] .upcoming-event-item:hover { transform: translateX(-4px); }
.upcoming-event-date {
min-width: 68px;
padding: 1rem 0.75rem;
background: linear-gradient(135deg, #9b1d6a, #c8177a);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-align: center;
}
.upcoming-event-day   { font-size: 1.6rem; font-weight: 800; color: white; line-height: 1; }
.upcoming-event-month { font-size: 0.62rem; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.2rem; }
.upcoming-event-body  { padding: 0.85rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.3rem; justify-content: center; }
.upcoming-event-title {
font-size: 0.88rem; font-weight: 600;
color: var(--color-gray-800); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; overflow: hidden;
}
.upcoming-event-location {
display: flex; align-items: center; gap: 0.35rem;
font-size: 0.72rem; color: var(--color-gray-400);
}
.upcoming-event-location i { font-size: 0.65rem; color: var(--color-secondary); }
.upcoming-event-type {
display: inline-block;
padding: 0.12rem 0.5rem;
border-radius: var(--radius-full);
font-size: 0.62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
background: var(--color-accent);
color: var(--color-primary);
align-self: flex-start;
}
.upcoming-event-type.congress  { background: rgba(155,29,106,0.12); color: var(--color-primary); }
.upcoming-event-type.training  { background: rgba(39,174,96,0.12); color: #1a7a42; }
.upcoming-event-type.seminar   { background: rgba(52,152,219,0.12); color: #1a6fa0; }
.governance-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 1.5rem 1.5rem 1.5rem 2rem;
border: 1px solid var(--color-gray-200);
border-left: 4px solid var(--color-secondary);
position: relative;
transition: all var(--transition-normal);
overflow: hidden;
}
[dir="rtl"] .governance-card {
padding: 1.5rem 2rem 1.5rem 1.5rem;
border-left: 1px solid var(--color-gray-200);
border-right: 4px solid var(--color-secondary);
}
.governance-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.governance-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: linear-gradient(180deg, #e91e8c, #9b1d6a);
}
[dir="rtl"] .governance-card::before { left: auto; right: 0; }
.governance-card-icon {
width: 48px; height: 48px;
background: linear-gradient(135deg, #fce4f3, #f9c8e8);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--color-primary);
font-size: 1.1rem;
margin-bottom: 1rem;
}
.governance-card-title {
font-size: 1rem; font-weight: 700;
color: var(--color-primary); margin-bottom: 0.5rem;
}
.governance-card-text { font-size: 0.85rem; color: var(--color-gray-600); line-height: 1.65; }
.pr-detail-header {
display: flex; align-items: flex-start;
gap: 1.5rem;
background: var(--color-white);
border-radius: var(--radius-lg);
padding: 2rem;
border: 1px solid var(--color-gray-200);
box-shadow: var(--shadow-sm);
margin-bottom: 2rem;
}
.pr-detail-date-block {
min-width: 80px;
padding: 1rem;
background: linear-gradient(135deg, #6d1049 0%, #9b1d6a 100%);
border-radius: var(--radius-md);
text-align: center;
flex-shrink: 0;
}
.pr-detail-date-day   { font-size: 1.8rem; font-weight: 800; color: white; line-height: 1; }
.pr-detail-date-month { font-size: 0.72rem; color: rgba(255,255,255,0.8); text-transform: uppercase; }
.pr-detail-date-year  { font-size: 0.65rem; color: rgba(255,255,255,0.65); margin-top: 0.2rem; }
.pr-detail-meta { flex: 1; }
.pr-detail-title {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2.5vw, 1.75rem);
font-weight: 700; line-height: 1.3;
margin-bottom: 0.75rem;
background: linear-gradient(135deg, #6d1049, #9b1d6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[dir="rtl"] .pr-detail-title { font-family: var(--font-arabic); }
.pr-detail-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.training-card {
background: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-gray-200);
transition: all var(--transition-normal);
display: flex; flex-direction: column;
}
.training-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-rose-md);
border-color: var(--color-rose-300);
}
.training-card-header {
padding: 1.5rem;
background: linear-gradient(135deg, #fff0f8, #fce4f3);
border-bottom: 1px solid var(--color-rose-200);
display: flex; align-items: flex-start; gap: 1rem;
}
.training-card-icon {
width: 52px; height: 52px;
background: linear-gradient(135deg, #9b1d6a, #c8177a);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: white; font-size: 1.2rem; flex-shrink: 0;
}
.training-card-title {
font-size: 0.97rem; font-weight: 700;
color: var(--color-primary); line-height: 1.35;
}
.training-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.training-card-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.training-card-meta span {
display: flex; align-items: center; gap: 0.35rem;
font-size: 0.75rem; color: var(--color-gray-500);
}
.training-card-meta i { font-size: 0.68rem; color: var(--color-secondary); }
.training-card-desc {
font-size: 0.83rem; color: var(--color-gray-600);
line-height: 1.55;
display: -webkit-box; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden;
flex: 1;
}
.training-card-footer {
padding: 1rem 1.25rem;
border-top: 1px solid var(--color-gray-100);
display: flex; align-items: center; justify-content: space-between;
}
.training-status {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
}
.training-status.open      { background: rgba(39,174,96,0.12); color: #1a7a42; }
.training-status.full      { background: rgba(192,57,43,0.12); color: var(--color-danger); }
.training-status.upcoming  { background: rgba(243,156,18,0.12); color: #c07f0a; }
.mobile-nav-close {
background: rgba(255,255,255,0.15);
border: 1.5px solid rgba(255,255,255,0.3);
color: white;
width: 36px; height: 36px;
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 0.95rem;
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
margin-left: auto;
}
.mobile-nav-close:hover {
background: rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.6);
}
.mobile-nav-accordion { position: relative; }
.mobile-nav-toggle-sub {
width: 100%;
background: none;
border: none;
cursor: pointer;
display: grid;
grid-template-columns: 44px 1fr 36px;
grid-template-areas: "icon text chev";
align-items: center;
min-height: 52px;
padding: 0;
font-size: 0.93rem;
font-weight: 500;
color: var(--color-gray-700);
transition: background var(--transition-fast), color var(--transition-fast);
text-align: left;
}
[dir="rtl"] .mobile-nav-toggle-sub {
grid-template-columns: 36px 1fr 44px;
grid-template-areas: "chev text icon";
text-align: right;
}
.mobile-nav-toggle-sub:hover,
.mobile-nav-toggle-sub:focus {
background: var(--color-gray-50);
color: var(--color-primary);
}
.mobile-nav-toggle-sub .mnav-icon {
grid-area: icon;
width: 44px;
height: 52px;
}
.mobile-nav-toggle-sub .mnav-text {
grid-area: text;
height: 52px;
padding: 0 0.5rem;
}
[dir="rtl"] .mobile-nav-toggle-sub .mnav-text {
justify-content: flex-end;
}
.mnav-chevron {
grid-area: chev;
width: 36px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-400);
flex-shrink: 0;
}
.mobile-nav-chevron {
font-size: 0.62rem;
transition: transform var(--transition-fast);
}
.mobile-nav-toggle-sub.sub-open .mnav-chevron { color: var(--color-secondary); }
.mobile-nav-toggle-sub.sub-open .mobile-nav-chevron { transform: rotate(180deg); }
.mobile-nav {
max-width: 380px;
}
@media (max-width: 480px) {
.mobile-nav { max-width: 100%; right: 0; }
}
.mobile-nav-link > i:first-child,
.mobile-nav-link span > i:first-child {
font-size: 0.9rem;
line-height: 1;
color: var(--color-secondary);
}
.mobile-nav-header {
gap: 0.85rem;
}
.site-header { position: relative; }
.notice-banner a {
color: white;
font-weight: 700;
text-decoration: underline;
}
.notice-banner a:hover { color: var(--color-rose-200); }
@media (min-width: 640px) {
.article-card-featured {
grid-template-columns: 1fr 1fr;
min-height: 280px;
}
.article-card-featured .article-card-image {
min-height: 280px;
}
}
@media (min-width: 900px) {
.article-card-featured {
grid-template-columns: 1.4fr 1fr;
}
}
@media (min-width: 640px) {
.grid-1-2 { grid-template-columns: 1fr 1.5fr; gap: 1.5rem; }
}
@media (min-width: 900px) {
.grid-1-2 { grid-template-columns: 1fr 2fr; gap: 2rem; }
}
.sidebar-widget {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-gray-200);
margin-bottom: 1.5rem;
}
.sidebar-widget-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.25rem;
font-size: 0.85rem;
font-weight: 700;
color: white;
background: linear-gradient(135deg, #6d1049 0%, #9b1d6a 100%);
}
.sidebar-widget-body {
padding: 1rem;
background: white;
}
.sidebar-news-item {
gap: 0.75rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--color-gray-100);
}
.sidebar-news-item:last-child { border-bottom: none; }
.sidebar-news-thumb {
width: 60px;
height: 48px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.sidebar-news-title {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-gray-700);
line-height: 1.35;
margin-bottom: 0.2rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sidebar-news-date {
font-size: 0.7rem;
color: var(--color-gray-400);
}
.category-filter-list {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.category-filter-btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.82rem;
color: var(--color-gray-600);
background: none;
border: 1px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
}
.category-filter-btn:hover,
.category-filter-btn.active {
background: var(--color-accent);
color: var(--color-primary);
border-color: var(--color-rose-200);
font-weight: 600;
}
.category-count {
font-size: 0.7rem;
background: var(--color-gray-100);
color: var(--color-gray-500);
padding: 0.1rem 0.4rem;
border-radius: var(--radius-full);
min-width: 20px;
text-align: center;
}
.category-filter-btn.active .category-count {
background: var(--color-rose-200);
color: var(--color-primary);
}