/* ============ Base ============ */
:root{
  --brand:#1a73e8;
  --brand-600:#0f5dc3;
  --text:#1f2a37;
  --muted:#6b7280;
  --light:#f7f9fc;
  --radius:1.25rem;
  --shadow-sm:0 6px 16px rgba(16,24,40,.06);
  --shadow-md:0 10px 30px rgba(16,24,40,.10);
}
html,body{scroll-behavior:smooth}
.page{font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Naskh Arabic", "Tajawal", "Cairo", Arial, sans-serif;color:var(--text);}

/* Utilities */
.section{position:relative}
.section--pad-lg{padding-block:64px}
.section--pad-xl{padding-block:92px}
/* .text-brand{color:var(--brand)} */
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-600);border-color:var(--brand-600)}
.store-badge img{display:block;height:auto}
.store-badge--sm img{width:120px;height:36px}

/* Topbar */
.topbar{background:linear-gradient(90deg,var(--brand),#075985)}
.topbar__link{opacity:.95}
.topbar__link:hover{opacity:1}

/* Navbar */
.navbar .nav-link{padding-inline:14px}
.navbar .nav-link.active{color:var(--brand);font-weight:600}

/* Hero */
.hero{min-height:85vh}
.hero__bg{position:absolute;inset:0;background:url('images/WhatsApp Image 2025-10-22 at 08.43.34_3d92dc5d 1.jpg') center/cover no-repeat;filter:brightness(.65)}
.hero .store-badge img{width:160px;height:48px}
.hero h1{letter-spacing:.2px}

/* About */
#about img{transition:transform .6s ease}
#about img:hover{transform:scale(1.02)}

/* Services */
.service-card{text-align:center;background:#fff;border-radius:var(--radius);padding:50px;box-shadow:var(--shadow-sm);height:100%;transition:transform .25s ease, box-shadow .25s ease}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.service-card__icon{width:56px;height:56px;border-radius:14px;background:var(--light);display:grid;place-items:center;font-size:26px;color:var(--brand);margin-bottom:12px;}

/* Phones */
.phones .phone{background:#fff;object-fit:cover}
.phone--md{width:230px;height:460px}
.phone--sm{width:210px;height:420px}

/* Contact */
.contact-icon{width:40px;height:40px;border-radius:50%;background:var(--light);display:inline-grid;place-items:center;color:var(--brand);font-size:18px}

/* Footer */
.footer{background:#0b1220}
.footer__logo{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none;text-align: -webkit-center;}
#app {position: relative; isolation: isolate;}
.bg-mobile-bn {position: absolute; bottom: 21% !important; top: 17% !important; right: 12% !important; width: 73% !important; height: 62% !important; inset: 0; z-index: 0;  }
@media (min-width: 992px){
  .nav-center-lg{position: absolute;left: 50%;transform: translateX(-50%);display: flex;gap: .75rem;}
}
@media (max-width: 992px){
  .bg-mobile-bn {top: 3% !important; right: 8% !important; width: 82% !important; height: 93% !important;}
}
.accordion-button:not(.collapsed) {color: white; background: #3D56B2;}
.contact-subtitle{
  color: var(--brand); font-weight: 600; display: inline-block; margin-bottom: .75rem; text-decoration: none;
}
.contact-title{
  font-size: 35px !important; font-weight: 800; font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);
}
.contact-card{
  background: #f8fafc; border-radius: 16px;
}
.contact-input{
  border: 1px solid #e6e8f0; border-radius: 10px; box-shadow: none;
}
.contact-input:focus{
  border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(26,115,232,.12);
}
.info-box{
  position: relative; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px;
}
.info-chip{
  position: absolute; top: -14px; right: 16px; background: #eaf1ff; color: #0f296b; border: 1px solid #d7e3ff; padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: .9rem;
}
.contact-badge{
  width: 44px; height: 44px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 20px;
}
.accordion-button:focus {
  border-color: white !important;
}
.accordion .accordion-button:focus{ box-shadow: none; }
.accordion .accordion-button{
  border-width: 1px; border-style: solid; border-color: #fff !important;
}
.accordion .accordion-button:not(.collapsed){
  border-color: #fff !important;
}
.accordion .accordion-button:focus{
  border-color: #fff !important;
}
.custom-container {
  max-width: 90%;
}