.elementor-12364 .elementor-element.elementor-element-827b7fe{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12364 .elementor-element.elementor-element-c295f46 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-12364 .elementor-element.elementor-element-c295f46 > .elementor-widget-container{padding:0px 0px 0px 0px;}}/* Start custom CSS for container, class: .elementor-element-827b7fe *//* ══ STY IT Pages — CSS مخصص ══
   Appearance → Customize → Additional CSS
   ══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --p6:#534AB7;--p8:#3C3489;--p4:#7F77DD;--p2:#AFA9EC;--p1:#CECBF6;--p0:#EEEDFE;
  --g4:#D37B75;--g6:#B5635E;--g0:#FDF2F1;
  --text:#1a1830;--text2:#6b6880;--text3:#9896aa;
  --border:rgba(83,74,183,0.11);
  --bg:#fff;--surf:#F7F6FF;--surf2:#F2F1FB;
  --shadow:0 2px 16px rgba(83,74,183,0.07);
  --shadow-lg:0 8px 40px rgba(83,74,183,0.13);
}
[data-theme="dark"] {
  --text:#e8e6f5;--text2:#a8a5c0;--text3:#706e88;
  --bg:#13111f;--surf:#1c1929;--surf2:#22202f;
  --border:rgba(255,255,255,0.08);
  --shadow:0 2px 16px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.4);
  --p0:#1e1a3d;--p1:#2d2860;
}

/* Reveal */
.sty-reveal{transition:opacity .6s ease,transform .6s ease}
.sty-reveal.will-animate{opacity:0;transform:translateY(20px)}
.sty-reveal.in{opacity:1!important;transform:translateY(0)!important}

.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--g4);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:clamp(30px,5.5vw,56px);font-weight:900;color:var(--text);line-height:1.18;margin-bottom:1.25rem;letter-spacing:-1px;animation:up .7s .1s ease both}
.btn-p{background:var(--p6);color:#fff;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;padding:13px 28px;border-radius:99px;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:0 4px 20px rgba(83,74,183,0.25)}
.btn-p:hover{background:var(--p8);transform:translateY(-2px);box-shadow:0 8px 28px rgba(83,74,183,0.32)}
.btn-o{background:transparent;color:var(--p6);font-family:'Cairo',sans-serif;font-size:14px;font-weight:600;padding:13px 28px;border-radius:99px;border:1.5px solid var(--p1);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;transition:border-color .2s,transform .15s,background .2s}
.btn-o:hover{border-color:var(--p6);background:var(--p0);transform:translateY(-2px)}
@media(max-width:1100px){.float-cards{display:none!important}.hero{padding:6rem 5% 4rem}}

@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.sec{max-width:1080px;margin:0 auto;padding:5rem 5%}
.sec-hd{display:flex;align-items:flex-start;gap:14px;margin-bottom:2.5rem}
.sec-bar{width:4px;min-width:4px;height:32px;background:var(--p6);border-radius:3px;margin-top:4px}
.sec-bar.green{background:var(--g4)}
.sec-title{font-size:23px;font-weight:900;color:var(--text);letter-spacing:-.5px}
.sec-sub{font-size:13.5px;color:var(--text2);margin-top:3px}
.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-visual{position:relative}
.about-card-main{background:var(--surf);border:1px solid var(--border);border-radius:20px;padding:2rem;position:relative;overflow:hidden}
.about-card-main::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(83,74,183,0.08),transparent 70%)}
.about-avatar{width:68px;height:68px;border-radius:16px;background:linear-gradient(135deg,var(--p6),var(--p4));display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:1rem;box-shadow:0 4px 16px rgba(83,74,183,0.2)}
.about-name{font-size:17px;font-weight:800;color:var(--text);margin-bottom:2px}
.about-role{font-size:12.5px;color:var(--p6);font-weight:600;margin-bottom:1rem}
.about-bio{font-size:13px;color:var(--text2);line-height:1.75;margin-bottom:1.25rem}
.about-skills{display:flex;flex-wrap:wrap;gap:7px}
.about-skill{background:var(--p0);color:var(--p6);font-size:11px;font-weight:700;padding:4px 12px;border-radius:99px;border:1px solid var(--p1)}
.about-badge{position:absolute;bottom:-16px;left:24px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:.6rem 1rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text)}
.about-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--g4)}
.about-content h2{font-size:26px;font-weight:900;color:var(--text);margin-bottom:1rem;line-height:1.3;letter-spacing:-.5px}
.about-content h2 span{color:var(--p6)}
.about-content p{font-size:14px;color:var(--text2);line-height:1.85;margin-bottom:1.5rem}
.about-targets{display:flex;flex-direction:column;gap:10px;margin-bottom:1.75rem}
.ab-target{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text);font-weight:600}
.ab-target .icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.services-bg{background:var(--surf);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.srv-card{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:1.75rem;transition:border-color .2s,transform .15s,box-shadow .2s;position:relative;overflow:hidden}
.srv-card:hover{border-color:var(--borderH);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.srv-card::after{content:'';position:absolute;top:0;right:0;width:80px;height:80px;border-radius:0 18px 0 80px;opacity:.4;transition:opacity .2s}
.srv-card.c1::after{background:var(--p0)}.srv-card.c2::after{background:var(--g0)}.srv-card.c3::after{background:#FEF3E2}
.srv-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:1.1rem;position:relative;z-index:1}
.srv-title{font-size:16px;font-weight:800;color:var(--text);margin-bottom:.5rem}
.srv-desc{font-size:13px;color:var(--text2);line-height:1.75;margin-bottom:1.1rem}
.srv-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.srv-list li{font-size:12.5px;color:var(--text2);display:flex;align-items:center;gap:8px}
.srv-list li::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.srv-card.c1 .srv-list li::before{background:var(--p6)}.srv-card.c2 .srv-list li::before{background:var(--g4)}.srv-card.c3 .srv-list li::before{background:#F59E0B}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:1.5rem;transition:border-color .2s,transform .15s}
.why-card:hover{border-color:var(--borderH);transform:translateY(-2px)}
.why-icon-box{width:44px;height:44px;border-radius:13px;background:var(--p0);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.icon-svg{width:22px;height:22px;stroke:var(--p6);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:5px}
.why-desc{font-size:12.5px;color:var(--text2);line-height:1.75}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proj-card{background:var(--surf);border:1px solid var(--border);border-radius:16px;padding:1.5rem;display:flex;gap:14px;align-items:flex-start;transition:border-color .2s,transform .15s}
.proj-card:hover{border-color:var(--borderH);transform:translateY(-2px)}
.proj-num{min-width:38px;height:38px;border-radius:11px;background:var(--p0);color:var(--p6);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.proj-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:4px}
.proj-desc{font-size:12.5px;color:var(--text2);line-height:1.7}
.comm-wrap{background:var(--surf);border:1px solid var(--border);border-radius:24px;padding:3.5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.comm-title{font-size:26px;font-weight:900;color:var(--text);margin-bottom:1rem;line-height:1.3;letter-spacing:-.5px}
.comm-title span{color:var(--p6)}
.comm-desc{font-size:14px;color:var(--text2);line-height:1.85;margin-bottom:2rem}
.comm-btns{display:flex;gap:10px;flex-wrap:wrap}
.comm-visual{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.comm-stat{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:1.25rem;text-align:center}
.comm-stat-n{font-size:26px;font-weight:900;color:var(--p6);line-height:1;margin-bottom:4px}
.comm-stat-l{font-size:12px;color:var(--text3)}
.future-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fut-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:1.5rem;border-top:3px solid transparent;transition:transform .15s,box-shadow .2s}
.fut-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.fut-card.a{border-top-color:var(--p6)}.fut-card.b{border-top-color:var(--g4)}.fut-card.c{border-top-color:#F59E0B}
.fut-icon-box{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:.85rem}
.fut-title{font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:.5rem}
.fut-desc{font-size:12.5px;color:var(--text2);line-height:1.7}
.cta-wrap{padding:0 5% 5rem}
.cta-banner{background:linear-gradient(135deg,var(--p6) 0%,#7F77DD 100%);border-radius:24px;padding:4rem 3rem;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 70% at 15% 50%,rgba(255,255,255,0.06),transparent),radial-gradient(ellipse 35% 50% at 85% 20%,rgba(211,123,117,0.15),transparent)}
.cta-inner{position:relative;z-index:1}
.cta-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:12.5px;font-weight:700;padding:5px 16px;border-radius:99px;margin-bottom:1.25rem}
.cta-banner h2{font-size:30px;font-weight:900;color:#fff;margin-bottom:.75rem;letter-spacing:-.5px}
.cta-banner p{font-size:15px;color:rgba(255,255,255,0.82);margin-bottom:2rem}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-w{background:#fff;color:var(--p6);font-family:'Cairo',sans-serif;font-size:14px;font-weight:800;padding:13px 30px;border-radius:99px;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:transform .15s,box-shadow .2s;box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.btn-w:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.2)}
.btn-w2{background:transparent;color:#fff;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;padding:13px 30px;border-radius:99px;border:1.5px solid rgba(255,255,255,0.4);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .2s,background .2s,transform .15s}
.btn-w2:hover{border-color:#fff;background:rgba(255,255,255,0.1);transform:translateY(-2px)}
.page-hero{background:linear-gradient(135deg,var(--p0) 0%,var(--bg) 100%);border-bottom:1px solid var(--border);padding:4rem 5%;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(83,74,183,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(83,74,183,0.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.page-hero-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}
.page-badge{display:inline-flex;align-items:center;gap:8px;background:var(--p0);border:1px solid var(--p1);color:var(--p6);font-size:12.5px;font-weight:700;padding:5px 16px;border-radius:99px;margin-bottom:1.25rem}
.page-hero h1{font-size:clamp(26px,4vw,42px);font-weight:900;color:var(--text);margin-bottom:.75rem;letter-spacing:-.5px}
.page-hero p{font-size:15px;color:var(--text2);line-height:1.8}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
/* Reveal - starts visible, animates as progressive enhancement */
@media(max-width:1100px){
  .courses-grid{grid-template-columns:repeat(2,1fr)}
  .hero{padding:6rem 5% 4rem}
}
@media(max-width:960px){
  .nav-links{display:none!important}
  .hamburger{display:flex}
  .mobile-drawer{top:72px}
}
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr 1fr;gap:1.5rem}
  .about-wrap,.comm-wrap{grid-template-columns:1fr}
  .about-visual{display:none}
  .srv-grid,.tracks-grid,.why-grid,.future-grid{grid-template-columns:1fr 1fr}
  .impact-grid{grid-template-columns:1fr 1fr}
  .footer-top{padding:2rem 5% 1.5rem;grid-template-columns:1fr 1fr;gap:1.5rem}
  .proj-grid{grid-template-columns:1fr}
  .courses-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .footer-top{grid-template-columns:1fr;gap:1.25rem}
  .footer-socials{justify-content:center}
}
@media(max-width:600px){
  .hero{padding:4rem 5% 3rem;min-height:auto}
  .hero h1{font-size:26px;letter-spacing:-.5px}
  .hero-desc{font-size:14px}
  .hero-btns{gap:8px}
  .btn-p,.btn-o{font-size:13px;padding:11px 18px}
  .hero-stats{grid-template-columns:1fr 1fr;max-width:100%}
  .hstat{border-left:none;border-bottom:1px solid var(--border);padding:.9rem .75rem}
  .hstat:nth-child(even){border-right:1px solid var(--border)}
  .hstat:nth-last-child(-n+2){border-bottom:none}
  .courses-grid,.srv-grid,.tracks-grid,.why-grid,.future-grid,.impact-grid{grid-template-columns:1fr}
  .comm-wrap{padding:2rem 1.25rem}
  .comm-visual{grid-template-columns:1fr 1fr}
  .cta-banner{padding:2.5rem 1.25rem}
  .cta-banner h2{font-size:22px}
  .footer-bottom{text-align:center}
  .sec{padding:3rem 5%}
  .proj-grid,.future-grid{grid-template-columns:1fr}
  .comm-title{font-size:22px}
  .page-hero{padding:3rem 5%}
}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.set-label{font-size:10.5px;font-weight:700;color:var(--text3);padding:4px 8px;text-transform:uppercase;letter-spacing:.4px}
[data-theme="dark"] .course-card,[data-theme="dark"] .srv-card,[data-theme="dark"] .why-card,
[data-theme="dark"] .tr-card,[data-theme="dark"] .proj-card,[data-theme="dark"] .fut-card,
[data-theme="dark"] .comm-stat{background:#1c1929;border-color:rgba(255,255,255,0.08)}
[data-theme="dark"] .about-card-main,[data-theme="dark"] .comm-wrap{background:#1c1929}/* End custom CSS */