.kmd-download-wrapper {
  text-align: center;
  margin: 30px auto;
  font-family: sans-serif;
}

/* container: aligns start button and circle horizontally on desktop, vertical on small screens */
.kmd-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Start button style (initial) */
.kmd-main-button {
  padding: 12px 20px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  background: var(--kmd-primary, #f54845);
  color: #fff;
  cursor: pointer;
  margin-bottom: 30px;
}

/* circle wrap */
.kmd-circle-wrap {
  width: 170px;
  height: 170px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* circle */
.kmd-circle {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: conic-gradient(#614a4a 0deg, #eee 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  position: relative;
  
}

/* timer number in center */
.kmd-circle-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px; /* bigger font */
  font-weight: 800;
  color: #051642;
  pointer-events: none;
  
}

/* wave rotate animation */
@keyframes kmd-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
  
}

/* bottom buttons after timer */
.kmd-bottom-buttons {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.kmd-action-button {
  padding: 10px 16px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background: var(--kmd-primary, #f54845);
  color: #fff;
  cursor: pointer;
  margin-bottom: 30px;
}

.kmd-action-button.kmd-read {
  background: #6c757d;
}

/* hover effects */
.kmd-main-button:hover,
.kmd-action-button:hover {
  transform: translateY(-2px);
  transition: all 0.15s ease;
}

/* responsive: mobile: stack vertically */
@media (max-width: 700px) {
  .kmd-container { flex-direction: column; }
  .kmd-circle-wrap { margin-top: 6px; }
}

/* clear floats بعد میں */
.kmd-download-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* buttons container */
.kmd-container {
  display: flex;
  justify-content: center; /* buttons center میں */
  margin-top: 20px;
  clear: both; /* float کے نیچے آئیں */
}

/* کتاب کا نام دائیں طرف */
.kmd-title-box {
  display: inline-block;
  float: right; /* دائیں طرف */
  text-align: center;
  direction: rtl;
  background: #fffaf5;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px 22px;
  font-size: 25px;
  line-height: 2.2;
  font-family: "Jameel Noori Nastaleeq", "Nafees Nastaleeq", "Noto Nastaliq Urdu", serif;
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 10px;
  min-width: 800px;
}

/* PDF info بائیں طرف */
.kmd-info-box {
  display: inline-block;
  float: right; /* اب info box بھی دائیں طرف آئے گا */
  text-align: center; /* ٹیکسٹ رائٹ الائن */
  direction: rtl; /* LTR کو RTL میں بدل دیا */
  background: #fffaf5;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 16px 22px;
  font-size: 25px;
  line-height: 2.2;
  font-family: "Jameel Noori Nastaleeq", "Nafees Nastaleeq", "Noto Nastaliq Urdu", serif;
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin-bottom: 14px;
  min-width: 800px;
}


/* ہر لائن info کے لیے */
.kmd-info-item {
  display: inline-block;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}

.kmd-info-item span {
  font-weight: bold;
  margin-right: 6px;
}

/* clear floats بعد میں */
.kmd-download-wrapper::after {
  content: "";
  display: table;
  clear: both;
}



@media (max-width: 700px) {
  /* PDF info box موبائل پر vertical stack */
  .kmd-info-box {
    display: block;
    width: 100%;
    direction: rtl;      /* text right-to-left */
    text-align: right;
    padding: 12px 16px;  /* padding تھوڑا کم */
    box-sizing: border-box;
      min-width: 20px;
  }

  /* ہر info line vertical stack اور spacing کم */
  .kmd-info-item {
    display: block;
    width: 100%;
    margin-bottom: 4px;  /* lines کے درمیان کم فاصلہ */
    white-space: nowrap;
    font-size: 22px;     /* فونٹ چھوٹا */
    direction: rtl;
    text-align: center;
  }

  /* figure alignment label کے ساتھ */
  .kmd-info-item span {
    float: center;         /* number/figure left side پر ہو */
    margin-center: 8px;    /* label اور figure کے درمیان gap */
  }

  /* کتاب کا نام box موبائل پر center اور فونٹ تھوڑا چھوٹا */
  .kmd-title-box {
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin-bottom: 12px;
    min-width: 20px;
  }

/* موبائل responsive fix */
@media (max-width: 700px) {

  /* Title اور info boxes موبائل پر adjust کریں */
  .kmd-title-box,
  .kmd-info-box {
    min-width: auto;     /* 800px ہٹا دیں */
    float: none;         /* float remove کریں */
    display: block;      /* full width stack کریں */
    width: 100%;
    text-align: center;  /* text center میں */
    box-sizing: border-box;
    margin: 8px 0;       /* تھوڑا spacing */
  }

  /* container vertical stack, bttn center */
  .kmd-container {
    flex-direction: column;
    align-items: center;   /* بٹن center */
    gap: 12px;
    position: relative;    /* z-index کا کام آئے گا */
    z-index: 10;
  }

  /* Main button */
  .kmd-main-button {
    width: auto;           /* center میں رہیں */
    min-width: 180px;      /* touch-friendly */
    font-size: 16px;
    padding: 14px 24px;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 20;           /* overlay سے اوپر رہیں */
  }

  /* Action buttons (optional) */
  .kmd-action-button {
    width: auto;
    min-width: 140px;
    padding: 12px 20px;
    box-sizing: border-box;
    z-index: 20;
  }
}








.kmd-social-container {
  overflow: visible;
}

.kmd-social-btn {
  transition: transform 0.3s ease;
}

.kmd-social-btn:hover {
  transform: scale(1.1); /* smooth zoom */
  z-index: 5;
}



@media(max-width:768px){
  .kmd-social-btn img{
    width:0.5in;
  }
}