PNG IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
<style>
/* --- 1. VARIABLES & RESET --- */
:root {
--primary-blue: #007bff; /* Bright Green (Brand) */
--dark-green: #1b2734; /* Dark Green (Footer/Text) */
--primary-purple: #007bff; /* Brand Purple */
--action-blue: #007BFF; /* REQUESTED BLUE (#007BFF) */
--text-dark: #333;
--bg-light: #f4f7f6; /* Light Grey BG */
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(--bg-light); color: var(--text-dark); overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; border-radius: 15px; } /* Global Image Curve */
/* --- 2. UTILITIES --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 60px 0; }
.text-center { text-align: center; }
.section-title { font-size: 2.2rem; color: var(--dark-green); margin-bottom: 15px; font-weight: 800; }
/* Grid Layouts */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
/* Buttons */
.btn { padding: 12px 25px; border-radius: 50px; font-weight: 700; cursor: pointer; border: none; transition: 0.3s; display: inline-block; text-align: center; }
/* Brand Buttons */
.btn-green { background-color: #007BFF; color: white; }
.btn-green:hover { background-color: var(--dark-green); transform: translateY(-2px); }
.btn-purple { background-color: var(--primary-purple); color: white; }
.btn-purple:hover { opacity: 0.9; transform: translateY(-2px); }
/* THE REQUESTED BLUE BUTTON STYLE */
.btn-blue { background-color: var(--action-blue); color: white; }
.btn-blue:hover { background-color: #0056b3; transform: translateY(-2px); }
.btn-outline { border: 2px solid #ddd; background: transparent; color: #555; }
.btn-outline:hover { border-color: #333; color: #333; }
/* --- 3. HEADER (Curved & Floating) --- */
.top-bar { padding: 10px 20px; border-bottom: 1px solid #f0f0f0; }
.top-bar-content { display: flex; justify-content: space-between; align-items: center; }
.top-bar-left, .top-bar-center, .top-bar-right { display: flex; align-items: center; gap: 15px; }
.logo h2 { color: var(--primary-purple); font-weight: 800; font-size: 1.6rem; }
.logo span { color: var(--primary-blue); }
.badges img { height: 35px; border-radius: 0; }
.top-bar-center { color: #666; font-size: 0.9rem; }
.top-bar-center i { color: var(--primary-blue); }
/* Icons */
.icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f8f8f8; border-radius: 50%; cursor: pointer; transition: 0.2s; }
.icon-btn:hover { background: #eee; }
.currency-selector {
display: flex; align-items: center; gap: 5px;
background: #f0f0f0; padding: 8px 15px; border-radius: 20px;
font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
/* Cart Badge */
.cart-wrapper { position: relative; cursor: pointer; }
.cart-badge {
position: absolute; top: -5px; right: -5px;
background: #ff4757; color: white;
font-size: 0.7rem; padding: 2px 6px; border-radius: 50%;
font-weight: bold; display: none;
}
/* Mobile Hamburger */
.mobile-toggle { display: none; font-size: 1.5rem; color: var(--primary-purple); cursor: pointer; padding: 10px; }
/* Main Nav */
.main-header { padding: 15px 20px; }
.main-header-content { display: flex; justify-content: space-between; align-items: center; }
.nav-menu { display: flex; gap: 20px; }
.nav-menu a { font-weight: 600; color: #444; font-size: 1rem; }
.nav-menu a:hover { color: var(--primary-purple); }
.header-actions { display: flex; gap: 10px; }
/* --- 4. HERO SECTION --- */
.hero { position: relative; height: 550px; width: 97%; margin: 0 15px; border-radius: 5px; overflow: hidden; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.slide.active { opacity: 1; }
.slide::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); }
.hero-text {
position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
text-align: center; color: white; width: 90%; z-index: 2;
}
.hero-text h1 { font-size: 3.5rem; text-transform: uppercase; font-weight: 900; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }
.form-select {
flex: 1; padding: 12px 20px; border: 1px solid #ddd;
border-radius: 30px; background: white; outline: none; cursor: pointer;
}
/* --- 5. CARDS --- */
.card {
background: white; border-radius: 20px; overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: transform 0.3s;
}
.card:hover { transform: translateY(-10px); }
.card img { border-radius: 0; height: 220px; width: 100%; object-fit: cover; }
.card-body { padding: 25px; text-align: center; }
.card h3 { color: var(--dark-green); margin-bottom: 10px; font-size: 1.2rem; }
.card p { color: #666; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; }
.blog-meta { font-size: 0.8rem; color: #999; margin-bottom: 5px; text-align: left; }
.blog-card .card-body { text-align: left; }
/* --- 6. EXTRA SECTIONS --- */
.why-list li { margin-bottom: 12px; display: flex; align-items: center; font-size: 1.1rem; }
.why-list li i { color: var(--primary-blue); margin-right: 12px; }
.gradient-bg { background: linear-gradient(135deg, #4761e6 0%, #007bff 100%); border-radius: 8px; margin: 1px; padding: 20px; }
.sadaqah-bg { background: linear-gradient(45deg, #5d6de5, #007bff); color: white; text-align: center; padding: 80px 0; }
.quote-box { font-size: 1.6rem; font-style: italic; max-width: 800px; margin: 0 auto 30px; line-height: 1.6; }
.stats-bar {
background: linear-gradient(135deg, #4761e6 0%, #007bff 100%); color: white; border-radius: 20px; padding: 40px;
margin-top: 40px; display: flex; justify-content: space-around; text-align: center;
}
.stat-num { display: block; background: var(--primary-purple); padding: 5px 15px; border-radius: 10px; font-weight: bold; font-size: 1.4rem; margin-bottom: 10px; width: fit-content; margin: 0 auto 10px; }
/* FAQ */
.faq-item { background: var(--primary-purple); color: white; margin-bottom: 15px; border-radius: 15px; overflow: hidden; }
.faq-question { padding: 20px; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; }
.faq-answer { background: white; color: #333; padding: 0 20px; max-height: 0; overflow: hidden; transition: 0.3s; }
.faq-item.active .faq-answer { padding: 20px; max-height: 200px; }
/* --- 7. FOOTER (Green & Curved) --- */
.footer {
background-color: #007BFF;
color: white;
margin: 20px;
border-radius: 20px;
padding: 60px 40px;
}
.footer h3 { color: #d4fcd4; margin-bottom: 20px; font-size: 1.2rem; }
.footer ul li { margin-bottom: 10px; }
.footer a:hover { text-decoration: underline; color: #fff; }
/* --- 8. MODALS --- */
/* Currency Modal */
.currency-modal {
position: absolute; top: 120%; right: 0; width: 200px;
background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
display: none; z-index: 2000; overflow: hidden;
}
.currency-option { padding: 15px; cursor: pointer; transition: 0.2s; border-bottom: 1px solid #f9f9f9; }
.currency-option:hover { background: #f0f9ff; color: var(--action-blue); }
/* Cart Overlay */
.cart-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.6); z-index: 3000;
display: none; justify-content: center; align-items: center;
backdrop-filter: blur(5px);
}
.cart-overlay.active { display: flex; }
.cart-box {
background: white; width: 90%; max-width: 400px;
border-radius: 25px; padding: 30px;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
position: relative;
}
.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; }
.cart-total { display: flex; justify-content: space-between; font-size: 1.4rem; font-weight: 800; margin: 25px 0; }
.success-banner { background: #d4edda; color: #155724; padding: 10px; border-radius: 10px; margin-bottom: 15px; display: none; text-align: center; }
/* --- 9. MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
.top-bar-center { display: none; }
.header-actions { display: none; }
.top-bar-content { flex-wrap: wrap; }
.top-bar-right { margin-top: 10px; width: 1%; justify-content: flex-end; }
/* Hamburger Logic */
.mobile-toggle { display: block; }
.nav-menu {
display: none; /* Hidden on mobile by default */
flex-direction: column;
position: absolute; top: 100%; left: 0; width: 100%;
background: white; padding: 20px;
border-radius: 0 0 20px 20px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
z-index: 999;
}
.nav-menu.active { display: flex; }
.hero-text h1 { font-size: 2.5rem; }
.grid-3, .grid-2 { grid-template-columns: 1fr; gap: 30px; }
.footer { padding: 40px 20px; }
}
/* ===== Header General ===== */
header {
width: 100%;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* ===== Top Bar ===== */
.top-bar {
background: #f8f8f8;
padding: 7px 0;
}
.top-bar-content {
width: 95%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/* LOGO */
.logo-box {
display: flex;
align-items: center;
}
.site-logo {
height: 80px;
width: auto;
object-fit: contain;
}
/* CENTER DATE/TIME */
.top-bar-center span {
font-size: 0.9rem;
color: #333;
}
.ml-15 {
margin-left: 15px;
}
/* CURRENCY */
.currency-selector {
cursor: pointer;
font-size: 0.9rem;
background: #fff;
padding: 6px 14px;
border-radius: 6px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
/* ===== MAIN MENU ===== */
.main-header {
background: #ffffff;
padding: 12px 0;
}
.main-header-content {
width: 95%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/* NAV MENU */
.nav-menu {
list-style: none;
display: flex;
gap: 28px;
}
.nav-menu li a {
font-size: 1rem;
color: #333;
text-decoration: none;
font-weight: 500;
}
.nav-menu li a:hover {
color: #007BFF;
}
/* ===== CART MOVED DOWN ===== */
.cart-wrapper {
position: relative;
margin-right: 10px;
cursor: pointer;
}
.cart-icon i {
font-size: 1.3rem;
color: #007BFF;
}
.cart-badge {
position: absolute;
top: -6px;
right: -10px;
background: red;
color: #fff;
font-size: 12px;
padding: 2px 6px;
border-radius: 50%;
}
/* BUTTONS */
.btn {
padding: 8px 18px;
border: none;
border-radius: 6px;
font-size: 0.95rem;
cursor: pointer;
margin-left: 8px;
}
.btn-purple {
background: #007BFF;
color: #fff;
}
.btn-green {
background: #007BFF;
color: #fff;
}
/* ===== MOBILE ===== */
@media (max-width: 768px) {
.nav-menu {
display: none;
flex-direction: column;
background: #fff;
padding: 20px;
margin-top: 10px;
width: 100%;
}
.mobile-toggle {
display: block;
font-size: 1.5rem;
cursor: pointer;
}
.main-header-content {
flex-wrap: wrap;
gap: 15px;
}
.header-actions {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 10px;
}
}
</style>
<header>
<!-- ===== TOP BAR ===== -->
<div class="top-bar">
<div class="top-bar-content">
<!-- LEFT: Logo -->
<div class="top-bar-left">
<a href="index.php" class="logo-box">
<img src="img/logo.png" class="site-logo" alt="Logo">
</a>
</div>
<!-- CENTER: Islamic Date + Time -->
<div class="top-bar-center">
<span><i class="fas fa-calendar-alt"></i> Today • 15 Jumādā al-ākhirah 1447</span>
<span class="ml-15"><i class="fas fa-clock"></i> Fajr 05:49</span>
</div>
<!-- RIGHT: Currency + Mobile button -->
<div class="top-bar-right">
<div class="currency-selector" onclick="toggleCurrency()">
<span id="current-currency">£-GBP</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="mobile-toggle" onclick="toggleMenu()">
<i class="fas fa-bars"></i>
</div>
<div id="currency-modal" class="currency-modal">
<div class="currency-option" onclick="setCurrency('£ - GBP', '£')">£-GBP (British Pound)</div>
<div class="currency-option" onclick="setCurrency('$ - USD', '$')">$-USD (US Dollar)</div>
<div class="currency-option" onclick="setCurrency('€ - EUR', '€')">€-EUR (Euro)</div>
</div>
</div>
</div>
</div>
<!-- ===== MAIN MENU ===== -->
<div class="main-header">
<div class="main-header-content">
<!-- NAV MENU -->
<ul class="nav-menu" id="nav-menu">
<li><a href="index.php">Home</a></li>
<li><a href="food.php">Food Aid</a></li>
<li><a href="water.php">Water Projects</a></li>
<li><a href="orpan.php">Orphan Sponsorship</a></li>
<li><a href="zakat.php">Zakat</a></li>
<li><a href="blog.php">Blog</a></li>
<li><a href="about.php">About</a></li>
</ul>
<!-- ACTION BUTTONS + CART BELOW -->
<div class="header-actions">
<button class="btn btn-green" onclick="document.querySelector('.quick-donate-bar').scrollIntoView({behavior: 'smooth'})">
Quick Donate
</button>
<!-- CART MOVED DOWN HERE -->
<div class="cart-wrapper" onclick="toggleCart()">
<div class="cart-icon">
<i class="fas fa-shopping-basket"></i>
</div>
<div class="cart-badge" id="header-badge">0</div>
</div>
<!-- DONATE BUTTON -->
<!-- QUICK DONATE -->
</div>
</div>
</div>
</header>
<!-- Smartsupp Live Chat script -->
<script type="text/javascript">
var _smartsupp = _smartsupp || {};
_smartsupp.key = '04a7b6caba7b45b90a43b353c22f863143792a11';
window.smartsupp||(function(d) {
var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
s=d.getElementsByTagName('script')[0];c=d.createElement('script');
c.type='text/javascript';c.charset='utf-8';c.async=true;
c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
</script>
<noscript> Powered by <a href=“https://www.smartsupp.com” target=“_blank”>Smartsupp</a></noscript>
b IDATxytVսϓ22 A@IR:hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E