
<!DOCTYPE html>
<html lang="en" class="overflow-x-hidden">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Home - M&N Consultancy</title>
    <link rel="icon" type="image/png" href="mnmconsultancylogo.png">
    <link rel="apple-touch-icon" href="mnmconsultancylogo.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        mnGold: '#f2b827',
                        mnNavy: '#242a30',
                        mnDark: '#1a1d2e',
                        softGray: '#F4F5F7',
                        offWhite: '#FAFAFA',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Playfair Display', 'serif'],
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap');
        body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; color: #1a1d2e; top: 0 !important; position: static !important; width: 100%; overflow-x: hidden; }
        .goog-te-banner-frame.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-te-banner, .goog-te-menu-frame, iframe.goog-te-menu-frame { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; opacity: 0 !important; }
        body { top: 0px !important; }
        .skiptranslate:not(.lang-toggle) { display: none !important; }
        #google_translate_element { display: none !important; }
        .nav-link { position: relative; transition: color 0.3s ease; display: inline-flex; align-items: center; padding-bottom: 4px; }
        .nav-link::after { content: ''; position: absolute; width: 0; height: 3px; bottom: 0; left: 0; background-color: #f2b827; transition: width 0.3s ease; }
        .nav-link:hover::after { width: 100%; }
        .nav-link.active-link::after { width: 100%; }
        .dropdown:hover .dropdown-menu { display: block; opacity: 1; visibility: visible; }
        .dropdown-menu { display: none; opacity: 0; visibility: hidden; position: absolute; left: 50%; transform: translateX(-50%); width: auto; min-width: 1050px; background: white; box-shadow: 0 40px 100px rgba(0,0,0,0.12); border-radius: 0 0 3rem 3rem; padding: 3rem; z-index: 1000; top: 100%; border: 1px solid #f1f1f1; }
        .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; align-items: start; }
        .mega-column { display: flex; flex-direction: column; }
        .mega-section { margin-bottom: 2rem; }
        .mega-section:last-child { margin-bottom: 0; }
        .mega-section h4 { font-size: 0.95rem; font-weight: 800; color: #242a30; margin-bottom: 0.7rem; border-left: 4px solid #f2b827; padding-left: 12px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; }
        .mega-link { display: block; font-size: 0.8rem; color: #64748b; padding: 4px 0; font-weight: 600; transition: all 0.2s ease; text-decoration: none; line-height: 1.3; }
        .mega-link:hover { color: #f2b827; padding-left: 6px; }
        .btn-primary { background-color: #242a30; color: white; transition: all 0.3s ease; }
        .btn-primary:hover { background-color: #f2b827; color: #242a30; box-shadow: 0 10px 20px rgba(242, 184, 39, 0.25); }
        .highlight-box { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: #1a1d2e; border: 1px solid #334155; border-radius: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); height: auto; min-height: 100%; }
        .highlight-box:hover { background: #f2b827 !important; transform: translateY(-8px); border-color: #f2b827; box-shadow: 0 20px 40px rgba(242, 184, 39, 0.25); }
        .highlight-box:hover h3, .highlight-box:hover h4, .highlight-box:hover p, .highlight-box:hover span, .highlight-box:hover i { color: #242a30 !important; }
        .highlight-box:hover .icon-bg { background-color: rgba(36, 42, 48, 0.2) !important; }
        .icon-bg { width: 56px; height: 56px; background-color: #242a30; border-radius: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; }
        .icon-bg i { color: #f2b827; }
        .service-card { transition: all 0.4s ease; background: #1a1d2e; border: 1px solid #334155; border-radius: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); height: auto; }
        .service-card:hover { background: #f2b827 !important; border-color: #f2b827; box-shadow: 0 25px 50px -12px rgba(242, 184, 39, 0.2); transform: translateY(-5px); }
        .service-card:hover h3, .service-card:hover p, .service-card:hover a, .service-card:hover li { color: #242a30 !important; }
        .service-card:hover .icon-bg { background-color: rgba(36, 42, 48, 0.2) !important; }
        .service-card:hover .icon-bg i { color: #242a30 !important; }
        .blog-card { background: #1a1d2e; border-radius: 2.5rem; overflow: hidden; border: 1px solid #334155; transition: all 0.4s ease; height: 100%; display: flex; flex-direction: column; }
        .blog-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.3); border-color: #f2b827; }
        .blog-category-tag { position: absolute; top: 1.5rem; right: 1.5rem; background: #f2b827; color: #242a30; padding: 6px 16px; border-radius: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
        @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-400px * 4)); } }
        .marquee-container { overflow: hidden; width: 100%; padding: 40px 0; }
        .marquee-content { display: flex; width: calc(400px * 8); animation: scroll 20s linear infinite; }
        .partner-logo-item { width: 400px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; padding: 0 20px; }
        .partner-square { width: 300px; height: 180px; background: white; border: 2px solid #334155; border-radius: 2rem; display: flex; justify-content: center; align-items: center; transition: all 0.4s ease; padding: 30px; }
        .partner-square:hover { border-color: #f2b827; box-shadow: 0 15px 35px rgba(242, 184, 39, 0.2); transform: scale(1.05); }
        .partner-square img { max-height: 100px; width: auto; object-fit: contain; transition: all 0.4s ease; }
        .whatsapp-fixed { position: fixed; bottom: 30px; left: 30px; background-color: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1000; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; }
        .whatsapp-fixed:hover { transform: scale(1.1); }
        .scroll-top { position: fixed; bottom: 30px; right: 30px; background-color: #f2b827; color: #242a30; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1000; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer; }
        .scroll-top:hover { transform: translateY(-5px); }
        .lang-toggle { display: flex; align-items: center; background: #f4f5f7; padding: 4px; border-radius: 12px; gap: 6px; }
        .lang-option { padding: 8px 16px; border-radius: 9px; font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.3s ease; color: #242a30; }
        .lang-option.active { background: #f2b827; color: #242a30; }
        #mobile-menu { display: none; position: fixed; inset: 0; background: white; z-index: 200; flex-direction: column; overflow-y: auto; }
        .gold-dash-center { width: 40px; height: 3px; background-color: #f2b827; margin: 8px auto 0; border-radius: 20px; }
    </style>
</head>
<body class="antialiased">
    <div id="google_translate_element"></div>
    <nav class="w-full z-[100] bg-white border-b border-gray-100 sticky top-0 shadow-sm transition-all duration-300">
        <div class="max-w-[1600px] mx-auto px-6 lg:px-12 h-24 flex justify-between items-center">
            <div class="flex items-center">
                <a href="Home.html">
                    <img src="mnmconsultancylogo.png" alt="M&N Consultancy" class="h-14 w-auto">
                </a>
            </div>
            <div class="hidden xl:flex items-center space-x-10 text-[14px] font-bold uppercase tracking-wider text-slate-700 h-full">
                <div class="h-full flex items-center"><a href="Home.html" class="nav-link active-link text-mnGold font-extrabold">Home</a></div>
                <div class="h-full flex items-center"><a href="About.html" class="nav-link hover:text-mnGold">About Us</a></div>
                <div class="h-full flex items-center"><a href="Partners.html" class="nav-link hover:text-mnGold">Partners</a></div>
                <div class="h-full flex items-center"><a href="Blogs.html" class="nav-link hover:text-mnGold">Blog</a></div>
                <div class="relative dropdown h-full flex items-center">
                    <a href="Services.html" class="nav-link hover:text-mnGold flex items-center gap-2 cursor-pointer">
                        Services <i class="fa-solid fa-chevron-down text-[12px]"></i>
                    </a>
                    <div class="dropdown-menu">
                        <div class="mega-grid">
                            <div class="mega-column">
                                <div class="mega-section">
                                    <h4>Deals Advisory</h4>
                                    <a href="Services.html?service=deals&block=corporate-finance" class="mega-link">Corporate Finance</a>
                                    <a href="Services.html?service=deals&block=deal-advisory" class="mega-link">Deal Advisory</a>
                                    <a href="Services.html?service=deals&block=valuations" class="mega-link">Valuations & Market Research</a>
                                    <a href="Services.html?service=deals&block=restructuring" class="mega-link">Restructuring</a>
                                    <a href="Services.html?service=deals&block=project-infrastructure" class="mega-link">Project Infrastructure</a>
                                    <a href="Services.html?service=deals&block=real-estate" class="mega-link">Real Estate Advisory</a>
                                    <a href="Services.html?service=deals&block=ipo" class="mega-link">IPO & Capital Markets</a>
                                </div>
                                <div class="mega-section">
                                    <h4>Technology Advisory</h4>
                                    <a href="Services.html?service=tech&block=it-consulting" class="mega-link">IT Consulting</a>
                                    <a href="Services.html?service=tech&block=it-risk" class="mega-link">IT Risk & Assurance</a>
                                    <a href="Services.html?service=tech&block=enterprise-software" class="mega-link">Enterprise Software Solutions</a>
                                    <a href="Services.html?service=tech&block=digital-transformation" class="mega-link">Digital Transformation</a>
                                    <a href="Services.html?service=tech&block=automation" class="mega-link">Business Process Automation</a>
                                    <a href="Services.html?service=tech&block=cybersecurity" class="mega-link">Infrastructure & Cybersecurity</a>
                                </div>
                            </div>
                            <div class="mega-column">
                                <div class="mega-section">
                                    <h4>Business Advisory</h4>
                                    <a href="Services.html?service=business&block=risk-advisory" class="mega-link">Risk Advisory</a>
                                    <a href="Services.html?service=business&block=internal-audit" class="mega-link">Internal Audit</a>
                                    <a href="Services.html?service=business&block=policy-procedure" class="mega-link">Policy & Procedure</a>
                                    <a href="Services.html?service=business&block=sop" class="mega-link">Standard Operating Procedure</a>
                                    <a href="Services.html?service=business&block=outsource-staff" class="mega-link">Outsource Staff</a>
                                    <a href="Services.html?service=business&block=ifrs" class="mega-link">IFRS Standards</a>
                                    <a href="Services.html?service=business&block=actuarial" class="mega-link">Actuarial Valuation</a>
                                </div>
                                <div class="mega-section">
                                    <h4>Corporate Services</h4>
                                    <a href="Services.html?service=corporate&block=market-entry" class="mega-link">Market Entry Strategy</a>
                                    <a href="Services.html?service=corporate&block=entity-formation" class="mega-link">Entity Formation & Licensing</a>
                                    <a href="Services.html?service=corporate&block=governance" class="mega-link">Corporate Governance</a>
                                    <a href="Services.html?service=corporate&block=secretarial" class="mega-link">Corporate Secretarial</a>
                                    <a href="Services.html?service=corporate&block=agreements" class="mega-link">Agreements Advisory</a>
                                    <a href="Services.html?service=corporate&block=liquidation" class="mega-link">Liquidation</a>
                                </div>
                            </div>
                            <div class="mega-column">
                                <div class="mega-section">
                                    <h4>Tax, Zakat & Legal Services</h4>
                                    <a href="Services.html?service=tax&block=tax-planning" class="mega-link">Tax Planning</a>
                                    <a href="Services.html?service=tax&block=tax-compliance" class="mega-link">Tax Compliance</a>
                                    <a href="Services.html?service=tax&block=transaction-tax" class="mega-link">Transaction Tax</a>
                                    <a href="Services.html?service=tax&block=family-business" class="mega-link">Family Business & Zakat</a>
                                    <a href="Services.html?service=tax&block=indirect-tax" class="mega-link">Indirect Tax (VAT)</a>
                                    <a href="Services.html?service=tax&block=tax-tech" class="mega-link">Tax Technology</a>
                                    <a href="Services.html?service=tax&block=dispute-resolution" class="mega-link">Tax Dispute Resolution</a>
                                </div>
                                <div class="mega-section">
                                    <h4>HR Consulting & Secondment</h4>
                                    <a href="Services.html?service=hr&block=hr-policy" class="mega-link">Labor Law Compliance</a>
                                    <a href="Services.html?service=hr&block=talent-secondment" class="mega-link">Talent Secondment</a>
                                    <a href="Services.html?service=hr&block=perf-mgmt" class="mega-link">Performance Management</a>
                                    <a href="Services.html?service=hr&block=recruitment" class="mega-link">Recruitment Strategy</a>
                                    <a href="Services.html?service=hr&block=payroll" class="mega-link">Payroll Administration</a>
                                    <a href="Services.html?service=hr&block=restructuring" class="mega-link">Workforce Restructuring</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="h-full flex items-center"><a href="Careers.html" class="nav-link hover:text-mnGold">Careers</a></div>
                <div class="h-full flex items-center"><a href="Contact.html" class="nav-link hover:text-mnGold">Contact Us</a></div>
            </div>
            <div class="flex items-center gap-4 lg:gap-6">
                <div class="lang-toggle notranslate">
                    <div id="en-btn" class="lang-option active" onclick="changeLang('en')">EN</div>
                    <div id="ar-btn" class="lang-option" onclick="changeLang('ar')">AR</div>
                </div>
                <a href="RFP.html" class="btn-primary group hidden sm:flex items-center gap-3 px-8 py-4 rounded-2xl font-bold text-[13px] uppercase tracking-widest shadow-lg">
                    SUBMIT RFP
                    <i class="fa-solid fa-file-signature group-hover:scale-110 transition-transform text-white text-sm"></i>
                </a>
                <button class="xl:hidden text-mnNavy text-2xl p-2" onclick="toggleMobileMenu()">
                    <i class="fa-solid fa-bars"></i>
                </button>
            </div>
        </div>
    </nav>

    <div id="mobile-menu" class="fixed inset-0 bg-white z-[200] hidden flex-col overflow-y-auto">
        <div class="h-24 px-6 flex justify-between items-center border-b border-gray-100">
            <img src="mnmconsultancylogo.png" alt="M&N Consultancy" class="h-10">
            <button class="text-3xl text-mnNavy p-2" onclick="toggleMobileMenu()">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        <div class="p-8 flex flex-col gap-6 font-bold text-lg text-mnNavy uppercase tracking-widest">
            <a href="Home.html" onclick="toggleMobileMenu()">Home</a>
            <a href="About.html" onclick="toggleMobileMenu()">About Us</a>
            <a href="Partners.html" onclick="toggleMobileMenu()">Partners</a>
            <a href="Blogs.html" onclick="toggleMobileMenu()">Blog</a>
            <a href="Services.html" onclick="toggleMobileMenu()">Services</a>
            <a href="Careers.html" onclick="toggleMobileMenu()">Careers</a>
            <a href="Contact.html" onclick="toggleMobileMenu()">Contact Us</a>
            <a href="RFP.html" class="bg-mnNavy text-white py-5 text-center rounded-2xl mt-4">Submit RFP</a>
        </div>
    </div>

    <main class="bg-mnDark text-white">
        <section id="hero" class="relative h-[450px] flex flex-col justify-center items-center overflow-hidden">
            <div class="absolute inset-0 z-0">
                <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=1600" alt="Background" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-mnDark/85"></div>
            </div>
            <div class="relative z-10 max-w-[1400px] mx-auto px-6 lg:px-12 w-full text-center">
                <div class="max-w-5xl mx-auto">
                    <h1 class="text-4xl lg:text-7xl font-[800] text-white mb-6 leading-tight tracking-tight px-4">
                        Redefining <span class="text-mnGold">Partnerships</span>
                    </h1>
                    <div class="w-20 h-1.5 bg-mnGold mx-auto mb-8 rounded-full"></div>
                    <p class="text-lg lg:text-xl text-slate-300 max-w-3xl mx-auto font-medium leading-relaxed px-6">
                        Empowering Growth Through Collaboration innovation, And Integrity Together, We Shape Success.
                    </p>
                </div>
            </div>
        </section>

        <section id="about" class="py-32 border-y border-white/5">
            <div class="max-w-[1400px] mx-auto px-6 lg:px-12">
                <div class="text-center mb-16">
                    <h2 class="text-4xl lg:text-5xl font-[800] text-white mb-3">About <span class="text-mnGold">M&N</span> Consultancy</h2>
                    <div class="w-20 h-1.5 bg-mnGold mx-auto rounded-full"></div>
                </div>
                <div class="grid lg:grid-cols-2 gap-16 items-center">
                    <div class="rounded-[2.5rem] overflow-hidden shadow-2xl relative group">
                        <img src="Manama.jpeg" alt="Headquarters" class="w-full h-[500px] object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute bottom-8 left-8 right-8 bg-mnNavy/95 backdrop-blur p-6 rounded-2xl shadow-lg border-l-4 border-mnGold">
                            <p class="text-mnGold font-bold text-sm uppercase tracking-widest mb-1">Headquarters</p>
                            <p class="text-white font-bold text-xl">Manama, Bahrain</p>
                        </div>
                    </div>
                    <div class="space-y-8">
                        <p class="text-xl text-slate-300 leading-relaxed font-medium text-justify">
                            M&N Consultancy is a premier consulting firm dedicated to driving organizational growth through innovation and collaborative excellence. We leverage our Manama headquarters to provide a global bridge for enterprise development across Saudi Arabia, the UK, and Canada.
                        </p>
                        <div class="bg-white text-mnNavy p-10 rounded-[2.5rem] shadow-2xl">
                            <i class="fa-solid fa-quote-left text-mnGold text-3xl mb-4 opacity-50"></i>
                            <p class="text-lg leading-relaxed italic font-semibold mb-6 text-justify">
                                Guided by principles of integrity and operational rigor, our specialists deliver integrated solutions across taxation, technology, and strategic advisory.
                            </p>
                            <a href="About.html" class="inline-flex items-center gap-2 text-mnGold font-extrabold uppercase tracking-widest text-sm hover:underline">Learn More <i class="fa-solid fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="partners" class="py-24">
            <div class="max-w-[1400px] mx-auto px-6 lg:px-12 text-center">
                <h2 class="text-4xl lg:text-5xl font-[800] text-white mb-3">Global <span class="text-mnGold">Partners</span></h2>
                <div class="w-20 h-1.5 bg-mnGold mx-auto mb-12 rounded-full"></div>
                <div class="marquee-container">
                    <div class="marquee-content">
                        <div class="partner-logo-item"><div class="partner-square"><img src="Partner1.jpeg" alt="Partner 1"></div></div>
                        <div class="partner-logo-item"><div class="partner-square"><img src="Partner2.jpeg" alt="Partner 2"></div></div>
                        <div class="partner-logo-item"><div class="partner-square"><img src="Partner3.jpeg" alt="Partner 3"></div></div>
                        <div class="partner-logo-item"><div class="partner-square"><img src="Partner4.jpeg" alt="Partner 4"></div></div>
                        <div class="partner-logo-item"><div class="partner-square"><img src="Partner1.jpeg" alt="Partner 1"></div></div>
                        <div class="partner-logo-item"><div class="partner-square"><img src="Partner2.jpeg" alt="Partner 2"></div></div>
                        <div class="partner-logo-item"><div class="partner-square"><img src="Partner3.jpeg" alt="Partner 3"></div></div>
                        <div class="partner-logo-item"><div class="partner-square"><img src="Partner4.jpeg" alt="Partner 4"></div></div>
                    </div>
                </div>
                <div class="mt-12">
                    <a href="Partners.html" class="bg-mnGold text-mnNavy px-10 py-4 rounded-2xl font-extrabold uppercase tracking-widest inline-flex items-center gap-3 hover:bg-white transition-colors">View All Partners <i class="fa-solid fa-globe"></i></a>
                </div>
            </div>
        </section>

        <section id="blog" class="py-32 px-4 bg-mnNavy/30">
            <div class="max-w-[1400px] mx-auto text-center">
                <h2 class="text-4xl lg:text-5xl font-extrabold text-white mb-3">Latest <span class="text-mnGold">Blogs</span></h2>
                <div class="w-20 h-1.5 bg-mnGold mx-auto mb-16 rounded-full"></div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-12 text-left">
                    <div class="blog-card group">
                        <div class="relative aspect-[16/10] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&q=80&w=800" alt="SAMA Compliance" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                            <span class="blog-category-tag">Regulatory</span>
                        </div>
                        <div class="p-10 flex flex-col flex-1">
                            <div class="flex items-center gap-3 mb-4 text-slate-400 text-sm font-bold">
                                <i class="fa-regular fa-calendar"></i>
                                <span>FEB 23, 2026</span>
                            </div>
                            <h3 class="text-2xl font-extrabold text-white mb-6 leading-tight group-hover:text-mnGold transition-colors">Navigating Saudi Regulatory Landscapes: How SOPs Ensure with SAMA Compliance</h3>
                            <a href="Blog1.html" class="mt-auto flex items-center gap-2 text-mnGold font-bold text-sm uppercase tracking-widest hover:text-white transition-colors">
                                Read More <i class="fa-solid fa-arrow-right-long transition-transform group-hover:translate-x-2"></i>
                            </a>
                        </div>
                    </div>
                    <div class="blog-card group">
                        <div class="relative aspect-[16/10] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&q=80&w=800" alt="Modern Workspace" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                            <span class="blog-category-tag">Risk Management</span>
                        </div>
                        <div class="p-10 flex flex-col flex-1">
                            <div class="flex items-center gap-3 mb-4 text-slate-400 text-sm font-bold">
                                <i class="fa-regular fa-calendar"></i>
                                <span>FEB 15, 2026</span>
                            </div>
                            <h3 class="text-2xl font-extrabold text-white mb-6 leading-tight group-hover:text-mnGold transition-colors">Linking SOPs with Risk Management in Saudi Enterprises: A Framework for 2026</h3>
                            <a href="Blog2.html" class="mt-auto flex items-center gap-2 text-mnGold font-bold text-sm uppercase tracking-widest hover:text-white transition-colors">
                                Read More <i class="fa-solid fa-arrow-right-long transition-transform group-hover:translate-x-2"></i>
                            </a>
                        </div>
                    </div>
                    <div class="blog-card group">
                        <div class="relative aspect-[16/10] overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="ESG Principles" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                            <span class="blog-category-tag">ESG</span>
                        </div>
                        <div class="p-10 flex flex-col flex-1">
                            <div class="flex items-center gap-3 mb-4 text-slate-400 text-sm font-bold">
                                <i class="fa-regular fa-calendar"></i>
                                <span>JAN 28, 2026</span>
                            </div>
                            <h3 class="text-2xl font-extrabold text-white mb-6 leading-tight group-hover:text-mnGold transition-colors">Advanced ESG Risk Management Solutions for Leaders in 2025</h3>
                            <a href="Blog3.html" class="mt-auto flex items-center gap-2 text-mnGold font-bold text-sm uppercase tracking-widest hover:text-white transition-colors">
                                Read More <i class="fa-solid fa-arrow-right-long transition-transform group-hover:translate-x-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="mt-20">
                    <a href="Blogs.html" class="bg-mnGold text-mnNavy px-10 py-4 rounded-2xl font-extrabold uppercase tracking-widest inline-flex items-center gap-3 hover:bg-white transition-all">
                        View More Blogs <i class="fa-solid fa-plus text-xs"></i>
                    </a>
                </div>
            </div>
        </section>

        <section id="services" class="py-32 text-center">
            <div class="max-w-[1400px] mx-auto px-6 lg:px-12">
                <h2 class="text-4xl lg:text-5xl font-extrabold text-white mb-3 leading-tight">Our <span class="text-mnGold">Services</span></h2>
                <div class="w-20 h-1.5 bg-mnGold mx-auto mb-16 rounded-full"></div>
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
                    <div class="service-card p-10 lg:p-12 text-left group flex flex-col h-full">
                        <div class="icon-bg mb-8 group-hover:bg-mnNavy"><i class="fa-solid fa-handshake-angle text-2xl group-hover:text-white"></i></div>
                        <h3 class="text-2xl font-extrabold text-white mb-5 group-hover:text-mnGold transition-colors">Deals Advisory</h3>
                        <p class="text-slate-400 font-medium leading-relaxed mb-10 flex-grow text-justify">Strategizing growth through smart acquisitions and capital raising.</p>
                        <a href="Services.html?service=deals" class="flex items-center gap-3 text-mnGold font-bold uppercase tracking-widest text-[11px] group-hover:text-white transition-colors">Read More <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                    <div class="service-card p-10 lg:p-12 text-left group flex flex-col h-full">
                        <div class="icon-bg mb-8 group-hover:bg-mnNavy"><i class="fa-solid fa-chart-pie text-2xl group-hover:text-white"></i></div>
                        <h3 class="text-2xl font-extrabold text-white mb-5 group-hover:text-mnGold transition-colors">Business Advisory</h3>
                        <p class="text-slate-400 font-medium leading-relaxed mb-10 flex-grow text-justify">Optimizing operations and risk management for value creation.</p>
                        <a href="Services.html?service=business" class="flex items-center gap-3 text-mnGold font-bold uppercase tracking-widest text-[11px] group-hover:text-white transition-colors">Read More <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                    <div class="service-card p-10 lg:p-12 text-left group flex flex-col h-full">
                        <div class="icon-bg mb-8 group-hover:bg-mnNavy"><i class="fa-solid fa-laptop-code text-2xl group-hover:text-white"></i></div>
                        <h3 class="text-2xl font-extrabold text-white mb-5 group-hover:text-mnGold transition-colors">Technology Advisory</h3>
                        <p class="text-slate-400 font-medium leading-relaxed mb-10 flex-grow text-justify">Guiding your digital transformation and cybersecurity infrastructure.</p>
                        <a href="Services.html?service=tech" class="flex items-center gap-3 text-mnGold font-bold uppercase tracking-widest text-[11px] group-hover:text-white transition-colors">Read More <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                    <div class="service-card p-10 lg:p-12 text-left group flex flex-col h-full">
                        <div class="icon-bg mb-8 group-hover:bg-mnNavy"><i class="fa-solid fa-calculator text-2xl group-hover:text-white"></i></div>
                        <h3 class="text-2xl font-extrabold text-white mb-5 group-hover:text-mnGold transition-colors">Tax Advisory</h3>
                        <p class="text-slate-400 font-medium leading-relaxed mb-10 flex-grow text-justify">Maximizing financial efficiency and ensuring regulatory compliance.</p>
                        <a href="Services.html?service=tax" class="flex items-center gap-3 text-mnGold font-bold uppercase tracking-widest text-[11px] group-hover:text-white transition-colors">Read More <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                    <div class="service-card p-10 lg:p-12 text-left group flex flex-col h-full">
                        <div class="icon-bg mb-8 group-hover:bg-mnNavy"><i class="fa-solid fa-building-shield text-2xl group-hover:text-white"></i></div>
                        <h3 class="text-2xl font-extrabold text-white mb-5 group-hover:text-mnGold transition-colors">Corporate Services</h3>
                        <p class="text-slate-400 font-medium leading-relaxed mb-10 flex-grow text-justify">Comprehensive support for market entry, formation, and governance.</p>
                        <a href="Services.html?service=corporate" class="flex items-center gap-3 text-mnGold font-bold uppercase tracking-widest text-[11px] group-hover:text-white transition-colors">Read More <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                    <div class="service-card p-10 lg:p-12 text-left group flex flex-col h-full">
                        <div class="icon-bg mb-8 group-hover:bg-mnNavy"><i class="fa-solid fa-users-gear text-2xl group-hover:text-white"></i></div>
                        <h3 class="text-2xl font-extrabold text-white mb-5 group-hover:text-mnGold transition-colors">HR Consulting</h3>
                        <p class="text-slate-400 font-medium leading-relaxed mb-10 flex-grow text-justify">Strategic workforce solutions, from recruitment to performance audit.</p>
                        <a href="Services.html?service=hr" class="flex items-center gap-3 text-mnGold font-bold uppercase tracking-widest text-[11px] group-hover:text-white transition-colors">Read More <i class="fa-solid fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
        </section>

        <section id="careers" class="py-32">
            <div class="max-w-[1400px] mx-auto px-6 lg:px-12 text-center">
                <h2 class="text-4xl lg:text-5xl font-[800] text-white mb-2">Join Our <span class="text-mnGold">Team</span></h2>
                <div class="gold-dash-center mb-16"></div>
                <div class="grid lg:grid-cols-2 gap-16 items-center">
                    <div class="order-1 lg:order-2 rounded-[3rem] overflow-hidden shadow-2xl relative group h-[350px]">
                        <img src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&q=80&w=800" alt="Career Growth" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    </div>
                    <div class="order-2 lg:order-1 text-left">
                        <p class="text-xl text-slate-300 mb-10 leading-relaxed text-justify font-medium">
                            At M&N Consultancy, we are building a legacy of excellence. We are looking for passionate innovators, strategic thinkers, and professionals who want to redefine the future of consulting. Our environment fosters creativity, continuous development, and a strong sense of purpose. Join us as we scale new heights and deliver high-impact results for our global clients.
                        </p>
                        <a href="Careers.html" class="bg-mnGold text-mnNavy px-12 py-5 rounded-2xl font-extrabold uppercase tracking-widest inline-flex items-center gap-3 hover:bg-white transition-all">Apply for a Job <i class="fa-solid fa-briefcase"></i></a>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="py-32 border-t border-white/5">
            <div class="max-w-[1400px] mx-auto px-6 lg:px-12 text-center">
                <h2 class="text-4xl lg:text-5xl font-[800] text-white mb-2">Get in <span class="text-mnGold">Touch</span></h2>
                <div class="gold-dash-center mb-16"></div>
                <div class="grid lg:grid-cols-2 gap-16 items-center">
                    <div class="rounded-[3rem] overflow-hidden shadow-2xl relative group">
                        <img src="https://images.unsplash.com/photo-1423666639041-f56000c27a9a?auto=format&fit=crop&q=80&w=800" alt="Contact Us" class="w-full h-[500px] object-cover transition-transform duration-700 group-hover:scale-110">
                    </div>
                    <div class="text-left">
                        <p class="text-xl text-slate-300 mb-10 leading-relaxed text-justify font-medium">
                            Whether you are a startup looking to scale or an established enterprise seeking digital transformation, our experts are here to guide you. We combine localized expertise with global vision to provide actionable strategies that drive real value. Let's discuss how we can work together to achieve your organizational goals and overcome complex market challenges.
                        </p>
                        <div class="space-y-6 mb-10">
                            <div class="flex items-center gap-5">
                                <div class="icon-bg w-12 h-12"><i class="fa-solid fa-envelope"></i></div>
                                <span class="font-bold text-white">rehan.zulqadar@mnmconsultancy.net</span>
                            </div>
                            <div class="flex items-center gap-5">
                                <div class="icon-bg w-12 h-12"><i class="fa-solid fa-phone"></i></div>
                                <span class="font-bold text-white">+973 1331 1030</span>
                            </div>
                        </div>
                        <a href="Contact.html" class="bg-mnGold text-mnNavy px-12 py-5 rounded-2xl font-extrabold uppercase tracking-widest inline-flex items-center gap-3 hover:bg-white transition-all">Contact us <i class="fa-solid fa-paper-plane"></i></a>
                    </div>
                </div>
            </div>
        </section>

        <section class="rfp-section py-28 px-4 bg-white/5">
            <div class="max-w-[1400px] mx-auto flex flex-col md:flex-row items-center justify-between gap-12">
                <div class="text-center md:text-left flex-1 px-4">
                    <h2 class="text-3xl lg:text-5xl font-extrabold text-white mb-6 leading-tight">Ready to <span class="text-mnGold">Scale</span> Your Business?</h2>
                    <p class="text-slate-400 text-lg lg:text-xl font-medium max-w-xl text-justify">Get in touch with our experts to discuss how we can drive value for your organization.</p>
                </div>
                <div class="flex flex-col items-center md:items-start gap-6 border-l-4 border-mnGold pl-8">
                    <span class="text-white text-xl lg:text-2xl font-bold tracking-tight">Request for proposal</span>
                    <a href="RFP.html" class="bg-mnGold hover:bg-white text-mnNavy px-10 py-5 lg:px-12 lg:py-5 rounded-2xl font-extrabold transition-all shadow-lg hover:-translate-y-1 uppercase tracking-widest text-xs lg:text-sm flex items-center gap-3">
                        Submit RFP <i class="fa-solid fa-paper-plane text-xs"></i>
                    </a>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-white text-mnNavy py-20 border-t border-gray-100 px-4">
        <div class="max-w-[1400px] mx-auto">
            <div class="mb-16">
                <h2 class="text-3xl lg:text-5xl font-extrabold tracking-tight leading-tight text-center md:text-left px-4">
                    Empowering <span class="text-mnGold">Growth</span>, Unleashing Potential
                </h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 text-left items-start mb-16 px-4">
                <div class="flex flex-col gap-8 items-center md:items-start">
                    <div class="flex flex-col items-center md:items-start gap-4">
                        <a href="Home.html">
                            <img src="mnmconsultancylogo.png" alt="M&N Logo" class="h-16 w-auto">
                        </a>
                        <p class="text-slate-600 text-sm font-medium max-w-[280px] text-center md:text-left leading-relaxed">
                            Driving success through trusted <br>
                            partnerships, innovative solutions, <br>
                            & unwavering values which makes <br>
                            <strong>"Your Journey, Our Purpose"</strong>
                        </p>
                    </div>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-mnNavy/20 flex items-center justify-center hover:bg-mnGold hover:border-mnGold transition-all"><i class="fa-brands fa-linkedin-in text-lg"></i></a>
                        <a href="#" class="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-mnNavy/20 flex items-center justify-center hover:bg-mnGold hover:border-mnGold transition-all"><i class="fa-brands fa-x-twitter text-lg"></i></a>
                        <a href="#" class="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-mnNavy/20 flex items-center justify-center hover:bg-mnGold hover:border-mnGold transition-all"><i class="fa-brands fa-instagram text-lg"></i></a>
                        <a href="#" class="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-mnNavy/20 flex items-center justify-center hover:bg-mnGold hover:border-mnGold transition-all"><i class="fa-brands fa-youtube text-lg"></i></a>
                    </div>
                </div>
                <div class="text-center md:text-left">
                    <h4 class="text-xl font-bold mb-8 text-mnNavy uppercase tracking-wider">Quick Links</h4>
                    <ul class="space-y-4 text-slate-600 text-sm lg:text-base font-medium">
                        <li><a href="Home.html" class="hover:text-mnGold">Home</a></li>
                        <li><a href="About.html" class="hover:text-mnGold">About Us</a></li>
                        <li><a href="Partners.html" class="hover:text-mnGold">Partners</a></li>
                        <li><a href="Blogs.html" class="hover:text-mnGold">Blog</a></li>
                        <li><a href="Services.html" class="hover:text-mnGold">Services</a></li>
                        <li><a href="Careers.html" class="hover:text-mnGold">Careers</a></li>
                        <li><a href="Contact.html" class="hover:text-mnGold">Contact Us</a></li>
                    </ul>
                </div>
                <div class="text-center md:text-left">
                    <h4 class="text-xl font-bold mb-8 text-mnNavy uppercase tracking-wider">Services</h4>
                    <ul class="space-y-4 text-slate-600 text-sm lg:text-base font-medium">
                        <li><a href="Services.html?service=deals" class="hover:text-mnGold">Deals Advisory</a></li>
                        <li><a href="Services.html?service=business" class="hover:text-mnGold">Business Advisory</a></li>
                        <li><a href="Services.html?service=tech" class="hover:text-mnGold">Technology Advisory</a></li>
                        <li><a href="Services.html?service=tax" class="hover:text-mnGold">Tax Advisory</a></li>
                        <li><a href="Services.html?service=corporate" class="hover:text-mnGold">Corporate Services</a></li>
                        <li><a href="Services.html?service=hr" class="hover:text-mnGold">HR Consulting</a></li>
                    </ul>
                </div>
                <div class="text-center md:text-left">
                    <h4 class="text-xl font-bold mb-8 text-mnNavy uppercase tracking-wider">Contact Info</h4>
                    <ul class="space-y-5 text-slate-600 text-sm lg:text-base font-medium">
                        <li class="flex items-start justify-center md:justify-start gap-4 hover:text-mnGold transition-colors">
                            <i class="fa-solid fa-envelope mt-1 text-mnGold text-lg"></i>
                            <span>rehan.zulqadar@mnmconsultancy.net</span>
                        </li>
                        <li class="flex items-start justify-center md:justify-start gap-4 hover:text-mnGold transition-colors">
                            <i class="fa-solid fa-phone mt-1 text-mnGold text-lg"></i>
                            <span>+973 1331 1030</span>
                        </li>
                        <li class="flex items-start justify-center md:justify-start gap-4 hover:text-mnGold transition-colors text-justify">
                            <i class="fa-solid fa-location-dot mt-1 text-mnGold text-lg"></i>
                            <span>Office No. 2150, Bldg. 2004,<br>
                                  Rd 1526, Block 115,<br>
                                  Al Hidd, Manama Bahrain
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pt-10 border-t border-gray-100 text-center text-slate-400 text-xs lg:text-sm font-medium">
                <p>&copy; 2026 M&N Consultancy. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <a href="https://wa.me/966535287164" target="_blank" class="whatsapp-fixed">
        <i class="fa-brands fa-whatsapp text-3xl"></i>
    </a>
    <div class="scroll-top" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
        <i class="fa-solid fa-arrow-up text-xl"></i>
    </div>

    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
                includedLanguages: 'ar,en',
                autoDisplay: false
            }, 'google_translate_element');
        }
        function changeLang(lang) {
            const select = document.querySelector('select.goog-te-combo');
            if (select) {
                select.value = lang;
                select.dispatchEvent(new Event('change'));
                document.getElementById('en-btn').classList.toggle('active', lang === 'en');
                document.getElementById('ar-btn').classList.toggle('active', lang === 'ar');
            }
        }
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            const isHidden = menu.style.display === 'none' || menu.style.display === '';
            menu.style.display = isHidden ? 'flex' : 'none';
            document.body.style.overflow = isHidden ? 'hidden' : 'auto';
        }
    </script>
    <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>