/* ========================================
   SPEED TOP  - Dark Theme
   Colors: Yellow #FFC107 icons, Black bg, White text
   ======================================== */
:root{
  --yellow:#FFC107;
  --yellow-dark:#E0A800;
  --black:#0a0a0a;
  --dark:#141414;
  --dark-2:#1c1c1c;
  --dark-3:#262626;
  --gray:#1a1a1a;
  --text:#e8e8e8;
  --muted:#a8a8a8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{
  font-family:'Cairo','Tajawal',sans-serif;
  color:var(--text);
  background:var(--black);
  line-height:1.6;
}
body:not(.lang-ar){font-family:'Poppins','Montserrat',sans-serif}

a{text-decoration:none;color:inherit;transition:.25s}
a:hover{color:var(--yellow)}
img{max-width:100%;height:auto}

/* Topbar */
.topbar{
  background:#000;
  color:#fff;
  font-size:.85rem;
  padding:8px 0;
  border-bottom:1px solid #222;
}
.topbar a{color:#fff}
.topbar a:hover{color:var(--yellow)}
.topbar i{color:var(--yellow);margin:0 6px}

/* Navbar */
.main-nav{
  background:var(--dark);
  box-shadow:0 4px 18px rgba(0,0,0,.5);
  padding:.85rem 0;
  border-bottom:1px solid #222;
}
.main-nav .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.navbar-brand{display:flex;align-items:center;gap:10px;font-weight:800;padding:0}
.brand-logo{
  height:70px;width:auto;display:block;
  background:transparent;
  filter:drop-shadow(0 4px 12px rgba(255,193,7,.25));
}
@media(max-width:576px){.brand-logo{height:54px}}

.navbar-toggler{
  border:1px solid var(--yellow);
  padding:.35rem .55rem;
}
.navbar-toggler:focus{box-shadow:0 0 0 .15rem rgba(255,193,7,.3)}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23FFC107' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-link{
  font-weight:600;
  color:#fff !important;
  position:relative;
  padding:.5rem 1rem !important;
}
.nav-link.active,.nav-link:hover{color:var(--yellow) !important}
.nav-link.active::after{
  content:"";position:absolute;bottom:0;left:20%;right:20%;
  height:3px;background:var(--yellow);border-radius:3px;
}

/* Buttons */
.btn-yellow{
  background:var(--yellow);
  color:#000;
  font-weight:700;
  border:none;
  border-radius:50px;
  padding:.55rem 1.3rem;
  display:inline-flex;align-items:center;gap:8px;
  transition:.3s;
}
.btn-yellow:hover{background:#fff;color:#000;transform:translateY(-2px)}
.btn-dark-pill{
  background:#000;color:var(--yellow);border-radius:50px;padding:.6rem 1.4rem;
  font-weight:700;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--yellow);
}
.btn-dark-pill:hover{background:var(--yellow);color:#000}
.btn-wa{background:#25D366;color:#fff;border-radius:50px;padding:.55rem 1.2rem;font-weight:600}
.btn-wa:hover{background:#128C7E;color:#fff}

.lang-btn{
  border-radius:50px;font-weight:700;
  border:1.5px solid var(--yellow) !important;
  color:var(--yellow) !important;
  background:transparent;
  padding:.4rem 1rem;
}
.lang-btn:hover{background:var(--yellow);color:#000 !important}

/* Hero */
.hero{
  position:relative;
  min-height:88vh;
  background:linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.65)),url('../img/hero.jpg') center/cover no-repeat;
  display:flex;align-items:center;color:#fff;
  padding:60px 0;
}
.hero h1{
  font-size:clamp(1.8rem,4vw,3.4rem);
  font-weight:800;
  line-height:1.3;
  margin-bottom:1rem;
  color:#fff;
}
.hero h1 span{color:var(--yellow)}
.hero p{font-size:1.15rem;opacity:.9;margin-bottom:2rem;max-width:620px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* Sections */
section{padding:80px 0;background:var(--black)}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{
  font-weight:800;font-size:2.2rem;margin-bottom:.5rem;
  display:inline-block;position:relative;color:#fff;
}
.section-title h2::after{
  content:"";display:block;width:60px;height:4px;background:var(--yellow);
  margin:10px auto 0;border-radius:4px;
}
.section-title p{color:var(--muted)}

/* Service cards */
.service-card{
  background:var(--dark);border-radius:18px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:.35s;height:100%;
  border:1px solid #2a2a2a;
  position:relative;
}
.service-card:hover{transform:translateY(-8px);border-color:var(--yellow);box-shadow:0 18px 40px rgba(255,193,7,.2)}
.service-card .service-img{position:relative;width:100%;height:200px;overflow:hidden}
.service-card .service-img img{width:100%;height:100%;object-fit:cover;transition:.5s;display:block}
.service-card:hover .service-img img{transform:scale(1.08)}
.service-card .service-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7))}
.service-card .icon{
  width:60px;height:60px;border-radius:50%;
  background:var(--yellow);color:#111;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  border:3px solid var(--dark);
  position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);
  z-index:2;box-shadow:0 6px 18px rgba(255,193,7,.4);
  transition:.35s;
}
.service-card:hover .icon{transform:translateX(-50%) scale(1.1)}
.service-card .service-body{padding:44px 20px 24px;text-align:center}
.service-card h4{text-align:center;font-weight:700;color:#fff;margin-bottom:10px}
.service-card p{text-align:center;color:var(--muted);margin:0}

/* Service detail */
.service-detail{
  display:flex;flex-direction:column;background:var(--dark);
  border-radius:20px;overflow:hidden;height:100%;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:.3s;border:1px solid #2a2a2a;
}
.service-detail:hover{transform:translateY(-6px);border-color:var(--yellow)}
.service-detail img{height:220px;object-fit:cover;width:100%}
.service-detail .body{padding:22px;display:flex;flex-direction:column;flex:1}
.service-detail h3{font-weight:700;font-size:1.3rem;margin-bottom:.5rem;color:#fff}
.service-detail h3 i{color:var(--yellow);margin-inline-end:6px}
.service-detail p{color:var(--muted);flex:1}

/* Why us */
.why{background:var(--dark-2)}
.why-card{
  text-align:center;padding:30px 20px;background:var(--dark);border-radius:18px;height:100%;
  transition:.3s;border:1px solid #2a2a2a;border-bottom:4px solid transparent;
}
.why-card:hover{border-color:var(--yellow);transform:translateY(-5px)}
.why-card .ic{
  width:80px;height:80px;margin:0 auto 16px;border-radius:20px;
  background:rgba(255,193,7,.12);
  color:var(--yellow);display:flex;align-items:center;justify-content:center;
  font-size:2rem;border:2px solid var(--yellow);
}
.why-card h5{font-weight:700;margin-bottom:.5rem;color:#fff}
.why-card p{color:var(--muted);margin:0;font-size:.95rem}

/* FAQ */
.accordion{--bs-accordion-bg:var(--dark);--bs-accordion-color:var(--text);--bs-accordion-border-color:#2a2a2a}
.accordion-button{background:var(--dark);color:#fff}
.accordion-button:not(.collapsed){background:var(--yellow);color:#000;font-weight:700}
.accordion-button:not(.collapsed)::after{filter:invert(0)}
.accordion-button::after{filter:invert(1)}
.accordion-button:focus{box-shadow:none;border-color:var(--yellow)}
.accordion-item{border-radius:12px !important;margin-bottom:10px;overflow:hidden;border:1px solid #2a2a2a;background:var(--dark)}
.accordion-body{background:var(--dark);color:var(--text)}

/* Page header */
.page-header{
  background:linear-gradient(135deg,#000,var(--dark-3));
  color:#fff;padding:80px 0 60px;text-align:center;
  border-bottom:3px solid var(--yellow);
}
.page-header h1{font-weight:800;font-size:2.5rem;color:#fff}
.page-header h1 span{color:var(--yellow)}
.page-header p{opacity:.85;margin:0;color:var(--muted)}

/* Contact */
.contact-info-card{
  background:var(--dark);border-radius:18px;padding:28px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);height:100%;
  border:1px solid #2a2a2a;
}
.contact-info-card .row-i{
  display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #2a2a2a;
}
.contact-info-card .row-i:last-child{border:none}
.contact-info-card .ic{
  width:44px;height:44px;border-radius:12px;background:rgba(255,193,7,.12);color:var(--yellow);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;
  border:1px solid var(--yellow);
}
.contact-info-card small{color:var(--muted);display:block}
.contact-info-card strong{color:#fff}

.contact-form{
  background:var(--dark);border-radius:18px;padding:30px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  border:1px solid #2a2a2a;
}
.contact-form label{color:#fff}
.form-control{
  padding:.85rem 1rem;border-radius:10px;
  background:var(--dark-2);border:1px solid #2a2a2a;color:#fff;
}
.form-control::placeholder{color:#777}
.form-control:focus{
  background:var(--dark-2);color:#fff;
  border-color:var(--yellow);box-shadow:0 0 0 .2rem rgba(255,193,7,.2);
}

.map-wrap{border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4);border:1px solid #2a2a2a}
.map-wrap iframe{display:block;width:100%;height:380px;border:0;filter:invert(.9) hue-rotate(180deg)}

/* Footer */
.site-footer{
  background:#000;color:var(--muted);padding:60px 0 25px;margin-top:0;
  border-top:1px solid #222;
}
.site-footer h5{color:var(--yellow);font-weight:700;margin-bottom:1rem}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--yellow)}
.site-footer i{color:var(--yellow);margin-inline-end:6px}
.site-footer hr{border-color:#222;margin-top:30px}
.social a{
  width:40px;height:40px;border-radius:50%;background:var(--dark-2);
  display:inline-flex;align-items:center;justify-content:center;margin-inline-end:6px;
  border:1px solid #2a2a2a;
}
.social a:hover{background:var(--yellow);border-color:var(--yellow)}
.social i{color:var(--yellow);margin:0}
.social a:hover i{color:#000}

/* Floating buttons */
.float-btn{
  position:fixed;bottom:25px;width:55px;height:55px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:1.6rem;box-shadow:0 6px 18px rgba(0,0,0,.5);z-index:999;
  animation:pulse 2s infinite;
}
.float-btn.whatsapp{background:#25D366;right:25px}
.float-btn.call{background:var(--yellow);color:#000;right:25px;bottom:90px}
[dir="rtl"] .float-btn.whatsapp{left:25px;right:auto}
[dir="rtl"] .float-btn.call{left:25px;right:auto}
.float-btn:hover{transform:scale(1.1);color:#fff}
.float-btn.call:hover{color:#000}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}
  70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* Animations */
.fade-up{opacity:0;transform:translateY(30px);transition:.8s}
.fade-up.show{opacity:1;transform:translateY(0)}

/* Alerts */
.alert-success{background:rgba(40,167,69,.15);color:#9be7a8;border:none;border-inline-start:4px solid #28a745}
.alert-danger{background:rgba(220,53,69,.15);color:#f5a8b0;border:none;border-inline-start:4px solid #dc3545}

/* Navbar collapse on mobile */
@media(max-width:991px){
  .navbar-collapse{
    background:var(--dark);
    margin-top:.8rem;
    padding:1rem;
    border-radius:12px;
    border:1px solid #2a2a2a;
  }
  .navbar-nav{margin-bottom:1rem}
}

/* Mobile */
@media(max-width:768px){
  section{padding:50px 0}
  .hero{min-height:70vh;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .page-header{padding:50px 0 40px}
  .page-header h1{font-size:1.8rem}
  .section-title h2{font-size:1.6rem}
}

.service-title-icon{color:var(--yellow) !important;margin-inline-end:8px;font-size:1.2em}