/* --- Jameel Noori Nastaleeq (TTF) --- */
@font-face {
  font-family: "Jameel Noori Nastaleeq";
  src: url("../assets/fonts/Jameel%20Noori%20Nastaleeq.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --soft:#f9fafb;
  --shadow: 0 18px 40px rgba(17,24,39,.10);
  --radius: 18px;
  --primary:#0ea5e9;
  --primary2:#0284c7;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
}

body.ur{
  font-family: "Jameel Noori Nastaleeq", serif;
  direction: rtl;
}

/* Full page center */
.page{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
}

/* Center card */
.card{
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
  padding: 28px 22px;
  text-align: center;
}

/* Logo responsive */
.logoWrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.logo{
  width: min(320px, 72vw);
  height: auto;
  display:block;
  object-fit: contain;
}

/* Text under logo (50% bigger: 26px -> 39px) */
.comingText{
  margin-top: 18px;
  font-size: 39px;
  line-height: 2.1;
}

/* Social links */
.social{
  margin-top: 18px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Buttons (50% bigger: 18px -> 27px) */
.socialBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 24px;              /* slightly bigger padding */
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-decoration:none;
  font-size: 27px;
  line-height: 1.2;
  box-shadow: 0 10px 24px rgba(17,24,39,.08);
  transition: .15s ease;
}
.socialBtn:hover{
  transform: translateY(-1px);
  border-color: #cbd5e1;
  color: var(--primary2);
}

/* Hint (50% bigger: 16px -> 24px) */
.socialHint{
  margin-top: 12px;
  color: var(--muted);
  font-size: 24px;
  line-height: 2.0;
}

/* Mobile tweaks (also 50% bigger accordingly) */
@media (max-width: 420px){
  .card{
    padding: 22px 16px;
  }

  /* Mobile (22px -> 33px) */
  .comingText{
    font-size: 33px;
    line-height: 2.0;
  }

  /* Mobile (16px -> 24px) */
  .socialBtn{
    font-size: 24px;
    padding: 12px 18px;
  }

  /* Mobile (15px -> 22.5px approx) */
  .socialHint{
    font-size: 22px;
  }
}