/* ===========================================================
   INNOVATION SPACE 2025 — LIGHT GLASS DESIGN SYSTEM
   =========================================================== */

/* ---------- ROOT VARIABLES ---------- */
:root {
  --bg-main: #f4f7fb;
  --bg-gradient-top: #ffffff;
  --bg-gradient-bottom: #e8f0ff;
  --accent: #5DA9E9;
  --accent-soft: rgba(30,111,255,0.15);
  --text-main: #0d1f3d;
  --text-dim: #4a5c7a;
  --glass-bg: rgba(255,255,255,0.65);
  --glass-border: rgba(0,0,0,0.05);
  --radius-lg: 1.25rem;
  --radius-md: .9rem;
  --radius-sm: .5rem;
  --blur-card: 20px;
  --shadow-card: 0 10px 60px rgba(0,0,0,0.08);
  --font-en: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ar: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* ===========================================================
   LANGUAGE VISIBILITY CONTROL — FINAL FIX
   =========================================================== */

/* Default: hide Arabic, show English */
.enOnly { display: inline; }
.arOnly { display: none; }

/* When direction = RTL (Arabic mode) */
html[dir="rtl"] .enOnly,
body[dir="rtl"] .enOnly {
  display: none !important;
}

html[dir="rtl"] .arOnly,
body[dir="rtl"] .arOnly {
  display: inline !important;
}

/* Optional: Ensure Arabic text blocks handle block layout */
html[dir="rtl"] .arOnly p,
html[dir="rtl"] .arOnly div,
html[dir="rtl"] .arOnly span {
  display: inline-block;
}

/* Force proper alignment and text direction for Arabic */
html[dir="rtl"] {
  text-align: right;
  direction: rtl;
  font-family: var(--font-ar);
}
html[dir="ltr"] {
  text-align: left;
  direction: ltr;
  font-family: var(--font-en);
}


    
    
/* ---------- BASE LAYOUT ---------- */
html, body {
  min-height: 100vh;
  background: linear-gradient(to bottom, var(--bg-gradient-top), var(--bg-gradient-bottom));
  color: var(--text-main);
  font-family: var(--font-en);
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body[dir="rtl"] { font-family: var(--font-ar); direction: rtl; text-align: right; }
body[dir="ltr"] { direction: ltr; text-align: left; }

/* ---------- BACKGROUND BLOBS ---------- */
.bg-layer {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.blob {
  position: absolute; width: 320px; height: 320px;
  border-radius: 50%; filter: blur(100px);
  opacity: 0.15; mix-blend-mode: screen;
  animation: blobFloat 14s infinite ease-in-out;
}
.blob-a { background: radial-gradient(circle,#5DA9E9 0%,transparent 70%); left:-80px; top:120px; }
.blob-b { background: radial-gradient(circle,#00ffc6 0%,transparent 70%); right:-100px; bottom:10vh; animation-delay:-4s; }
.blob-c { background: radial-gradient(circle,#ffd966 0%,transparent 70%); left:40%; top:60vh; animation-delay:-8s; }
@keyframes blobFloat { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-40px) scale(1.08);} }

/* ---------- GLASS ELEMENTS ---------- */
.glass, .glass-card, .service-card, .founder-card, .stat-card, .dash-card, .investor-box, .contact-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-card));
  -webkit-backdrop-filter: blur(var(--blur-card));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.glass:hover { transform: translateY(-3px); box-shadow: 0 20px 80px rgba(30,111,255,0.25); }

/* ---------- NAVBAR ---------- */
.main-nav {
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  z-index: 10;
}
.navbar-item { font-weight:500; color:var(--text-main)!important; opacity:0.9; }
.navbar-item:hover {  color:var(--accent)!important; opacity:1; }
.brand-badge {
  width:40px;height:40px;border-radius:var(--radius-md);
  background: radial-gradient(circle at 30% 30%, #5DA9E9 0%, #a8c4ff 100%);
  box-shadow: 0 10px 30px rgba(30,111,255,0.4);
}
.brand-title { font-size:.95rem; font-weight:600; color:var(--text-main); }
.brand-sub { font-size:.7rem; color:var(--text-dim); }

/* ---------- HERO ---------- */
.hero-section { position:relative; z-index:1; padding:6rem 0 5rem; }
.hero-copy .title { line-height:1.2; letter-spacing:-0.02em; }
.text-gradientx {
  background: linear-gradient(90deg,#5DA9E9 0%,#0038a8 90%);
  -webkit-background-clip:text; color:transparent;
}

.title {
    color: #003352;
}
.subtitle { color: var(--text-dim); max-width:560px; }
.fw-600{font-weight:600;}
.hero-cta .button { margin-right:.5rem;margin-bottom:.5rem; }

/* ---------- MICRO GLOW BUTTON ---------- */
.button.is-info {
  background: #003352; 
  border: none;
}
.button.is-dark.is-outlined.is-focused, .button.is-dark.is-outlined.is-hovered, .button.is-dark.is-outlined:focus, .button.is-dark.is-outlined:hover {
    background-color: #5DA9E9;
    border-color: #5DA9E9;
}
.button.is-info:hover {
  box-shadow: 0 0 20px rgba(30,111,255,0.5);
  transform: translateY(-1px);
}

/* ---------- STAT CARDS ---------- */
.mini-stats { display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem; }
.stat-card { text-align:center;padding:.9rem 1rem; }
.stat-num { font-size:1.4rem;font-weight:600;color:var(--accent); }
.stat-label { font-size:.8rem;color:var(--text-dim); }

/* ---------- DASHBOARD ---------- */
/* --- Dashboard Widget Refine --- */
.dash-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-card));
  -webkit-backdrop-filter: blur(var(--blur-card));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
  padding: 1.25rem 1.5rem;       /* ⬅️ more inner padding */
  margin-bottom: 2rem;
  transition: transform .3s ease, box-shadow .3s ease;
}

.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 80px rgba(30,111,255,0.15);
}

/* title row */
.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-main);
}

/* scroll zone */
.dash-body.activity-scroll {
  position: relative;
  overflow: hidden;
  height: 190px;                 /* slightly taller */
  padding: 0.75rem 0.5rem;       /* ⬅️ adds space top/bottom */
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.25);
}

/* inner UL */
.dash-body.activity-scroll ul {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0 0.75rem;
  list-style: none;
  animation: scrollUpLoop 14s linear infinite;
}

/* list items */
.dash-body.activity-scroll li.mini-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0.45rem 0;
  color: var(--text-main);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.dash-body.activity-scroll li.mini-row:last-child {
  border-bottom: none;
}

/* status colors */
.dash-body .val.up { color: #0dbf6f; }
.dash-body .val.warn { color: #d99000; }
.dash-body .dim { color: var(--text-dim); }

/* animation loop */
@keyframes scrollUpLoop {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}


/* ---------- FLOATING BADGE ---------- */
.floating-badge { display:flex;align-items:center;gap:.75rem;max-width:320px;padding:1rem 1.25rem; }
.badge-icon {
  width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.badge-copy{font-size:.8rem;color:var(--text-main);}
.badge-copy .dim{color:var(--text-dim);font-size:.7rem;}

/* ---------- SERVICES ---------- */
.service-card{padding:1.5rem 1.5rem;height:100%;}
.service-card .icon-wrap{
  width:46px;height:46px;border-radius:var(--radius-md);
  background:var(--accent-soft);color:var(--accent);
  font-size:1.4rem;display:flex;align-items:center;justify-content:center;
  margin-bottom:.75rem;
}
.service-card:hover{transform:translateY(-5px);box-shadow:0 20px 80px rgba(30,111,255,0.25);}

/* ---------- FOUNDERS ---------- */
#founders{padding:5rem 1rem;background:linear-gradient(to bottom, #f9fbff 0%, #eef3ff 100%);}
#founders .title{font-weight:700;color:var(--text-main);}
.founders-grid{margin-top:3rem;justify-content:center;}
.founder-card{
  background:rgba(255,255,255,0.8);
  border:1px solid rgba(0,0,0,0.05);
  border-radius:1.5rem;
  padding:2.5rem 1.5rem 2rem;
  text-align:center;
  transition:all .35s ease;
  box-shadow:0 10px 50px rgba(30,111,255,0.12);
}
.founder-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 120px rgba(30,111,255,0.25);
  border-color:rgba(30,111,255,0.2);
}

/* Fix: Bulma icon alignment for textarea */
.control.has-icons-left textarea.textarea {
  padding-left: 2.25em !important; /* same as Bulma input icon spacing */ padding-top: 4px;
}

/* Match icon color & positioning for textarea */
.control.has-icons-left textarea + .icon.is-left {
  color: #b0b0b0;
  top: 0.75rem;
  left: 0.02rem;
  height: 1em;
  pointer-events: none;
  position: absolute;
}


.icon-avatar{
  width:120px;height:120px;border-radius:50%;
  border:2px solid rgba(30,111,255,0.25);
  
  display:flex;align-items:center;justify-content:center;
  font-size:4rem;color:var(--accent);
  background:radial-gradient(circle at 40% 40%,rgba(30,111,255,0.1),rgba(255,255,255,0.7));
  margin:0 auto 1rem;position:relative;
}
.icon-avatar::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(30,111,255,0.1);animation:rotateGlow 6s linear infinite;opacity:0.6;
}
@keyframes rotateGlow{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.founder-name{font-size:1.15rem;font-weight:600;color:var(--text-main);}
.founder-title{font-size:.9rem;color:var(--text-dim);margin-bottom:.75rem;}
.founder-desc{font-size:.9rem;color:var(--text-main);opacity:.8;line-height:1.5;}
#founders blockquote{
  margin-top:3rem;font-style:italic;color:#2b4c72;
  border-left:4px solid var(--accent);padding-left:1rem;
  max-width:800px;margin-inline:auto;line-height:1.6;
}

/* ---------- INVESTOR & CONTACT ---------- */
.investor-box .input,.investor-box .textarea,.investor-box select{
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(0,0,0,0.08);
  color:var(--text-main);
  border-radius:var(--radius-md);
}
.investor-box .input:focus,.investor-box .textarea:focus,.investor-box select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 0.25rem rgba(30,111,255,0.15);
}
.label{color:var(--text-main);}
.subtitle,.desc,p{color:var(--text-dim);}

/* ---------- FOOTER ---------- */
.transparent-footer{
  border-top:1px solid rgba(0,0,0,0.05);
  padding-top:2rem;padding-bottom:3rem;
  color:var(--text-dim);
  background:transparent;
}

/* ---------- LANGUAGE SWITCH ---------- */
.arOnly{display:none;}
body[dir="rtl"] .enOnly{display:none!important;}
body[dir="rtl"] .arOnly{display:block!important;}

/* ---------- SCROLL / AOS EFFECT ---------- */
[data-animate]{opacity:0;transform:translateY(30px);transition:all .8s ease;}
[data-animate].active{opacity:1;transform:translateY(0);}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  .floating-badge{position:relative;bottom:auto;right:auto;margin-top:1.5rem;}
}
.button.is-info.is-light {
    background: #003352;
    color: #ffffff;
}
/* --- Section Head Alignment Fix --- */
.section-head {
  text-align: center;      /* ✅ Center all heading + subtitle lines */
  max-width: 900px;
  margin: 0 auto 3rem;     /* Centers the block itself */
}

/* Make sure subtitle text stays balanced */
.section-head .subtitle,
.section-head .desc,
.section-head p {
  text-align: center;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-top: 0.75rem;
}

/* ===== Navbar Direction Alignment ===== */
body[dir="ltr"] .navbar-menu {
  justify-content: flex-end; /* nav items on right side for English */
}
body[dir="ltr"] .navbar-start {
  margin-left: auto;
  margin-right: 0;
}
body[dir="ltr"] .navbar-end {
  margin-left: 1rem;
}

body[dir="rtl"] .navbar-menu {
  justify-content: flex-start; /* nav items on left side for Arabic */
}
body[dir="rtl"] .navbar-start {
  margin-right: auto;
  margin-left: 0;
}
body[dir="rtl"] .navbar-end {
  margin-right: 1rem;
}
/* =========================
   SERVICE SECTION (LIGHT)
   ========================= */

#services {
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  padding: 6rem 1rem;
  position: relative;
  z-index: 2;
}

.section-head {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.section-head .subtitle {
  font-size: 1.05rem;
  color: #4b5563;
  margin-top: 0.75rem;
}

/* Service Cards */
.service-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  transition: all 0.35s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 120px rgba(58, 141, 255, 0.25);
  border-color: rgba(58, 141, 255, 0.2);
}

/* Icon Circle */
.icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(58, 141, 255, 0.1);
  color: #5DA9E9;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border: 1px solid rgba(58, 141, 255, 0.15);
  box-shadow: 0 10px 40px rgba(30, 111, 255, 0.1);
}

/* Title & Description */
.service-card .title {
  color: #111827;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.service-card .desc {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  #services {
    padding: 4rem 1rem;
  }
  .service-card {
    margin-bottom: 1.5rem;
  }
}/* Force correct handshake glyph for Bootstrap Icons v1.11.x */
.bi-handshake::before {
  content: "\F41E"; /* correct unicode for handshake in v1.11.x */
  font-family: "bootstrap-icons";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

/* RTL Mirror Fix */
body[dir="rtl"] #services {
  text-align: right;
}
/* =====================================================
   RTL — Navbar Burger Position Fix
   ===================================================== */

/* Flip hamburger icon to left in Arabic mode */
body[dir="rtl"] .navbar-brand {
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* Make sure the logo and text stay visually correct */
body[dir="rtl"] .navbar-brand .brand-wrap {
  flex-direction: row-reverse;
  text-align: right;
}
.button.is-info.is-light.is-hovered, .button.is-info.is-light:hover {
    background-color: #e4eff9;
    border-color: transparent;
    color: #003352 !important;
}
/* Align the burger icon properly on the left side */
body[dir="rtl"] .navbar-burger {
  order: -1;
  margin-left: 0;
  margin-right: auto;
}

/* Optional: tweak alignment for clean spacing */
body[dir="rtl"] .navbar-burger span {
  transform-origin: left center;
}


@media screen and (min-width: 1024px) {
   body[dir="rtl"]  .navbar-end { 
        margin-left: 0;
    }  }

/* === DASHBOARD RTL FIX === */
body[dir="rtl"] .dash-body.activity-scroll ul {
  direction: rtl;
  text-align: right;
}
body[dir="rtl"] .dash-body.activity-scroll li.mini-row {
  flex-direction: row-reverse;
  justify-content: space-between;
}
body[dir="rtl"] .dash-body.activity-scroll .dim {
  text-align: right;
}
body[dir="rtl"] .dash-body.activity-scroll .val {
  text-align: left;
}
.next {display:block;}

body[dir="rtl"]  .buttons .button:not(:last-child):not(.is-fullwidth) {margin-left: .5rem;}

    html[dir="rtl"]  .navbar-end { 
        margin-left: 0;
    }
          
html[dir="rtl"] .buttons .button:not(:last-child):not(.is-fullwidth) {
    margin-left: .5rem;
}

html[dir="rtl"] .navbar-burger {  
    margin-left: unset; margin-right: auto ;
}

 .hero-section {
    margin: auto 15px;
}