/* =====================================================
   DESIGN TOKENS (HOME SYSTEM)
===================================================== */
:root {
  /* Brand Colors */
  --primary: #44A8C6;
  --primary-dark: #2D90AE;
  --primary-soft: #A8D7E7;

  /* Text */
  --ink: #0f172a;
  --ink-soft: #475569;

  /* Backgrounds */
  --bg-main: #F0F6FB;
  --bg-soft: #E4EEF6;

  /* Gradients (final values only) */
  --bg-grad-1: #9ca3af;
  --bg-grad-2: #D6ECF5;

  /* UI */
  --card-bg: #ffffff;
  --border-soft: #e5e7eb;
}

/* =====================================================
   RESET & BASE
===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg-main);
  line-height: 1.75;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =====================================================
   LAYOUT HELPERS
===================================================== */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 95px 0;
}

/* =====================================================
   HEADER / NAVBAR
===================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);

  padding: 10px 0;
}

.header-inner {
  height: 85px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ---------- LOGO ---------- */
.logo a {
  display: flex;
  align-items: center;
  gap: 18px;

  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;

  color: var(--ink);
}

.logo img {
  height: 75px;
  width: auto;
}

.logo-text-small {
  display: block;
  margin-top: 2px;

  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;

  color: var(--ink-soft);
}

/* ---------- NAV LINKS ---------- */
.main-nav {
  display: flex;
  gap: 25px;
}

.main-nav a {
  position: relative;

  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--primary);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;

  width: 0;
  height: 3px;
  background: var(--primary);

  transition: width 0.18s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

/* =====================================================
   HERO (ABOUT STYLE)
===================================================== */
.about-hero {
  margin-top: 80px;
  padding: 90px 0 80px;

  background: linear-gradient(
    135deg,
    var(--bg-grad-1),
    var(--bg-grad-2)
  );
}

.about-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.about-hero h1 {
  font-family: "Poppins", sans-serif;
  font-size: 2.7rem;
  font-weight: 800;
  margin: 0 0 12px;

  color: #0b172a;
}

.about-hero .section-accent {
  margin: 14px auto 22px;
}

.about-hero p {
  max-width: 760px;
  margin: 0 auto;

  font-size: 1.08rem;
  color: rgba(15, 23, 42, 0.75);
}

/* =====================================================
   SECTION HEADERS
===================================================== */
.section-header.center-header {
  max-width: 820px;
  margin: 0 auto 60px;
  text-align: center;
}

.section-header h2 {
  font-family: "Poppins", sans-serif;
  font-size: 2.35rem;
  font-weight: 800;
  margin: 0 0 12px;

  color: #0b172a;
}

.section-accent {
  width: 70px;
  height: 4px;

  background: #38bdf8;
  border-radius: 999px;

  margin: 16px auto 24px;
}

.section-header p {
  max-width: 760px;
  margin: 0 auto;

  font-size: 1.06rem;
  line-height: 1.85;
  color: rgba(15, 23, 42, 0.7);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 960px) {
  .main-nav {
    display: none;
  }

  .logo img {
    height: 56px;
  }
}

@media (max-width: 520px) {
  .about-hero h1 {
    font-size: 2.1rem;
  }

  .section-header h2 {
    font-size: 2rem;
  }
}

/* =====================================================
   SECTION HEADERS (HOME-STYLE: CENTER + STRIPE + TEXT UNDER)
===================================================== */
.section-header.center-header{
  text-align:center;
  max-width:820px;
  margin:0 auto 60px;
}

.section-header h2{
  font-family:"Poppins",sans-serif;
  font-size:2.35rem;
  font-weight:800;
  margin:0 0 12px;
  color:#0b172a;
}

.section-accent{
  width:70px;
  height:4px;
  background:#38bdf8;
  border-radius:999px;
  margin:16px auto 24px; /* ✅ centered by default */
}

.section-header p{
  margin:0 auto;
  max-width:760px;
  font-size:1.06rem;
  line-height:1.85;
  color:rgba(15,23,42,0.70);
}

/* =====================================================
   BACKGROUND SECTIONS (SAME SHADES AS HOME)
===================================================== */
.about-section{ background:var(--bg-main); }
.organiser-section{ background:var(--bg-soft); }
.why-libya{ background:var(--bg-main); }

/* =====================================================
   ABOUT TEXT + IMAGE (IMAGE HAS FRAME)
===================================================== */
.about-inner{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:60px;
  align-items:center;
}

.about-text p{
  font-size:1.02rem;
  color:rgba(15,23,42,0.72);
  margin:0 0 14px;
}

/* ✅ Frame for ALL images */
.frame{
  background:#0b172a;
  padding:16px;
  border-radius:22px;
  box-shadow:
    0 30px 60px rgba(15,23,42,0.35),
    0 10px 25px rgba(15,23,42,0.20);
}

.frame img,
.frame video{
  width:100%;
  height:auto;
  border-radius:16px;
  display:block;
}

/* =====================================================
   ORGANISERS — TWO LOGOS IN SAME FRAME
   ✅ SAME SIZE + BIGGER (YOU ASKED)
===================================================== */
.split-cover{
  background:#0b2540;
  border-radius:24px;
  padding:16px;
  box-shadow:0 30px 60px rgba(0,0,0,0.25);
  overflow:hidden;
}

/* ✅ Bigger cover */
.split-cover .logos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  height:320px;           /* ✅ bigger */
}

.split-cover .logos img{
  width:100%;
  height:100%;
  object-fit:contain;     /* ✅ same sizing behavior */
  background:#ffffff;
  padding:22px;           /* ✅ more presence */
}

.split-cover .logos img:first-child{ border-radius:16px 0 0 16px; }
.split-cover .logos img:last-child{ border-radius:0 16px 16px 0; }

.split-cover .cover-meta{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}

.split-cover .cover-meta span{
  font-size:0.78rem;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  color:#eaf6ff;
}

/* =====================================================
   WHY LIBYA LAYOUT
   ✅ Stats under writing, left, 2 فوق 2, elegant blue
===================================================== */
.why-libya__grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:50px 60px;
  align-items:start;
}

.why-libya__text h2{
  margin:0 0 10px;
  font-size:2.35rem;
  font-weight:800;
  font-family:"Poppins",sans-serif;
}

.why-libya__text .section-accent{
  margin:14px 0 22px; /* ✅ left stripe if used here */
}

.why-libya__text p{
  margin:0 0 16px;
  font-size:1.05rem;
  color:rgba(15,23,42,0.72);
}

/* ✅ STATS: 2x2, under text, left, classy */
.why-libya__stats{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)); /* ✅ 2 فوق 2 */
  gap:14px;
  max-width:520px; /* keeps it tidy under the text */
}

/* Individual stat card */
.why-stat{
  background:linear-gradient(135deg, #e9f6ff, #d7effb); /* ✅ elegant blue */
  border:1px solid rgba(68,168,198,0.30);
  border-radius:16px;
  padding:16px 16px 14px;
  box-shadow:0 10px 26px rgba(15,23,42,0.08);
}

.why-stat .value{
  font-family:"Poppins",sans-serif;
  font-weight:800;
  font-size:1.6rem;
  line-height:1.1;
  color:#0b2a44;
}

.why-stat .label{
  margin-top:6px;
  font-size:0.92rem;
  color:rgba(15,23,42,0.72);
  line-height:1.35;
}

/* Image on the right with frame */
.why-libya__image{
  background:#000;
  padding:14px;
  border-radius:24px;
  box-shadow:0 30px 60px rgba(0,0,0,0.30);
}

.why-libya__image img,
.why-libya__image video{
  border-radius:18px;
}

/* =====================================================
   BUTTONS (HOME STYLE)
===================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 34px;
  border-radius:999px;
  font-size:0.98rem;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

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

.btn-primary:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(15,23,42,0.18);
}

/* =====================================================
   CTA FULL-WIDTH (HOME LOOK)
===================================================== */
.cta-strip-full{
  width:100vw;
  margin-left:-50vw;
  left:50%;
  position:relative;
  background:linear-gradient(135deg,#0b172a,#12325a);
  padding:90px 20px;
}

.cta-content{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  color:#fff;
}

.cta-content h2{
  font-family:"Poppins",sans-serif;
  font-size:2.4rem;
  font-weight:800;
  margin:0 0 12px;
}

.cta-line{
  width:64px;
  height:3px;
  background:#6fd3f5;
  margin:16px auto 26px;
  border-radius:2px;
}

.cta-content p{
  max-width:760px;
  margin:0 auto 28px;
  color:#d1d5db;
  font-size:1.03rem;
  line-height:1.8;
}

.cta-btn{
  display:inline-block;
  padding:14px 40px;
  background:#4fbad3;
  color:#fff;
  border-radius:999px;
  font-weight:700;
}

.cta-btn:hover{ background:#3aa7c2; }

/* =====================================================
   FOOTER FULL WIDTH
===================================================== */
.site-footer-full{
  width:100vw;
  margin-left:-50vw;
  left:50%;
  position:relative;
  background:#374151;
  color:#e5e7eb;
  padding:40px 20px;
}

.site-footer-full .footer-inner{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  font-size:0.92rem;
}

.site-footer-full .footer-credit{
  margin-top:6px;
  opacity:0.85;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 960px){
  .main-nav{ display:none; }

  .about-inner,
  .why-libya__grid{
    grid-template-columns:1fr;
  }

  .why-libya__stats{
    max-width:100%;
  }

  .logo img{ height:56px; }
}

@media (max-width: 520px){
  .about-hero h1{ font-size:2.1rem; }
  .section-header h2{ font-size:2.0rem; }

  .split-cover .logos{
    height:260px; /* still big on mobile */
  }
}
/* =====================================================
   ABOUT PAGE – FINAL ALIGNMENT & FRAMING FIX
   (PASTE AT VERY END OF about.css)
===================================================== */

/* -------------------------------
   1) FORCE CENTERED HEADLINES + STRIPES + TEXT
-------------------------------- */

/* Any section header */
.section-header,
.section-header * {
  text-align: center !important;
}

/* All H1 / H2 inside About page sections */
.about-hero h1,
.section h2 {
  text-align: center !important;
}

/* Force stripes to center */
.section-accent {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Paragraphs under headlines */
.section-header p,
.about-hero p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 780px;
}

/* About text blocks that contain headers */
.about-text h2,
.about-text p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Why Libya text block */
.why-libya__text h2,
.why-libya__text p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* -------------------------------
   2) FRAME EVERY IMAGE (GLOBAL)
-------------------------------- */

/* Wrap ALL images and videos in a dark frame */
.about-image,
.sector-media,
.why-libya__image,
.about-image.split-cover,
.about-image .logos,
.profile-image,
.conference-image {
  background: #0b172a !important;
  padding: 16px !important;
  border-radius: 22px !important;
  box-shadow:
    0 30px 60px rgba(15,23,42,0.35),
    0 10px 25px rgb
}
/* =====================================================
   ABOUT PAGE – "WHAT THE EXPO OFFERS" AS REAL CARDS
   Home-page consistent styling
===================================================== */

/* GRID LAYOUT */
.highlights-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin-top: 48px !important;
}

/* CARD BASE */
.highlight-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 32px 28px !important;
  text-align: center !important;

  border: 1px solid rgba(68,168,198,0.25) !important;
  box-shadow:
    0 18px 45px rgba(15,23,42,0.12) !important;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease !important;
}

/* CARD HOVER (PROFESSIONAL, NOT CHILDISH) */
.highlight-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 28px 65px rgba(15,23,42,0.18) !important;
}

/* CARD TITLE */
.highlight-card h3 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
  color: #0f172a !important;
}

/* CARD TEXT */
.highlight-card p {
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  color: rgba(15,23,42,0.75) !important;
  margin: 0 auto !important;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .highlights-grid {
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================
   ABOUT PAGE – STATS REBUILT AS REAL CARDS
   Professional, blue, home-page aligned
===================================================== */

/* STAT CONTAINER */
.stats-strip {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 40px !important;
}

/* GRID – 2 ABOVE / 2 BELOW */
.stats-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 520px !important;
  margin: 0 !important;              /* keeps it LEFT */
}

/* INDIVIDUAL STAT CARD */
.stat-item {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 26px 22px !important;
  text-align: center !important;

  border: 1px solid rgba(68,168,198,0.25) !important;
  box-shadow:
    0 14px 38px rgba(15,23,42,0.12) !important;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* HOVER – QUIET CONFIDENCE */
.stat-item:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 22px 55px rgba(15,23,42,0.18) !important;
}

/* NUMBER */
.stat-value {
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2563eb !important; /* clean executive blue */
  margin-bottom: 6px !important;
}

/* LABEL */
.stat-label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,0.65) !important;
}

/* MOBILE SAFETY */
@media (max-width: 640px) {
  .stats-container {
    grid-template-columns: 1fr !important;
  }
}
/* =====================================================
   ABOUT PAGE – STATS REBUILT AS REAL CARDS
   Professional, blue, home-page aligned
===================================================== */

/* STAT CONTAINER */
.stats-strip {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 40px !important;
}

/* GRID – 2 ABOVE / 2 BELOW */
.stats-container {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  max-width: 520px !important;
  margin: 0 !important;              /* keeps it LEFT */
}

/* INDIVIDUAL STAT CARD */
.stat-item {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 26px 22px !important;
  text-align: center !important;

  border: 1px solid rgba(68,168,198,0.25) !important;
  box-shadow:
    0 14px 38px rgba(15,23,42,0.12) !important;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* HOVER – QUIET CONFIDENCE */
.stat-item:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 22px 55px rgba(15,23,42,0.18) !important;
}

/* NUMBER */
.stat-value {
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2563eb !important; /* clean executive blue */
  margin-bottom: 6px !important;
}

/* LABEL */
.stat-label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,0.65) !important;
}

/* MOBILE SAFETY */
@media (max-width: 640px) {
  .stats-container {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================
   WHY LIBYA – REFINED, TIGHT & BALANCED
========================================= */

.why-libya {
  padding: 70px 0;
}

/* GRID: tighter + more intentional */
.why-libya__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: auto auto;
  column-gap: 48px;
  row-gap: 24px;
  align-items: start;
}

/* TEXT */
.why-libya__text {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  max-width: 620px; /* tighter */
}

/* HEADLINE */
.why-libya__text h2 {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
}

.why-libya__text .section-accent {
  margin: 14px auto 20px;
}

/* PARAGRAPHS */
.why-libya__text p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(15, 23, 42, 0.75);
  text-align: center;
  margin-bottom: 14px;
}

/* IMAGE */
.why-libya__image {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  justify-self: end;
}

/* STATS – directly under text, tighter */
.why-libya__stats {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  margin-top: 6px;
}

/* ===== STATS CARD ===== */

.stats-strip {
  background: linear-gradient(135deg, #0b172a, #12325a);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 18px 45px rgba(15,23,42,0.25);
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* STAT ITEM */
.stat-item {
  background: rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
}

/* NUMBER */
.stat-value {
  font-size: 34px;
  font-weight: 700;
  color: #eaf6ff;
  line-height: 1;
}

/* LABEL */
.stat-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(234,246,255,0.85);
  margin-top: 6px;
}

/* MOBILE */
@media (max-width: 900px) {
  .why-libya__grid {
    grid-template-columns: 1fr;
  }

  .why-libya__image {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 28px;
    justify-self: center;
  }

  .why-libya__text,
  .why-libya__stats {
    max-width: 100%;
  }

  .stats-container {
    grid-template-columns: 1fr;
  }
}
/* =========================================
   WHY LIBYA STATS – FINAL PROFESSIONAL FIT
   (Panel defines size, cards fill it)
========================================= */

/* Dark blue background panel */
.why-libya__stats {
  display: flex;
  justify-content: flex-start;
}

.stats-strip {
  background: linear-gradient(135deg, #0b172a, #12325a);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(15,23,42,0.35);

  /* THIS is the key */
  width: 520px;          /* panel width */
  padding: 48px 44px;    /* breathing space */
}

/* Grid inside panel */
.stats-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Individual stat cards */
.stat-item {
  background: #ffffff;
  border-radius: 18px;
  padding: 30px 22px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(15,23,42,0.12);
}

/* Numbers */
.stat-value {
  font-size: 44px;
  font-weight: 700;
  color: #2563eb;
}

/* Labels */
.stat-label {
  font-size: 14px;
  color: #475569;
  letter-spacing: 0.3px;
}
/* =====================================================
   FINAL HARD OVERRIDE – SECTORS / ABOUT / ALL PAGES
   BRIGHT LIGHT-BLUE + HERO MATCHES LOGO
===================================================== */

/* ---------- GLOBAL BACKGROUND RESET ---------- */
html, body {
  background-color: #F2F9FF !important;
}

/* ---------- FORCE ALL SECTIONS TO LIGHT-BLUE SHADES ---------- */
main section {
  background-color: #F2F9FF !important;
}

main section:nth-of-type(odd) {
  background-color: #E6F3FF !important;
}

main section:nth-of-type(even) {
  background-color: #D9EEFF !important;
}

/* ---------- FORCE WHITE CARDS (NO DIRTY GREY) ---------- */
.sector-block,
.sector-card,
.highlight-card,
.profile-card,
.location-card,
.contact-form-card {
  background-color: #FFFFFF !important;
  border-color: #D7EAF6 !important;
}

/* ======================================================
   ABOUT PAGE – HERO FIX (STRUCTURAL, GUARANTEED)
   Matches LOGO COLOR + BRIGHT PROFESSIONAL BLUE
====================================================== */

/* Target FIRST section on About page = HERO */
main > section:first-of-type {
  background: linear-gradient(
    135deg,
    #44A8C6 0%,     /* LOGO BLUE */
    #A8D7E7 100%   /* LIGHT BRAND BLUE */
  ) !important;

  padding: 120px 0 100px !important;
}

/* Hero text */
main > section:first-of-type h1 {
  color: #0B172A !important;
  font-size: 42px;
}

main > section:first-of-type p {
  color: #1E293B !important;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Center headline + stripe */
main > section:first-of-type .section-accent {
  margin-left: auto !important;
  margin-right: auto !important;
  background: #0B172A !important;
}

/* ======================================================
   GLOBAL ABOUT PAGE BACKGROUND – BRIGHT LIGHT BLUES
====================================================== */

main section {
  background-color: #F2F9FF !important;
}

main section:nth-of-type(even) {
  background-color: #E6F3FF !important;
}

/* ======================================================
   IMAGE FRAMES – PROFESSIONAL DARK BLUE
====================================================== */

.about-image,
.why-libya__image {
  background: #0B172A !important;
  padding: 16px !important;
  border-radius: 22px !important;
}

.about-image img,
.why-libya__image img {
  border-radius: 16px !important;
}

/* ======================================================
   STATS – DARK BLUE, CLEAN, FITTED
====================================================== */

.stats-strip {
  background: linear-gradient(135deg, #0B172A, #12325A) !important;
}

.stats-container {
  max-width: 820px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

.stat-item {
  background: rgba(255,255,255,0.12) !important;
  padding: 26px !important;
  border-radius: 16px !important;
}

.stat-value {
  font-size: 38px !important;
  color: #FFFFFF !important;
}

.stat-label {
  color: rgba(255,255,255,0.85) !important;
}
/* =====================================================
   BACKGROUND STYLES FOR HEADER, MAIN, AND SECTIONS
===================================================== */

body {
  background-color: #f4f9ff; /* Light blue background for body */
  color: var(--ink); /* Ensure text remains dark for contrast */
}

/* ================= HEADER BACKGROUND ================= */
.site-header {
  background-color: #e0f0ff; /* Soft light blue background for the header */
  backdrop-filter: blur(10px); /* Subtle blur effect */
}

/* ================= HERO BACKGROUND ================= */
.hero {
  background: linear-gradient(135deg, #add8e6, #87cefa); /* Light blue gradient for hero */
  padding: 120px 0; /* Adjusted padding to make it more prominent */
  background-size: cover;
  background-position: center;
  color: #ffffff; /* Ensure text is white on this blue background */
}

/* ================= SECTION BACKGROUND ================= */
.section {
  background-color: #e9f6ff; /* Soft background for general sections */
  padding: 80px 0;
}

.section:nth-of-type(odd) {
  background-color: #d6ecf7; /* Slightly darker blue for odd sections for contrast */
}

.section:nth-of-type(even) {
  background-color: #f0f9ff; /* Lighter blue for even sections */
}

/* ================= ABOUT PAGE BACKGROUND ================= */
.about-hero {
  background: linear-gradient(135deg, #cce7ff, #a3caff); /* Soft, yet vibrant blue for about section */
  padding: 100px 0;
  color: #0f172a; /* Dark color for better readability */
}

/* ================= SECTORS PAGE BACKGROUND ================= */
.sectors-page {
  background: linear-gradient(135deg, #e3f5ff, #a0c7e2); /* Fresh light blue gradient */
}

/* ================= FOOTER BACKGROUND ================= */
.site-footer {
  background: #0b172a; /* Dark background for footer */
  color: #ffffff; /* Light text in footer for contrast */
  padding: 30px 0;
  text-align: center;
}
/* ===============================
   ABOUT PAGE – DISTINCT LIGHT-BLUE BACKGROUNDS
=============================== */

/* Base page background */
body {
  background-color: #A8D9FF; /* Soft yet vibrant light blue */
}

/* Organisers */
section:nth-of-type(2) {
  background-color: #52b7e6; /* Clear, vibrant blue with contrast */
}

/* What the Expo Offers */
section:nth-of-type(3) {
  background-color: #4aa4e4; /* Stronger and vibrant blue */
}

/* Who Should Attend */
section:nth-of-type(4) {
  background-color: #85c4f3; /* Fresh and lively blue */
}

/* Why Libya */
section.why-libya {
  background: linear-gradient(
    180deg,
    #95c9ee 0%,  /* More saturated blue */
    #75b6e7 100% /* Lively, more intense light blue */
  );
}

/* Vision */
section:nth-of-type(6) {
  background-color: #58A9E4; /* Balanced medium vibrant light blue */
}

/* CTA strip */
.cta-strip-full {
  background: linear-gradient(
    135deg,
    #020858,  /* Rich blue that stands out */
    #030253  /* Darker vibrant blue for contrast */
  );
}
/* ================= GLOBAL LOGO OVERRIDE (FIXED) ================= */

.site-header .logo a {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;              /* REAL close spacing */
  font-size: 30px !important;       /* bigger brand name */
  line-height: 1 !important;        /* stops vertical push */
}

/* Text wrapper */
.site-header .logo a > span {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Logo image — THIS is the missing fix */
.site-header .logo img {
  height: 170px !important;
  width: auto !important;
  display: block !important;
  margin: 0 !important;             /* remove image default spacing */
}

/* Subtitle */
.site-header .logo-text-small {
  margin-top: 2px !important;
  font-size: 0.85rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.16em !important;
}
/* ================= EMERGENCY MOBILE FIX ================= */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  /* HEADER */
  .site-header {
    position: relative !important;
    padding: 12px 16px !important;
  }

  .header-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .logo img {
    max-width: 120px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .logo span {
    display: block !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    margin-top: 6px !important;
  }

  /* HERO */
  .hero,
  .page-hero {
    min-height: auto !important;
    padding: 100px 16px 60px !important;
    text-align: center !important;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 1.6rem !important;
  }

  .hero p,
  .page-hero p {
    font-size: 0.95rem !important;
  }

  /* SECTIONS */
  section {
    padding: 48px 16px !important;
  }

  /* GRIDS */
  .grid,
  .cards,
  .sectors {
    grid-template-columns: 1fr !important;
  }

  /* IMAGES */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

}
/* FORCE LOGO ALIGNMENT */
.site-header .logo a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.site-header .logo img {
  height: 75px !important;
  width: auto !important;
  max-height: 100% !important;
}

.site-header .logo a > span {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

.site-header .logo-text-small {
  margin-top: 2px !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}