/* style.css - Elegant White & Gold theme */
:root{
  --gold:#C89B3C;
  --gold-2:#E6C87A;
  --muted:#6b7280;
  --accent:#0b3a6f;
  --wa:#25D366;
  --wrap:1200px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,#ffffff,#fbfbfd);
  color:#0f1724;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* common wrapper */
.wrap{width:92%;max-width:var(--wrap);margin:0 auto;}

/* HEADER - compact */
.site-header{background:transparent;padding:18px 0;position:relative;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-logo{height:70px;display:block}
.brand-text{line-height:1}
.brand-name{display:block;font-weight:700;color:var(--accent);font-size:1.05rem}
.brand-tag{display:block;font-size:0.82rem;color:var(--muted)}

/* nav */
.main-nav{display:flex;gap:18px;align-items:center}
.nav-link{color:var(--muted);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px;transition:all .18s}
.nav-link:hover{color:var(--accent);background:rgba(11,58,111,0.04)}
.nav-link.active{color:var(--accent);}

/* HERO */
.hero{padding:24px 0 10px;text-align:center;position:relative}
.hero-inner{padding-top:8px}
.hero-logo-large{width:260px;max-width:70%;transition:transform .4s;display:block;margin:6px auto 12px;filter:drop-shadow(0 12px 30px rgba(200,155,60,0.15))}
.hero-title{font-size:1.9rem;color:var(--accent);margin:8px 0 6px;letter-spacing:.6px;font-weight:700}
.hero-sub{color:#334155;max-width:820px;margin:0 auto 18px;font-size:1.02rem}

/* slider shell */
.slider-shell{margin-top:18px;padding:18px 0;background:linear-gradient(180deg,rgba(234,229,216,0.3),rgba(255,255,255,0.6));border-radius:14px}
.slider-container{overflow:hidden}
.slider-track{display:flex;align-items:center;gap:18px;height:340px;padding:12px 6px;animation:scroll 36s linear infinite}
.slide{flex:0 0 620px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(16,24,40,0.06)}
.slide img{width:100%;height:100%;object-fit:cover;display:block}

/* if images quantity small, track width auto handled by flex */

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

/* about / cta */
.about-cta{padding:48px 0 72px;text-align:center}
.about-cta h2{font-size:1.4rem;color:var(--accent);margin-bottom:12px}
.about-cta p{max-width:820px;margin:0 auto 18px;color:#475569}
.ctas{display:flex;gap:14px;justify-content:center}

/* buttons */
.btn{display:inline-block;padding:12px 20px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-gold{background:linear-gradient(90deg,var(--gold),var(--gold-2));color:#111;box-shadow:0 8px 22px rgba(200,155,60,0.12)}
.btn-outline{border:2px solid var(--gold);color:var(--accent);background:transparent}

/* Footer */
.site-footer{background:linear-gradient(180deg,#fff,#fbfbfd);padding:40px 0;border-top:1px solid rgba(15,23,36,0.04)}
.footer-grid{display:grid;grid-template-columns:1fr 220px 160px;gap:20px;align-items:start}
.f-logo{height:56px}
.site-footer h4{margin:0 0 8px 0;color:var(--accent)}
.site-footer p, .site-footer a{color:#334155;font-size:0.95rem;text-decoration:none}
.socials{display:flex;gap:10px;margin-top:8px}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:transparent;box-shadow:0 6px 18px rgba(16,24,40,0.04);transition:transform .18s}
.social-link svg{display:block}
.social-link:hover{transform:translateY(-4px)}

/* copyright */
.copyright{margin-top:18px;color:#94a3b8;font-size:0.9rem;text-align:center}

/* WhatsApp FAB */
.whatsapp-fab{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:999;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--wa);
  color:#fff;
  padding:12px 14px;
  border-radius:999px;
  box-shadow:0 12px 30px rgba(37,211,102,0.18);
  text-decoration:none;
  font-weight:700;
}
.whatsapp-fab .wa-icon{
  width:22px;
  height:22px;
  display:inline-block;
  background:url('../img/wa-white.svg') center/contain no-repeat;
}
.wa-text{display:inline-block}

/* responsive */
@media (max-width:980px){
  .slider-track{animation-duration:48s;height:300px}
  .slide{flex:0 0 520px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .brand-logo{height:58px}
  .hero-title{font-size:1.3rem}
  .slider-track{animation-duration:52s;height:240px}
  .slide{flex:0 0 360px}
  .main-nav{display:none}
  .site-header .wrap{justify-content:space-between}
  .whatsapp-fab{right:14px;bottom:14px;padding:10px 12px}
}

/* ========== HERO SECTION ========== */
.hero {
  text-align: center;
  background: linear-gradient(to bottom, #ffffff, #f8f3e8);
  color: #222;
  padding-top: 80px;
  padding-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-logo-large {
  width: 260px;
  height: auto;
  margin-bottom: 20px;
  animation: floatLogo 5s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.1));
}

.hero-title {
  font-size: 2.2rem;
  font-weight: 600;
  color: #b08b24;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.hero-sub {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.85;
}

/* ========== SLIDER ========== */
.slider-shell {
  margin-top: 50px;
  overflow: hidden;
  width: 100%;
  height: 420px;
  position: relative;
}

.slider-track {
  display: flex;
  width: max-content;
  animation: slideFlow 60s linear infinite;
}

.slide {
  flex: 0 0 auto;
  width: 33.33vw; /* 3 صور تقريبًا في الشاشة */
  height: 420px;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  transition: transform 0.3s ease-in-out;
}

.slide img:hover {
  transform: scale(1.03);
}

/* ========== ANIMATIONS ========== */
@keyframes slideFlow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-logo-large { width: 180px; }
  .hero-title { font-size: 1.6rem; }
  .slider-shell { height: 300px; }
  .slide { width: 60vw; height: 300px; }
}