:root{
    --navy:#13294b;
    --orange:#f5a623;
    --sky-light:#eaf1fb;
    --sky-mid:#dde9f7;
    --text-muted:#5b6b82;
    --card-border:#c9dbf0;
  }

  *{font-family:'Vazirmatn', sans-serif;}

  html,body{
    height:100%;
    margin:0;
  }

  body{
    background: #eef3fa;
    overflow-x:hidden;
    color:var(--navy);
  }

  .stage{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .frame{
    position:relative;
    width:100%;
    min-height:100vh;
    background: url('../../static/img/back.png') center center / cover no-repeat;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* decorative side art (mosque left / city right) rendered as soft svg silhouettes */
  .side-art{
    position:absolute;
    top:0;
    bottom:0;
    width:34%;
    opacity:.55;
    z-index:0;
  }
  .side-art.left{ left:0; }
  .side-art.right{ right:0; transform:scaleX(-1) scaleX(-1); }
  .side-art svg{ width:100%; height:100%; }

  .content{
    position:absolute;
    inset:0;
    z-index:2;
    text-align:center;
    max-width:560px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
  }

  .logo-ring{
    width:170px;
    height:170px;
    margin:0 auto 18px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .logo-ring .logo-disc{
    width:170px;
    height:170px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 30px rgba(19,41,75,.18);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .logo-mark{
    width:78%;
    height:78%;
    object-fit:contain;
  }

  .brand{
    font-weight:800;
    letter-spacing:.18em;
    font-size:1.15rem;
    color:var(--navy);
    margin-bottom:0;
  }
  .brand-fa{
    font-size:.85rem;
    color:var(--orange);
    letter-spacing:.05em;
    margin-top:-2px;
    margin-bottom:28px;
  }
  .brand-divider{
    width:90px;
    height:2px;
    background:var(--navy);
    margin:6px auto 0;
    opacity:.5;
  }

  h1.headline{
    font-weight:800;
    font-size:1.9rem;
    color:var(--navy);
    margin-bottom:14px;
  }

  p.subline{
    color:var(--text-muted);
    font-size:1rem;
    margin-bottom:28px;
  }

  .countdown{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }

  .time-box{
    background:#fff;
    border:1px solid var(--card-border);
    border-radius:12px;
    padding:10px 18px;
    min-width:66px;
    box-shadow:0 4px 14px rgba(19,41,75,.06);
  }
  .time-box .num{
    font-weight:800;
    font-size:1.4rem;
    color:var(--navy);
    line-height:1.2;
  }
  .time-box .lbl{
    font-size:.7rem;
    color:var(--text-muted);
    margin-top:2px;
  }
  .colon{
    align-self:center;
    color:var(--orange);
    font-weight:800;
    font-size:1.2rem;
    margin-top:-14px;
  }

  @media (max-width: 768px){
    .side-art{display:none;}
    h1.headline{font-size:1.4rem;}
    .logo-ring{width:120px;height:120px;}
    .logo-ring .logo-disc{width:96px;height:96px;}
  }

  /* Generated by script */
@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('../fonts/webfonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}