/*
Theme Name: Sharma Emitra
Theme URI: https://sharmaemitraservice.in/
Author: Sharma Emitra
Description: Professional digital services portal theme.
Version: 1.1
*/

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f6f9ff;
    color: #172554;
}

a {
    text-decoration: none;
    color: inherit;
}

.top-bar {
    background: #10235f;
    color: #fff;
    font-size: 13px;
    padding: 9px 4%;
}

.top-bar-inner {
    max-width: 1280px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.top-left,
.top-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* HEADER */

.main-header {
    background: #fff;
    border-bottom: 1px solid #e7ecf5;
    padding: 15px 4%;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 1280px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: #1557d6;
    white-space: nowrap;
}

.logo span {
    color: #f59e0b;
}

.logo small {
    display: block;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    margin-top: 3px;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-menu a {
    font-size: 15px;
    font-weight: 600;
    color: #172554;
}

.nav-menu a:hover {
    color: #1557d6;
}

/* BUTTONS */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 21px;
    border-radius: 9px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: .2s;
}

.btn-primary {
    background: #1557d6;
    color: white;
    box-shadow: 0 6px 18px rgba(21,87,214,.18);
}

.btn-primary:hover {
    background: #0d43ad;
    transform: translateY(-2px);
}

.btn-outline {
    background: white;
    border: 1px solid #1557d6;
    color: #1557d6;
}

/* HERO */

.hero {
    max-width: 1280px;
    margin: 22px auto;
    padding: 48px;
    border-radius: 20px;
    background: linear-gradient(135deg,#eef7ff,#ffffff);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    align-items: center;
}

.hero-content {
    padding: 15px;
}

.hero h1 {
    margin: 0;
    font-size: 52px;
    line-height: 1.08;
    color: #10235f;
}

.hero h1 span {
    color: #f59e0b;
}

.hero p {
    color: #64748b;
    font-size: 18px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    margin-top: 25px;
    flex-wrap: wrap;
}

/* SMALL FEATURES */

.hero-content:after {
    content: "100+ Services     •     Secure Payment     •     Quick Support";
    display: block;
    margin-top: 28px;
    color: #526078;
    font-size: 13px;
    font-weight: 700;
}

/* BANNER */

.hero-banner {
    min-height: 350px;
    border-radius: 20px;
    padding: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(circle at 85% 20%, #ffd21c 0 17%, transparent 18%),
        linear-gradient(135deg,#ffc400,#fff 48%,#1747a9);
    box-shadow: 0 15px 35px rgba(20,55,120,.12);
}

.hero-banner h2 {
    margin: 0 0 15px;
    font-size: 34px;
    line-height: 1.25;
    color: #10235f;
}

.hero-banner p {
    color: #172554;
    font-weight: 700;
    line-height: 1.8;
}

/* SECTION */

.section {
    max-width: 1280px;
    margin: 65px auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 35px;
}

.section-title h2 {
    font-size: 32px;
    margin: 0 0 10px;
    color: #10235f;
}

.section-title h2:after {
    content: "";
    display: block;
    width: 55px;
    height: 4px;
    border-radius: 10px;
    background: #1557d6;
    margin: 12px auto 0;
}

.section-title p {
    color: #64748b;
}

/* SERVICES */

.services-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 16px;
}

.service-card {
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    padding: 25px 10px;
    text-align: center;
    min-height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(20,55,120,.13);
    border-color: #b8ccf5;
}

.service-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f5ff;
    border-radius: 15px;
    font-size: 30px;
    margin-bottom: 12px;
}

.service-card h3 {
    margin: 0;
    font-size: 14px;
}

/* STATS */

.stats {
    max-width: 1280px;
    margin: 55px auto;
    padding: 27px 15px;
    border-radius: 16px;
    background: linear-gradient(90deg,#22258d,#173d9e);
    color: white;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    box-shadow: 0 15px 35px rgba(20,40,120,.18);
}

.stat {
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.25);
}

.stat:last-child {
    border-right: none;
}

.stat h3 {
    margin: 0;
    font-size: 27px;
}

.stat p {
    margin: 8px 0 0;
    font-size: 14px;
}

/* WHY CHOOSE */

.features {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.feature {
    background: white;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    padding: 27px;
    transition: .2s;
}

.feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(20,55,120,.10);
}

.feature h3 {
    margin-top: 0;
    font-size: 18px;
}

.feature p {
    color: #64748b;
    line-height: 1.7;
}

/* FOOTER */

.site-footer {
    background: #101d52;
    color: white;
    margin-top: 70px;
    padding: 50px 5% 20px;
}

.footer-inner {
    max-width: 1280px;
    margin: auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 45px;
}

.site-footer h3 {
    margin-top: 0;
}

.site-footer p {
    color: #cbd5e1;
    line-height: 1.8;
}

.footer-bottom {
    max-width: 1280px;
    margin: 35px auto 0;
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.15);
    color: #cbd5e1;
    font-size: 14px;
}

/* MOBILE */

@media(max-width:1000px) {

    .services-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .features {
        grid-template-columns: repeat(2,1fr);
    }

    .nav-menu {
        gap: 15px;
    }
}

@media(max-width:700px) {

    .top-bar-inner,
    .header-inner {
        flex-direction: column;
        text-align: center;
    }

    .top-left,
    .top-right {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        margin: 10px;
        padding: 25px 15px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .hero-banner {
        min-height: 280px;
    }

    .hero-banner h2 {
        font-size: 27px;
    }

    .services-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .stats {
        margin: 30px 10px;
        grid-template-columns: repeat(2,1fr);
        gap: 25px;
    }

    .stat {
        border-right: none;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }
}

/* ===== SHARMA EMITRA PROFESSIONAL HEADER ===== */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-mark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1557d6, #f59e0b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 900;
    border: 4px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wallet-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fbff;
    border: 1px solid #cbdcf5;
    border-radius: 12px;
    padding: 7px 8px 7px 12px;
}

.wallet-icon {
    font-size: 25px;
}

.wallet-box small {
    display: block;
    color: #64748b;
    font-size: 11px;
}

.wallet-box strong {
    display: block;
    color: #159447;
    font-size: 17px;
}

.add-money {
    background: #ff7517;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.add-money:hover {
    background: #e65d00;
}

@media(max-width:1100px) {
    .header-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .wallet-box {
        display: none;
    }
}

<?php
if (!defined('ABSPATH')) {
    exit;
}

get_header();
?>

<!-- TOP BAR -->
<div class="top-bar">
    <div class="top-bar-inner">
        <div class="top-left">
            <span>📍 Bus Stand, Kalwa Bara 341502</span>
            <span>🕐 8:00 AM - 8:00 PM</span>
        </div>

        <div class="top-right">
            <span>📞 8306883565</span>
            <span>💬 WhatsApp</span>
            <span>👤 Login / Register</span>
        </div>
    </div>
</div>


<!-- HEADER -->
<header class="main-header">
    <div class="header-inner">

        <div class="logo">
            <div class="logo-mark">SE</div>

            <div>
                Sharma <span>Emitra</span>
                <small>Digital Services, Simplified</small>
            </div>
        </div>


        <nav class="nav-menu">
            <a href="<?php echo esc_url(home_url('/')); ?>">🏠 Home</a>
            <a href="#services">▦ Services</a>
            <a href="#about">ℹ️ About Us</a>
            <a href="#updates">🔔 Latest Updates</a>
            <a href="#contact">📞 Contact Us</a>
        </nav>


        <div class="header-actions">

            <div class="wallet-box">

                <div class="wallet-icon">💳</div>

                <div>
                    <small>Wallet Balance</small>
                    <strong>₹0.00</strong>
                </div>

                <a href="#" class="add-money">
                    Add Money +
                </a>

            </div>


            <a href="#" class="btn btn-primary">
                👤 Login / Register
            </a>

        </div>

    </div>
</header>


<!-- HERO -->
<section class="hero">

    <div class="hero-content">

        <div class="welcome-badge">
            Welcome to
        </div>

        <h1>
            Sharma <span>Emitra</span>
        </h1>

        <p class="hero-subtitle">
            All Digital Services in One Place
        </p>

        <p class="hero-trust">
            Fast &nbsp; | &nbsp; Secure &nbsp; | &nbsp; Reliable
        </p>


        <div class="hero-buttons">

            <a href="#services" class="btn btn-primary">
                Explore Services →
            </a>

            <a href="#" class="btn btn-outline">
                💰 Add Money
            </a>

        </div>


        <div class="hero-points">

            <span>✓ Easy Process</span>
            <span>✓ Secure Payment</span>
            <span>✓ Quick Support</span>

        </div>

    </div>


    <!-- MAIN BANNER -->
    <div class="hero-banner">

        <div class="banner-content">

            <div class="banner-title">
                अब सभी सरकारी सेवाएं
                <br>
                <strong>एक ही जगह</strong>
            </div>

            <div class="banner-services">

                <span>✓ आधार कार्ड</span>
                <span>✓ पैन कार्ड</span>
                <span>✓ वोटर आईडी</span>
                <span>✓ राशन कार्ड</span>
                <span>✓ जन आधार</span>
                <span>✓ अन्य सेवाएं</span>

            </div>

            <a href="#services" class="btn btn-primary">
                सभी सेवाएं देखें
            </a>

        </div>

    </div>

</section>


<!-- SERVICES -->
<section class="section" id="services">

    <div class="section-title">

        <h2>
            Our <span>Services</span>
        </h2>

        <p>
            Sharma Emitra पर उपलब्ध प्रमुख डिजिटल सेवाएं
        </p>

    </div>


    <div class="services-grid">


        <a href="#" class="service-card">

            <div class="service-icon">🪪</div>

            <h3>Aadhaar Services</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">💳</div>

            <h3>PAN Services</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">👤</div>

            <h3>Voter ID</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">👨‍👩‍👧</div>

            <h3>Jan Aadhaar</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">🍚</div>

            <h3>Ration Card</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">👶</div>

            <h3>Birth Certificate</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">📜</div>

            <h3>Death Certificate</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">💍</div>

            <h3>Marriage Certificate</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">🚗</div>

            <h3>Driving License</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">🌾</div>

            <h3>PM Kisan Yojana</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">🧓</div>

            <h3>Pension Scheme</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">👷</div>

            <h3>NREGA</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">🌱</div>

            <h3>Kisan Samman Nidhi</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">🏦</div>

            <h3>Banking Services</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">🏛️</div>

            <h3>e-Mitra Services</h3>

        </a>


        <a href="#" class="service-card">

            <div class="service-icon">▦</div>

            <h3>Other Services</h3>

        </a>


    </div>

</section>


<!-- STATISTICS -->
<section class="stats">


    <div class="stat">

        <div class="stat-icon">👥</div>

        <h3>5000+</h3>

        <p>Happy Customers</p>

    </div>


    <div class="stat">

        <div class="stat-icon">⚙️</div>

        <h3>100+</h3>

        <p>Services</p>

    </div>


    <div class="stat">

        <div class="stat-icon">💳</div>

        <h3>₹0.00</h3>

        <p>Total Wallet</p>

    </div>


    <div class="stat">

        <div class="stat-icon">🧾</div>

        <h3>10000+</h3>

        <p>Transactions</p>

    </div>


    <div class="stat">

        <div class="stat-icon">🎧</div>

        <h3>24/7</h3>

        <p>Customer Support</p>

    </div>


</section>


<!-- WHY CHOOSE -->
<section class="section" id="about">

    <div class="section-title">

        <h2>
            Why Choose <span>Sharma Emitra?</span>
        </h2>

        <p>
            Fast, secure और भरोसेमंद digital services
        </p>

    </div>


    <div class="features">


        <div class="feature">

            <div class="feature-icon">🛡️</div>

            <h3>Trusted Services</h3>

            <p>
                सुरक्षित और भरोसेमंद डिजिटल सेवाएं।
            </p>

        </div>


        <div class="feature">

            <div class="feature-icon">💰</div>

            <h3>Best Service</h3>

            <p>
                आसान और transparent service process।
            </p>

        </div>


        <div class="feature">

            <div class="feature-icon">⚡</div>

            <h3>Fast Processing</h3>

            <p>
                तेज processing और आसान online सुविधा।
            </p>

        </div>


        <div class="feature">

            <div class="feature-icon">🎧</div>

            <h3>Customer Support</h3>

            <p>
                ग्राहक सहायता के लिए हमारी टीम उपलब्ध है।
            </p>

        </div>


    </div>

</section>


<!-- LATEST UPDATES -->
<section class="section updates-section" id="updates">

    <div class="section-title">

        <h2>
            Latest <span>Updates</span>
        </h2>

        <p>
            नई सेवाओं और महत्वपूर्ण जानकारी के लिए जुड़े रहें।
        </p>

    </div>


    <div class="update-box">

        <div>
            📢
        </div>

        <div>
            <h3>Sharma Emitra Digital Services</h3>

            <p>
                जल्द ही Customer Login, Wallet और Online Service Booking
                जैसी सुविधाएं उपलब्ध होंगी।
            </p>
        </div>

    </div>

</section>


<!-- FOOTER -->
<footer class="site-footer" id="contact">

    <div class="footer-inner">


        <div>

            <div class="footer-logo">
                <div class="logo-mark">SE</div>

                <div>
                    Sharma <span>Emitra</span>

                    <small>
                        Digital Services, Simplified
                    </small>

                </div>
            </div>


            <p>
                सभी डिजिटल और नागरिक सेवाएं
                एक ही जगह उपलब्ध कराने का प्रयास।
            </p>

        </div>


        <div>

            <h3>Quick Links</h3>

            <p>
                Home<br>
                Services<br>
                About Us<br>
                Latest Updates<br>
                Contact
            </p>

        </div>


        <div>

            <h3>Contact Us</h3>

            <p>
                📍 Bus Stand, Kalwa Bara 341502
                <br><br>
                📞 8306883565
                <br><br>
                🕐 8:00 AM - 8:00 PM
            </p>

        </div>


        <div>

            <h3>Follow Us</h3>

            <p>
                WhatsApp &nbsp; YouTube
                <br>
                Facebook &nbsp; Instagram
            </p>

        </div>


    </div>


    <div class="footer-bottom">

        © <?php echo date('Y'); ?> Sharma Emitra.
        All Rights Reserved.

    </div>

</footer>


<?php
get_footer();
?>

/* =================================
   SERVICE PAGE
================================= */

.service-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 20px;
}

.service-page-header {
    text-align: center;
    margin-bottom: 50px;
}

.service-page-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1557d6, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 10px 25px rgba(21,87,214,.18);
}

.service-page-header h1 {
    font-size: 38px;
    color: #172554;
    margin: 0 0 10px;
}

.service-page-header p {
    color: #64748b;
    font-size: 17px;
}

.service-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.service-option {
    text-decoration: none !important;
    background: #fff;
    border: 1px solid #e3e9f2;
    border-radius: 18px;
    padding: 30px 18px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(15,23,42,.07);
    transition: .3s;
}

.service-option:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 35px rgba(21,87,214,.15);
}

.option-icon {
    font-size: 35px;
    margin-bottom: 15px;
}

.service-option h3 {
    color: #172554;
    margin: 0 0 8px;
}

.service-option p {
    color: #64748b;
    margin: 0;
}

@media(max-width:800px) {
    .service-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:500px) {
    .service-options {
        grid-template-columns: 1fr;
    }

    .service-page-header h1 {
        font-size: 30px;
    }
}