body {
  margin: 0;
  padding: 0;
  background: #f7f9fa; /* Soft background color for a pleasant web layout */
  font-family: "Georgia", "Times New Roman", serif;
  color: #2d3748;
}

/* Responsive, web-optimized container card */
.page-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0; /* Soft card border */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Modern card shadow effect */
  
  max-width: 800px;         /* Ideal line length width for comfortable desktop reading */
  width: 92%;               /* Breathing room on phone screens */
  margin: 30px auto;        /* Center on screen with vertical margins */
  border-radius: 8px;       /* Sleek rounded card edges */
  position: relative;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* Page Titles */
.page-title, .surah_title {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  margin: 20px 0;
  color: #008080;           /* Primary theme accent color */
}

/* Arabic Section Container */
.myconta {
  direction: rtl;
  text-align: right;
  border-top: 1px solid #e2e8f0;
  padding: 24px;            /* Generous padding for clean presentation */
}

.myconta .atext {
  font-size: 28px;          /* Scaled up for screen rendering legibility */
  line-height: 2.2;         /* Loose line height to avoid overlapping vowels (harakat) */
  font-family: "Amiri", "Noto Naskh Arabic", serif;
  color: #1a202c;
}

/* Persian Section Container */
.mycont {
  direction: rtl;
  text-align: right;
  border-top: 1px solid #e2e8f0;
  padding: 20px 24px;
}

.mycont .ftext {
  font-size: 19px;          /* Sharp, clear size for mobile and desktop */
  line-height: 1.8;         /* Comfortable text reading density */
  font-family: "Vazir", "Noto Sans Arabic", serif;
  color: #2d3748;
}

/* Remove double-border from whatever first block follows the title */
.page-container > div:first-of-type,
.page-container > .myconta:first-of-type,
.page-container > .mycont:first-of-type {
  border-top: none;
}

/* ==========================================================================
   MOBILE SCREEN ADVANCED LAYOUT CONTROLS
   ========================================================================== */
@media screen and (max-width: 600px) {
  .page-container {
    width: 100%;            /* Maximize phone width space edge-to-edge */
    margin: 0 0 20px 0;
    border-radius: 0;       /* Smooth flat interface on smaller displays */
    border-left: none;
    border-right: none;
  }
  
  .myconta .atext {
    font-size: 24px;        /* Optimized mobile Arabic display scale */
    line-height: 2.0;
  }
  
  .mycont .ftext {
    font-size: 17px;        /* Optimized mobile Persian display scale */
    line-height: 1.7;
  }

  .myconta, .mycont {
    padding: 16px;          /* Comfort padding tight adjustment for phones */
  }
}