:root{
  --primary:#655640;
  --secondary:#655640;
  --accent:#655640;
  --success:#10B981;
  --bg:#ffffff;
  --card:#ffffff;
  --text:#523e24;
  --muted:#516073;
  --line:#e2cc93;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Cairo','Poppins',Tahoma,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 5%, rgba(37,150,190,.14), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(37,150,190,.10), transparent 26%),
    var(--bg);
  line-height:1.65;
}
.container{width:min(1200px,92%);margin-inline:auto}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.loader-wrap{
  position:fixed;inset:0;background:#ffffff;display:grid;place-items:center;z-index:2000;
  transition:opacity .45s ease, visibility .45s ease;
}
.loader-wrap.hide{opacity:0;visibility:hidden}
.loader-orb{
  width:68px;height:68px;border-radius:50%;
  border:4px solid #d5eef8;border-top-color:var(--primary);animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.topbar{
  position:sticky;top:0;z-index:1100;
  background:rgba(255,255,255,.22);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(10px);
  transition:all .35s ease;
}
.topbar.scrolled{
  background:rgba(255,255,255,.92);
  border-color:#dfe9f2;
  box-shadow:0 8px 25px rgba(37,150,190,.10);
}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0}

.shop-banner{padding:14px 0 10px}
.shop-banner-media{
  position:relative;overflow:hidden;border-radius:24px;
  border:1px solid #b9dced;background:#ffffff;
  box-shadow:0 14px 30px rgba(19,90,119,.14);
  transform:translateY(26px) scale(.985);opacity:0;
  animation:shopReveal .95s cubic-bezier(.22,.61,.36,1) .18s forwards;
}
.shop-banner-media img{
  width:100%;height:min(52vh,420px);object-fit:cover;object-position:center top;display:block;
  filter:saturate(1.06) contrast(1.03);
}
.shop-banner-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:24px;color:#fff;text-align:center;
  background:linear-gradient(to top, rgba(7,22,34,.35), rgba(7,22,34,.18) 45%, rgba(7,22,34,.05) 75%);
}
.shop-banner-overlay p{
  margin:10px 0 0;
  font-weight:600;
  font-size:15px;
  color:#ffffff;
  position:absolute;
  right:22px;
  bottom:18px;
  text-align:right;
}
.shop-shine-title{
  margin:0;
  font-size:clamp(30px,4.8vw,58px);
  font-weight:900;
  letter-spacing:.4px;
  position:relative;
  display:inline-block;
  color:#ffffff;
  text-shadow:0 3px 15px rgba(0,0,0,.35);
  overflow:hidden;
}
.shop-sign-title{
  font-family:'Cairo', sans-serif;
  font-size:clamp(44px,6.2vw,96px);
  line-height:1;
  font-weight:900;
  color:#ffffff;
  margin-top:-66px;
  margin-left:102px;
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 8px 26px rgba(0,0,0,.55),
    0 0 14px rgba(255,255,255,.25);
}
.shop-shine-title::after{
  content:"";
  position:absolute;top:-10%;left:-45%;
  width:34%;height:140%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.82) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  animation:titleShine 3.4s ease-in-out .9s infinite;
  pointer-events:none;
}
@keyframes shopReveal{
  to{transform:translateY(0) scale(1);opacity:1}
}
@keyframes titleShine{
  0%{left:-55%}
  55%{left:120%}
  100%{left:120%}
}
.logo-wrap{display:flex;align-items:center;gap:10px;font-weight:800}
.logo-wrap img{height:48px;width:auto}
.nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-links > a:not(.btn){font-weight:700;color:#574c3c;padding:8px 10px;border-radius:8px}
.nav-links > a:not(.btn):hover{background:#e9f6fb}
.lang-switch{font-weight:700}
.lang-switch a{color:#574c3c}

.btn{
  border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;border-radius:999px;font-weight:800;transition:.3s ease;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(120deg,#655640,#d4a257);
  box-shadow:0 10px 20px rgba(101,86,64,.30);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(37,150,190,.36)}
.btn-glow{position:relative;overflow:hidden}
.btn-glow:after{
  content:"";position:absolute;inset:-40%;background:radial-gradient(circle, rgba(255,255,255,.45) 0%, transparent 60%);
  transform:translateX(-140%);transition:transform .7s ease;
}
.btn-glow:hover:after{transform:translateX(90%)}
.btn-outline{
  border:1.6px solid #665b4c;background:rgba(255,255,255,.55);color:#665b4c;
}
.btn-outline:hover{background:#fff}
.btn-dark{background:#12263a;color:#fff}
.btn-dark:hover{filter:brightness(1.08)}

.hero-modern{position:relative;padding:78px 0 30px;overflow:hidden}
.floating{position:absolute;border-radius:50%;filter:blur(1px);animation:float 6s ease-in-out infinite}
.f1{width:140px;height:140px;top:80px;left:-30px;background:rgba(37,150,190,.18)}
.f2{width:95px;height:95px;top:180px;right:8%;background:rgba(16,185,129,.20);animation-delay:.7s}
.f3{width:65px;height:65px;bottom:20px;left:15%;background:rgba(37,150,190,.25);animation-delay:1.2s}
@keyframes float{50%{transform:translateY(-12px)}}

.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;
}
.badge-gold{
  display:inline-block;background:#fff2a4;border:1px solid #f5d38e;color:#57524b;
  padding:7px 12px;border-radius:999px;font-weight:700;font-size:13px;
}
.hero-modern h1{font-size:clamp(32px,4.8vw,56px);line-height:1.14;margin:12px 0 10px}
.hero-modern p{font-size:17px;max-width:640px;color:var(--muted)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.hero-card{
  background:linear-gradient(160deg,#ffffffd9,#e9f8ffcf);
  border:1px solid #bee3f2;border-radius:28px;padding:12px;
  box-shadow:0 22px 50px rgba(37,150,190,.18);
}
.hero-card img{border-radius:20px;aspect-ratio:4/3;object-fit:cover}

.section{padding:64px 0}
.section h2{font-size:clamp(26px,3.2vw,38px);margin:0 0 20px}
.slider-section{padding-top:28px}
.heroSwiper .slide-card{
  overflow:hidden;border-radius:24px;border:1px solid #c9e7f2;
  box-shadow:0 14px 40px rgba(37,150,190,.15);
}
.heroSwiper .slide-card img{width:100%;height:420px;object-fit:cover}
.swiper-pagination-bullet{background:#8ac8dd;opacity:1}
.swiper-pagination-bullet-active{background:#655640}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.glass-card{
  background:linear-gradient(160deg,rgba(255,255,255,.76),rgba(255,255,255,.48));
  border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  border-radius:20px;padding:22px;
  box-shadow:0 12px 30px rgba(37,150,190,.12);
  transition:.3s ease;
}
.glass-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(37,150,190,.18)}
.glass-card h3{margin:0 0 8px}
.glass-card p{margin:0;color:var(--muted)}

.timeline{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;
}
.timeline-item{
  background:var(--card);border:1px solid #d5e7f1;border-radius:16px;padding:20px;
  box-shadow:0 10px 25px rgba(23,100,128,.08);
}
.timeline-item span{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(130deg,#655640,#d4a257);color:#fff;font-weight:800;margin-bottom:10px;
}
.timeline-item h4{margin:0;font-size:17px}

.stats-section{padding-top:18px}
.stat-card{
  text-align:center;background:linear-gradient(160deg,#ffffff,#f3fbff);
  border:1px solid #d2e8f2;border-radius:18px;padding:25px;
  box-shadow:0 10px 22px rgba(37,150,190,.1);
}
.stat-card strong{font-size:44px;color:#9d7c4c;display:block;line-height:1}
.stat-card p{margin:10px 0 0;font-weight:700;color:#24506a}

.testimonial{
  background:#fff;border:1px solid #dceaf1;border-radius:16px;padding:24px;
  box-shadow:0 10px 25px rgba(37,150,190,.09);min-height:170px;
}
.testimonial p{margin:0 0 12px;color:#2d4353}
.testimonial strong{color:#16384a}

.faq-list{display:grid;gap:10px}
.faq-item{
  border:1px solid #d5e7f1;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 8px 18px rgba(37,150,190,.07)
}
.faq-q{
  width:100%;padding:15px 16px;text-align:start;border:none;background:transparent;
  font:700 16px 'Cairo','Poppins',sans-serif;cursor:pointer;color:#14384a;
}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 16px;color:#2f4b5a}
.faq-item.open .faq-a{max-height:140px;padding:0 16px 15px}

.footer{
  background:linear-gradient(170deg,#655640,#d4a257);
  color:#fff;margin-top:40px;padding:45px 0 14px;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}
.footer h3,.footer h4{margin:0 0 10px}
.footer a{display:block;color:#d8f0fa;margin-bottom:7px}
.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.2);padding-top:12px;margin-top:16px;color:#cceaf8}

.modal-overlay{
  position:fixed;inset:0;background:rgba(3,18,31,.62);
  display:none;align-items:center;justify-content:center;padding:18px;z-index:1500
}
.modal-overlay.open{display:flex}
.modal-card{
  width:min(860px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;
  padding:24px;position:relative;border:1px solid #d4e8f1;box-shadow:0 20px 55px rgba(0,0,0,.22)
}
.modal-close{
  position:absolute;top:10px;inset-inline-end:10px;width:36px;height:36px;border-radius:50%;
  border:none;background:#e8f4fa;cursor:pointer;font-size:20px;color:#14384a
}
.hidden{display:none}
.form-group{margin-bottom:12px}
label{display:block;margin-bottom:6px;font-weight:700}
input,select,textarea{
  width:100%;padding:11px 12px;border:1px solid #c8dbe7;border-radius:10px;
  background:#fff;font:500 14px 'Cairo','Poppins',sans-serif
}
.alert{padding:10px 12px;border-radius:10px;margin-top:10px}
.alert-success{background:#e8fbf3;color:#0f7c56;border:1px solid #b6ecd9}
.alert-danger{background:#fff1f2;color:#b91c1c;border:1px solid #fecdd3}

table{width:100%;border-collapse:collapse;background:#fff}
th,td{border:1px solid #e5edf3;padding:10px;text-align:start}
.admin-wrap{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:#111827;color:#fff;padding:20px}
.sidebar a{display:block;color:#fff;text-decoration:none;padding:8px 10px;border-radius:6px}
.sidebar a:hover{background:#1f2937}
.main{padding:20px}

@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heroSwiper .slide-card img{height:360px}
}
@media (max-width:820px){
  .topbar-inner{flex-wrap:wrap}
  .hero-grid{grid-template-columns:1fr}
  .hero-modern{padding-top:58px}
  .shop-banner{padding:10px 0 4px}
  .shop-banner-media img{height:min(42vh,300px);object-position:center top}
  .shop-banner-overlay{padding:16px}
  .shop-sign-title{font-size:clamp(34px,9.5vw,60px);margin-top:-6px}
  .shop-banner-overlay p{font-size:12px;right:14px;bottom:12px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .heroSwiper .slide-card img{height:270px}
}
@media (max-width:768px){
  .admin-wrap{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0}
}