File "header.php"
Full path: /home/fsibplc/public_html/sommilito-bank/header.php
File
size: 147.02 B (147.02 KB bytes)
MIME-type: text/html
Charset: utf-8
Download Open Edit Advanced Editor Back
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
<link rel="stylesheet" href="splide-4.1.3/dist/css/splide.min.css">
</head>
<!-- Animation -->
<style>
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.animate-marquee {
display: flex;
width: max-content;
animation: marquee 20s linear infinite;
}
.animate-marquee:hover {
animation-play-state: paused;
}
.swiper-button-next,
.swiper-button-prev {
color: #0d5449;
}
.swiper-pagination-progressbar {
.swiper-pagination-progressbar-fill {
background: #ffffff;
}
}
.smooth-line {
height: 1px;
width: 100%;
background: radial-gradient(circle at center, black 40%, transparent 100%);
}
.tapered-line {
height: 6px;
width: 100%;
background: black;
clip-path: polygon(0% 50%, 10% 40%, 50% 0%, 90% 40%, 100% 50%, 90% 60%, 50% 100%, 10% 60%);
}
.fancy-hr {
border: none;
height: 4px;
background: linear-gradient(to right, transparent, black, transparent);
}
</style>
<body>
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
<div class="logo flex justify-between lg:justify-center px-15 items-center py-7">
<div>
<img src="assets/logo/sm-logo.jpeg" alt="" class="w-auto h-12 lg:h-16 lg:w-auto" />
</div>
<div class="flex lg:hidden">
<button type="button" command="show-modal" commandfor="mobile-menu" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-8 text-teal-800">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<header class="bg-teal-800">
<nav aria-label="Global" class="mx-auto flex max-w-full items-center justify-center p-5 lg:px-8 hidden lg:flex">
<!-- <div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img src="assets/logo/sommilito-logo.png" alt="" class="h-16 w-auto" />
</a>
</div> -->
<el-popover-group class="hidden lg:flex lg:gap-x-12 lg:justify-center">
<a href="index.php" class="text-sm/6 font-semibold text-gray-50">Home</a>
<div class="relative">
<button popovertarget="desktop-menu-about" class="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-50">
About
</button>
<el-popover id="desktop-menu-about" anchor="bottom" popover class="w-screen max-w-full overflow-hidden rounded-sm mt-2 bg-white shadow-sm outline-1 outline-gray-900/5 transition transition-discrete [--anchor-gap:--spacing(3)] backdrop:bg-transparent open:block data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in">
<div class="p-8 max-w-7xl mx-auto flex justify-between">
<div class="flex gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex-auto">
<p class="block font-semibold text-gray-900 uppercase mb-1">
Company Info
</p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="about-us.php" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Sammilito Islami Bank PLC at a Glance </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Corporate Information</a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Milestone of Sammilito Islami Bank PLC</a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Our Achievements </a>
</div>
</div>
</div>
</div>
<div class="flex gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex-auto">
<p class="block font-semibold text-gray-900 uppercase mb-1">
Organizational Structure
</p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/Director_List.pdf" target="_blank">Board of Directors </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Shari'ah Supervisory Board</a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Executive Committee </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Audit Committee </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Risk Management Committee </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Management Committee </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Organogram </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Sponsors </a>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex-auto">
<p class="block font-semibold text-gray-900 uppercase mb-1">
Placement Holders
</p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Local Placement Holders </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Foreign Placement Holders</a>
</div>
</div>
</div>
<div class="flex-auto">
<p class="block font-semibold text-gray-900 uppercase mb-1">
Others
</p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="chairman-message.php">Chairman's Message </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="md-message.php">Gratitude of Managing Director </a>
</div>
</div>
</div>
</div>
<div class="flex gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex-auto">
<p class="block font-semibold text-gray-900 uppercase mb-1">
Under Resolution
</p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/resolution/bankRresolutionordinance2025.pdf" target="_blank">Bank Resolution Ordinance 2025</a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/resolution/Chairman-Director Appointment Policy in Banks and Financial Institutions-2025.pdf" target="_blank">Chairman/Director Appointment Policy</a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/resolution/oct232025brd02.pdf" target="_blank">Regulations for Bank Resolution, 2025</a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/resolution/sep282025ibrpd01.pdf" target="_blank">Guideline for forming Shariah Supervisory Committee</a>
</div>
</div>
</div>
</div>
</div>
</el-popover>
</div>
<!-- <a href="#" class="text-sm/6 font-semibold text-gray-50">Financial Information</a> -->
<div class="relative">
<button popovertarget="desktop-menu-fi" class="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-50">
Financial Information
<!-- <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none text-gray-400">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg> -->
</button>
<el-popover id="desktop-menu-fi" anchor="bottom" popover class="w-screen mt-2 max-w-md overflow-hidden rounded-sm bg-white shadow-md outline-1 outline-gray-900/5 transition transition-discrete [--anchor-gap:--spacing(3)] backdrop:bg-transparent open:block data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in">
<div class="p-4">
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="size-6 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M9 7V2.221a2 2 0 0 0-.5.365L4.586 6.5a2 2 0 0 0-.365.5H9Zm2 0V2h7a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9h5a2 2 0 0 0 2-2Zm2-2a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3Zm0 3a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2h-3Zm-6 4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-6Zm8 1v1h-2v-1h2Zm0 3h-2v1h2v-1Zm-4-3v1H9v-1h2Zm0 3H9v1h2v-1Z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Financial Report
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Get a better understanding of your traffic</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6 text-gray-600 group-hover:text-indigo-600">
<path d="M10 3v4a1 1 0 0 1-1 1H5m4 10v-2m3 2v-6m3 6v-3m4-11v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1Z" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Annual Report
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Speak directly to your customers</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6 text-gray-600 group-hover:text-indigo-600">
<path d="M13.6 16.733c.234.269.548.456.895.534a1.4 1.4 0 0 0 1.75-.762c.172-.615-.446-1.287-1.242-1.481-.796-.194-1.41-.861-1.241-1.481a1.4 1.4 0 0 1 1.75-.762c.343.077.654.26.888.524m-1.358 4.017v.617m0-5.939v.725M4 15v4m3-6v6M6 8.5 10.5 5 14 7.5 18 4m0 0h-3.5M18 4v3m2 8a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Paid up Capital & Reserve
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Your customers’ data will be safe and secure</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6 text-gray-600 group-hover:text-indigo-600">
<path d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Equity
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Connect with third-party tools</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6 text-gray-600 group-hover:text-indigo-600">
<path d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Price Sensitive Disclosure
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Build strategic funnels that will convert</p>
</div>
</div>
<div class="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6 text-gray-600 group-hover:text-indigo-600">
<path d="M4.5 17H4a1 1 0 0 1-1-1 3 3 0 0 1 3-3h1m0-3.05A2.5 2.5 0 1 1 9 5.5M19.5 17h.5a1 1 0 0 0 1-1 3 3 0 0 0-3-3h-1m0-3.05a2.5 2.5 0 1 0-2-4.45m.5 13.5h-7a1 1 0 0 1-1-1 3 3 0 0 1 3-3h3a3 3 0 0 1 3 3 1 1 0 0 1-1 1Zm-1-9.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Shareholders Information
<span class="absolute inset-0"></span>
</a>
<p class="mt-1 text-gray-600">Build strategic funnels that will convert</p>
</div>
</div>
</div>
</el-popover>
</div>
<!-- <a href="#" class="text-sm/6 font-semibold text-gray-50">Products & Services</a> -->
<div class="relative">
<button popovertarget="desktop-menu-product" class="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-50">
Products & Service
<!-- <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none text-gray-400">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg> -->
</button>
<el-popover id="desktop-menu-product" anchor="bottom" popover class="w-screen max-w-full overflow-hidden rounded-sm mt-2 bg-white shadow-sm outline-1 outline-gray-900/5 transition transition-discrete [--anchor-gap:--spacing(3)] backdrop:bg-transparent open:block data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in">
<div class="p-8 max-w-5xl mx-auto flex justify-between">
<div class="flex gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex-auto">
<p class="block font-semibold text-teal-900 uppercase mb-1">
Products
</p>
<p class="block font-semibold text-gray-900 mb-1 underline">
Deposit Products
</p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="about-us.php" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Al-Wadeah Current Account (AWCA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Savings Account (MSA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Term Deposit Account (MTDR) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Special Notice Account (MSNA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Hajj Savings Account (MHSA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Special Savings (Pension) Account (MSSA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Savings Bond (MSB) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Monthly Profit Deposit Account (MMPDA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Muhor Savings Account (MMSA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Waqf Cash Deposit Account (MWCDA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba NRB Savings Bond (MNSB) Account </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Foreign Currency Deposit Account (MFCD) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Students Mudaraba Savings Account (SMSA) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="transition-transform duration-300 ease-in-out hover:translate-x-1">Mudaraba Farmers Savings Account (MFSA) </a>
</div>
</div>
</div>
</div>
<div class="flex gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex-auto">
<p class="font-semibold text-gray-900 mb-1 underline">
Investment Products
</p>
<p class="block font-semibold text-gray-900 mb-1 uppercase">BAI-MODES </p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="content/Director_List.pdf" target="_blank">Bai-Murabaha </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Bai-Istijrar </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Bai-Muajjal </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Bai Salam </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Istisna'a </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Bai-As-Sarf </a>
</div>
<p class="block font-semibold text-gray-900 mb-1 uppercase">SHARE-MODES </p>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Mudaraba </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Musharaka </a>
</div>
<p class="block font-semibold text-gray-900 mb-1 uppercase">IJARA-MODES </p>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Hire Purchase Under Shirkatul Melk </a>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50">
<div class="flex-auto">
<p class="block font-semibold text-gray-900 mb-1 underline">
Investment Scheme
</p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">House Hold Investment Scheme </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Investment Scheme for Doctors (ISD) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Transport Investment Scheme (TIS) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Car Investment Scheme (CIS) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Small Business Investment Scheme (SBIS) </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Micro Industries Investment Scheme (MIIS) </a>
</div>
</div>
</div>
<div class="flex-auto">
<p class="block font-semibold text-teal-900 uppercase mb-1">
Services
</p>
<div class="flex flex-col">
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="chairman-message.php">NRB Service </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">SME Service</a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Foreign Exchange Business Service </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Locker Service </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Offshore Banking Service </a>
</div>
<div class="flex items-center text-gray-600">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#">Syndicate Finance </a>
</div>
</div>
</div>
</div>
</div>
</el-popover>
</div>
<!-- <a href="#" class="text-sm/6 font-semibold text-gray-50">Alternative Payments</a> -->
<div class="relative">
<button popovertarget="desktop-menu-payment" class="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-50">
Alternative Payments
<!-- <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none text-gray-400">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg> -->
</button>
<el-popover id="desktop-menu-payment" anchor="bottom" popover class="w-screen mt-2 max-w-3xl overflow-hidden rounded-sm bg-white shadow-md outline-1 outline-gray-900/5 transition transition-discrete [--anchor-gap:--spacing(3)] backdrop:bg-transparent open:block data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in">
<div class="p-8">
<div class="flex gap-x-6">
<div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Any Branch Banking
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
SMS Banking
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Speak directly to your customers</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Cloud and Internet Banking
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Your customers’ data will be safe and secure</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Apps and MFS Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Connect with third-party tools</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
ATM Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Build strategic funnels that will convert</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
POS Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Build strategic funnels that will convert</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Islami Credit Card (Hajj Card, Travel Card)
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Build strategic funnels that will convert</p> -->
</div>
</div>
</div>
<div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Remittance Card Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
SWIFT Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Speak directly to your customers</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Utility Bill Pay Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Your customers’ data will be safe and secure</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Cash by Code Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Connect with third-party tools</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
WhatsApp Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Build strategic funnels that will convert</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
QR Code Payment Service
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Build strategic funnels that will convert</p> -->
</div>
</div>
</div>
</div>
</div>
</el-popover>
</div>
<!-- <a href="#" class="text-sm/6 font-semibold text-gray-50">Investment Relationship Information</a> -->
<div class="relative">
<button popovertarget="desktop-menu-location" class="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-50">
Location
</button>
<el-popover id="desktop-menu-location" anchor="bottom" popover class="w-screen mt-2 max-w-xs overflow-hidden rounded-sm bg-white shadow-md outline-1 outline-gray-900/5 transition transition-discrete [--anchor-gap:--spacing(3)] backdrop:bg-transparent open:block data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in">
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Branch
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Sub Branch
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Collection Booth
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
ATM Booth
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Speak directly to your customers</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
CRM Booth
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Your customers’ data will be safe and secure</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 rounded-lg px-4 text-sm/6 hover:bg-gray-50">
<div class="flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Agent Banking Outlet
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Connect with third-party tools</p> -->
</div>
</div>
</el-popover>
</div>
<!-- <a href="#" class="text-sm/6 font-semibold text-gray-50">Location</a> -->
<!-- <a href="#" class="text-sm/6 font-semibold text-gray-50">News</a> -->
<div class="relative">
<button popovertarget="desktop-menu-media" class="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-50">
Media Room
</button>
<el-popover id="desktop-menu-media" anchor="bottom" popover class="w-screen mt-2 max-w-xs overflow-hidden rounded-sm bg-white shadow-md outline-1 outline-gray-900/5 transition transition-discrete [--anchor-gap:--spacing(3)] backdrop:bg-transparent open:block data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in">
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
News & Events
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Bank Statement in Media
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Top News
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Photo Gallery
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Speak directly to your customers</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Video Gallery
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Your customers’ data will be safe and secure</p> -->
</div>
</div>
</el-popover>
</div>
<!-- <a href="#" class="text-sm/6 font-semibold text-gray-50">Forms & Publications</a> -->
<div class="relative">
<button popovertarget="desktop-menu-forms" class="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-50">
Forms & Publications
</button>
<el-popover id="desktop-menu-forms" anchor="bottom" popover class="w-screen mt-2 max-w-xs overflow-hidden rounded-sm bg-white shadow-md outline-1 outline-gray-900/5 transition transition-discrete [--anchor-gap:--spacing(3)] backdrop:bg-transparent open:block data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in">
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Download A/C Opening Form
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Publication
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Bank Charges
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Get a better understanding of your traffic</p> -->
</div>
</div>
<div class="group relative flex items-center gap-x-2 px-4 text-sm/6 hover:bg-gray-50 border-b-1 border-gray-200">
<div class="flex size-11 flex-none items-center justify-center rounded-lg">
<svg class="w-4 h-4 text-gray-600 group-hover:text-indigo-600 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>
</div>
<div class="flex-auto">
<a href="#" class="block font-semibold text-gray-900">
Timetable of Salat
<span class="absolute inset-0"></span>
</a>
<!-- <p class="mt-1 text-gray-600">Speak directly to your customers</p> -->
</div>
</div>
</el-popover>
</div>
</el-popover-group>
</nav>
<el-dialog>
<dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
<div tabindex="0" class="fixed inset-0 focus:outline-none">
<el-dialog-panel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img src="assets/logo/sm-logo.jpeg" alt="" class="h-8 w-auto" />
</a>
<button type="button" command="close" commandfor="mobile-menu" class="-m-2.5 rounded-md p-2.5 text-gray-700">
<span class="sr-only">Close menu</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6">
<path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6 mt-4">
<a href="index.php" class="-mx-3 block rounded-lg px-3 py-2 font-semibold text-xs uppercase text-gray-900 hover:bg-gray-50">Home</a>
<!-- About Dropdown -->
<div class="-mx-3">
<button type="button" command="--toggle" commandfor="about" class="flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 font-semibold text-xs uppercase text-gray-900 hover:bg-gray-50">
About
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="about" hidden class="mt-2 block space-y-1">
<!-- About us dropdown -->
<button type="button" command="--toggle" commandfor="about-us" class="pl-6 flex w-full items-center justify-between rounded-lg py-2 pr-3.5 font-semibold text-sm text-gray-900 hover:bg-gray-50">
About Us
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="about-us" hidden class="mt-2 block space-y-1">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="about-us.php" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Sammilito Islami Bank PLC at a Glance </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Corporate Information </a>
</div>
</el-disclosure>
<!-- Organizational Structure Dropdown -->
<button type="button" command="--toggle" commandfor="organizational" class="pl-6 flex w-full items-center justify-between rounded-lg py-2 pr-3.5 font-semibold text-sm text-gray-900 hover:bg-gray-50">
Organizational Structure
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="organizational" hidden class="mt-2 block space-y-1">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/Director_List.pdf" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Board of Directors </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Shari'ah Supervisory Board</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Executive Committee </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Audit Committee </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Risk Management Committee </a>
</div>
</el-disclosure>
<!-- Placement Holders us dropdown -->
<button type="button" command="--toggle" commandfor="placement" class="pl-6 flex w-full items-center justify-between rounded-lg py-2 pr-3.5 font-semibold text-sm text-gray-900 hover:bg-gray-50">
Placement Holders
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="placement" hidden class="mt-2 block space-y-1">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Local Placement Holders </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Foreign Placement Holders </a>
</div>
</el-disclosure>
<!-- Others dropdown -->
<button type="button" command="--toggle" commandfor="others" class="pl-6 flex w-full items-center justify-between rounded-lg py-2 pr-3.5 font-semibold text-sm text-gray-900 hover:bg-gray-50">
Others
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="others" hidden class="mt-2 block space-y-1">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="chairman-message.php" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Gratitude of Chairman, Board of Directors </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="md-message.php" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Gratitude of Managing Director </a>
</div>
</el-disclosure>
<!-- Under Resolution dropdown -->
<button type="button" command="--toggle" commandfor="resolution" class="pl-6 flex w-full items-center justify-between rounded-lg py-2 pr-3.5 font-semibold text-sm text-gray-900 hover:bg-gray-50">
Under Resolution
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="resolution" hidden class="mt-2 block space-y-1">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/resolution/bankRresolutionordinance2025.pdf" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Bank Resolution Ordinance 2025</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/resolution/Chairman-Director Appointment Policy in Banks and Financial Institutions-2025.pdf" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Chairman/Director Appointment Policy</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/resolution/oct232025brd02.pdf" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Regulations for Bank Resolution, 2025</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/resolution/sep282025ibrpd01.pdf" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Guideline for forming Shariah Supervisory Committee</a>
</div>
</el-disclosure>
</el-disclosure>
</div>
<!-- Product Dropdown -->
<div class="-mx-3">
<button type="button" command="--toggle" commandfor="productandservice" class="flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 font-semibold text-xs uppercase text-gray-900 hover:bg-gray-50">
Product & Services
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="productandservice" hidden class="mt-2 block space-y-1">
<!-- Products dropdown -->
<button type="button" command="--toggle" commandfor="products" class="pl-6 flex w-full items-center justify-between rounded-lg py-2 pr-3.5 font-semibold text-gray-900 text-sm hover:bg-gray-50">
Products
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="products" hidden class="mt-2 block space-y-1">
<button type="button" command="--toggle" commandfor="deposit-product" class="flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-9 font-semibold text-sm text-gray-900 hover:bg-gray-50">
Deposit Products
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="deposit-product" hidden class="mt-2 block space-y-1 text-gray-900 pl-6 text-sm">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Al-Wadeah Current Account (AWCA) </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Mudaraba Savings Account (MSA) </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Mudaraba Term Deposit Account (MTDR) </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Mudaraba Special Notice Account (MSNA) </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Mudaraba Hajj Savings Account (MHSA) </a>
</div>
</el-disclosure>
<button type="button" command="--toggle" commandfor="investment-product" class="flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-9 font-semibold text-sm text-gray-900 hover:bg-gray-50">
Investment Products
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="investment-product" hidden class="mt-2 block space-y-1 text-gray-900 pl-6 text-sm">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Bai-Murabaha </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Bai-Istijrar </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Bai-Muajjal </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Bai Salam </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 hover:bg-gray-50">Istisna'a </a>
</div>
</el-disclosure>
</el-disclosure>
</el-disclosure>
</div>
<!-- <a href="#" class="-mx-3 block rounded-lg px-3 py-2 font-semibold text-gray-900 hover:bg-gray-50">Location</a> -->
<!-- Location Dropdown -->
<div class="-mx-3">
<button type="button" command="--toggle" commandfor="location" class="flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 font-semibold text-xs uppercase text-gray-900 hover:bg-gray-50">
Location
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="location" hidden class="mt-2 block space-y-1">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/Director_List.pdf" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Branch</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Sub Branch</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">ATM Booth</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">CRM Booth</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Agent Banking Outlet</a>
</div>
</el-disclosure>
</div>
<!-- <a href="#" class="-mx-3 block rounded-lg px-3 py-2 font-semibold text-gray-900 hover:bg-gray-50">Media Room</a> -->
<!-- Media Dropdown -->
<div class="-mx-3">
<button type="button" command="--toggle" commandfor="media" class="flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 font-semibold text-xs uppercase text-gray-900 hover:bg-gray-50">
Media Room
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="media" hidden class="mt-2 block space-y-1">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/Director_List.pdf" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">News & Events </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Bank Statement in Media </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Top News</a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Photo Gallery </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Video Gallery </a>
</div>
</el-disclosure>
</div>
<!-- <a href="#" class="-mx-3 block rounded-lg px-3 py-2 font-semibold text-gray-900 hover:bg-gray-50">Company</a> -->
<!-- <a href="#" class="-mx-3 block rounded-lg px-3 py-2 font-semibold text-gray-900 hover:bg-gray-50">Forms & Publications</a> -->
<!-- Forms Dropdown -->
<div class="-mx-3">
<button type="button" command="--toggle" commandfor="forms" class="flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 font-semibold text-xs uppercase text-gray-900 hover:bg-gray-50">
Forms & Publications
<svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5 flex-none in-aria-expanded:rotate-180">
<path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
</svg>
</button>
<el-disclosure id="forms" hidden class="mt-2 block space-y-1">
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="assets/Director_List.pdf" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Download A/C Opening Form </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Publication </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Bank Charges </a>
</div>
<div class="flex items-center pl-6">
<svg class="w-3 h-3 mx-1 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7" />
</svg>
<a href="#" class="rounded-lg pr-3 text-sm/7 hover:bg-gray-50">Timetable of Salat </a>
</div>
</el-disclosure>
</div>
</div>
</div>
</div>
</el-dialog-panel>
</div>
</dialog>
</el-dialog>
</header>
<!-- Floating Sidebar -->
<div class="fixed right-0 top-1/2 -translate-y-1/2 z-50 space-y-1">
<!-- Item -->
<a href="" class="group flex items-center justify-end">
<!-- Label -->
<span class="mr-3 px-3 py-1 text-sm bg-gray-800 text-white rounded-md opacity-0 translate-x-5 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 whitespace-nowrap">
Exchange Rate
</span>
<!-- Icon -->
<div class="w-12 h-12 flex items-center justify-center bg-teal-800 text-white shadow-lg transform group-hover:scale-110 transition duration-300">
<svg class="w-6 h-6 text-gray-50 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 17.345a4.76 4.76 0 0 0 2.558 1.618c2.274.589 4.512-.446 4.999-2.31.487-1.866-1.273-3.9-3.546-4.49-2.273-.59-4.034-2.623-3.547-4.488.486-1.865 2.724-2.899 4.998-2.31.982.236 1.87.793 2.538 1.592m-3.879 12.171V21m0-18v2.2"/>
</svg>
</div>
</a>
<!-- Item -->
<a href="" class="group flex items-center justify-end">
<!-- Label -->
<span class="mr-3 px-3 py-1 text-sm bg-gray-800 text-white rounded-md opacity-0 translate-x-5 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 whitespace-nowrap">
Call Us
</span>
<!-- Icon -->
<div class="w-12 h-12 flex items-center justify-center bg-teal-800 text-white shadow-lg transform group-hover:scale-110 transition duration-300">
<svg class="w-6 h-6 text-gray-50 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M20 16v-4a8 8 0 1 0-16 0v4m16 0v2a2 2 0 0 1-2 2h-2v-6h2a2 2 0 0 1 2 2ZM4 16v2a2 2 0 0 0 2 2h2v-6H6a2 2 0 0 0-2 2Z"/>
</svg>
</div>
</a>
<!-- Item -->
<a href="" class="group flex items-center justify-end">
<!-- Label -->
<span class="mr-3 px-3 py-1 text-sm bg-gray-800 text-white rounded-md opacity-0 translate-x-5 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 whitespace-nowrap">
Find Us
</span>
<!-- Icon -->
<div class="w-12 h-12 flex items-center justify-center bg-teal-800 text-white rounded-xs shadow-lg transform group-hover:scale-110 transition duration-300">
<svg class="w-6 h-6 text-gray-50 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.8 13.938h-.011a7 7 0 1 0-11.464.144h-.016l.14.171c.1.127.2.251.3.371L12 21l5.13-6.248c.194-.209.374-.429.54-.659l.13-.155Z"/>
</svg>
</div>
</a>
<!-- Item -->
<a href="" class="group flex items-center justify-end">
<!-- Label -->
<span class="mr-3 px-3 py-1 text-sm bg-gray-800 text-white rounded-md opacity-0 translate-x-5 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 whitespace-nowrap">
EMI Calculator
</span>
<!-- Icon -->
<div class="w-12 h-12 flex items-center justify-center bg-teal-800 text-white rounded-xs shadow-lg transform group-hover:scale-110 transition duration-300">
<svg class="w-6 h-6 text-gray-50 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-width="2" d="M3 11h18M3 15h18M8 10.792V19m4-8.208V19m4-8.208V19M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"/>
</svg>
</div>
</a>
<!-- Item -->
<a href="" class="group flex items-center justify-end">
<!-- Label -->
<span class="mr-3 px-3 py-1 text-sm bg-gray-800 text-white rounded-md opacity-0 translate-x-5 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 whitespace-nowrap">
Tender
</span>
<!-- Icon -->
<div class="w-12 h-12 flex items-center justify-center bg-teal-800 text-white rounded-xs shadow-lg transform group-hover:scale-110 transition duration-300">
<svg class="w-6 h-6 text-gray-50 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9V4a1 1 0 0 0-1-1H8.914a1 1 0 0 0-.707.293L4.293 7.207A1 1 0 0 0 4 7.914V20a1 1 0 0 0 1 1h4M9 3v4a1 1 0 0 1-1 1H4m11 6v4m-2-2h4m3 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z"/>
</svg>
</div>
</a>
</div>