<style>
    .magazine-section { padding: 100px 20px 60px; min-height: 80vh; background: #f9f9f9; }
    .container { max-width: 1100px; margin: 0 auto; }
    .section-title { text-align: center; margin-bottom: 40px; font-size: 2.5rem; color: #333; }
    
    .magazine-grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(300px, 400px)); /* কার্ডের সাইজ নিয়ন্ত্রন */
        gap: 30px; 
        justify-content: center;
    }

    /* কার্ডের নতুন ডিজাইন */
    .mag-card { 
        position: relative; 
        background: #fff; 
        border-radius: 12px; 
        overflow: hidden; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
        transition: 0.3s;
        height: 500px; /* আপনার ইমেজের রেশিও অনুযায়ী হাইট কম-বেশি করতে পারেন */
    }

    .mag-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }

    .mag-thumb { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        display: block;
    }

    /* ইমেজের ওপর কালো আবছা লেয়ার */
    .mag-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* ইমেজের ওপর হালকা অন্ধকার ভাব */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s;
    }

    .mag-card:hover .mag-overlay {
        background: rgba(0, 0, 0, 0.5); /* হোভার করলে একটু বেশি ডার্ক হবে */
    }

    /* মাঝখানের বাটন */
    .btn-read-overlay { 
        padding: 12px 25px; 
        background: #ff4757; 
        color: #fff; 
        text-decoration: none; 
        border-radius: 50px; 
        font-size: 1rem;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        transition: 0.3s;
    }

    .btn-read-overlay:hover { 
        background: #fff; 
        color: #ff4757; 
        transform: scale(1.1);
    }
</style>

<section class="magazine-section">
    <div class="container">
        <h2 class="section-title">আমাদের ম্যাগাজিন ও পাবলিকেশন</h2>
        
        <div class="magazine-grid">
            <div class="mag-card">
                <img src="assets/images/2739.jpg" alt="Magazine" class="mag-thumb">
                <div class="mag-overlay">
                    <a href="2026.pdf" target="_blank" class="btn-read-overlay">ম্যাগাজিন পড়ুন</a>
                </div>
            </div>
            
            </div>
    </div>
</section>
