/* CSS Variables - Will be overridden by inline style in head */:root{ --primary-color:#1e3a8a; --secondary-color:#000000; --gradient-start:#1e3a8a; --gradient-end:#000000; --heading-color:#ffffff; --text-color:#e5e7eb; --link-color:#60a5fa; --button-color:#1e3a8a; --h1-size:48px; --h2-size:36px; --h3-size:28px; --h4-size:24px; --p-size:16px; --span-size:14px; --site-header-height:72px;}/* Reset */*{ margin:0; padding:0; box-sizing:border-box;}/* Base Styles */html{ font-size:16px; scroll-behavior:smooth; scroll-padding-top:80px; overflow-x:hidden;}body{ font-family:'Tajawal', sans-serif; background:linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); background-attachment:fixed; color:var(--text-color); line-height:1.8; direction:rtl; text-align:right; overflow-x:hidden; display:flex; flex-direction:column; min-height:100vh;}body.en{ font-family:'Raleway', sans-serif; direction:ltr; text-align:left;}/* Typography */h1{ font-size:var(--h1-size); color:var(--heading-color); font-weight:800; margin-bottom:1rem;}h2{ font-size:var(--h2-size); color:var(--heading-color); font-weight:700; margin-bottom:1rem;}h3{ font-size:var(--h3-size); color:var(--heading-color); font-weight:600; margin-bottom:0.8rem;}h4{ font-size:var(--h4-size); color:var(--heading-color); font-weight:600; margin-bottom:0.6rem;}p{ font-size:var(--p-size); margin-bottom:1rem;}/* Lists inside content areas */.container ul, .container ol{ padding-inline-start:1.5em; margin-bottom:1rem;}.container li{ margin-bottom:0.35rem;}span{ font-size:var(--span-size);}a{ color:var(--link-color); text-decoration:none; transition:all 0.3s ease;}a:hover{ opacity:0.8;}/* Container */.container{ max-width:var(--container-width); margin:0 auto; padding:0 20px; overflow-x:hidden; width:100%;}.full-width{ width:100%;}/* Header */header{ background:rgba(0, 0, 0, 0.8); backdrop-filter:blur(10px); padding:1rem 0; position:sticky; top:0; z-index:1000; border-bottom:1px solid rgba(255, 255, 255, 0.1);}.header-content{ display:flex; justify-content:space-between; align-items:center;}.logo{ font-size:1.8rem; font-weight:800; color:var(--heading-color);}nav ul{ list-style:none; display:flex; gap:1rem; align-items:center;}nav a{ color:var(--text-color); font-weight:500; padding:0.5rem 1rem; border-radius:8px; transition:all 0.3s ease;}nav a:hover,nav a.active{ background:var(--primary-color); color:#fff;}.lang-switcher{ padding:0.5rem 1rem; background:rgba(255, 255, 255, 0.1); border-radius:8px; cursor:pointer;}/* Hero Section */.hero{ padding:4rem 0; min-height:500px;}.hero-content{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}.hero-content-centered{ grid-template-columns:1fr; justify-items:center;}.hero-text h1{ font-size:var(--h1-size); margin-bottom:1rem;}.hero-text .subtitle{ font-size:1.3rem; color:var(--link-color); margin-bottom:1.5rem;}.hero-image{ text-align:center; padding:20px;/* Prevent shadow cropping */}.hero-image amp-img{ border-radius:20px; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3);}.hero-image.image-frame-light_shadow amp-img{ box-shadow:0 10px 40px rgba(255, 255, 255, 0.3);}.hero-image.image-frame-black_shadow amp-img{ box-shadow:0 10px 40px rgba(0, 0, 0, 0.5);}/* Two Column Layout */.two-column{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; margin:3rem 0;}/* Alignment Logic for Two Column Layout *//* Arabic (RTL) Defaults:Content is Right, Image is Left *//* Left Alignment -> Content Left (Swap) */body:not(.en) .two-column.align-left >:first-child{order:2}body:not(.en) .two-column.align-left >:last-child{order:1}/* English (LTR) Defaults:Content is Left, Image is Right *//* Left Alignment -> Content Right (Swap) *//* Right Alignment -> Content Left (Default - No rule needed) */body.en .two-column.align-left >:first-child{order:2}body.en .two-column.align-left >:last-child{order:1}/* Content Section */.content-section{ padding:4rem 0; overflow-x:hidden;}.content-section.center{ text-align:center;}.page-content{ max-width:900px; margin:2rem auto; text-align:right; line-height:1.8;}body.en .page-content{ text-align:left;}.page-content h3{ font-size:var(--h3-size); margin-top:2rem; margin-bottom:1rem; color:var(--heading-color);}.page-content p{ margin-bottom:1.2rem; font-size:1.05rem;}.page-content ul{ margin:1rem 0 1.5rem 2rem; padding-right:1rem;}body.en .page-content ul{ padding-right:0; padding-left:1rem;}.page-content li{ margin-bottom:0.6rem; line-height:1.6;}.section-title{ font-size:var(--h2-size); margin-bottom:1rem;}.section-subtitle{ font-size:1.2rem; color:var(--link-color); margin-bottom:2rem;}/* Buttons */.btn{ display:inline-block; padding:0.8rem 2rem; background:var(--button-color); color:#fff; border-radius:10px; font-weight:600; font-family:inherit; border:none; cursor:pointer; transition:all 0.3s ease;}.btn:hover{ transform:translateY(-2px); box-shadow:0 5px 20px rgba(0, 0, 0, 0.3); opacity:1; color:#fff;}.btn-secondary{ background:transparent; border:2px solid var(--button-color); color:var(--button-color);}.btn-secondary:hover{ background:var(--button-color); color:#fff;}/* Sticky footer:main grows to fill viewport */main{ flex:1;}/* Footer */footer{ background:var(--footer-background, rgba(0, 0, 0, 0.8)); padding:3rem 0 1.5rem; margin-top:4rem; border-top:1px solid rgba(255, 255, 255, 0.1);}.footer-menu{ text-align:center; margin-bottom:2rem;}.footer-menu a{ margin:0 1rem; color:var(--footer-link, var(--text-color));}.footer-menu a:hover{ color:var(--link-color);}.footer-copyright{ text-align:center; color:var(--footer-text, rgba(255, 255, 255, 0.5)); font-size:0.9rem;}/* Pagination */.pagination{ display:flex; justify-content:center; gap:0.5rem; margin:2rem 0;}.pagination a,.pagination span{ padding:0.5rem 1rem; background:rgba(255, 255, 255, 0.1); border-radius:8px; color:var(--text-color);}.pagination a:hover,.pagination span.active{ background:var(--primary-color); color:#fff;}/* Responsive */@media (max-width:768px){ .hero-content, .two-column{ grid-template-columns:1fr; text-align:center;} nav ul{ flex-direction:column; gap:1rem;} h1{ font-size:calc(var(--h1-size) * 0.7);} h2{ font-size:calc(var(--h2-size) * 0.8);}}/* Burger Menu & Sidebar Styles */.burger-menu{ display:none; background:none; border:none; color:var(--heading-color); cursor:pointer; padding:5px; z-index:1001;}amp-sidebar{ background:rgba(0, 0, 0, 0.95); width:280px; padding:2rem; backdrop-filter:blur(10px);}.sidebar-header{ display:flex; justify-content:flex-end; margin-bottom:2rem;}.sidebar-close{ background:none; border:none; color:var(--heading-color); font-size:1.5rem; cursor:pointer; padding:5px;}.sidebar-nav ul{ list-style:none; display:flex; flex-direction:column; gap:1.5rem;}.sidebar-nav a{ color:var(--text-color); font-size:1.1rem; font-weight:500; display:block; padding:10px 20px; border-radius:8px; transition:all 0.3s ease;}.sidebar-nav a:hover,.sidebar-nav a.active{ color:#ffffff; background:var(--primary-color);}@media (max-width:768px){ .burger-menu{ display:block; position:absolute; top:50%; transform:translateY(-50%); right:0;} body.en .burger-menu{ right:auto; left:0;} /* Hide regular nav on mobile */ header nav{ display:none;} /* Adjust header layout for mobile */ .header-content{ justify-content:center; position:relative; min-height:40px;}}/* Utility Classes */.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mb-3{margin-bottom:3rem}.text-center{text-align:center}/* Object Fit for Images */.cover-image img{ object-fit:cover;}/* Single Post Featured Image Styling */.post .cover-image,.content-section .cover-image{ border-radius:20px; box-shadow:0 20px 50px rgba(0, 0, 0, 0.4); margin-bottom:2rem; border:1px solid rgba(255, 255, 255, 0.1);}/* Breadcrumb Navigation */.breadcrumb{ background:rgba(255, 255, 255, 0.05); padding:12px 15px; margin-bottom:25px; border-radius:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;}.breadcrumb::-webkit-scrollbar{ height:4px;}.breadcrumb::-webkit-scrollbar-track{ background:rgba(255, 255, 255, 0.05);}.breadcrumb::-webkit-scrollbar-thumb{ background:rgba(255, 255, 255, 0.2); border-radius:2px;}.breadcrumb-list{ list-style:none; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px; padding:0; margin:0;}.breadcrumb-item{ display:flex; align-items:center; gap:8px; flex-shrink:0; white-space:nowrap;}.breadcrumb-item a{ color:var(--link-color); transition:all 0.3s ease; font-size:14px; white-space:nowrap;}.breadcrumb-item a:hover{ color:var(--heading-color); text-decoration:underline;}.breadcrumb-item.active{ color:var(--heading-color); font-weight:500; font-size:14px; white-space:nowrap;}.breadcrumb-separator{ color:rgba(255, 255, 255, 0.4); font-size:12px; flex-shrink:0;}body.en .breadcrumb-separator::before{ content:'/'; padding:0 2px;}body:not(.en) .breadcrumb-separator::before{ content:'/'; padding:0 2px;}/* Page Views Counter */.page-views-counter{ margin-bottom:20px;}/* Page Views Badge */.page-views-badge{ background:rgba(255, 255, 255, 0.1); backdrop-filter:blur(10px); padding:8px 16px; border-radius:20px; display:inline-flex; align-items:center; gap:8px; color:var(--heading-color); font-size:14px; font-weight:500; border:1px solid rgba(255, 255, 255, 0.2);}/* RTL:Right aligned for Arabic */[dir="rtl"] .page-views-counter{ text-align:right;}/* LTR:Left aligned for English */[dir="ltr"] .page-views-counter{ text-align:left;}.page-views-label{ color:var(--text-color); font-size:14px; font-weight:500;}.page-views-number{ color:var(--heading-color); font-size:15px; font-weight:700;}.page-views-badge svg{ flex-shrink:0; opacity:0.9; width:16px; height:16px;}.page-views-badge span{ font-size:14px; line-height:1;}@media (max-width:768px){ .breadcrumb{ padding:10px 12px; margin-bottom:20px; overflow-x:auto;} .breadcrumb-list{ gap:6px; display:flex;} .breadcrumb-item a{ font-size:13px;} .breadcrumb-item.active{ font-size:13px;} .breadcrumb-separator{ font-size:11px;}}@media (max-width:480px){ .breadcrumb{ padding:8px 10px; margin-bottom:15px; overflow-x:auto;} .breadcrumb-list{ gap:5px; display:flex;} .breadcrumb-item a{ font-size:12px;} .breadcrumb-item.active{ font-size:12px;} .breadcrumb-separator{ font-size:10px;}}/* Image Frame Styles — specificity must beat .content-section amp-img:not(...)x3 */.hero-image.image-frame-frameless amp-img,.hero-image.image-frame-frameless amp-img img,.content-section .hero-image.image-frame-frameless amp-img:not(.force-frame):not(.force-frame2):not(.force-frame3){ border-radius:0; box-shadow:none; border:none;}/* Events Calendar moved to events.css *//* Events Page Styles moved to events.css *//* Ensure all sections have relative positioning to contain absolute special effects */section,.hero,.content-section,.separator-section,.animated-text-section,.info-boxes-section,.image-slider-section,.image-carousel-section,.faq-section,.video-section{ position:relative; z-index:1;/* Establish stacking context */}/* Ensure content is above special effects */.hero-content,.container,.content-section .container,.animated-text-section .container{ position:relative; z-index:2;}/* FIX:Ensure all sections have relative positioning so absolute effects stay inside */.hero,.hero2,.content-section,.image-carousel,.events-section,.news-section,.contact-section,section{ position:relative; z-index:1;}/* Ensure content sits above the effects */.container,.hero-content,.section-content{ position:relative; z-index:2;}/* FIX:Clip background effects */.hero,.hero2,.content-section,.image-carousel,.events-section,.news-section,.contact-section,section{ overflow:hidden;}/* Image Shadow Styles */.content-section amp-img{ overflow:hidden;/* Ensure image respects border radius */ transition:box-shadow 0.3s ease;}/* Default Shadow (strong dark) - Excluding icons */.content-section amp-img:not([class*="shadow-"]):not(.info-box-icon):not(.split-card-img){ box-shadow:0 10px 30px rgba(0, 0, 0, 0.3); border-radius:12px;}/* Specific Shadow Classes */.content-section amp-img.shadow-default{ box-shadow:0 10px 30px rgba(0, 0, 0, 0.3); border-radius:12px;}.content-section amp-img.shadow-light{ box-shadow:0 10px 30px rgba(255, 255, 255, 0.2); border-radius:12px;}.content-section amp-img.shadow-black{ box-shadow:0 10px 30px rgba(0, 0, 0, 0.6); border-radius:12px;}.content-section amp-img.shadow-none{ box-shadow:none; border-radius:0;}/* ── 404 / Error page ─────────────────────────────────────────────────────── */.error-page-wrap{ text-align:center; padding:60px 16px 40px; max-width:480px; margin:0 auto;}.error-page-icon{ margin-bottom:24px; opacity:0.85;}.error-page-code{ font-size:72px; font-weight:800; color:#1a1a2e; margin:0 0 8px; line-height:1;}.error-page-title{ font-size:24px; font-weight:700; color:#1a1a2e; margin:0 0 12px;}.error-page-desc{ font-size:15px; color:#777; line-height:1.7; margin:0 0 28px;}.error-page-btn{ display:inline-block; background:#1a1a2e; color:#fff; font-size:15px; font-weight:600; padding:14px 36px; border-radius:10px; text-decoration:none; transition:background 0.2s;}.error-page-btn:hover{ background:#2d2d48;}