/* ===== صحبة القرآن — responsive.css ===== */
*{min-width:0}
html,body{overflow-x:hidden}
img,table{max-width:100%}
table.data{display:block;overflow-x:auto;white-space:nowrap}
table.data table,table.data thead,table.data tbody{white-space:normal}
@media (max-width:480px){
  .container{padding:12px 10px 120px}
  .menu-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .menu-item{padding:12px 4px}.menu-item .ico{font-size:26px}.menu-item b{font-size:12px}
  .quran-text{font-size:22px}
  .splash h1{font-size:34px}
  .tasbeeh-btn{width:170px;height:170px}
  .grid-2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:481px) and (max-width:768px){
  .menu-grid{grid-template-columns:repeat(3,1fr)}
  .container{padding-bottom:120px}
}
@media (min-width:769px){
  .menu-grid{grid-template-columns:repeat(6,1fr)}
  .bottom-nav-inner{max-width:760px}
  .nav-item{font-size:12px}
  .container{padding-bottom:120px}
}
@media (min-width:1200px){.container{max-width:1080px}}