@font-face {
  font-family: 'SurahName';
  src: url('../assets/fonts/SurahNames.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.border-container {
  margin-top: 10px;
  width: 100%;
  position: relative; 
}

.border-container .border-image {
  margin: 0 auto;
  background-image: url("./assets/Surah-border-light.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 140px;
  max-width: 90% 
}
.surahName {
  font-family: 'SurahName', sans-serif;
  font-size: 1.6rem;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text);
}

@media (min-width: 900px) {
  .surahName { font-size: 2.2rem; }
}

@media (min-width: 1200px) {
  .surahName { font-size: 2.6rem; }
}