@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&family=Markazi+Text:wght@400;600;700&family=Poppins:wght@400;600;700&display=swap");

@font-face {
    font-family: fontArab;
    src: url("https://www.webquran.net/assets/fonts/LPMQIsepMisbah.ttf");
    font-display: swap;
}

:root {
  --clr-black: #1c1c1c;
  --clr-blue: #3690FF;
  --clr-green: #00d269;
  --clr-yellow: #ffc600;
  --clr-white: #ffffff;
  --clr-birumuda: #bbf3eb;
  --heading-font: 'Poppins', sans-serif;
  --bengali-font: 'Hind Siliguri', sans-serif;
  --arabic-font: fontArab,'Uthman Naskh','Markazi Text', serif;
}

::selection {
  background: var(--clr-black);
  color: var(--clr-yellow);
}



.buttons .twitter-share, .buttons .whatsapp-share, .buttons .btn-play, .btn-generate {
  font-size: 16px;
  padding: .3rem 0.75rem;
  border-radius: 20px;
  font-family: var(--heading-font);
  transition: .2s;
}

.btn:active, .buttons .twitter-share:active,  .buttons .whatsapp-share:active, .buttons .btn-play:active, .btn-generate:active {
  transform: scale(0.95);
}



.btn-play,
.bangla-ayah,
.arabic-ayah,
.sura-info {
  margin-top: 20px;
}
.bangla-ayah {
  font-family: var(--bengali-font);
  font-weight: 600;
}

.arabic-ayah {
  font-family: fontArab;
    font-size: 1.7rem;
    line-height: 2.5;
    font-weight: 600;
    direction:rtl;
}

.sura-info {
  font-family: var(--bengali-font);
}

.buttons i {
  margin-right: 5px;
  vertical-align: middle;
}

.buttons .twitter-share {
  color: var(--clr-blue);
  font-size: 16px;
  margin-right: 15px;
  background-color: rgba(54, 144, 255, 0.1);
}

.buttons .twitter-share i {
  font-size: 22px;
}

.buttons .twitter-share:hover {
  background-color: rgba(54, 144, 255, 0.4);
}

.buttons .whatsapp-share {
  color: var(--clr-green);
  font-size: 16px;
  margin-right: 15px;
  cursor: pointer;
  background-color: rgba(0, 210, 105, 0.1);
}

.buttons .whatsapp-share i {
  font-size: 22px;
  cursor: pointer;
}

.buttons .whatsapp-share:hover {
  background-color: rgba(0, 210, 105, 0.4);
}

.buttons .btn-play {
  color: var(--clr-black);
  background: var(--clr-yellow);
  cursor: pointer;
}

.buttons .btn-play:hover {
  box-shadow: 0px 0px 5px 0px rgba(28, 28, 28, 0.3);
}

.btn-generate {
  background: var(--clr-black);
  color: var(--clr-yellow);
  box-shadow: 0px 0px 10px 0px rgba(28, 28, 28, 0.3);
  cursor: pointer;
}

.btn-generate i {
  margin-right: 5px;
  transform: rotate(0);
  animation: spin 1s linear infinite;
  animation-play-state: running;
}

.btn-generate:hover i {
  animation-play-state: paused;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* SM Small Device :550px. */
@media only screen and (max-width: 600px) {
  .heading h1 {
    font-size: 28px;
  }
  main .container {
    margin-right: 50px;
  }
}
.quran{
  width: 100%;
height: fit-content;
text-align: center;
background: var(--bs-success-bg-subtle);
color: #2c3e50;
padding-top: 50px;
font-size: 20px;
padding-bottom: 30px;
}