:root{
--bg: #f7f7f3; /* لؤلؤي */
--paper:#ffffff;
--green:#0b3d2e; /* أخضر غامق */
--green2:#0f5a42;
--gold:#c9a44b; /* ذهبي */
--text:#102019;
--muted:#5b6b63;
--line: rgba(11,61,46,.14);
--shadow: 0 16px 40px rgba(16,32,25,.10);
--radius: 18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
background: radial-gradient(1200px 600px at 20% 0%, rgba(201,164,75,.10), transparent 55%),
radial-gradient(900px 500px at 95% 10%, rgba(15,90,66,.12), transparent 50%),
var(--bg);
color:var(--text);
direction:rtl;
}
a{color:inherit; text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 18px}
.topbar{
background: linear-gradient(90deg, rgba(11,61,46,.98), rgba(11,61,46,.92));
color:#fff;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.topbar .row{
display:flex; gap:12px; align-items:center; justify-content:space-between;
padding:10px 0; flex-wrap:wrap;
}
.badge{
display:inline-flex; gap:8px; align-items:center;
border:1px solid rgba(201,164,75,.55);
padding:6px 10px; border-radius:999px;
background: rgba(0,0,0,.10);
font-size:13px;
}
.badge i{width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block}
.nav{
position:sticky; top:0; z-index:50;
background: rgba(247,247,243,.85);
backdrop-filter: blur(10px);
border-bottom:1px solid var(--line);
}
.nav .row{
display:flex; align-items:center; justify-content:space-between;
padding:12px 0; gap:12px;
}
.brand{
display:flex; align-items:center; gap:10px;
font-weight:800; letter-spacing:.2px;
}
.logo{
width:42px; height:42px; border-radius:14px;
background: linear-gradient(135deg, var(--green), #06281e);
display:grid; place-items:center;
box-shadow: 0 10px 24px rgba(11,61,46,.25);
border:1px solid rgba(201,164,75,.30);
}
.logo span{
color:var(--gold); font-weight:900; font-size:18px;
}
.menu{display:flex; gap:14px; flex-wrap:wrap}
.menu a{
padding:10px 12px; border-radius:12px;
color:var(--green);
font-weight:700; font-size:14px;
}
.menu a:hover{background: rgba(11,61,46,.07)}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:10px;
padding:12px 14px;
border-radius:14px;
font-weight:800;
border:1px solid transparent;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
will-change: transform;
}
.btn:active{transform: translateY(1px)}
.btn.primary{
background: linear-gradient(135deg, var(--green), #06281e);
color:#fff;
box-shadow: 0 16px 32px rgba(11,61,46,.22);
}
.btn.primary:hover{transform: translateY(-1px)}
.btn.gold{
background: linear-gradient(135deg, rgba(201,164,75,.95), rgba(201,164,75,.78));
color:#1a1204;
border-color: rgba(11,61,46,.12);
}
.btn.ghost{
background: rgba(255,255,255,.65);
border-color: var(--line);
color:var(--green);
}
.hero{
padding:52px 0 26px;
}
.hero .grid{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap:18px;
align-items:stretch;
}
.card{
background: rgba(255,255,255,.78);
border:1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.hero .main{
padding:26px;
position:relative;
overflow:hidden;
}
.hero .main:before{
content:"";
position:absolute; inset:-40% -20% auto auto;
width:520px; height:520px;
background: radial-gradient(circle at 30% 30%, rgba(201,164,75,.22), transparent 55%),
radial-gradient(circle at 70% 60%, rgba(15,90,66,.22), transparent 55%);
transform: rotate(18deg);
}
.kicker{
position:relative;
display:inline-flex;
gap:10px;
align-items:center;
padding:8px 12px;
border-radius:999px;
background: rgba(11,61,46,.08);
border:1px solid rgba(11,61,46,.12);
color:var(--green);
font-weight:900;
font-size:13px;
}
.kicker b{color:var(--gold)}
h1{
position:relative;
margin:14px 0 10px;
font-size: clamp(28px, 3.2vw, 44px);
line-height:1.18;
color:var(--green);
}
.sub{
position:relative;
margin:0 0 18px;
color:var(--muted);
font-size:16px;
line-height:1.9;
}
.hero .cta{position:relative; display:flex; gap:10px; flex-wrap:wrap}
.hero .side{
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
}
.side .mini{
padding:14px;
border-radius:16px;
background: rgba(11,61,46,.06);
border:1px solid rgba(11,61,46,.12);
}
.side h3{margin:0 0 6px; color:var(--green)}
.side p{margin:0; color:var(--muted); line-height:1.8; font-size:14px}
.list{
display:grid;
grid-template-columns: 1fr;
gap:10px;
margin-top:6px;
}
.li{
display:flex; gap:10px; align-items:flex-start;
padding:12px;
border-radius:14px;
background: rgba(255,255,255,.72);
border:1px solid var(--line);
}
.dot{
width:10px; height:10px; border-radius:50%;
background: var(--gold);
margin-top:7px;
}
.section{padding:18px 0}
.section h2{
margin:0 0 12px;
font-size: clamp(20px, 2.2vw, 28px);
color:var(--green);
}
.section .lead{margin:0 0 14px; color:var(--muted); line-height:1.9}
.features, .services, .contactGrid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:14px;
}
.box{
padding:16px;
border-radius: var(--radius);
background: rgba(255,255,255,.78);
border:1px solid var(--line);
box-shadow: 0 12px 28px rgba(16,32,25,.07);
}
.box h3{margin:0 0 8px; color:var(--green)}
.box p{margin:0; color:var(--muted); line-height:1.9; font-size:14px}
.icon{
width:46px; height:46px; border-radius:16px;
background: rgba(11,61,46,.08);
border:1px solid rgba(11,61,46,.14);
display:grid; place-items:center;
margin-bottom:10px;
}
.icon svg{width:22px; height:22px; fill:var(--green)}
.strip{
margin:18px 0;
padding:14px;
border-radius: var(--radius);
border:1px solid rgba(201,164,75,.35);
background: linear-gradient(135deg, rgba(201,164,75,.12), rgba(11,61,46,.06));
display:flex; gap:12px; align-items:center; justify-content:space-between;
flex-wrap:wrap;
}
.strip strong{color:var(--green)}
.small{color:var(--muted); font-size:13px; line-height:1.8}
.footer{
margin-top:24px;
border-top:1px solid var(--line);
padding:18px 0 60px;
color:var(--muted);
font-size:13px;
}
.footer .row{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footer a{color:var(--green); font-weight:800}
.fab{
position:fixed;
left:16px;
bottom:16px;
display:flex;
gap:10px;
z-index:60;
}
.fab a{
width:54px; height:54px;
border-radius:18px;
display:grid; place-items:center;
box-shadow: 0 18px 38px rgba(16,32,25,.20);
border:1px solid rgba(255,255,255,.22);
}
.fab a.call{background: linear-gradient(135deg, var(--green), #06281e)}
.fab a.wa{background: linear-gradient(135deg, #1fae5a, #148646)}
.fab svg{width:24px; height:24px; fill:#fff}
.reveal{opacity:0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform: translateY(0)}
@media (max-width: 920px){
.hero .grid{grid-template-columns:1fr}
.features,.services,.contactGrid{grid-template-columns:1fr}
.menu{display:none}
}
تخطي إلى المحتوى
