*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  margin:0;
  padding:0;
}


body{
  font-family:'Vazirmatn','Vazir',sans-serif;
  background: url("images/coming%20soon%204.png") no-repeat top center;
  background-size: cover;     
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

p {
  color: #676767;
}


@media (max-width:768px){
  body{
    background-size: contain;   
    background-position: top center;
    background-repeat: no-repeat;
  }
}
.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  text-align:center;
  padding:15px 0;  
  gap:10px;
}


.logo{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  margin:0;
  padding:0;
}
.logo-img{
  width:110px;       
  height:auto;
  object-fit:contain;
  image-rendering:-webkit-optimize-contrast;
}

h1 {
  font-family: 'poppins', 'vazirmatn', sans-serif;
  font-weight: 300;
  font-size: clamp(20px, 4vw, 36px);
  line-height: 1.2;       
  letter-spacing: 0.5px;  
  text-align: center;
  color: #284981;
}
p {
  margin:0 0 2px;
  color:#676767;
  font-size:clamp(14px,2.1vw,16px);
}


.hero{
  width:100%;
  display:flex;
  justify-content:center;
}
.hero-img{
  width:min(520px,86vw);
  height:auto;
  display:block;
  margin:-8px auto 22px;
  filter:saturate(1.02);
}

.countdown{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-bottom:8px;
  direction:ltr;
}
.box{
  width:100px;
  padding:8px 10px 12px;
  border-radius:12px;
  background:#7FACD6;
  border:1px solid #E4F2FF;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.digits{
  display:flex;
  justify-content:center;
  gap:6px;
}
.digit{
  width:40px;
  height:50px;
  border-radius:7px;
  background:#E4F2FF;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:26px;
  color:#284981;
}
.label{
  font-size:19px;
  color:#284981;
  font-weight:700;
}


.copyright{
  margin-top:auto;
  color:#828282;
  font-size:13px;
  padding-bottom:15px;
}


@media(max-width:450px){
  .wrap{padding-top:10px;}
  .logo-img{width:90px;}   
  .countdown{
    gap:6px;
    flex-wrap:nowrap;
    justify-content:center;
  }
  .box{
    width:70px;
    padding:6px 4px 8px;
    flex-shrink:0;
  }
  .digit{
    width:28px;
    height:36px;
    font-size:18px;
  }
  .label{
    font-size:11px;
  }
}


@media(max-width:375px){
  .countdown{
    gap:4px;
  }
  .box{
    width:65px;
    padding:5px 3px 7px;
  }
  .digit{
    width:26px;
    height:34px;
    font-size:16px;
  }
  .label{
    font-size:10px;
  }
}

a{
  color: #222;
  text-decoration: none;
}