body{padding:36px;}
.social-row{
display:flex;
gap:var(--gap);
align-items:center;
flex-wrap:wrap;
}


.social-link{
display:inline-grid;
place-items:center;

width:var(--size);
height:var(--size);
border-radius:12px;
text-decoration:none;
transition:transform .12s ease, box-shadow .12s ease;
box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 -1px 0 rgba(255,255,255,.02);
background:white;
border:1px solid rgba(0,0,0,.06);
}


.social-link:focus{outline:3px solid rgba(21,156,228,.18); outline-offset:3px;}
.social-link:hover{transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.08);}


.social-link svg{width:65%; height:65%; display:block}


.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}


.label-row{margin-top:10px; display:flex; gap:var(--gap); align-items:center}
.label{font-size:12px; color:var(--muted); text-align:center; width:calc(var(--size));}
:root {
  --transition: 420ms cubic-bezier(.2,.9,.2,1);
  font-family: 'Tajawal', sans-serif;
  background: #fff;
  color: #2b1a12;
  --size:44px;
--gap:12px;
--icon:#c5a86f;
--muted:#666;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px;
  text-align: center;
}

/* شعار */
.logo img {
  width: 150px;
  height: 150px;
}

/* حاوية الأزرار */
.branches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 800px;
}

/* الأزرار */
.branch-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;

  background: #fff;
        border-radius: 20px;
  color: var(--brown-dark);
  text-decoration: none;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateX(20px);
  opacity: 0;
  transition: all var(--transition);
}

.is-loaded .branch-btn {
  opacity: 1;
  transform: translateY(0);
}

.branch-btn .txt {
  display: flex;
  flex-direction: column;
}

.branch-btn .branch-name {
  font-weight: 600;
  font-size: 16px;
}

.branch-btn .branch-name.en {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.9;
}

.branch-btn .icon {
  font-size: 10px;
}

/* تأثير hover */
.branch-btn:hover {
  background: var(--brown-medium);
  color: #c5a86f;
  transform: translateY(-5px);
}

/* الانستغرام */
.social img {
  width: 40px;
  height: 40px;
}

/* الفوتر */
footer {
  margin-top: 20px;
  font-size: 14px;
}

/* متجاوب */
@media (max-width: 600px) {
  .branches {
   
    align-items: center;
  }
  .branch-btn {
    width: 100%;
    max-width: 320px;
  }
}