
<style>
/* فوتر حرفه‌ای */
.footer {
    background: #111;
    color: #fff;
    padding: 40px 20px 10px;
    margin-top: 40px;
    border-radius: 20px 20px 0 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-col h3,
.footer-col h4 {
    color: gold;
    margin-bottom: 15px;
}

.footer-col p {
    line-height: 1.8;
    color: #ccc;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col ul li a {
    color: #ddd;
    text-decoration: none;
    transition: .3s;
}

.footer-col ul li a:hover {
    color: gold;
}

.socials a {
    display: inline-block;
    margin-right: 10px;
    color: #ddd;
    text-decoration: none;
    transition: .3s;
}

.socials a:hover {
    color: gold;
}

.footer-bottom {
    text-align: center;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #333;
    color: #bbb;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}
    </style>


</main>

<footer class="footer">
    <div class="footer-container">

        <div class="footer-col">
            <h3>فروشگاه طلا</h3>
            <p>ارائه‌دهنده بهترین مدل‌های طلا و جواهر با مناسب‌ترین قیمت</p>
        </div>

        <div class="footer-col">
            <h4>لینک‌های مهم</h4>
            <ul>
                <li><a href="index.php">صفحه اصلی</a></li>
                <li><a href="products.php">محصولات</a></li>
           
            </ul>
        </div>

        <div class="footer-col">
            <h4>شبکه‌های اجتماعی</h4>
            <div class="socials">
                <a href="https://www.instagram.com/tiaram.gold.galeri?igsh=MWF6ZDI5c29hZHR1aQ==">اینستاگرام</a>
              
            </div>
        </div>

    </div>

    <div class="footer-bottom">
        <p>© تمام حقوق محفوظ است - فروشگاه طلا</p>
    </div>
</footer>

<script>
function toggleMenu() {
    document.getElementById("navMenu").classList.toggle("show");
}
</script>

</body>
</html>