/* =========================================================
1. VARIABLES / RESET
========================================================= */
.szh-header{
--szh-green:#0f766e;
--szh-green-dark:#115e59;
--szh-green-soft:#f0fdfa;
--szh-text:#0f172a;
--szh-muted:#64748b;
--szh-border:#e2e8f0;
--szh-bg:#ffffff;
--szh-soft:#f8fafc;
--szh-gold:#b88a2e;
--szh-container:1280px;
width:100%;
background:var(--szh-bg);
color:var(--szh-text);
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
Helvetica,Arial,sans-serif;
position:relative;
z-index:999;
}
.szh-header *,
.szh-header *::before,
.szh-header *::after{
box-sizing:border-box;
}
.szh-header a{
text-decoration:none;
}
.szh-header button,
.szh-header input{
font:inherit;
}
.szh-container{
width:100%;
max-width:var(--szh-container);
margin:0 auto;
padding-left:24px;
padding-right:24px;
}
/* =========================================================
2. TOP ANNOUNCEMENT BAR
========================================================= */
.szh-topbar{
background:var(--szh-green-dark);
color:#fff;
font-size:13px;
}
.szh-topbar-inner{
min-height:38px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.szh-topbar-left,
.szh-topbar-right{
display:flex;
align-items:center;
gap:20px;
}
.szh-topbar-item{
display:flex;
align-items:center;
gap:7px;
color:#fff;
white-space:nowrap;
}
.szh-topbar-item svg{
width:15px;
height:15px;
flex:0 0 auto;
}
.szh-topbar-link{
color:#fff;
transition:opacity .2s ease;
}
.szh-topbar-link:hover{
opacity:.8;
}
/* =========================================================
3. MAIN HEADER
========================================================= */
.szh-main{
background:#fff;
border-bottom:1px solid var(--szh-border);
}
.szh-main-inner{
min-height:88px;
display:grid;
grid-template-columns:220px minmax(300px,1fr) auto;
align-items:center;
gap:32px;
}
/* =========================================================
4. LOGO
========================================================= */
.szh-logo{
display:flex;
align-items:center;
color:var(--szh-text);
min-width:0;
}
.szh-logo-text{
font-size:28px;
line-height:1;
font-weight:800;
letter-spacing:-1px;
color:var(--szh-green-dark);
}
.szh-logo-dot{
color:var(--szh-gold);
}
.szh-logo-sub{
display:block;
margin-top:5px;
font-size:10px;
line-height:1;
color:var(--szh-muted);
text-transform:uppercase;
letter-spacing:1.4px;
font-weight:600;
}
/* =========================================================
5. SEARCH
========================================================= */
.szh-search{
width:100%;
}
.szh-search-form{
display:flex;
width:100%;
height:48px;
border:1.5px solid #cbd5e1;
border-radius:8px;
overflow:hidden;
background:#fff;
transition:border-color .2s ease,box-shadow .2s ease;
}
.szh-search-form:focus-within{
border-color:var(--szh-green);
box-shadow:0 0 0 3px rgba(15,118,110,.10);
}
.szh-search-input{
flex:1;
min-width:0;
height:100%;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
padding:0 16px !important;
background:#fff !important;
color:var(--szh-text) !important;
font-size:14px !important;
}
.szh-search-input::placeholder{
color:#94a3b8;
}
.szh-search-btn{
width:54px;
height:100%;
border:0;
background:var(--szh-green);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:background .2s ease;
}
.szh-search-btn:hover{
background:var(--szh-green-dark);
}
.szh-search-btn svg{
width:21px;
height:21px;
}
/* =========================================================
6. HEADER ACTIONS
========================================================= */
.szh-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
}
.szh-action{
min-width:68px;
height:58px;
padding:5px 8px;
border-radius:7px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
color:var(--szh-text);
transition:background .2s ease,color .2s ease;
position:relative;
}
.szh-action:hover{
background:var(--szh-soft);
color:var(--szh-green);
}
.szh-action-icon{
width:23px;
height:23px;
display:flex;
align-items:center;
justify-content:center;
}
.szh-action-icon svg{
width:23px;
height:23px;
}
.szh-action-label{
font-size:11px;
font-weight:600;
white-space:nowrap;
}
.szh-cart-badge{
position:absolute;
top:3px;
right:9px;
min-width:18px;
height:18px;
padding:0 4px;
border-radius:20px;
background:var(--szh-green);
color:#fff;
font-size:10px;
font-weight:700;
line-height:18px;
text-align:center;
}
/* =========================================================
7. DESKTOP NAVIGATION
========================================================= */
.szh-nav{
background:#fff;
border-bottom:1px solid var(--szh-border);
}
.szh-nav-inner{
min-height:52px;
display:flex;
align-items:stretch;
}
.szh-categories{
width:225px;
flex:0 0 225px;
margin-right:20px;
position:relative;
}
.szh-categories-btn{
width:100%;
height:100%;
min-height:52px;
border:0;
padding:0 18px;
background:var(--szh-green);
color:#fff;
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
font-size:14px;
font-weight:700;
}
.szh-categories-btn:hover{
background:var(--szh-green-dark);
}
.szh-categories-btn svg{
width:20px;
height:20px;
}
.szh-categories-arrow{
margin-left:auto;
width:15px !important;
height:15px !important;
}
/* CATEGORY DROPDOWN */
.szh-category-menu{
display:none;
position:absolute;
left:0;
top:100%;
width:260px;
padding:8px 0;
background:#fff;
border:1px solid var(--szh-border);
border-top:2px solid var(--szh-green);
box-shadow:0 14px 30px rgba(15,23,42,.12);
z-index:1000;
}
.szh-categories:hover .szh-category-menu,
.szh-categories:focus-within .szh-category-menu{
display:block;
}
.szh-category-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
min-height:42px;
padding:8px 17px;
color:#334155;
font-size:14px;
font-weight:500;
transition:background .15s ease,color .15s ease;
}
.szh-category-link:hover{
background:var(--szh-green-soft);
color:var(--szh-green-dark);
}
.szh-category-link svg{
width:15px;
height:15px;
}
/* MAIN MENU */
.szh-menu{
display:flex;
align-items:stretch;
gap:2px;
flex:1;
}
.szh-menu-link{
display:flex;
align-items:center;
min-height:52px;
padding:0 14px;
color:#334155;
font-size:14px;
font-weight:600;
position:relative;
transition:color .2s ease;
white-space:nowrap;
}
.szh-menu-link::after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:0;
height:2px;
background:var(--szh-green);
transform:scaleX(0);
transform-origin:center;
transition:transform .2s ease;
}
.szh-menu-link:hover{
color:var(--szh-green);
}
.szh-menu-link:hover::after{
transform:scaleX(1);
}
.szh-menu-link.szh-sale{
color:#b42318;
}
/* =========================================================
8. MOBILE HEADER
========================================================= */
.szh-mobile{
display:none;
}
.szh-mobile-search{
display:none;
}
/* =========================================================
9. TABLET
========================================================= */
@media (max-width:1100px){
.szh-main-inner{
grid-template-columns:180px minmax(250px,1fr) auto;
gap:18px;
}
.szh-logo-text{
font-size:25px;
}
.szh-menu-link{
padding-left:9px;
padding-right:9px;
font-size:13px;
}
.szh-menu-link::after{
left:9px;
right:9px;
}
.szh-categories{
width:200px;
flex-basis:200px;
margin-right:10px;
}
}
/* =========================================================
10. MOBILE
========================================================= */
@media (max-width:767px){
.szh-container{
padding-left:15px;
padding-right:15px;
}
.szh-topbar-inner{
min-height:34px;
justify-content:center;
}
.szh-topbar-left{
width:100%;
justify-content:center;
}
.szh-topbar-left .szh-topbar-item:not(:first-child),
.szh-topbar-right{
display:none;
}
.szh-topbar-item{
font-size:11px;
white-space:normal;
text-align:center;
}
.szh-main,
.szh-nav{
display:none;
}
.szh-mobile{
min-height:64px;
padding:0 15px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
background:#fff;
border-bottom:1px solid var(--szh-border);
}
.szh-mobile-menu-btn{
width:40px;
height:40px;
padding:0;
border:0;
background:transparent;
color:var(--szh-text);
display:flex;
align-items:center;
justify-content:flex-start;
cursor:pointer;
}
.szh-mobile-menu-btn svg{
width:25px;
height:25px;
}
.szh-mobile-logo{
flex:1;
text-align:center;
color:var(--szh-green-dark);
font-size:23px;
font-weight:800;
letter-spacing:-.7px;
}
.szh-mobile-logo span{
color:var(--szh-gold);
}
.szh-mobile-actions{
display:flex;
align-items:center;
gap:11px;
}
.szh-mobile-action{
width:31px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
color:var(--szh-text);
position:relative;
}
.szh-mobile-action svg{
width:22px;
height:22px;
}
.szh-mobile-cart-badge{
position:absolute;
top:1px;
right:-4px;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:10px;
background:var(--szh-green);
color:#fff;
font-size:9px;
font-weight:700;
line-height:16px;
text-align:center;
}
.szh-mobile-search{
display:block;
padding:10px 15px 12px;
background:#fff;
border-bottom:1px solid var(--szh-border);
}
.szh-mobile-search .szh-search-form{
height:44px;
}
}
/* =========================================================
11. SMALL MOBILE
========================================================= */
@media (max-width:380px){
.szh-mobile{
padding-left:12px;
padding-right:12px;
gap:7px;
}
.szh-mobile-logo{
font-size:20px;
}
.szh-mobile-actions{
gap:6px;
}
}
```
```html
Islamic Books
Browse our authentic collection of Islamic books, including Qur’an, Hadith, Seerah, Fiqh, and Islamic history. Perfect for Muslims, reverts, and seekers of knowledge, these titles offer guidance, inspiration, and understanding—delivered worldwide to readers of all ages.
Showing 253–264 of 367 resultsSorted by popularity
-
El Coran
₹450.00 -
Tuhfatul Ikhwaan
₹337.50 -
El Coran Traduccion Comentada
₹405.00 -
Selections from The Holy Quran and The Ahadith | With Full Vowel-Pointed Arabic Text
₹337.50 -
Vertus De L’Charité | Les Enseignements De L’Islam | L’oeuvre de sincérité et ses vertus
₹675.00 -
The Life of Saladin
₹1,125.00 -
The Holy Quran Line by Line English Translation
₹4,027.50 -
Salat for Children with Illustrations Boys
₹281.70 -
Salat for Children with Illustrations Girls
₹281.70 -
Basic Duas for Children | Introducing Children to the Prayers from The Quran and Hadith
₹450.00 -
Elementary Teachings of Islam
₹125.10 -
The True Jihad | The Concepts of Peace, Tolerance and Non-Violence in Islam
₹288.00