/*
Theme Name: قالب لولو 13
Version: 13.0
Description: قالب عربي RTL احترافي قابل للتخصيص.
*/
:root{--bg:#eef5f6;--surface:#f6fbfb;--surface2:#e8f2f3;--text:#17344b;--muted:#647989;--primary:#167d78;--contact:#287bbd;--accent:#27d36b;--border:rgba(23,52,75,.12);--shadow:0 16px 45px rgba(23,52,75,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Tahoma,sans-serif;background:var(--bg);color:var(--text);direction:rtl}body.drawer-open{overflow:hidden}a{text-decoration:none;color:inherit}img{max-width:100%;height:auto}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(246,251,251,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;padding:10px 5%;direction:ltr}.brand{order:2;direction:rtl}.menu-btn{order:1}
.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800}.brand-mark{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,var(--primary),#0d5552);display:grid;place-items:center;color:#fff}
.menu-btn{width:52px;height:52px;border:1px solid var(--border);border-radius:16px;background:#fff;display:grid;place-items:center;cursor:pointer}.menu-lines,.menu-lines:before,.menu-lines:after{content:"";display:block;width:26px;height:3px;border-radius:5px;background:var(--text)}.menu-lines{position:relative}.menu-lines:before{position:absolute;top:-8px}.menu-lines:after{position:absolute;top:8px}
.drawer-backdrop{position:fixed;inset:0;background:rgba(10,25,35,.48);opacity:0;visibility:hidden;transition:.25s;z-index:1090}.drawer{position:fixed;top:0;left:0;right:auto;width:min(420px,88vw);height:100dvh;background:#fff;transform:translateX(-105%);transition:.3s;z-index:1100;box-shadow:20px 0 60px rgba(0,0,0,.2);overflow:auto}.drawer.open{transform:translateX(0)}.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer-head{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--border)}.drawer-close{width:46px;height:46px;border:0;border-radius:14px;background:#17344b;color:#fff;font-size:28px;cursor:pointer}.drawer nav a{display:block;padding:22px;border-bottom:1px solid var(--border);font-size:20px;font-weight:700}
.hero{min-height:calc(100vh - 78px);display:grid;place-items:center;padding:40px 5%;background:linear-gradient(135deg,var(--surface),var(--surface2))}.hero-card{width:100%;max-width:1400px;min-height:620px;border-radius:32px;overflow:hidden;position:relative;background:#12354c;box-shadow:var(--shadow)}.hero-media{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,35,50,.82),rgba(12,35,50,.22)),url("assets/hero.svg") center/cover no-repeat}.hero-content{position:relative;z-index:2;color:#fff;max-width:720px;padding:clamp(34px,7vw,100px)}.kicker{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:10px 18px;border-radius:999px}.hero h1{font-size:clamp(42px,6vw,82px);line-height:1.05;margin:20px 0}.hero p{font-size:20px;line-height:1.9;color:rgba(255,255,255,.9)}
.actions{display:flex;gap:14px;flex-wrap:nowrap;margin-top:28px}.btn{padding:15px 18px;border-radius:14px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0}.btn-primary{background:var(--primary);color:#fff}.btn-contact{background:var(--contact);color:#fff}
.section{padding:90px 5%;position:relative}.section:nth-of-type(even){background:var(--surface)}.container{max-width:1250px;margin:auto}.section-head{text-align:center;max-width:760px;margin:0 auto 45px}.section-head h2{font-size:clamp(30px,4vw,52px);margin:0 0 14px}.section-head p{color:var(--muted);font-size:18px;line-height:1.9}
.about-grid,.services-grid,.projects-grid,.articles-grid,.testimonials{display:grid;gap:22px}.about-grid{grid-template-columns:1fr 1fr;align-items:center}.about-image,.card{border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;background:rgba(255,255,255,.52);backdrop-filter:blur(10px)}.about-image{min-height:420px;background:url("assets/about.svg") center/cover}.about-copy{padding:15px}.about-copy p,.card p{line-height:1.9;color:var(--muted)}
.services-grid,.projects-grid,.testimonials,.articles-grid{grid-template-columns:repeat(3,1fr)}.card{padding:28px}.service-card{min-height:220px}.service-icon{width:60px;height:60px;border-radius:18px;background:var(--surface2);display:grid;place-items:center;font-size:26px;margin-bottom:18px}.card h3{margin:0 0 12px;font-size:24px}.project-card,.article-card{padding:0}.project-thumb{height:230px;background:url("assets/project.svg") center/cover}.article-thumb{height:190px;background:url("assets/article.svg") center/cover}.pad{padding:22px}.quote{font-size:48px;color:var(--primary)}.faq{max-width:900px;margin:auto}.faq details{background:rgba(255,255,255,.62);border:1px solid var(--border);border-radius:18px;margin-bottom:12px;padding:20px 24px}.faq summary{cursor:pointer;font-weight:800;font-size:19px}.contact-box{background:linear-gradient(135deg,var(--surface2),rgba(255,255,255,.8));border:1px solid var(--border);border-radius:30px;padding:45px;text-align:center;box-shadow:var(--shadow)}.site-footer{background:#17344b;color:#fff;padding:45px 5%;text-align:center}
.floating-actions{position:fixed;left:24px;bottom:24px;z-index:1050;display:flex;flex-direction:column;gap:12px}.float-btn{min-width:175px;padding:15px 22px;border-radius:16px;color:#fff;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;gap:10px}.float-call{background:var(--contact)}.float-wa{background:var(--accent)}
.reveal{opacity:0;transform:translateY(28px);transition:.7s}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.hero{min-height:auto;padding:18px 3% 35px}.hero-card{min-height:650px;border-radius:22px}.hero-content{padding:45px 28px}.hero h1{font-size:46px}.about-grid,.services-grid,.projects-grid,.testimonials,.articles-grid{grid-template-columns:1fr}.section{padding:65px 4%}.floating-actions{left:12px;right:12px;bottom:12px;flex-direction:row}.float-btn{flex:1;min-width:0}}

/* قالب لولو 2 - تحسينات توافق الموبايل */
html,body{width:100%;overflow-x:hidden}
img{border:0}
button{font:inherit}
@media(max-width:600px){
  .header-inner{min-height:68px;padding:8px 16px}
  .brand{font-size:17px}
  .brand-mark{width:40px;height:40px;border-radius:12px}
  .menu-btn{width:48px;height:48px}
  .hero{padding:12px 12px 28px}
  .hero-card{min-height:610px}
  .hero-content{padding:38px 22px}
  .hero h1{font-size:38px;line-height:1.15}
  .hero p{font-size:17px;line-height:1.8}
  .section{padding:58px 16px}
  .section-head h2{font-size:34px}
  .section-head p{font-size:16px}
  .drawer{width:min(360px,92vw)}
  .drawer nav a{font-size:18px;padding:19px}
  .floating-actions{left:10px;right:10px;bottom:10px}
  .float-btn{padding:13px 10px;font-size:15px}
}

/* ===== قالب لولو 3 ===== */
:root{--font-heading:"Tajawal",Arial,sans-serif;--font-body:"Tajawal",Arial,sans-serif;--radius:24px}
body{font-family:var(--font-body);background:var(--bg);color:var(--text)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading)}
.site-header{direction:rtl}
.header-inner{flex-direction:row;justify-content:space-between}
.brand{order:1}.menu-btn{order:2}
.hero-content .actions{direction:rtl}
.hero-content .actions .btn{width:190px;min-height:54px}
.card,.about-image,.hero-card{border:1px solid var(--border)}
img{border:6px solid rgba(255,255,255,.72);border-radius:var(--radius);box-shadow:var(--shadow)}
.section{overflow:hidden}
@media(max-width:600px){.hero-content .actions{display:grid;grid-template-columns:1fr 1fr}.hero-content .actions .btn{width:100%}}

/* ===== قالب لولو 13 ===== */
:root{--primary:var(--lulu8-primary);--contact:var(--lulu8-contact);--accent:var(--lulu8-accent);--text:var(--lulu8-text);--bg:var(--lulu8-background);--surface:var(--lulu8-surface)}
body{font-family:var(--lulu8-font-body);font-size:var(--lulu8-body-size);line-height:var(--lulu8-line-height);color:var(--text);background:var(--bg)}
h1,h2,h3,h4,h5,h6{font-family:var(--lulu8-font-heading)}
h1{font-size:var(--lulu8-heading-size)}
.brand-logo{width:48px;height:48px;object-fit:contain;border:0;box-shadow:none;border-radius:12px}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.menu-btn{order:-1}
.hero .actions,.contact-box .actions{display:flex;gap:12px;justify-content:center;align-items:center}
.hero .btn,.contact-box .btn{width:190px;height:54px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.floating-actions{position:fixed;right:20px;bottom:22px;z-index:99;display:flex;flex-direction:column;gap:10px}
.float-btn{min-width:150px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.16)}
.float-call{background:var(--contact)}.float-wa{background:var(--accent)}
.about-image{background-size:cover;background-position:center;min-height:340px;border-radius:24px;background-color:#dce9ea}
.project-thumb{width:100%;height:220px;object-fit:cover;border:0;box-shadow:none;border-radius:20px 20px 0 0}
.testimonial-img{width:62px;height:62px;object-fit:cover;border-radius:50%;display:block;margin-bottom:12px}
.article-card img{width:100%;height:220px;object-fit:cover;border:0;box-shadow:none;border-radius:20px 20px 0 0}
@media(max-width:700px){.hero .btn,.contact-box .btn{width:165px}.floating-actions{right:12px}.float-btn{min-width:135px}.hero .actions{flex-wrap:wrap}}

.about-image{background-size:cover;background-position:center;background-color:#dfecee}
.about-copy{display:grid;gap:14px}
.feature{padding:18px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.55)}
.feature strong{display:block;margin-bottom:6px}

@media(max-width:600px){.hero .actions{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%;gap:10px}.hero .actions .btn{width:50%;flex:1 1 50%;min-width:0;padding:14px 8px;font-size:17px}.hero .actions .icon{margin-inline-end:6px}.floating-actions{display:flex;gap:10px}.floating-actions .float-btn{flex:1 1 0;width:50%}}

.article-card .article-thumb{height:210px;background:url("assets/article.svg") center/cover;overflow:hidden}.article-card .article-image{width:100%;height:100%;object-fit:cover;display:block}


/* ===== قالب لولو 13 — إصلاح نهائي لتنسيق الموبايل ومنع انكماش الصفحة ===== */
html,body{width:100%!important;min-width:0!important;max-width:none!important;overflow-x:hidden!important}
body{margin:0!important}
.site-header,.site-header .header-inner,main,.hero,.section,.site-footer{width:100%!important;max-width:none!important}
.header-inner{direction:ltr!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important}
.brand{order:2!important;margin-left:auto!important;margin-right:0!important;direction:rtl!important}
.menu-btn{order:1!important;margin-right:auto!important;margin-left:0!important}
.drawer{left:0!important;right:auto!important;transform:translateX(-105%)!important}
.drawer.is-open{transform:translateX(0)!important}
.drawer-backdrop{display:block!important}
.drawer-backdrop.is-open{opacity:1!important;visibility:visible!important}

.hero{display:block!important;padding:18px 3%!important;min-height:auto!important}
.hero-card{width:100%!important;max-width:1400px!important;margin:0 auto!important;min-height:min(76vh,680px)!important}
.hero-media{inset:0!important;background-color:#12354c!important}
.hero-content{max-width:780px!important;padding:clamp(30px,6vw,90px)!important;color:#fff!important}
.hero h1,.hero p,.hero .kicker{color:#fff!important}
.hero h1{margin:20px 0!important}
.hero .actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:100%!important;gap:12px!important}
.hero .actions .btn{width:50%!important;flex:1 1 50%!important;min-width:0!important;height:56px!important}

.section{padding-left:4%!important;padding-right:4%!important}
.container{width:100%!important;max-width:1250px!important;margin-left:auto!important;margin-right:auto!important}
.about-grid{width:100%!important}
.about-image{width:100%!important;min-height:360px!important}
.services-grid,.projects-grid,.articles-grid,.testimonials{width:100%!important}
.article-card{width:100%!important}

.floating-actions{left:12px!important;right:12px!important;bottom:12px!important;display:flex!important;flex-direction:row!important;gap:10px!important}
.floating-actions .float-btn{width:50%!important;min-width:0!important;flex:1 1 50%!important;height:54px!important}

@media(max-width:600px){
  .header-inner{min-height:68px!important;padding:8px 14px!important}
  .brand{font-size:17px!important}
  .brand-logo{width:40px!important;height:40px!important}
  .menu-btn{width:48px!important;height:48px!important}
  .hero{padding:10px 10px 28px!important}
  .hero-card{min-height:520px!important;border-radius:20px!important}
  .hero-content{padding:32px 20px!important;max-width:none!important}
  .hero h1{font-size:clamp(32px,10vw,44px)!important;line-height:1.18!important}
  .hero p{font-size:16px!important;line-height:1.8!important}
  .hero .actions{gap:8px!important}
  .hero .actions .btn{width:50%!important;flex:1 1 50%!important;height:52px!important;font-size:16px!important;padding:10px 6px!important}
  .section{padding:52px 12px!important}
  .about-grid{grid-template-columns:1fr!important}
  .about-image{min-height:330px!important}
  .section-head{width:100%!important}
  .services-grid,.projects-grid,.articles-grid,.testimonials{grid-template-columns:1fr!important}
}

/* LULU 11 FINAL */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.site-header .header-inner{direction:ltr!important;display:flex!important;flex-direction:row!important;justify-content:space-between!important}
.site-header .brand{order:2!important;margin-left:auto!important;margin-right:0!important;direction:rtl!important}
.site-header .menu-btn{order:1!important;margin-right:auto!important;margin-left:0!important}
.drawer{left:0!important;right:auto!important;transform:translateX(-105%)!important;box-shadow:20px 0 60px rgba(0,0,0,.2)!important}
.drawer.is-open{transform:translateX(0)!important}
.hero .actions,.contact-box .actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:10px!important;width:100%!important}
.hero .actions .btn,.contact-box .actions .btn{width:50%!important;flex:1 1 50%!important;height:54px!important;min-width:0!important}
.floating-actions{left:12px!important;right:12px!important;bottom:82px!important;display:flex!important;flex-direction:row!important;gap:10px!important}
.floating-actions .float-btn{width:50%!important;flex:1 1 50%!important;height:54px!important}
.site-footer{padding-bottom:125px!important}
.article-card{display:block!important;overflow:hidden!important}
.article-card .article-thumb{height:210px!important;overflow:hidden!important}
.article-card .article-image{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
@media(max-width:600px){
 .hero .actions,.contact-box .actions{flex-direction:row!important;flex-wrap:nowrap!important}
 .hero .actions .btn,.contact-box .actions .btn{width:50%!important;flex:1 1 50%!important;font-size:16px!important;padding:10px 5px!important}
}

/* LULU 12 final overrides */
.site-header .header-inner{direction:ltr!important;display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}
.site-header .brand{order:2!important;direction:rtl!important;margin-left:auto!important;margin-right:0!important}
.site-header .menu-btn{order:1!important;margin-left:0!important;margin-right:auto!important}
.drawer{left:0!important;right:auto!important;transform:translateX(-105%)!important;z-index:2147483005!important}
.drawer.is-open{transform:translateX(0)!important}
.drawer-close{z-index:2147483007!important}
.hero .actions,.contact-box .actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:10px!important;width:100%!important}
.hero .actions .btn,.contact-box .actions .btn{width:50%!important;flex:1 1 50%!important;min-width:0!important;height:56px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
.hero .actions .btn,.contact-box .actions .btn{animation:l12CtaFloat 2.8s ease-in-out infinite;will-change:transform}
.hero .actions .btn:nth-child(2),.contact-box .actions .btn:nth-child(2){animation-delay:.18s}
@keyframes l12CtaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.floating-actions{left:12px!important;right:12px!important;bottom:12px!important;display:flex!important;flex-direction:row!important;gap:10px!important;z-index:2147483000!important}
.floating-actions .float-btn{width:50%!important;flex:1 1 50%!important;height:56px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;animation:l12CtaFloat 2.8s ease-in-out infinite;will-change:transform}
.floating-actions .float-btn:nth-child(2){animation-delay:.18s}
.site-footer{padding-bottom:110px!important}
@media(max-width:600px){
 .hero .actions,.contact-box .actions{flex-direction:row!important;flex-wrap:nowrap!important}
 .hero .actions .btn,.contact-box .actions .btn{width:50%!important;flex:1 1 50%!important;font-size:16px!important;padding:10px 6px!important}
 .floating-actions{bottom:12px!important;flex-direction:row!important}
 .floating-actions .float-btn{width:50%!important;flex:1 1 50%!important}
 .site-footer{padding-bottom:120px!important}
}
#services .services-grid,#projects .projects-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px!important}
#services .service-card,#projects .project-card{padding:0!important;overflow:hidden!important;border-radius:24px!important;background:#fff!important}
#services .service-card>img,#projects .project-card .project-thumb{width:100%!important;height:220px!important;object-fit:cover!important;display:block!important;border:0!important;box-shadow:none!important;border-radius:0!important}
#services .service-card>h3,#services .service-card>p,#projects .project-card .pad{padding-inline:22px!important}
@media(max-width:900px){#services .services-grid,#projects .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){#services .services-grid,#projects .projects-grid{grid-template-columns:1fr!important}}
/* Articles carousel */
.l12-articles-viewport{overflow:hidden;width:100%}.l12-articles-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}.l12-articles-track::-webkit-scrollbar{display:none}.l12-articles-track .article-card{flex:0 0 82%;max-width:82%;scroll-snap-align:start}
@media(min-width:701px){.l12-articles-track{overflow:hidden;animation:l12Articles 28s linear infinite}.l12-articles-track:hover{animation-play-state:paused}.l12-articles-track .article-card{flex:0 0 calc((100% - 36px)/3);max-width:calc((100% - 36px)/3)}}
@keyframes l12Articles{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}
@media(prefers-reduced-motion:reduce){.hero .actions .btn,.contact-box .actions .btn,.floating-actions .float-btn,.l12-articles-track{animation:none!important}}
html,body{width:100%;max-width:100%;overflow-x:hidden}

/* LULU 13 */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.site-header .header-inner{direction:ltr!important;display:flex!important;flex-direction:row!important;justify-content:space-between!important;align-items:center!important}
.site-header .brand{order:2!important;direction:rtl!important;margin-left:auto!important;margin-right:0!important}
.site-header .menu-btn{order:1!important;margin-right:auto!important;margin-left:0!important}
.drawer{left:0!important;right:auto!important;transform:translateX(-105%)!important;z-index:2147483005!important}
.drawer.is-open{transform:translateX(0)!important}
.hero .actions,.contact-box .actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:10px!important;width:100%!important}
.hero .actions .btn,.contact-box .actions .btn{width:50%!important;flex:1 1 50%!important;height:54px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;animation:l13Cta 2.8s ease-in-out infinite!important}
.hero .actions .btn:nth-child(2),.contact-box .actions .btn:nth-child(2){animation-delay:.18s!important}
.l13-btn-icon{width:20px!important;height:20px!important;display:inline-block!important;flex:0 0 20px!important}
@keyframes l13Cta{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.floating-actions{left:12px!important;right:12px!important;bottom:0!important;display:flex!important;flex-direction:row!important;gap:10px!important;z-index:2147483000!important}
.floating-actions .float-btn{width:50%!important;flex:1 1 50%!important;height:56px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;animation:l13Cta 2.8s ease-in-out infinite!important}
.floating-actions .float-btn:nth-child(2){animation-delay:.18s!important}
.site-footer{padding-bottom:110px!important}
#services .services-grid,#projects .projects-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px!important}
#services .service-card,#projects .project-card{padding:0!important;overflow:hidden!important;border-radius:24px!important;background:#fff!important}
#services .service-card>img,#projects .project-card .project-thumb{width:100%!important;height:220px!important;object-fit:cover!important;display:block!important;border:0!important;border-radius:0!important}
#services .service-card>h3,#services .service-card>p,#projects .project-card .pad{padding-inline:22px!important}
@media(max-width:900px){#services .services-grid,#projects .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){#services .services-grid,#projects .projects-grid{grid-template-columns:1fr!important}.site-footer{padding-bottom:120px!important}}
.l13-articles-viewport{overflow:hidden;width:100%}
.l13-articles-track{display:flex!important;gap:18px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;padding-bottom:8px!important;touch-action:pan-x!important}
.l13-articles-track::-webkit-scrollbar{display:none}
.l13-articles-track .article-card{flex:0 0 84%!important;max-width:84%!important;scroll-snap-align:start!important}
@media(min-width:701px){.l13-articles-track{overflow:hidden!important;animation:l13Articles 30s linear infinite!important}.l13-articles-track:hover{animation-play-state:paused!important}}
@keyframes l13Articles{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}
@media(prefers-reduced-motion:reduce){.hero .actions .btn,.contact-box .actions .btn,.floating-actions .float-btn,.l13-articles-track{animation:none!important}}