<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A1 Site Host – Powerful Web Hosting Solutions</title>

<!-- Fonts & Core CSS -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//use.fontawesome.com" />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v7.1.0/css/all.css">

<style>
/* === BASIC STYLES === */
body{margin:0;padding:0;font-family:'Poppins',sans-serif;background:#fff;}
a{text-decoration:none}

/* === HEADER FIXED === */
#header{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  background:#0b0d17;
  transition:box-shadow .2s ease, background .2s ease;
}
body.has-sticky-offset{padding-top:var(--header-h,80px);}
#header.stuck{box-shadow:0 4px 12px rgba(0,0,0,.2);}
#topbar{background:#111827;color:#fff;font-size:14px;}
#topbar .topbar-icon{font-size:18px;}
.scrolling-container{overflow:hidden;white-space:nowrap;flex:1;}
.scrolling-text{display:inline-block;animation:scrollText 35s linear infinite;}
@keyframes scrollText{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* === NAVIGATION === */
.navbar{display:flex;align-items:center}
.navbar .mainmenu{display:flex;gap:18px;margin:0;padding:0;list-style:none}
.navbar .mainmenu>li>a{color:#fff;text-decoration:none;padding:12px 8px;display:inline-block}
.navbar .dropdown{position:relative}
.navbar .dropdown>ul{position:absolute;left:0;top:100%;min-width:220px;display:none;padding:8px 0;z-index:10000}
.navbar .dropdown:hover>ul{display:block}

/* === SUBMENU FIX (dark navy + gold hover) === */
.navbar .dropdown > ul {
  background: #0b1838 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
.navbar .dropdown ul li a {
  color: #ffffff !important;
  font-weight: 500;
  padding: 10px 16px !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.navbar .dropdown ul li a:hover {
  background: #ffc107 !important;
  color: #000 !important;
}

/* === MOBILE MENU === */
.mobile-nav-toggle{display:none;color:#fff;font-size:28px;cursor:pointer}
@media (max-width:991px){
  .mobile-nav-toggle{display:inline-block}
  .navbar{width:100%;justify-content:flex-end}
  .navbar .mainmenu{position:fixed;left:0;right:0;top:var(--header-h,80px);bottom:0;background:#0b1220;flex-direction:column;gap:0;padding:12px 0;overflow:auto;display:none}
  .navbar.open .mainmenu{display:flex}
  .navbar .mainmenu>li{width:100%}
  .navbar .mainmenu>li>a{padding:14px 18px}
  .navbar .dropdown>ul{position:static;display:none;border:none;background:transparent;padding:0}
  .navbar .dropdown.open>ul{display:block}
  .navbar .dropdown .submenu-toggle{float:right;margin-right:12px;font-size:18px;transform:rotate(0deg);transition:transform .15s ease}
  .navbar .dropdown.open .submenu-toggle{transform:rotate(90deg)}
  .navbar .dropdown ul li a{padding:12px 28px;border-left:3px solid rgba(255,255,255,.06)}
}

/* === CURRENCY BUTTON === */
.topbar-head-dropdown .dropdown-menu .active{background:#ffe08a}
.btn-label .fs-14{font-style:normal}
</style>
</head>

<body>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

<!-- ===== TOPBAR ===== -->
<div id="topbar">
  <div class="container py-md-2">
    <div class="d-flex justify-content-between align-items-center flex-wrap">
      <div class="d-flex align-items-center gap-3 ml-2">
        <a href="#" target="_blank" class="text-white topbar-icon" title="WhatsApp"><i class="bi bi-whatsapp"></i></a>
        <a href="#" target="_blank" class="text-white topbar-icon" title="Telegram"><i class="bi bi-telegram"></i></a>
      </div>

      <div class="scrolling-container mr-4 ml-4">
        <div class="scrolling-text">
          🎉 <strong>Welcome Special Offer – 25% OFF!</strong> 🎉 &nbsp;&nbsp;&nbsp;&nbsp;
          Use promo code <b>WC-2025</b> on all hosting plans &nbsp;&nbsp;&nbsp;&nbsp;
          ✅ Recurring discount on all billing cycles &nbsp;&nbsp;&nbsp;&nbsp;
          ⚠️ Non-refundable &nbsp;&nbsp;&nbsp;&nbsp;
          ⏳ Limited Time Offer – Grab it now! &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
      </div>

      <div class="d-flex align-items-center justify-content-center gap-3 flex-wrap main-items">
        <div class="dropdown topbar-head-dropdown header-item">
          <button type="button" id="currencyBtn" class="btn btn-light btn-sm btn-label d-flex align-items-center gap-2" data-bs-toggle="dropdown">
            <i class="label-icon align-middle fs-14">Rs.</i> PKR
          </button>
          <div class="dropdown-menu dropdownmenu-primary shadow-sm border-0">
            <button class="dropdown-item text-dark px-3 py-2" data-currency="INR">₹ INR</button>
            <button class="dropdown-item text-dark px-3 py-2" data-currency="USD">$ USD</button>
            <button class="dropdown-item text-dark px-3 py-2 active fw-bold" data-currency="PKR">Rs. PKR</button>
          </div>
        </div>
        <div><a href="#" class="btn btn-outline-light btn-sm d-flex align-items-center gap-1"><i class="bi bi-box-arrow-in-right"></i> Login</a></div>
        <div><a href="#" class="btn btn-warning btn-sm d-flex align-items-center gap-1"><i class="fa fa-gift"></i> Offers</a></div>
      </div>
    </div>
  </div>
</div>

<!-- ===== HEADER ===== -->
<header id="header" class="d-flex align-items-center">
  <div class="container d-flex align-items-center justify-content-between">
    <a href="#" class="logo">
      <img src="http://a1sitehost.pk/wp-content/uploads/2025/11/WhatsApp-Image-2025-10-05-at-6.36.50-PM.jpeg" alt="A1sitehost" height="60" style="max-width:150px;" />
    </a>

    <nav id="navbar" class="navbar">
      <ul class="mainmenu">
        <li class="dropdown">
          <a href="#"><span>Hosting</span><span class="submenu-toggle bi bi-caret-right-fill d-lg-none"></span></a>
          <ul class="before">
            <li><a href="#">Register A Domain</a></li>
            <li><a href="#">Transfer A Domain</a></li>
            <li><a href="#">Domain Pricing</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#"><span>Reseller</span><span class="submenu-toggle bi bi-caret-right-fill d-lg-none"></span></a>
          <ul class="before">
            <li><a href="#">Register A Domain</a></li>
            <li><a href="#">Transfer A Domain</a></li>
            <li><a href="#">Domain Pricing</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#"><span>Domain</span><span class="submenu-toggle bi bi-caret-right-fill d-lg-none"></span></a>
          <ul class="before">
            <li><a href="#">Register A Domain</a></li>
            <li><a href="#">Transfer A Domain</a></li>
            <li><a href="#">Domain Pricing</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#"><span>Support</span><span class="submenu-toggle bi bi-caret-right-fill d-lg-none"></span></a>
          <ul class="before">
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Raise A Ticket</a></li>
          </ul>
        </li>
      </ul>
      <i class="bi bi-list mobile-nav-toggle" id="mobileToggle"></i>
    </nav>
  </div>
</header>

<main id="content" class="container" style="margin-top:120px;">
  <h1>Example Plans</h1>
  <ul>
    <li>Starter: <span class="money" data-amount-pkr="499"></span> / month</li>
    <li>Business: <span class="money" data-amount-pkr="1499"></span> / month</li>
  </ul>
</main>

<!-- ===== JS ===== -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
(function(){
  const header=document.getElementById('header');
  const setOffset=()=>{document.body.style.setProperty('--header-h',header.offsetHeight+'px');document.body.classList.add('has-sticky-offset');};
  window.addEventListener('load',setOffset);
  window.addEventListener('resize',setOffset);
  window.addEventListener('scroll',()=>{header.classList.toggle('stuck',window.scrollY>5);});
})();

(function(){
  const navbar=document.getElementById('navbar');
  const toggle=document.getElementById('mobileToggle');
  const dropdowns=navbar.querySelectorAll('.dropdown');
  const closeAll=()=>dropdowns.forEach(d=>d.classList.remove('open'));
  toggle.addEventListener('click',()=>{
    navbar.classList.toggle('open');
    if(!navbar.classList.contains('open'))closeAll();
  });
  navbar.querySelectorAll('.submenu-toggle').forEach(t=>{
    t.addEventListener('click',e=>{
      e.preventDefault();e.stopPropagation();
      t.closest('.dropdown').classList.toggle('open');
    });
  });
})();

(function(){
  const rates={PKR:1,USD:1/280,INR:1/3.3};
  const symbols={PKR:'Rs.',USD:'$',INR:'₹'};
  function format(n,c){const o={maximumFractionDigits:(c!=='PKR')?2:0};return symbols[c]+' '+Number(n).toLocaleString(undefined,o);}
  function apply(code){
    document.querySelectorAll('.money[data-amount-pkr]').forEach(el=>{
      const base=parseFloat(el.dataset.amountPkr||0);
      el.textContent=format(base*rates[code],code);
    });
    document.getElementById('currencyBtn').innerHTML=`<i class="label-icon align-middle fs-14">${symbols[code]}</i> ${code}`;
  }
  document.querySelectorAll('[data-currency]').forEach(it=>{
    it.addEventListener('click',()=>apply(it.dataset.currency));
  });
  apply('PKR');
})();
</script>
</body>
</html>