import os
import re

# Redesign ministries.html
def redesign_ministries():
    with open('ministries.html', 'r', encoding='utf-8') as f:
        content = f.read()

    new_hero = """    <!-- Page Hero -->
    <section style="padding: 11rem 2rem 7rem 2rem; background-image: url('assets/images/new_uploads/ChatGPT_Image_Aug_18_2026_05_51_30_PM.png'); background-size: cover; background-position: center; position: relative; overflow: hidden;">
        <div style="position: absolute; inset: 0; background-color: rgba(12, 11, 10, 0.74);"></div>
        <div style="max-width: 900px; margin: 0 auto; position: relative; z-index: 2; text-align: center;">
            <div style="display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); padding: 0.5rem 1.2rem; border-radius: 50px; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,0.2);">
                <span style="width: 8px; height: 8px; background-color: #e6c888; border-radius: 50%; display: inline-block;"></span>
                <span style="color: #ffffff; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Instrument Sans', sans-serif;">FRANCISCAN APOSTOLATE</span>
            </div>
            <h1 style="font-family: 'Phudu', sans-serif; font-size: clamp(2.8rem, 5.2vw, 4.4rem); font-weight: 700; color: #ffffff; text-transform: uppercase; margin: 0 0 1rem 0; letter-spacing: -0.01em;">OUR MINISTRIES</h1>
            <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.15rem; color: #e7e2d6; max-width: 680px; margin: 0 auto; line-height: 1.6;">
                Living the Gospel through pastoral care, spiritual formation, and transformative education across India and abroad.
            </p>
        </div>
    </section>"""

    new_main_content = """        <!-- Key Impact Stats Strip -->
        <section style="background: #FAF7F0; padding: clamp(2rem, 4vw, 3.5rem) 0; border-bottom: 1px solid #ede7db;">
            <div style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem);">
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;">
                    
                    <div style="background: #ffffff; padding: 2rem 1.8rem; border-radius: 20px; border: 1px solid rgba(74,42,24,0.08); box-shadow: 0 8px 25px rgba(74,42,24,0.05); transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                        <div style="width: 46px; height: 46px; border-radius: 12px; background: rgba(74,42,24,0.08); display: flex; align-items: center; justify-content: center; color: #4A2A18; margin-bottom: 1.2rem;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
                        </div>
                        <div style="font-family: 'Phudu', sans-serif; font-size: 2.4rem; font-weight: 700; color: #4A2A18; line-height: 1; margin-bottom: 0.4rem;">15+ Parishes</div>
                        <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; color: #78716c; font-weight: 500;">Across 9 Dioceses in India &amp; Germany</div>
                    </div>

                    <div style="background: #ffffff; padding: 2rem 1.8rem; border-radius: 20px; border: 1px solid rgba(74,42,24,0.08); box-shadow: 0 8px 25px rgba(74,42,24,0.05); transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                        <div style="width: 46px; height: 46px; border-radius: 12px; background: rgba(196,164,90,0.15); display: flex; align-items: center; justify-content: center; color: #a8813a; margin-bottom: 1.2rem;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                        </div>
                        <div style="font-family: 'Phudu', sans-serif; font-size: 2.4rem; font-weight: 700; color: #1c1917; line-height: 1; margin-bottom: 0.4rem;">20,000+</div>
                        <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; color: #78716c; font-weight: 500;">Students in 22 Regional &amp; ICSE Schools</div>
                    </div>

                    <div style="background: #ffffff; padding: 2rem 1.8rem; border-radius: 20px; border: 1px solid rgba(74,42,24,0.08); box-shadow: 0 8px 25px rgba(74,42,24,0.05); transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                        <div style="width: 46px; height: 46px; border-radius: 12px; background: rgba(74,42,24,0.08); display: flex; align-items: center; justify-content: center; color: #4A2A18; margin-bottom: 1.2rem;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                        </div>
                        <div style="font-family: 'Phudu', sans-serif; font-size: 2.4rem; font-weight: 700; color: #4A2A18; line-height: 1; margin-bottom: 0.4rem;">4 Centres</div>
                        <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; color: #78716c; font-weight: 500;">Dedicated Formation &amp; Theological Houses</div>
                    </div>

                    <div style="background: #ffffff; padding: 2rem 1.8rem; border-radius: 20px; border: 1px solid rgba(74,42,24,0.08); box-shadow: 0 8px 25px rgba(74,42,24,0.05); transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                        <div style="width: 46px; height: 46px; border-radius: 12px; background: rgba(196,164,90,0.15); display: flex; align-items: center; justify-content: center; color: #a8813a; margin-bottom: 1.2rem;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                        </div>
                        <div style="font-family: 'Phudu', sans-serif; font-size: 2.4rem; font-weight: 700; color: #1c1917; line-height: 1; margin-bottom: 0.4rem;">104+ Friars</div>
                        <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.92rem; color: #78716c; font-weight: 500;">Professed Brothers Serving in Fraternity</div>
                    </div>

                </div>
            </div>
        </section>

        <!-- Main Ministries Section -->
        <section style="padding: clamp(3.5rem, 6vw, 6rem) 0; background-color: #FFFFFF; color: #1c1917;">
            <div style="max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem);">

                <!-- Ministry 1: Pastoral Ministry -->
                <div style="display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; margin-bottom: clamp(4rem, 7vw, 6.5rem);" class="responsive-ministry-row">
                    <div>
                        <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem;">
                            <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                            <span style="color: #4A2A18; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">PASTORAL MINISTRY</span>
                        </div>
                        <h2 style="font-family: 'Phudu', sans-serif; font-size: clamp(2rem, 3.2vw, 2.7rem); font-weight: 700; color: #1c1917; text-transform: uppercase; line-height: 1.2; margin: 0 0 1.5rem 0;">
                            PROCLAIMING THE GOSPEL THROUGH COMPASSIONATE SERVICE
                        </h2>
                        <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #57534e; line-height: 1.8; margin-bottom: 1.2rem;">
                            St. Francis gathered brothers around him to become heralds of the Good News. Inspired by this vision, the TOR Franciscans of the Province actively engage in pastoral ministry in parishes. Through this vital service to the Church, the friars dedicate themselves wholeheartedly to the mission of evangelization by their pastoral presence and ministry.
                        </p>
                        <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #57534e; line-height: 1.8; margin-bottom: 1.8rem;">
                            Their ministry extends beyond the celebration of the sacraments to a compassionate and attentive presence among the people—caring for the sick and elderly, pastoral counseling, and family visits across 15 parishes in India and the Archdiocese of Freiburg, Germany.
                        </p>

                        <!-- Key Pillars Grid -->
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Sacramental Life</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Care for the Sick</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Family Visitation</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Ongoing Conversion</span>
                            </div>
                        </div>

                        <a href="ministries-pastoral.html" class="btn-fill-animation" style="display: inline-flex; align-items: center; gap: 0.6rem; background: #4A2A18; color: #ffffff; padding: 0.95rem 2rem; border-radius: 8px; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: all 0.3s ease;">
                            <span>EXPLORE PASTORAL MINISTRY</span>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
                        </a>
                    </div>

                    <div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(74,42,24,0.15); border: 2px solid rgba(230,200,136,0.3);">
                        <img loading="lazy" decoding="async" src="assets/images/gallery/WhatsApp Image 2026-08-07 at 1.39.44 PM.jpeg" alt="Pastoral Ministry in Action" style="width: 100%; height: 520px; object-fit: cover; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'">
                        <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(12,11,10,0.85)); padding: 2rem 1.8rem; color: #ffffff;">
                            <div style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: uppercase;">15 Parishes in 9 Dioceses</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.88rem; color: #e6c888;">India &amp; Archdiocese of Freiburg, Germany</div>
                        </div>
                    </div>
                </div>

                <!-- Ministry 2: Formation Ministry (Inverted Layout) -->
                <div style="display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; margin-bottom: clamp(4rem, 7vw, 6.5rem);" class="responsive-ministry-row">
                    <div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(74,42,24,0.15); border: 2px solid rgba(230,200,136,0.3);">
                        <img loading="lazy" decoding="async" src="assets/images/gallery/WhatsApp Image 2025-09-17 at 11.30.25 AM (1).jpeg" alt="Franciscan Formation and Consecrated Life" style="width: 100%; height: 520px; object-fit: cover; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'">
                        <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(12,11,10,0.85)); padding: 2rem 1.8rem; color: #ffffff;">
                            <div style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: uppercase;">4 Sacred Formation Houses</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.88rem; color: #e6c888;">Dorma • Bichna • Ranchi Clericate</div>
                        </div>
                    </div>

                    <div>
                        <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem;">
                            <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                            <span style="color: #4A2A18; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">FORMATION MINISTRY</span>
                        </div>
                        <h2 style="font-family: 'Phudu', sans-serif; font-size: clamp(2rem, 3.2vw, 2.7rem); font-weight: 700; color: #1c1917; text-transform: uppercase; line-height: 1.2; margin: 0 0 1.5rem 0;">
                            NURTURING THE NEXT GENERATION OF FRANCISCANS
                        </h2>
                        <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #57534e; line-height: 1.8; margin-bottom: 1.2rem;">
                            Formation is the foundational ministry through which the Franciscan TOR charism and spirituality are creatively and faithfully proposed to successive generations. As Pope John Paul II emphasized in <em>Vita Consecrata</em>, formation is a dynamic, lifelong process that leads to ongoing conversion.
                        </p>
                        <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #57534e; line-height: 1.8; margin-bottom: 1.8rem;">
                            The Province operates two Minor Seminaries (Dorma and Ranchi), the Novitiate House in Bichna (Khunti), and the Clericate at Purulia Road (Ranchi), providing holistic spiritual, intellectual, human, and pastoral preparation for religious consecration.
                        </p>

                        <!-- Key Pillars Grid -->
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Spiritual Direction</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Theological Studies</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Franciscan Charism</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Fraternal Living</span>
                            </div>
                        </div>

                        <a href="ministries-formation.html" class="btn-fill-animation" style="display: inline-flex; align-items: center; gap: 0.6rem; background: #4A2A18; color: #ffffff; padding: 0.95rem 2rem; border-radius: 8px; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: all 0.3s ease;">
                            <span>EXPLORE FORMATION MINISTRY</span>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
                        </a>
                    </div>
                </div>

                <!-- Ministry 3: Education Ministry -->
                <div style="display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;" class="responsive-ministry-row">
                    <div>
                        <div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem;">
                            <span style="width: 6px; height: 6px; background-color: #4A2A18; border-radius: 50%; display: inline-block;"></span>
                            <span style="color: #4A2A18; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Instrument Sans', sans-serif;">EDUCATION MINISTRY</span>
                        </div>
                        <h2 style="font-family: 'Phudu', sans-serif; font-size: clamp(2rem, 3.2vw, 2.7rem); font-weight: 700; color: #1c1917; text-transform: uppercase; line-height: 1.2; margin: 0 0 1.5rem 0;">
                            EMPOWERING MINDS THROUGH KNOWLEDGE &amp; VALUES
                        </h2>
                        <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #57534e; line-height: 1.8; margin-bottom: 1.2rem;">
                            Guided by the motto, <em>“Peace and Joy to the World,”</em> our educational apostolate serves over 20,000 students across Jharkhand, Bihar, and West Bengal. Operating five Hindi-medium high schools, eleven middle schools, and six English-medium schools affiliated with CISCE and CBSE boards.
                        </p>
                        <p style="font-family: 'Instrument Sans', sans-serif; font-size: 1.05rem; color: #57534e; line-height: 1.8; margin-bottom: 1.8rem;">
                            Open to students of all faiths and backgrounds, our schools provide balanced, holistic education nurturing moral, intellectual, emotional, and spiritual development.
                        </p>

                        <!-- Key Pillars Grid -->
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem;">
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">20,000+ Students</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">22 Total Institutions</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">CISCE &amp; CBSE Affiliations</span>
                            </div>
                            <div style="display: flex; align-items: center; gap: 0.75rem; background: #FAF7F0; padding: 0.85rem 1.1rem; border-radius: 12px; border: 1px solid rgba(74,42,24,0.06);">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#4A2A18" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                <span style="font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 0.9rem; color: #1c1917;">Value-Based Education</span>
                            </div>
                        </div>

                        <a href="ministries-education.html" class="btn-fill-animation" style="display: inline-flex; align-items: center; gap: 0.6rem; background: #4A2A18; color: #ffffff; padding: 0.95rem 2rem; border-radius: 8px; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: all 0.3s ease;">
                            <span>EXPLORE EDUCATION MINISTRY</span>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
                        </a>
                    </div>

                    <div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(74,42,24,0.15); border: 2px solid rgba(230,200,136,0.3);">
                        <img loading="lazy" decoding="async" src="assets/images/gallery/WhatsApp Image 2026-08-07 at 8.39.44 AM (1).jpeg" alt="Education Ministry in Franciscan Schools" style="width: 100%; height: 520px; object-fit: cover; display: block; transition: transform 0.6s ease;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'">
                        <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(12,11,10,0.85)); padding: 2rem 1.8rem; color: #ffffff;">
                            <div style="font-family: 'Phudu', sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: uppercase;">22 Schools Across 3 States</div>
                            <div style="font-family: 'Instrument Sans', sans-serif; font-size: 0.88rem; color: #e6c888;">Jharkhand • Bihar • West Bengal</div>
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!-- Franciscan Ministry Mission Banner -->
        <section class="has-vine-watermark" style="position: relative; background: #0c0b0a; color: #ffffff; padding: clamp(4rem, 7vw, 6rem) 0; overflow: hidden;">
            <img src="assets/images/shapes/vine-corner-watermark.png" class="vine-corner-watermark" alt="" aria-hidden="true" style="opacity: 0.35; filter: brightness(1.6);">
            <div style="max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3rem); text-align: center; position: relative; z-index: 2;">
                <div style="display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(230,200,136,0.15); padding: 0.45rem 1.2rem; border-radius: 50px; border: 1px solid rgba(230,200,136,0.3); margin-bottom: 1.8rem;">
                    <span style="color: #e6c888; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-family: 'Instrument Sans', sans-serif;">OUR CALLING</span>
                </div>
                <h2 style="font-family: 'Phudu', sans-serif; font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 700; color: #ffffff; text-transform: uppercase; line-height: 1.2; margin: 0 0 1.5rem 0; letter-spacing: -0.01em;">
                    “PEACE AND JOY TO THE WORLD”
                </h2>
                <p style="font-family: 'Instrument Sans', sans-serif; font-size: clamp(1.05rem, 1.8vw, 1.2rem); color: #d6d3d1; max-width: 780px; margin: 0 auto 2.5rem auto; line-height: 1.75;">
                    Whether in rural parish mission stations, classrooms of growing minds, or quiet contemplative chapels, our friars serve as instruments of Christ’s peace and fraternal love.
                </p>
                <div style="display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;">
                    <a href="contact.html#enquiry" class="btn-fill-animation" style="display: inline-flex; align-items: center; gap: 0.6rem; background: #e6c888; color: #1c1917; padding: 1rem 2.4rem; border-radius: 8px; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: all 0.3s ease;">
                        <span>JOIN OUR MISSION</span>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
                    </a>
                    <a href="about.html" style="display: inline-flex; align-items: center; gap: 0.6rem; background: transparent; color: #ffffff; border: 1.5px solid rgba(255,255,255,0.4); padding: 1rem 2.4rem; border-radius: 8px; font-family: 'Instrument Sans', sans-serif; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.borderColor='#e6c888'; this.style.color='#e6c888';" onmouseout="this.style.borderColor='rgba(255,255,255,0.4)'; this.style.color='#ffffff';">
                        <span>LEARN ABOUT US</span>
                    </a>
                </div>
            </div>
        </section>

        <style>
            @media (max-width: 900px) {
                .responsive-ministry-row {
                    grid-template-columns: 1fr !important;
                    gap: 2rem !important;
                }
                .responsive-ministry-row > div:first-child {
                    order: 2 !important;
                }
                .responsive-ministry-row > div:last-child {
                    order: 1 !important;
                }
            }
        </style>"""

    main_regex = re.compile(r'<main id="main-content"[^>]*>.*?</main>', re.DOTALL)
    content = main_regex.sub(f'<main id="main-content" style="padding-top: 0; background-color: #FFFFFF;">\n{new_hero}\n{new_main_content}\n    </main>', content)

    with open('ministries.html', 'w', encoding='utf-8') as f:
        f.write(content)
    print("Redesigned ministries.html successfully!")

redesign_ministries()
