|<meta name="theme-color" content="#FFD700" /> <!-- Mobile top bar bhi yellow -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
<style>
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #FFD700; /* Gold Yellow */
    color: #000; /* Black text */
    text-align: center;
    padding-bottom: 70px; /* bottom nav ke liye space */
    }
    .topbar {
    background: linear-gradient(90deg, #ff9900, #ffcc00);
    padding: 12px;
    font-weight: bold;
    font-size: 22px;
    color: #000; /* black text */
    }
    .section {
    margin: 20px 15px;
    background: rgba(255,255,255,0.4); /* soft yellow-white box */
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .label {
    font-weight: bold;
    margin: 8px 0 4px;
    font-size: 20px;
    }
    .value {
    font-size: 18px;
    font-weight: bold;
    }
    a {
    color: #000;
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    }
    .address {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 10px;
    }
    /* colourful icons */
    .icon {
    font-size: 40px;
    margin-bottom: 10px;
    }
    .icon.call { color: green; }
    .icon.whatsapp { color: #25D366; }
    .icon.map { color: #ff5722; }
    .icon.clock { color: #3f51b5; }
    .icon.mail { color: #d93025; }
    .icon.web { color: #2196f3; }
    .icon.gst { color: #ff9800; }
    /* bottom nav bar */
    .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,#1fa8ff,#2fe08b);
    padding: 10px 6px;
    display: flex;
    justify-content: space-around;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    }
    .nav a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .nav a i {
    font-size: 20px;
    margin-bottom: 4px;
    }
    .brand-strip {
    background: #000;
    color: #FFD700;
    font-size: 13px;
    text-align: center;
    padding: 6px 0;
    font-weight: bold;
    }
</style>
<div class="topbar">&nbsp;</div>
<div class="section">
<h1 style="font-size: 32px; background: linear-gradient(to right, #ff0000, #ff8c00, #ffd700, #008000, #0000ff, #4b0082, #ee82ee) text; -webkit-text-fill-color: transparent; margin: 0px; text-align: center;">M/s RING BAZAR</h1>
</div>
<!-- Booking -->
<div class="section">
<em class="fa-solid fa-phone icon call"></em>
<div class="label">Booking</div>
<div class="value"><a href="tel:9861556545">9861556545</a></div>
</div>
<!-- Billing -->
<div class="section">
<em class="fa-brands fa-whatsapp icon whatsapp"></em>
<div class="label">Billing</div>
<div class="value"><a href="https://wa.me/7855996545" target="_blank">7855996545</a></div>
</div>
<!-- Address -->
<div class="section">
<em class="fa-solid fa-location-dot icon map"></em>
<div class="label">Address</div>
<div class="address">
Hemraj Lane, 1st Floor,<br />
Nayasadak, Cuttack,<br />
Odisha - 753002
</div>
</div>
<!-- Booking Timings -->
<div class="section">
<em class="fa-regular fa-clock icon clock"></em>
<div class="label">Booking Timings</div>
<div class="value">Mon-Fri : 10:00 AM to 10:00 PM</div>
</div>
<!-- Email -->
<div class="section">
<em class="fa-regular fa-envelope icon mail"></em>
<div class="label">Email id</div>
<div class="value"><a href="mailto:ringbazar9@gmail.com">ringbazar9@gmail.com</a></div>
</div>
<!-- Website -->
<div class="section">
<em class="fa-solid fa-globe icon web"></em>
<div class="label">Website</div>
<div class="value"><a href="https://www.shivbullion.com" target="_blank">www.shivbullion.com</a></div>
</div>
<!-- GST -->
<div class="section">
<em class="fa-solid fa-file-invoice icon gst"></em>
<div class="label">GST</div>
<div class="value">21AVJPR3437Q1Z2</div>
</div>|