<style>
/* ===== FAQ PAGE - ACCORDION STYLE ===== */
.faq-container {
max-width: 900px;
margin: 0 auto;
padding: 20px 15px;
font-family: 'Poppins', sans-serif;
}
.faq-header {
text-align: center;
margin-bottom: 40px;
}
.faq-header h1 {
font-size: 36px;
font-weight: 700;
color: #1A1A1A;
margin-bottom: 8px;
}
.faq-header p {
font-size: 16px;
color: #666;
margin-top: 0;
}
/* --- Why Buy Section --- */
.why-buy-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 50px;
}
.why-buy-item {
background: #F8F9FA;
padding: 20px 16px;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.why-buy-item:hover {
border-color: #F9A826;
box-shadow: 0 4px 20px rgba(249, 168, 38, 0.12);
transform: translateY(-3px);
}
.why-buy-item .icon {
font-size: 32px;
display: block;
margin-bottom: 8px;
}
.why-buy-item .title {
font-size: 14px;
font-weight: 600;
color: #1A1A1A;
}
.why-buy-item .desc {
font-size: 12px;
color: #666;
margin-top: 4px;
}
/* --- FAQ Accordion --- */
.faq-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-item {
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
background: #FFFFFF;
}
.faq-item:hover {
border-color: #F9A826;
}
.faq-question {
width: 100%;
padding: 18px 22px;
background: #FFFFFF;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
font-weight: 600;
color: #1A1A1A;
text-align: left;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
gap: 15px;
}
.faq-question:hover {
background: #F8F9FA;
}
.faq-question .arrow {
font-size: 18px;
color: #F9A826;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-item.active .faq-question .arrow {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
padding: 0 22px;
background: #FAFAFA;
}
.faq-item.active .faq-answer {
max-height: 300px;
padding: 18px 22px;
}
.faq-answer p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #4B5563;
}
.faq-answer ul {
margin: 8px 0 0;
padding-left: 20px;
}
.faq-answer ul li {
font-size: 14px;
line-height: 1.7;
color: #4B5563;
}
/* --- Responsive --- */
@media (max-width: 768px) {
.why-buy-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.faq-header h1 {
font-size: 28px;
}
.faq-question {
font-size: 14px;
padding: 14px 16px;
}
.faq-answer {
padding: 0 16px;
}
.faq-item.active .faq-answer {
padding: 14px 16px;
}
}
@media (max-width: 480px) {
.why-buy-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.why-buy-item {
padding: 14px 10px;
}
.why-buy-item .icon {
font-size: 24px;
}
.faq-header h1 {
font-size: 24px;
}
.faq-question {
font-size: 13px;
padding: 12px 14px;
}
}
</style>
<div class="faq-container">
<!-- ===== HEADER ===== -->
<div class="faq-header">
<h1>❓ Frequently Asked Questions</h1>
<p>Find answers to common questions about ordering, shipping, returns, and more.</p>
</div>
<!-- ===== WHY BUY SECTION ===== -->
<div class="why-buy-grid">
<div class="why-buy-item">
<span class="icon">🚚</span>
<div class="title">Free Delivery</div>
<div class="desc">All Over Pakistan</div>
</div>
<div class="why-buy-item">
<span class="icon">💵</span>
<div class="title">Cash on Delivery</div>
<div class="desc">All Over Pakistan</div>
</div>
<div class="why-buy-item">
<span class="icon">⌚</span>
<div class="title">15-Day Return</div>
<div class="desc">No Risk Policy</div>
</div>
<div class="why-buy-item">
<span class="icon">📦</span>
<div class="title">Imported Products</div>
<div class="desc">100% Genuine</div>
</div>
<div class="why-buy-item">
<span class="icon">📸</span>
<div class="title">Live Pictures & Videos</div>
<div class="desc">See Before You Buy</div>
</div>
<div class="why-buy-item">
<span class="icon">🤝</span>
<div class="title">Friendly Support</div>
<div class="desc">24/7 Customer Care</div>
</div>
</div>
<!-- ===== FAQ ACCORDION ===== -->
<div class="faq-list">
<!-- Q1 -->
<div class="faq-item">
<button class="faq-question">
<span>📦 How can I place an order?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>You can place an order directly through our website. Simply browse our collections, add your desired items to the cart, and proceed to checkout. You can also place an order by contacting us via WhatsApp or phone call.</p>
</div>
</div>
<!-- Q2 -->
<div class="faq-item">
<button class="faq-question">
<span>💳 What payment methods do you accept?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>We accept <strong>Cash on Delivery (COD)</strong> for orders across Pakistan. We also offer bank transfers for advance payments. Online payment options are currently being introduced.</p>
</div>
</div>
<!-- Q3 -->
<div class="faq-item">
<button class="faq-question">
<span>📍 Is Cash on Delivery (COD) available for all areas?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>Yes, we offer Cash on Delivery services to most major cities and towns across Pakistan. However, availability may vary for remote areas. You can confirm delivery availability for your location during checkout or by contacting our support team.</p>
</div>
</div>
<!-- Q4 -->
<div class="faq-item">
<button class="faq-question">
<span>💰 Do I need to pay any advance payment for COD orders?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>No, you do not need to pay any advance for Cash on Delivery orders. You only pay when you receive and check your parcel.</p>
</div>
</div>
<!-- Q5 -->
<div class="faq-item">
<button class="faq-question">
<span>🚚 What are the shipping charges?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>We offer <strong>free shipping on orders above Rs. 15,000</strong>. For orders below this amount, a standard shipping fee will be applied at checkout, which varies by location.</p>
</div>
</div>
<!-- Q6 -->
<div class="faq-item">
<button class="faq-question">
<span>⏱️ How long does delivery take?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>We aim to deliver your order within <strong>2 to 5 working days</strong> after order confirmation, depending on your location. For major cities like Lahore, Karachi, and Islamabad, delivery is usually faster.</p>
</div>
</div>
<!-- Q7 -->
<div class="faq-item">
<button class="faq-question">
<span>🔍 Can I track my order?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>Yes, once your order is shipped, we will share a tracking number and link via WhatsApp or SMS so you can track its status in real-time.</p>
</div>
</div>
<!-- Q8 -->
<div class="faq-item">
<button class="faq-question">
<span>🔄 What is your return and exchange policy?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>We offer a <strong>15-day return and exchange policy</strong>. If you are not satisfied with your product, you can return or exchange it within 15 days of delivery, provided the product is unused, in its original packaging, and in the same condition as received.</p>
</div>
</div>
<!-- Q9 -->
<div class="faq-item">
<button class="faq-question">
<span>🔧 What is the warranty period for products?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>Warranty periods vary by product and brand. Generally, our home appliances come with a <strong>1-year warranty</strong> against manufacturing defects. The specific warranty details are mentioned on each product page. Please retain your invoice for warranty claims.</p>
</div>
</div>
<!-- Q10 -->
<div class="faq-item">
<button class="faq-question">
<span>📱 Can I see the product before buying?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>Yes, we encourage you to <strong>"Open Before Pay"</strong> for COD orders. This means you can check your parcel before making the payment to ensure it is exactly what you ordered.</p>
</div>
</div>
<!-- Q11 -->
<div class="faq-item">
<button class="faq-question">
<span>🔐 Is my personal information safe on your website?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>Yes, we take your privacy seriously. Your personal data is secure and will never be shared with third parties. Please refer to our Privacy Policy for more details.</p>
</div>
</div>
<!-- Q12 -->
<div class="faq-item">
<button class="faq-question">
<span>📞 How can I contact customer support?</span>
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>You can reach our <strong>24/7 support team</strong> via:<br>
📱 WhatsApp: <a href="https://wa.me/923095323511" target="_blank">+92 309 532 35 11</a><br>
📞 Phone: +92 309 532 35 11<br>
✉️ Email: <a href="mailto:alhadiimports@gmail.com">alhadiimports@gmail.com</a></p>
</div>
</div>
</div>
</div>
<!-- ===== JAVASCRIPT ===== -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var questions = document.querySelectorAll('.faq-question');
questions.forEach(function(question) {
question.addEventListener('click', function() {
var parent = this.parentElement;
var isActive = parent.classList.contains('active');
// Close all
var allItems = document.querySelectorAll('.faq-item');
allItems.forEach(function(item) {
item.classList.remove('active');
});
// If it was not active, open it
if (!isActive) {
parent.classList.add('active');
}
});
});
});
</script>