:root{
  --bg:#FAF5E7;
  --surface:#FFFFFF;
  --fg:#0E1628;
  --muted:#4B5563;
  --line:#E7E3D7;

  --navy:#0B1C3A;
  --emerald:#2E7D6A;
  --gold:#D4AF37;

  --max:1120px;
  --radius:18px;
  --shadow: 0 18px 50px rgba(14,22,40,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--fg);
  background: var(--bg);
  line-height:1.65;
}

a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

/* =============== TOPBAR =============== */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(250,245,231,.90);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(231,227,215,.95);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:12px; min-width:260px}
.logo{
  width:40px; height:40px; border-radius:16px;
  background: linear-gradient(135deg, rgba(46,125,106,.22), rgba(212,175,55,.18));
  border:1px solid rgba(46,125,106,.22);
  box-shadow: 0 12px 28px rgba(11,28,58,.10);
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.5px;
  color:var(--navy);
  overflow:hidden;
}
.logo img{width:100%; height:100%; object-fit:cover}
.brand h1{margin:0; font-size:14px; font-weight:900}

.menu{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.menu a{
  font-size:13px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color: rgba(14,22,40,.86);
  transition:.18s ease;
}
.menu a:hover{
  background: rgba(11,28,58,.08);
  border-color: rgba(11,28,58,.16);
  transform: translateY(-1px);
}
.menu a.active{
  background: linear-gradient(135deg, rgba(11,28,58,.12), rgba(46,125,106,.12));
  border-color: rgba(46,125,106,.26);
  color: var(--fg);
  font-weight:900;
}

/* =============== HERO (HOME) =============== */
.hero{padding:0; margin:0}

.heroCard{
  position:relative;
  width:100vw;
  height:calc(100vh - 72px);
  margin-left:calc(50% - 50vw);
  border-radius:0;
  overflow:hidden;
  border:0;
  background: var(--surface);
}

.heroMedia{
  position:absolute;
  inset:0;
  background: url("assets/hero.png") center / cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}

/* Overlay خفيف */
.heroOverlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(250,245,231,.28),
    rgba(250,245,231,.14),
    rgba(250,245,231,.22)
  );
}

.heroLayer{
  position:relative;
  height:100%;
  width:100%;
}

/* ===== TOP RIGHT TEXT ===== */
.heroTextTopRight{
  position:absolute;
  top: clamp(22px, 4vh, 44px);
  right: 72px;
  max-width: min(900px, calc(100vw - 120px));
  text-align:left;
}

.badgeLine{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(46,125,106,.26);
  background: rgba(46,125,106,.14);
  font-size:13px;
  font-weight:900;
  color: rgba(14,22,40,.92);
  margin-bottom:12px;
}

.titleLine{
  margin:0;
  font-weight:1000;
  color: rgba(14,22,40,.95);
  letter-spacing:.2px;
  white-space: nowrap;
  overflow: visible;
  font-size: clamp(22px, 3vw, 42px);
  text-shadow: 0 2px 0 rgba(250,245,231,.55);
}

/* ===== CENTER BUTTONS ===== */
.heroActionsCenter{
  position:absolute;
  left: 50%;
  top: 82%;
  transform: translate(-50%, -50%);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius: 14px;
  border:1px solid rgba(14,22,40,.16);
  background: rgba(255,255,255,.88);
  color: rgba(14,22,40,.92);
  font-size:13px;
  font-weight:900;
  transition:.18s ease;
  min-width: 170px;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(14,22,40,.10);
}
.btn.primary{
  border-color: rgba(46,125,106,.40);
  background: linear-gradient(135deg, rgba(46,125,106,.26), rgba(212,175,55,.14));
}

/* ===== TOP LEFT info card ===== */
.heroInfoTopLeft{
  position:absolute;
  top: clamp(22px, 4vh, 44px);
  left: clamp(22px, 4vw, 64px);
  max-width: 360px;
}
.infoCard{
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 18px 50px rgba(14,22,40,.12);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 14px 14px 12px;
}
.infoTitle{
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .2px;
  color: rgba(14,22,40,.92);
  margin: 0 0 10px;
}
.infoGrid{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  font-size: 12.5px;
}
.infoGrid .lbl{color: rgba(14,22,40,.64); font-weight: 800;}
.infoGrid .val{color: rgba(14,22,40,.92); font-weight: 1000;}
.infoDivider{height: 1px; background: rgba(255,255,255,.28); margin: 10px 0;}
.infoList{margin: 0; padding-left: 18px; font-size: 12.5px; color: rgba(14,22,40,.90);}
.infoList li{margin: 6px 0}

/* ===== About Course Cards (HOME) ===== */
.aboutLayer{ position:relative; height:100%; width:100%; }

.aboutCard{
  position:absolute;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 20px 52px rgba(14,22,40,.14);
}
.aboutCard h3{
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .2px;
  color: #0E1628;
}
.aboutCard p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: #0E1628;
}
.aboutCard ul{ margin: 0; padding-left: 18px; }
.aboutCard li{
  margin: 8px 0;
  font-size: 14px;
  color: #0E1628;
  font-weight: 650;
}
.aboutLeft{
  top: 3%;
  left: clamp(22px, 4vw, 64px);
  max-width: 520px;
}
.aboutLeft h3{font-size: 16px;}
.aboutLeft p{font-size: 16px; line-height: 1.95;}
.aboutRight{
  top: 5%;
  right: clamp(22px, 4vw, 64px);
  max-width: 360px;
}

/* =============== INNER PAGES HERO + BODY =============== */
.pageHero{
  position: relative;
  padding: 46px 0 26px;
  border-bottom: 1px solid rgba(231,227,215,.95);
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(46,125,106,.18), transparent 60%),
    radial-gradient(900px 420px at 95% 10%, rgba(11,28,58,.16), transparent 58%),
    linear-gradient(180deg, rgba(250,245,231,1), rgba(250,245,231,.65));
}
.pageHero .wrap{ position: relative; z-index: 2; }

.pageTitle{
  margin: 0;
  font-size: 32px;
  letter-spacing: .2px;
  font-weight: 1000;
  color: rgba(14,22,40,.95);
}

.pageSub{
  margin: 10px 0 0;
  max-width: 76ch;
  color: rgba(14,22,40,.62);
  font-size: 14px;
  line-height: 1.8;
}

.pageBody{
  padding: 26px 0 60px;
  background: #ffffff;
}

.contentCard{
  border: 1px solid rgba(231,227,215,.95);
  border-radius: 18px;
  padding: 18px 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 50px rgba(14,22,40,.08);
}

/* =========================================================
   GLOBAL: REMOVE ALL HERO MOVING/ANIMATED DECORATIONS
   (books / cap / floating / shimmer / moving icons)
========================================================= */
.floating,
.floatItem,
.shimmer,
.movingLayer,
.movingIcon{
  display:none !important;
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

/* =============== RESPONSIVE =============== */

/* Medium screens */
@media (max-width: 1100px){
  .titleLine{ white-space: normal; }
}

/* Tablet */
@media (max-width: 900px){
  .heroTextTopRight{
    left: 18px;
    right: 18px;
    max-width:none;
  }
  .titleLine{
    white-space: normal;
    font-size: 28px;
  }
  .heroActionsCenter{
    top: 70%;
    width: calc(100% - 36px);
  }
  .btn{min-width: unset; width: 100%;}

  .heroInfoTopLeft{
    left: 18px;
    right: 18px;
    max-width: none;
    top: 72px;
  }
  .infoGrid{grid-template-columns: 1fr}

  .aboutLeft,
  .aboutRight{
    position: static;
    margin: 16px auto;
    max-width: calc(100% - 36px);
  }
  .aboutLayer{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
  }

  .pageTitle{ font-size: 26px; }

  /* Navbar mobile-safe: horizontal scroll */
  .nav{align-items:flex-start}
  .menu{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 6px;
    max-width: 100%;
  }
  .menu::-webkit-scrollbar{ display:none; }
  .menu a{ white-space: nowrap; }
}

/* =========================================================
   MOBILE FIX PACK (phones)
========================================================= */
@media (max-width: 720px){
  .wrap{padding:0 14px;}

  .nav{
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }

  .brand{
    min-width: 0;          /* كان 260px وبيكسر الموبايل */
    flex: 1 1 auto;
    gap: 10px;
  }

  .brand h1{
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }

  .menu{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 6px;
  }
  .menu::-webkit-scrollbar{display:none;}
  .menu a{
    padding: 9px 10px;
    font-size: 12.5px;
    border-radius: 12px;
    white-space: nowrap;
  }

  /* HERO: mobile-first flow */
  .heroCard{
    width: 100%;
    height: auto;
    min-height: calc(100vh - 64px);
  }

  .heroMedia{
    transform: none;
    background-position: 70% 58%;
  }

  .heroOverlay{
    background: linear-gradient(180deg,
      rgba(250,245,231,.78) 0%,
      rgba(250,245,231,.58) 35%,
      rgba(250,245,231,.30) 70%,
      rgba(250,245,231,.74) 100%
    );
  }

  .heroLayer{
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    padding: 18px 14px 18px;
  }

  .heroTextTopRight{
    position: static;
    max-width: 100%;
    text-align: center;
    margin-top: 8px;
  }

  .badgeLine{
    font-size: 12px;
    padding: 8px 12px;
    margin-bottom: 10px;
  }

  .titleLine{
    font-size: 24px;
    line-height: 1.25;
    white-space: normal;
    text-shadow: 0 2px 0 rgba(250,245,231,.65);
  }

  .heroInfoTopLeft{
    position: static;
    max-width: 100%;
    margin: 6px 0 0;
  }

  .infoCard{
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(231,227,215,.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 16px 40px rgba(14,22,40,.10);
    border-radius: 16px;
    padding: 14px;
  }

  .infoGrid{
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 13px;
  }

  .infoTitle{font-size: 12.5px;}
  .infoList{font-size: 13px;}

  .heroActionsCenter{
    position: static;
    transform: none;
    width: 100%;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .btn{
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    font-size: 13px;
    border-radius: 14px;
  }

  /* About cards */
  .aboutLayer{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 14px 18px;
  }

  .aboutCard{
    position: static;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    padding: 16px;
  }

  .aboutLeft p{font-size: 14.8px; line-height: 1.85;}
  .aboutCard li{font-size: 14px;}

  /* prevent horizontal overflow */
  html, body{overflow-x:hidden;}
  .heroCard{overflow:hidden;}
}

/* =========================================================
   FINAL KILL SWITCH — Disable/Hide ANY animated decorations
   Put at END of styles.css
========================================================= */

/* Hide known layers + anything with these naming patterns */
.floating, .floatItem, .shimmer,
.movingLayer, .movingIcon,
[class*="float"], [class*="Float"],
[class*="moving"], [class*="Moving"],
[class*="shimmer"], [class*="Shimmer"],
[class*="particle"], [class*="Particle"],
[class*="decor"], [class*="Decor"],
[class*="ornament"], [class*="Ornament"],
[class*="shape"], [class*="Shape"],
[class*="bubble"], [class*="Bubble"],
[class*="icon"], [class*="Icon"]{
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Actually HIDE only the decoration layers (keep normal icons alive) */
.floating, .floatItem, .shimmer,
.movingLayer, .movingIcon,
[class*="decor"], [class*="Decor"],
[class*="ornament"], [class*="Ornament"],
[class*="particle"], [class*="Particle"],
[class*="shape"], [class*="Shape"],
[class*="bubble"], [class*="Bubble"]{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* Extra: stop ANY element that is animated via inline style */
[style*="animation:"], [style*="animation-duration"],
[style*="keyframes"], [style*="transform: translate"],
[style*="transform: translate3d"]{
  animation:none !important;
  transition:none !important;
}

/* Belt & suspenders: kill animations on hero areas only */
.hero *, .pageHero *{
  animation:none !important;
}