/* ===== GLOBAL ===== */

body{
font-family:'Segoe UI', Tahoma, Arial;
background:#f5f7fa;
margin:0;
color:#333;
}

/* ===== HERO ===== */

.hero-simple{
text-align:center;
padding:70px 20px 90px;
background:linear-gradient(135deg,#556B00,#7a9e1a);
color:#fff;
}

.hero-simple h1{
font-size:36px;
margin-bottom:15px;
font-weight:700;
}

.hero-simple p{
font-size:16px;
opacity:0.9;
}

/* ===== SEARCH ===== */

.search-box{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin-top:20px;
}

.search-box input{
padding:14px;
width:260px;
border:none;
border-radius:10px;
outline:none;
font-size:14px;
}

.search-box button{
padding:14px 18px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:600;
transition:0.2s;
}

.search-box button:first-of-type{
background:#FFD700;
color:#000;
}

.search-box .detect{
background:#1f2937;
color:#fff;
}

.search-box button:hover{
transform:translateY(-2px);
}

/* ===== MAIN BOX (CARD) ===== */

.simple-box{
background:#fff;
padding:25px;
margin:-60px auto 30px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.12);
max-width:800px;
text-align:center;
}

/* ===== TITLE ===== */

.simple-box h2{
margin-bottom:15px;
font-size:22px;
}

/* ===== PRAYER GRID ===== */

.simple-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
margin-top:20px;
}

.simple-grid div{
background:#f5f5f5;
padding:14px;
border-radius:10px;
transition:0.2s;
}

.simple-grid div strong{
display:block;
margin-top:5px;
font-size:16px;
}

.simple-grid div:hover{
background:#556B00;
color:#fff;
transform:translateY(-3px);
}

/* ===== SECTIONS ===== */

.section{
max-width:900px;
margin:40px auto;
text-align:center;
padding:0 15px;
}

.section h2{
margin-bottom:15px;
font-size:22px;
}

/* ===== TAGS (Cities & Countries) ===== */

.tags{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
}

.tags a{
background:#fff;
padding:10px 16px;
border-radius:20px;
text-decoration:none;
color:#333;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
transition:0.2s;
font-size:14px;
}

.tags a:hover{
background:#556B00;
color:#fff;
transform:translateY(-2px);
}

/* ===== FOOTER ===== */

.footer{
text-align:center;
padding:20px;
margin-top:40px;
background:#eee;
font-size:14px;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.hero-simple{
padding:50px 15px 80px;
}

.hero-simple h1{
font-size:24px;
line-height:1.4;
}

.search-box input{
width:100%;
}

.simple-box{
margin-top:-50px;
padding:20px;
}

/* grid mobile */

.simple-grid{
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.simple-grid div{
padding:12px;
}

}