@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800&display=swap");

:root{
  --site123-bg:#f4f7fb;
  --site123-surface:#ffffff;
  --site123-text:#102132;
  --site123-muted:#66768a;
  --site123-line:#e3eaf2;
  --site123-navy:#10253b;
  --site123-navy-2:#183d63;
  --site123-blue:#256da7;
  --site123-blue-soft:#eef5fb;
  --site123-shadow:0 26px 70px rgba(16,33,50,.10);
  --site123-radius:24px;
}

html body{
  font-family:"Cairo", "Tajawal", Arial, sans-serif !important;
  background:
    radial-gradient(900px 320px at 0% 0%, rgba(37,109,167,.08), transparent 60%),
    linear-gradient(180deg,#f7f9fc 0%, #f4f7fb 100%) !important;
  color:var(--site123-text) !important;
  padding-top:18px !important;
}

body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:92px;
  background:linear-gradient(180deg,#0d1826 0%, #15293f 100%);
  z-index:-1;
}

.container{max-width:1280px !important;}

a,button,input,textarea,select{font-family:inherit !important;}

.topbar,
.container.topbar{
  top:18px !important;
  border-radius:18px !important;
  border:1px solid var(--site123-line) !important;
  background:#fff !important;
  box-shadow:var(--site123-shadow) !important;
  overflow:hidden;
}

.topbar-inner{
  padding:16px 24px !important;
  gap:18px !important;
  background:#fff !important;
  backdrop-filter:none !important;
}

.brand img,
.brand .logo,
.brand-text img{width:56px !important;height:56px !important;object-fit:contain;}
.brand strong,.brand-text strong{font-size:17px !important;font-weight:900 !important;color:var(--site123-text) !important;}
.brand span,.brand-text span{font-size:12px !important;color:var(--site123-muted) !important;font-weight:700 !important;}

.nav a,
.nav.desktop a{
  padding:10px 14px !important;
  border-radius:12px !important;
  color:#4a5f75 !important;
  font-weight:800 !important;
  font-size:14px !important;
}
.nav a:hover,
.nav a.active,
.nav.desktop a:hover,
.nav.desktop a.active{
  background:var(--site123-blue-soft) !important;
  color:var(--site123-blue) !important;
}

.btn,
.menu-btn,
.icon-btn,
#darkModeToggle,
#menuBtn,
.topbar .btn,
.topbar .menu-btn{
  border-radius:12px !important;
  border:1px solid var(--site123-line) !important;
  box-shadow:none !important;
}

.btn,
.menu-btn,
.icon-btn{
  background:#fff !important;
  color:var(--site123-text) !important;
  padding:11px 16px !important;
}

.btn.primary,
.hero-actions .btn.primary,
.contact-card .btn.primary,
.filters .btn.primary{
  background:var(--site123-blue) !important;
  color:#fff !important;
  border-color:var(--site123-blue) !important;
}

#darkModeToggle,
.topbar #darkModeToggle{
  background:var(--site123-navy) !important;
  color:#fff !important;
  border-color:var(--site123-navy) !important;
}

.hero{
  position:relative !important;
  min-height:650px !important;
  margin-top:30px !important;
  border-radius:32px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(90deg,#d8e7f3 0%, #d8e7f3 52%, #153657 52%, #193d63 100%) !important;
  box-shadow:0 34px 90px rgba(12,27,46,.18) !important;
}

.hero .slides{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  inset-inline-start:0 !important;
  width:52% !important;
  z-index:1 !important;
}

.hero .slide,
.hero .slide img{
  width:100% !important;
  height:100% !important;
}

.hero .slide img{
  object-fit:cover !important;
  filter:none !important;
  transform:none !important;
}

.hero .slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(11,27,46,.08) 0%, rgba(11,27,46,.10) 56%, rgba(11,27,46,.32) 100%);
}

.hero::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  inset-inline-end:0;
  width:48%;
  background:linear-gradient(135deg,#1a3d61 0%, #12314d 100%);
  z-index:2;
}

.hero::after{
  content:"";
  position:absolute;
  top:26px;
  bottom:26px;
  inset-inline-start:calc(52% - 1px);
  width:1px;
  background:rgba(255,255,255,.16);
  z-index:2;
}

.hero-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  background:linear-gradient(90deg, rgba(9,25,40,.08) 0%, rgba(9,25,40,.08) 36%, rgba(15,41,67,.35) 52%, rgba(17,49,79,.78) 68%, rgba(17,49,79,.96) 100%) !important;
}
[dir="ltr"] .hero-overlay{
  background:linear-gradient(270deg, rgba(9,25,40,.08) 0%, rgba(9,25,40,.08) 36%, rgba(15,41,67,.35) 52%, rgba(17,49,79,.78) 68%, rgba(17,49,79,.96) 100%) !important;
}

.hero-content{
  position:relative !important;
  z-index:4 !important;
  min-height:650px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  padding:52px 54px !important;
}

.hero-box{
  width:min(520px, 44vw) !important;
  margin-inline-start:auto !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:24px !important;
}

.hero-left{display:flex !important;flex-direction:column !important;gap:18px !important;}

.tag,
#heroTag{
  width:max-content;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  padding:11px 18px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

.hero-title{
  color:#fff !important;
  font-family:"Cairo", "Tajawal", sans-serif !important;
  font-size:clamp(2.8rem, 4.45vw, 4.7rem) !important;
  line-height:1.18 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  margin:0 !important;
  max-width:9ch !important;
  text-shadow:none !important;
}

.hero-desc{
  margin:0 !important;
  color:rgba(255,255,255,.86) !important;
  font-size:1.04rem !important;
  line-height:2 !important;
  max-width:47ch !important;
  text-shadow:none !important;
  font-weight:600 !important;
}

.hero-highlights{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:2px !important;
}

.hero-mini{
  min-height:132px;
  padding:18px 16px !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  backdrop-filter:blur(6px);
}

.hero-mini strong{
  display:block;
  margin-bottom:8px;
  color:#fff !important;
  font-size:1.02rem !important;
  line-height:1.6 !important;
}

.hero-mini span{
  color:rgba(255,255,255,.80) !important;
  font-size:.88rem !important;
  line-height:1.85 !important;
  font-weight:600 !important;
}

.hero-actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

.hero-actions .btn{
  min-width:160px;
  justify-content:center;
  border-radius:12px !important;
  background:rgba(255,255,255,.92) !important;
  color:var(--site123-navy) !important;
  border-color:rgba(255,255,255,.35) !important;
}

.hero-actions .btn.primary{
  background:var(--site123-blue) !important;
  color:#fff !important;
  border-color:var(--site123-blue) !important;
}

.controls{
  top:auto !important;
  bottom:22px !important;
  inset-inline-end:24px !important;
  z-index:5 !important;
}

.iconbtn{
  width:42px !important;
  height:42px !important;
  border-radius:14px !important;
  background:rgba(11,27,46,.40) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

.dots{
  inset-inline-start:24px !important;
  bottom:28px !important;
  z-index:5 !important;
}

.dot{
  width:10px !important;
  height:10px !important;
  background:rgba(255,255,255,.36) !important;
  border:none !important;
}

.dot.active{
  width:34px !important;
  background:#fff !important;
}

section{
  padding:56px 0 0 !important;
}

.sec-head{
  margin-bottom:24px !important;
  align-items:flex-end !important;
}

.sec-head h2{
  font-size:2rem !important;
  font-weight:900 !important;
  color:var(--site123-text) !important;
}

.sec-head p{
  max-width:60ch !important;
  color:var(--site123-muted) !important;
  font-size:1rem !important;
  line-height:1.9 !important;
  font-weight:600 !important;
}

.link,
.more,
.post-body .more{
  color:var(--site123-blue) !important;
  font-weight:800 !important;
}

.grid{gap:22px !important;}
.card{
  background:var(--site123-surface) !important;
  border:1px solid var(--site123-line) !important;
  border-radius:24px !important;
  box-shadow:0 20px 50px rgba(17,49,79,.06) !important;
}

.focus-card{
  grid-column:span 6 !important;
  display:grid !important;
  grid-template-columns:64px 1fr !important;
  gap:16px !important;
  padding:24px !important;
  align-items:flex-start !important;
}
.focus-card .focus-ic{margin:0 !important;width:64px !important;height:64px !important;border-radius:18px !important;background:#eff6fd !important;border-color:#d8e7f3 !important;color:var(--site123-blue) !important;}
.focus-card h3{margin:2px 0 8px !important;font-size:1.15rem !important;}
.focus-card p{font-size:.98rem !important;line-height:1.95 !important;color:var(--site123-muted) !important;}

.sector-card{
  grid-column:span 6 !important;
  min-height:280px !important;
  border-radius:28px !important;
  overflow:hidden !important;
}
.sector-ol{background:linear-gradient(180deg, rgba(7,21,37,.10) 0%, rgba(7,21,37,.78) 100%) !important;}
.sector-in{padding:26px !important;gap:12px !important;}
.sector-ic{width:56px !important;height:56px !important;border-radius:18px !important;}
.sector-in h3{font-size:1.3rem !important;}
.sector-in p{font-size:.98rem !important;line-height:1.95 !important;}

.team-card,
.post-card{border-radius:24px !important;overflow:hidden !important;}
.team-card{grid-column:span 4 !important;}
.team-head{padding:22px 22px 16px !important;}
.team-avatar{width:76px !important;height:76px !important;border-radius:22px !important;overflow:hidden;}
.team-name{font-size:1.16rem !important;}
.team-title,.team-bio{color:var(--site123-muted) !important;}
.team-body{padding:0 22px 22px !important;}
.team-tag{border-radius:999px !important;background:#f6f9fc !important;border:1px solid var(--site123-line) !important;color:#35506a !important;}

.post-card{grid-column:span 4 !important;}
.post-img{height:220px !important;}
.post-body{padding:20px !important;}
.meta{gap:14px !important;color:#789 !important;}
.post-body h3{font-size:1.18rem !important;line-height:1.7 !important;margin:12px 0 !important;}
.post-body .desc{font-size:.97rem !important;line-height:1.95 !important;color:var(--site123-muted) !important;}

.contact-wrap{grid-template-columns:1.1fr .9fr !important;gap:22px !important;}
.contact-card{padding:28px !important;}
.contact-card form{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px 18px;}
.contact-card form .field:nth-last-child(2),
.contact-card form .field:last-child,
.contact-card form .field textarea,
.contact-card form button{grid-column:1/-1;}
.contact-card label{font-size:.92rem !important;color:#54687c !important;}
.contact-card input,
.contact-card textarea,
.filters .in input,
.filters .sel select{
  border-radius:14px !important;
  border:1px solid var(--site123-line) !important;
  background:#fbfdff !important;
  padding:14px 16px !important;
  font-size:1rem !important;
}
.contact-card textarea{min-height:170px !important;}
.contact-card .btn.primary{padding:14px 24px !important;width:max-content;}
.foot-links{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
.foot-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-radius:16px;
  background:#f7fafc;
  border:1px solid var(--site123-line);
  color:#29465f !important;
}

.site-footer{
  margin:70px auto 26px !important;
  padding:34px 34px 26px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,#10253b 0%, #142d47 100%) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:0 34px 90px rgba(12,27,46,.22) !important;
}
.site-footer .foot-grid{grid-template-columns:1.1fr .95fr .95fr !important;gap:22px !important;}
.site-footer .foot-brand{align-items:flex-start !important;gap:16px !important;}
.site-footer .foot-logo{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
.site-footer strong,
.site-footer .foot-title{color:#fff !important;}
.site-footer .muted,
.site-footer .foot-contact,
.site-footer .foot-links a,
.site-footer .foot-bottom,
.site-footer .foot-bottom a{color:rgba(255,255,255,.78) !important;}
.site-footer .foot-links{display:flex !important;grid-template-columns:none !important;}
.site-footer .foot-links a{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  display:block !important;
}
.site-footer .foot-social{gap:10px !important;}
.site-footer .soc,
.foot-social .soc,
.footer-social a,
.site-footer .social-links a,
.site-footer .social a,
footer .social-links a,
footer .footer-social a{
  width:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}
.site-footer .soc:hover,
.foot-social .soc:hover{background:#fff !important;color:var(--site123-navy) !important;}
.foot-social .soc i,
.footer-social a i,
.footer-social a svg,
.site-footer .social-links a i,
.site-footer .social-links a svg,
.site-footer .social a i,
.site-footer .social a svg,
footer .social-links a i,
footer .social-links a svg,
footer .footer-social a i,
footer .footer-social a svg{
  color:currentColor !important;
  fill:currentColor !important;
  stroke:currentColor !important;
  width:18px !important;
  height:18px !important;
  font-size:18px !important;
  opacity:1 !important;
}
.site-footer .foot-bottom{margin-top:28px !important;padding-top:18px !important;border-top:1px solid rgba(255,255,255,.12) !important;}

/* Archive page */
.filters{
  padding:24px !important;
  border-bottom:1px solid var(--site123-line) !important;
}
.filters form{gap:14px !important;}
.filters .in,
.filters .sel{
  min-width:240px;
  border:1px solid var(--site123-line) !important;
  border-radius:14px !important;
  background:#fbfdff !important;
}
.pager{margin-top:26px !important;gap:10px !important;}
.page{border-radius:12px !important;border:1px solid var(--site123-line) !important;background:#fff !important;color:#456 !important;}
.page.active{background:var(--site123-blue) !important;color:#fff !important;border-color:var(--site123-blue) !important;}
main.container > footer:not(.site-footer){
  margin-top:30px;
  text-align:center;
  color:#6f8196 !important;
  font-weight:700 !important;
}

/* Details page */
.article-container{max-width:1160px !important;margin:0 auto !important;}
.article-container article{
  background:#fff;
  border:1px solid var(--site123-line);
  border-radius:28px;
  box-shadow:0 24px 60px rgba(16,33,50,.08);
  overflow:hidden;
}
.article-header{
  padding:34px 36px 24px !important;
  background:linear-gradient(180deg,#fff 0%, #f8fbfe 100%) !important;
}
.article-header h1{
  font-family:"Cairo",sans-serif !important;
  font-size:clamp(2rem, 3.4vw, 3.2rem) !important;
  line-height:1.45 !important;
  color:var(--site123-text) !important;
}
.article-meta{padding-bottom:16px !important;margin-bottom:16px !important;color:#6c8095 !important;}
.article-image{border-radius:0 !important;max-height:520px !important;object-fit:cover !important;}
.article-body{padding:36px !important;font-size:1.08rem !important;line-height:2.1 !important;color:#223449 !important;}
.article-body h2,.article-body h3,.article-body h4{font-family:"Cairo",sans-serif !important;color:var(--site123-text) !important;}
.share-bar{padding:0 36px 34px !important;gap:10px !important;}
.share-bar .share-btn{border-radius:14px !important;background:#fff !important;border:1px solid var(--site123-line) !important;color:#44617e !important;}
.share-bar .share-btn:hover{background:var(--site123-blue) !important;color:#fff !important;border-color:var(--site123-blue) !important;}

/* Drawer */
.drawer{background:#fff !important;}
.drawer-nav a,.drawer-pill{border-radius:14px !important;}

/* Responsive */
@media (max-width: 1199px){
  .hero{min-height:620px !important;}
  .hero-content{padding:42px !important;}
  .hero-box{width:min(480px, 47vw) !important;}
  .hero-highlights{grid-template-columns:1fr !important;}
  .hero-mini{min-height:auto;}
  .focus-card,.post-card,.team-card{grid-column:span 6 !important;}
}

@media (max-width: 991px){
  body::before{height:78px;}
  .topbar-inner{padding:14px 16px !important;}
  .hero{
    min-height:auto !important;
    background:#153657 !important;
  }
  .hero .slides,
  .hero::after,
  .hero::before{
    width:100% !important;
    inset-inline-start:0 !important;
  }
  .hero .slides{height:300px !important;top:0 !important;bottom:auto !important;}
  .hero::before{
    top:240px !important;
    bottom:0 !important;
    background:linear-gradient(180deg,#163557 0%, #13304d 100%) !important;
  }
  .hero::after{display:none !important;}
  .hero-overlay{
    background:linear-gradient(180deg, rgba(9,25,40,.08) 0%, rgba(9,25,40,.18) 24%, rgba(17,49,79,.74) 45%, rgba(17,49,79,.98) 100%) !important;
  }
  .hero-content{
    min-height:auto !important;
    display:block !important;
    padding:238px 28px 30px !important;
  }
  .hero-box{width:100% !important;max-width:none !important;}
  .hero-title{max-width:100% !important;font-size:clamp(2rem, 8vw, 3.2rem) !important;}
  .hero-desc{max-width:100% !important;}
  .hero-actions .btn{min-width:0;width:auto;}
  .controls{top:20px !important;bottom:auto !important;inset-inline-end:20px !important;}
  .dots{bottom:18px !important;inset-inline-start:20px !important;}
  .focus-card,.sector-card,.team-card,.post-card{grid-column:span 12 !important;}
  .contact-wrap{grid-template-columns:1fr !important;}
  .contact-card form{grid-template-columns:1fr !important;}
  .site-footer .foot-grid{grid-template-columns:1fr !important;}
}

@media (max-width: 767px){
  html body{padding-top:14px !important;}
  .container{padding:0 16px !important;}
  .brand img{width:46px !important;height:46px !important;}
  .brand strong,.brand-text strong{font-size:15px !important;}
  .topbar,.container.topbar{border-radius:16px !important;top:14px !important;}
  .hero{margin-top:22px !important;border-radius:24px !important;}
  .hero-content{padding:228px 20px 26px !important;}
  .tag,#heroTag{font-size:.82rem !important;padding:9px 14px !important;}
  .hero-title{font-size:clamp(1.9rem, 10vw, 2.7rem) !important;}
  .hero-desc{font-size:.95rem !important;line-height:1.9 !important;}
  .hero-actions{flex-direction:column !important;align-items:stretch !important;}
  .hero-actions .btn{width:100% !important;}
  .sec-head h2{font-size:1.7rem !important;}
  .sec-head p{font-size:.95rem !important;}
  .contact-card,.filters,.article-body,.article-header,.share-bar{padding-left:20px !important;padding-right:20px !important;}
  .site-footer{padding:26px 22px 22px !important;}
  .foot-links{grid-template-columns:1fr !important;}
  .foot-bottom{flex-direction:column !important;align-items:flex-start !important;}
}