```php


<style>

/*
|--------------------------------------------------------------------------
| GLOBAL
|--------------------------------------------------------------------------
*/

:root{
    --white:#FFFFFF;
    --tint:#F2F7FF;
    --ink:#09182E;
    --off:#35435E;
    --muted:#6B7690;
    --blue:#155EEF;
    --blue-d:#0B3FBF;
    --yellow:#FFB800;
    --green:#06B879;
    --line:rgba(9,24,46,.10);
    --edge:clamp(20px,4vw,64px);
    --ease:cubic-bezier(.16,.84,.44,1);
}


.site-header,
.site-header *{
    box-sizing:border-box;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:200;

    background:rgba(255,255,255,.82);

    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);

    border-bottom:1px solid var(--line);

    transition:
        box-shadow .3s ease,
        background .3s ease;
}


.site-header::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--yellow) 55%,
            var(--green)
        );
}


.site-header.raised{
    background:rgba(255,255,255,.95);

    box-shadow:
        0 10px 34px -18px rgba(9,24,46,.32);
}


.site-header .header-container{
    width:100%;
    padding:0 var(--edge);
}


.site-header nav{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:18px;

    height:78px;

    position:relative;
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.site-brand{
    display:flex;
    align-items:center;

    text-decoration:none;

    flex-shrink:0;
}


.site-brand img{
    height:50px !important;
    width:auto !important;

    max-width:170px !important;

    display:block;

    object-fit:contain;
}


/*
|--------------------------------------------------------------------------
| DESKTOP NAV
|--------------------------------------------------------------------------
*/

.site-navlinks{
    display:flex;
    align-items:center;

    gap:2px;

    list-style:none;

    margin:0 auto;
    padding:0;
}


.site-navlinks > li{
    position:relative;
}


/*
|--------------------------------------------------------------------------
| IMPORTANT:
| MAIN SERVICE ITEMS ARE BUTTONS, NOT LINKS
|--------------------------------------------------------------------------
*/

.site-navlinks button.toplink{
    position:relative;

    display:flex;
    align-items:center;

    gap:6px;

    color:var(--off);

    font-family:inherit;
    font-size:14px;
    font-weight:600;

    padding:10px 12px;

    border-radius:10px;

    white-space:nowrap;

    border:0;
    background:transparent;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease;
}

/* HOME LINK — MATCH SERVICE BUTTONS */
.site-navlinks a.toplink {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    color: var(--off);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    padding: 10px 12px;
    border-radius: 10px;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;

    border: 0;
    background: transparent;
    cursor: pointer;

    transition: color .2s ease, background .2s ease;
}

.site-navlinks a.toplink::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;

    background: linear-gradient(90deg, var(--blue), var(--yellow));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
}

.site-navlinks a.toplink:hover,
.site-navlinks a.toplink.active {
    color: var(--ink);
    background: var(--tint);
}

.site-navlinks a.toplink:hover::after,
.site-navlinks a.toplink.active::after {
    transform: scaleX(1);
}

@media (max-width: 1240px) {
    .site-navlinks a.toplink {
        padding: 10px 9px;
        font-size: 13.5px;
    }

    .site-navlinks a.toplink::after {
        left: 9px;
        right: 9px;
    }
}
.site-navlinks button.toplink::after{
    content:"";

    position:absolute;

    left:12px;
    right:12px;

    bottom:3px;

    height:2px;

    border-radius:2px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--yellow)
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:
        transform .35s var(--ease);
}


.site-navlinks button.toplink:hover,
.site-navlinks li:focus-within > button.toplink,
.site-navlinks button.toplink.active{
    color:var(--ink);
    background:var(--tint);
}


.site-navlinks button.toplink:hover::after,
.site-has-drop:hover > button.toplink::after,
.site-has-drop.drop-open > button.toplink::after,
.site-navlinks button.toplink.active::after{
    transform:scaleX(1);
}


/*
|--------------------------------------------------------------------------
| CARET
|--------------------------------------------------------------------------
*/

.site-caret{
    width:6px;
    height:6px;

    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;

    transform:
        rotate(45deg)
        translateY(-2px);

    transition:
        transform .3s var(--ease);

    opacity:.7;
}


.site-has-drop:hover .site-caret,
.site-has-drop.drop-open .site-caret{
    transform:
        rotate(225deg)
        translateY(2px);
}


/*
|--------------------------------------------------------------------------
| DROPDOWN
|--------------------------------------------------------------------------
*/

.site-drop{
    position:absolute;

    top:100%;
    left:0;

    padding-top:14px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(8px);

    transition:
        opacity .25s var(--ease),
        transform .3s var(--ease),
        visibility .25s;

    z-index:60;
}


.site-drop.align-right{
    left:auto;
    right:0;
}


/*
|--------------------------------------------------------------------------
| DROPDOWN OPEN
|--------------------------------------------------------------------------
*/

.site-has-drop:hover > .site-drop,
.site-has-drop:focus-within > .site-drop,
.site-has-drop.drop-open > .site-drop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateY(0);
}


/*
|--------------------------------------------------------------------------
| DROPDOWN BOX
|--------------------------------------------------------------------------
*/

.site-drop-box{
    min-width:270px;

    background:#fff;

    border:1px solid var(--line);

    border-radius:16px;

    padding:10px;

    box-shadow:
        0 40px 80px -30px rgba(9,24,46,.35),
        0 2px 6px rgba(9,24,46,.04);

    position:relative;

    overflow:hidden;
}


.site-drop-box::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--yellow)
        );
}


/*
|--------------------------------------------------------------------------
| WIDE DROPDOWN
|--------------------------------------------------------------------------
*/

.site-drop.wide .site-drop-box{
    width:560px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:2px 6px;
}


/*
|--------------------------------------------------------------------------
| SUB SERVICE LINKS
|--------------------------------------------------------------------------
*/

.site-drop-box a{
    display:flex;
    align-items:center;

    gap:10px;

    padding:10px 12px;

    border-radius:10px;

    color:var(--off);

    font-size:13.5px;
    font-weight:500;

    line-height:1.35;

    text-decoration:none;

    transition:
        background .2s ease,
        color .2s ease,
        padding .25s var(--ease);
}


.site-drop-box a::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--line);

    flex-shrink:0;

    transition:
        background .2s ease,
        transform .25s var(--ease);
}


.site-drop-box a:hover{
    color:var(--blue);

    background:var(--tint);

    padding-left:16px;
}


.site-drop-box a:hover::before{
    background:var(--yellow);

    transform:scale(1.4);
}


.site-drop-box a.drop-main{
    color:var(--ink);
    font-weight:700;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.site-quote-btn{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    padding:13px 22px;

    border-radius:999px;

    font-family:'Space Grotesk',sans-serif;

    font-weight:700;

    font-size:14px;

    white-space:nowrap;

    background:var(--yellow);

    color:var(--ink);

    text-decoration:none;

    flex-shrink:0;

    box-shadow:
        0 10px 24px -10px rgba(255,184,0,.8);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s var(--ease),
        box-shadow .3s ease;
}


.site-quote-btn svg{
    transition:
        transform .35s var(--ease);
}


.site-quote-btn:hover{
    background:var(--blue);

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
        0 16px 34px -12px rgba(21,94,239,.6);
}


.site-quote-btn:hover svg{
    transform:
        rotate(-12deg)
        scale(1.1);
}


/*
|--------------------------------------------------------------------------
| MOBILE BURGER
|--------------------------------------------------------------------------
*/

.site-burger{
    display:none;

    flex-direction:column;

    gap:5px;

    width:42px;
    height:42px;

    align-items:center;
    justify-content:center;

    border:none;

    background:var(--tint);

    border-radius:12px;

    cursor:pointer;
}


.site-burger span{
    width:18px;
    height:2px;

    background:var(--ink);

    border-radius:2px;

    transition:.3s ease;
}


.site-burger.active span:nth-child(1){
    transform:
        translateY(7px)
        rotate(45deg);
}


.site-burger.active span:nth-child(2){
    opacity:0;
}


.site-burger.active span:nth-child(3){
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/*
|--------------------------------------------------------------------------
| MOBILE PANEL
|--------------------------------------------------------------------------
*/

.site-mobile-panel{
    position:fixed;

    top:0;
    right:0;

    height:100vh;

    width:min(360px,88vw);

    background:#fff;

    z-index:300;

    padding:96px 24px 30px;

    transform:translateX(100%);

    transition:
        transform .45s var(--ease);

    overflow-y:auto;

    border-left:1px solid var(--line);

    box-shadow:
        -30px 0 60px -30px rgba(9,24,46,.25);
}


.site-mobile-panel.open{
    transform:translateX(0);
}


.site-mobile-panel > a,
.site-mobile-toggle{
    display:flex;

    align-items:center;
    justify-content:space-between;

    width:100%;

    padding:15px 4px;

    color:var(--off);

    font-weight:600;

    font-size:15px;

    font-family:inherit;

    background:none;

    border:none;

    border-bottom:1px solid var(--line);

    text-decoration:none;

    text-align:left;

    cursor:pointer;
}


.site-mobile-panel > a:hover,
.site-mobile-toggle:hover{
    color:var(--blue);
}


.site-mobile-toggle .site-caret{
    transition:
        transform .3s var(--ease);
}


.site-mobile-toggle.open .site-caret{
    transform:
        rotate(225deg)
        translateY(2px);
}


.site-mobile-toggle.open{
    color:var(--blue);
}


/*
|--------------------------------------------------------------------------
| MOBILE SUB MENU
|--------------------------------------------------------------------------
*/

.site-mobile-sub{
    max-height:0;

    overflow:hidden;

    transition:
        max-height .45s var(--ease);

    background:var(--tint);

    border-radius:12px;

    margin:0 0 4px;
}


.site-mobile-sub.open{
    max-height:1000px;

    margin:8px 0 8px;

    padding:6px 0;
}


.site-mobile-sub a{
    display:block;

    padding:10px 16px;

    color:var(--off);

    font-size:13.5px;

    text-decoration:none;
}


.site-mobile-sub a:hover{
    color:var(--blue);
}


.site-mobile-sub a.drop-main{
    color:var(--ink);
    font-weight:700;
}


.site-mobile-quote{
    margin-top:24px;
}


.site-mobile-quote a{
    width:100%;
}


/*
|--------------------------------------------------------------------------
| SCRIM
|--------------------------------------------------------------------------
*/

.site-scrim{
    position:fixed;

    inset:0;

    background:rgba(9,24,46,.35);

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    z-index:250;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .4s ease,
        visibility .4s;
}


.site-scrim.show{
    opacity:1;
    visibility:visible;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:1240px){

    .site-navlinks button.toplink{
        padding:10px 9px;
        font-size:13.5px;
    }

    .site-navlinks button.toplink::after{
        left:9px;
        right:9px;
    }

    .site-quote-btn{
        padding:12px 18px;
        font-size:13.5px;
    }

    .site-header nav{
        gap:12px;
    }
}


@media(max-width:1100px){

    .site-navlinks,
    .site-header .site-quote-btn{
        display:none;
    }

    .site-burger{
        display:flex;
    }
}


@media(max-width:640px){

    .site-header nav{
        height:70px;
    }

    .site-brand img{
        height:45px !important;
        max-width:155px !important;
    }
}


@media(prefers-reduced-motion:reduce){

    .site-header *,
    .site-mobile-panel{
        transition:none !important;
    }
}

</style>


<!-- =========================================================
     HEADER
========================================================= -->

<header class="site-header" id="siteHeader">

    <div class="header-container">

        <nav>


            <!-- =================================================
                 LOGO
            ================================================= -->

            <a
                class="site-brand"
                href="/index.php"
                aria-label="Amalfi Management Solution"
            >

                <img
                    src="/assets/amalfimslogo.png"
                    alt="Amalfi Management Solution"
                >

            </a>


            <!-- =================================================
                 DESKTOP NAVIGATION
            ================================================= -->

            <ul class="site-navlinks">


                <!-- HOME -->

                <li>

                    <a
                        href="/index.php"
                        class="toplink "
                    >
                        Home
                    </a>

                </li>


                <!-- =================================================
                     SERVICE DROPDOWNS
                     
                     IMPORTANT:
                     MAIN SERVICE IS A BUTTON.
                     IT DOES NOT HAVE A HREF.
                     ONLY SUB SERVICES HAVE HREF.
                ================================================= -->

                
                    
                    <li class="site-has-drop">

                        <!-- MAIN SERVICE BUTTON - NOT CLICKABLE AS PAGE -->

                        <button
                            type="button"
                            class="toplink "
                            aria-haspopup="true"
                            aria-expanded="false"
                        >

                            Web
                            <span class="site-caret"></span>

                        </button>


                        <!-- DROPDOWN -->

                        <div class="site-drop">

                            <div class="site-drop-box">

                                
                                    <a
                                        href="/services/web/mern.php"
                                        class="drop-main"                                    >

                                        MERN Stack Development
                                    </a>

                                
                                    <a
                                        href="/services/web/php_dev.php"
                                                                            >

                                        PHP Development
                                    </a>

                                
                                    <a
                                        href="/services/web/seo.php"
                                                                            >

                                        SEO
                                    </a>

                                
                                    <a
                                        href="/services/web/geo.php"
                                                                            >

                                        GEO
                                    </a>

                                
                            </div>

                        </div>

                    </li>

                
                    
                    <li class="site-has-drop">

                        <!-- MAIN SERVICE BUTTON - NOT CLICKABLE AS PAGE -->

                        <button
                            type="button"
                            class="toplink "
                            aria-haspopup="true"
                            aria-expanded="false"
                        >

                            Medical
                            <span class="site-caret"></span>

                        </button>


                        <!-- DROPDOWN -->

                        <div class="site-drop">

                            <div class="site-drop-box">

                                
                                    <a
                                        href="/services/medical/rcm.php"
                                        class="drop-main"                                    >

                                        Medical Billing and RCM
                                    </a>

                                
                                    <a
                                        href="/services/medical/medical_records.php"
                                                                            >

                                        Medical Record Requests
                                    </a>

                                
                                    <a
                                        href="/services/medical/benefits.php"
                                                                            >

                                        Benefits Verification
                                    </a>

                                
                                    <a
                                        href="/services/medical/prior.php"
                                                                            >

                                        Prior Authorization
                                    </a>

                                
                                    <a
                                        href="/services/medical/ar.php"
                                                                            >

                                        Accounts Receivable
                                    </a>

                                
                                    <a
                                        href="/services/medical/medical_vfd.php"
                                                                            >

                                        Patient Scheduling &amp; Front Desk
                                    </a>

                                
                            </div>

                        </div>

                    </li>

                
                    
                    <li class="site-has-drop">

                        <!-- MAIN SERVICE BUTTON - NOT CLICKABLE AS PAGE -->

                        <button
                            type="button"
                            class="toplink "
                            aria-haspopup="true"
                            aria-expanded="false"
                        >

                            Virtual Front Desk
                            <span class="site-caret"></span>

                        </button>


                        <!-- DROPDOWN -->

                        <div class="site-drop">

                            <div class="site-drop-box">

                                
                                    <a
                                        href="/services/vfd/appointment_scheduling.php"
                                        class="drop-main"                                    >

                                        Appointment Scheduling
                                    </a>

                                
                                    <a
                                        href="/services/vfd/inout.php"
                                                                            >

                                        Inbound and Outbound Call Handling
                                    </a>

                                
                                    <a
                                        href="/services/vfd/live_chat.php"
                                                                            >

                                        Live Chat and Email Support
                                    </a>

                                
                            </div>

                        </div>

                    </li>

                
                    
                    <li class="site-has-drop">

                        <!-- MAIN SERVICE BUTTON - NOT CLICKABLE AS PAGE -->

                        <button
                            type="button"
                            class="toplink "
                            aria-haspopup="true"
                            aria-expanded="false"
                        >

                            Truck Dispatch
                            <span class="site-caret"></span>

                        </button>


                        <!-- DROPDOWN -->

                        <div class="site-drop">

                            <div class="site-drop-box">

                                
                                    <a
                                        href="/services/truck/fleet_operations.php"
                                        class="drop-main"                                    >

                                        Fleet Operations
                                    </a>

                                
                                    <a
                                        href="/services/truck/route_optimization.php"
                                                                            >

                                        Route Operations
                                    </a>

                                
                                    <a
                                        href="/services/truck/load_booking.php"
                                                                            >

                                        Load Booking
                                    </a>

                                
                            </div>

                        </div>

                    </li>

                
                    
                    <li class="site-has-drop">

                        <!-- MAIN SERVICE BUTTON - NOT CLICKABLE AS PAGE -->

                        <button
                            type="button"
                            class="toplink "
                            aria-haspopup="true"
                            aria-expanded="false"
                        >

                            Digital Marketing
                            <span class="site-caret"></span>

                        </button>


                        <!-- DROPDOWN -->

                        <div class="site-drop align-right">

                            <div class="site-drop-box">

                                
                                    <a
                                        href="/services/digital/social_media_marketing.php"
                                        class="drop-main"                                    >

                                        Social Media Marketing
                                    </a>

                                
                                    <a
                                        href="/services/digital/paid_advertising.php"
                                                                            >

                                        Paid Advertising
                                    </a>

                                
                                    <a
                                        href="/services/digital/graphic.php"
                                                                            >

                                        Graphic Design
                                    </a>

                                
                                    <a
                                        href="/services/digital/digital_brand.php"
                                                                            >

                                        Digital Brand Management
                                    </a>

                                
                            </div>

                        </div>

                    </li>

                
                    
                    <li class="site-has-drop">

                        <!-- MAIN SERVICE BUTTON - NOT CLICKABLE AS PAGE -->

                        <button
                            type="button"
                            class="toplink "
                            aria-haspopup="true"
                            aria-expanded="false"
                        >

                            Legal
                            <span class="site-caret"></span>

                        </button>


                        <!-- DROPDOWN -->

                        <div class="site-drop wide align-right">

                            <div class="site-drop-box">

                                
                                    <a
                                        href="/services/legal/contract_review.php"
                                        class="drop-main"                                    >

                                        Contract Review &amp; Drafting
                                    </a>

                                
                                    <a
                                        href="/services/legal/corporate-commercial-law.php"
                                                                            >

                                        Corporate &amp; Commercial Law
                                    </a>

                                
                                    <a
                                        href="/services/legal/intellectual.php"
                                                                            >

                                        Intellectual Property Law
                                    </a>

                                
                                    <a
                                        href="/services/legal/pakistan.php"
                                                                            >

                                        Pakistan Legal Services
                                    </a>

                                
                                    <a
                                        href="/services/legal/us_immigration.php"
                                                                            >

                                        U.S. Immigration Law
                                    </a>

                                
                            </div>

                        </div>

                    </li>

                

            </ul>


            <!-- =================================================
                 DESKTOP CTA
            ================================================= -->

            <a
                href="/contact.php"
                class="site-quote-btn"
            >

                
<svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2.2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
>
    <rect x="3" y="4.5" width="18" height="16.5" rx="3"/>
    <path d="M8 2.5v4M16 2.5v4M3 10h18"/>
</svg>
                Book a Free Consult
            </a>


            <!-- =================================================
                 MOBILE BURGER
            ================================================= -->

            <button
                class="site-burger"
                id="siteBurgerBtn"
                aria-label="Open menu"
                aria-expanded="false"
                type="button"
            >

                <span></span>
                <span></span>
                <span></span>

            </button>


        </nav>

    </div>

</header>


<!-- =========================================================
     MOBILE SCRIM
========================================================= -->

<div
    class="site-scrim"
    id="siteScrim"
></div>


<!-- =========================================================
     MOBILE PANEL
========================================================= -->

<div
    class="site-mobile-panel"
    id="siteMobilePanel"
>


    <!-- HOME -->
<li class="site-home-item">
    <a
        href="/index.php"
        class="toplink "
    >
        Home
    </a>
</li>

    <!-- =======================================================
         MOBILE SERVICE DROPDOWNS
         
         MAIN SERVICE = BUTTON
         SUB SERVICES = LINKS
    ======================================================== -->

    

        <button
            type="button"
            class="site-mobile-toggle"
            aria-expanded="false"
        >

            Web
            <span class="site-caret"></span>

        </button>


        <div class="site-mobile-sub">

            
                <a
                    href="/services/web/mern.php"
                    class="drop-main"                >

                    MERN Stack Development
                </a>

            
                <a
                    href="/services/web/php_dev.php"
                                    >

                    PHP Development
                </a>

            
                <a
                    href="/services/web/seo.php"
                                    >

                    SEO
                </a>

            
                <a
                    href="/services/web/geo.php"
                                    >

                    GEO
                </a>

            
        </div>


    

        <button
            type="button"
            class="site-mobile-toggle"
            aria-expanded="false"
        >

            Medical
            <span class="site-caret"></span>

        </button>


        <div class="site-mobile-sub">

            
                <a
                    href="/services/medical/rcm.php"
                    class="drop-main"                >

                    Medical Billing and RCM
                </a>

            
                <a
                    href="/services/medical/medical_records.php"
                                    >

                    Medical Record Requests
                </a>

            
                <a
                    href="/services/medical/benefits.php"
                                    >

                    Benefits Verification
                </a>

            
                <a
                    href="/services/medical/prior.php"
                                    >

                    Prior Authorization
                </a>

            
                <a
                    href="/services/medical/ar.php"
                                    >

                    Accounts Receivable
                </a>

            
                <a
                    href="/services/medical/medical_vfd.php"
                                    >

                    Patient Scheduling &amp; Front Desk
                </a>

            
        </div>


    

        <button
            type="button"
            class="site-mobile-toggle"
            aria-expanded="false"
        >

            Virtual Front Desk
            <span class="site-caret"></span>

        </button>


        <div class="site-mobile-sub">

            
                <a
                    href="/services/vfd/appointment_scheduling.php"
                    class="drop-main"                >

                    Appointment Scheduling
                </a>

            
                <a
                    href="/services/vfd/inout.php"
                                    >

                    Inbound and Outbound Call Handling
                </a>

            
                <a
                    href="/services/vfd/live_chat.php"
                                    >

                    Live Chat and Email Support
                </a>

            
        </div>


    

        <button
            type="button"
            class="site-mobile-toggle"
            aria-expanded="false"
        >

            Truck Dispatch
            <span class="site-caret"></span>

        </button>


        <div class="site-mobile-sub">

            
                <a
                    href="/services/truck/fleet_operations.php"
                    class="drop-main"                >

                    Fleet Operations
                </a>

            
                <a
                    href="/services/truck/route_optimization.php"
                                    >

                    Route Operations
                </a>

            
                <a
                    href="/services/truck/load_booking.php"
                                    >

                    Load Booking
                </a>

            
        </div>


    

        <button
            type="button"
            class="site-mobile-toggle"
            aria-expanded="false"
        >

            Digital Marketing
            <span class="site-caret"></span>

        </button>


        <div class="site-mobile-sub">

            
                <a
                    href="/services/digital/social_media_marketing.php"
                    class="drop-main"                >

                    Social Media Marketing
                </a>

            
                <a
                    href="/services/digital/paid_advertising.php"
                                    >

                    Paid Advertising
                </a>

            
                <a
                    href="/services/digital/graphic.php"
                                    >

                    Graphic Design
                </a>

            
                <a
                    href="/services/digital/digital_brand.php"
                                    >

                    Digital Brand Management
                </a>

            
        </div>


    

        <button
            type="button"
            class="site-mobile-toggle"
            aria-expanded="false"
        >

            Legal
            <span class="site-caret"></span>

        </button>


        <div class="site-mobile-sub">

            
                <a
                    href="/services/legal/contract_review.php"
                    class="drop-main"                >

                    Contract Review &amp; Drafting
                </a>

            
                <a
                    href="/services/legal/corporate-commercial-law.php"
                                    >

                    Corporate &amp; Commercial Law
                </a>

            
                <a
                    href="/services/legal/intellectual.php"
                                    >

                    Intellectual Property Law
                </a>

            
                <a
                    href="/services/legal/pakistan.php"
                                    >

                    Pakistan Legal Services
                </a>

            
                <a
                    href="/services/legal/us_immigration.php"
                                    >

                    U.S. Immigration Law
                </a>

            
        </div>


    

    <!-- CONTACT -->

    <a href="/contact.php">
        Contact Us
    </a>


    <!-- MOBILE CTA -->

    <div class="site-mobile-quote">

        <a
            href="/contact.php"
            class="site-quote-btn"
        >

            
<svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2.2"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
>
    <rect x="3" y="4.5" width="18" height="16.5" rx="3"/>
    <path d="M8 2.5v4M16 2.5v4M3 10h18"/>
</svg>
            Book a Free Consult
        </a>

    </div>

</div>


<script>

(function(){

    /*
    |--------------------------------------------------------------------------
    | HEADER SHADOW ON SCROLL
    |--------------------------------------------------------------------------
    */

    var header =
        document.getElementById('siteHeader');


    if(header){

        var updateHeader = function(){

            header.classList.toggle(
                'raised',
                window.scrollY > 30
            );

        };


        window.addEventListener(
            'scroll',
            updateHeader,
            {passive:true}
        );


        updateHeader();

    }


    /*
    |--------------------------------------------------------------------------
    | DESKTOP DROPDOWNS
    |--------------------------------------------------------------------------
    |
    | MAIN SERVICE BUTTONS:
    | - Never navigate
    | - Click opens/closes dropdown
    | - Clicking another service closes previous dropdown
    |
    |--------------------------------------------------------------------------
    */

    var drops =
        document.querySelectorAll('.site-has-drop');


    function closeDrops(){

        drops.forEach(function(item){

            item.classList.remove('drop-open');

            var button =
                item.querySelector(':scope > button.toplink');

            if(button){
                button.setAttribute(
                    'aria-expanded',
                    'false'
                );
            }

        });

    }


    drops.forEach(function(item){

        var button =
            item.querySelector(':scope > button.toplink');


        if(!button){
            return;
        }


        button.addEventListener(
            'click',
            function(e){

                e.preventDefault();

                e.stopPropagation();


                var wasOpen =
                    item.classList.contains('drop-open');


                closeDrops();


                if(!wasOpen){

                    item.classList.add('drop-open');

                    button.setAttribute(
                        'aria-expanded',
                        'true'
                    );

                }

            }
        );

    });


    /*
    |--------------------------------------------------------------------------
    | CLOSE DESKTOP DROPDOWN WHEN CLICKING OUTSIDE
    |--------------------------------------------------------------------------
    */

    document.addEventListener(
        'click',
        function(e){

            if(!e.target.closest('.site-has-drop')){

                closeDrops();

            }

        }
    );


    /*
    |--------------------------------------------------------------------------
    | CLOSE DROPDOWN AFTER CLICKING SUB SERVICE
    |--------------------------------------------------------------------------
    */

    document.querySelectorAll(
        '.site-drop-box a'
    ).forEach(function(link){

        link.addEventListener(
            'click',
            function(){

                closeDrops();

            }

        );

    });


    /*
    |--------------------------------------------------------------------------
    | MOBILE MENU
    |--------------------------------------------------------------------------
    */

    var burger =
        document.getElementById('siteBurgerBtn');

    var mobilePanel =
        document.getElementById('siteMobilePanel');

    var scrim =
        document.getElementById('siteScrim');


    function closeMobileMenu(){

        if(burger){

            burger.classList.remove('active');

            burger.setAttribute(
                'aria-expanded',
                'false'
            );

        }


        if(mobilePanel){

            mobilePanel.classList.remove('open');

        }


        if(scrim){

            scrim.classList.remove('show');

        }


        document.body.style.overflow = '';

    }


    if(
        burger &&
        mobilePanel &&
        scrim
    ){

        burger.addEventListener(
            'click',
            function(){

                var opening =
                    !mobilePanel.classList.contains('open');


                burger.classList.toggle(
                    'active',
                    opening
                );


                burger.setAttribute(
                    'aria-expanded',
                    opening ? 'true' : 'false'
                );


                mobilePanel.classList.toggle(
                    'open',
                    opening
                );


                scrim.classList.toggle(
                    'show',
                    opening
                );


                document.body.style.overflow =
                    opening ? 'hidden' : '';

            }
        );


        scrim.addEventListener(
            'click',
            closeMobileMenu
        );

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE ACCORDIONS
    |--------------------------------------------------------------------------
    */

    if(mobilePanel){

        var toggles =
            mobilePanel.querySelectorAll(
                '.site-mobile-toggle'
            );


        toggles.forEach(function(btn){

            btn.addEventListener(
                'click',
                function(){

                    var sub =
                        btn.nextElementSibling;


                    if(!sub){
                        return;
                    }


                    var open =
                        !sub.classList.contains('open');


                    /*
                    | Close every other mobile dropdown
                    */

                    mobilePanel
                        .querySelectorAll('.site-mobile-sub')
                        .forEach(function(s){

                            s.classList.remove('open');

                        });


                    toggles.forEach(function(b){

                        b.classList.remove('open');

                        b.setAttribute(
                            'aria-expanded',
                            'false'
                        );

                    });


                    /*
                    | Open selected dropdown
                    */

                    if(open){

                        sub.classList.add('open');

                        btn.classList.add('open');

                        btn.setAttribute(
                            'aria-expanded',
                            'true'
                        );

                    }

                }
            );

        });


        /*
        |--------------------------------------------------------------------------
        | CLOSE MOBILE MENU AFTER SUB SERVICE CLICK
        |--------------------------------------------------------------------------
        */

        mobilePanel
            .querySelectorAll(
                '.site-mobile-sub a'
            )
            .forEach(function(link){

                link.addEventListener(
                    'click',
                    closeMobileMenu
                );

            });


        /*
        |--------------------------------------------------------------------------
        | CLOSE MOBILE MENU AFTER HOME / CONTACT
        |--------------------------------------------------------------------------
        */

        mobilePanel
            .querySelectorAll(
                ':scope > a'
            )
            .forEach(function(link){

                link.addEventListener(
                    'click',
                    closeMobileMenu
                );

            });

    }


    /*
    |--------------------------------------------------------------------------
    | ESCAPE KEY
    |--------------------------------------------------------------------------
    */

    document.addEventListener(
        'keydown',
        function(e){

            if(e.key === 'Escape'){

                closeMobileMenu();

                closeDrops();

            }

        }
    );


    /*
    |--------------------------------------------------------------------------
    | CLOSE DESKTOP DROPDOWN WHEN WINDOW RESIZES
    |--------------------------------------------------------------------------
    */

    window.addEventListener(
        'resize',
        function(){

            if(window.innerWidth <= 1100){

                closeDrops();

            }

        }
    );


})();

</script>
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* {
    box-sizing: border-box;
}

.mern-development-page {
    width: 100%;
    overflow: hidden;
    background: #fff;
    color: #10244a;
    font-family: 'Inter', Arial, sans-serif;
}

.mern-hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    padding: 30px 5%;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 35%, rgba(38,112,255,.10), transparent 32%),
        linear-gradient(135deg,#fff 0%,#f8fbff 55%,#edf5ff 100%);
}

.mern-bg-line-one,
.mern-bg-line-two {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(41,111,255,.12);
    pointer-events: none;
}

.mern-bg-line-one {
    width: 420px;
    height: 420px;
    right: -180px;
    top: -150px;
    border-width: 2px;
}

.mern-bg-line-two {
    width: 300px;
    height: 300px;
    right: -110px;
    top: -90px;
}

.mern-bg-yellow {
    position: absolute;
    width: 260px;
    height: 18px;
    right: -75px;
    bottom: 75px;
    background: #ffc928;
    transform: rotate(-45deg);
    border-radius: 30px;
    opacity: .9;
}

.mern-bg-blue {
    position: absolute;
    width: 230px;
    height: 13px;
    left: -90px;
    bottom: 65px;
    background: #2474ed;
    transform: rotate(-45deg);
    border-radius: 30px;
    opacity: .12;
}

.mern-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

.mern-grid {
    display: grid;
    grid-template-columns: minmax(0,.90fr) minmax(0,1.10fr);
    align-items: center;
    gap: 40px;
}

.mern-content {
    width: 100%;
    max-width: 650px;
}

.mern-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    margin-bottom: 19px;
    border-radius: 30px;
    background: #eaf3ff;
    border: 1px solid #d6e7ff;
    color: #1558c0;
    font-size: 13px;
    font-weight: 700;
}

.mern-badge i {
    color: #1768e8;
    font-size: 15px;
}

.mern-content h2 {
    margin: 0;
    color: #10244a;
    font-size: clamp(42px,4.6vw,68px);
    line-height: 1.02;
    letter-spacing: -2.7px;
    font-weight: 900;
}

.mern-content h2 span {
    display: block;
    position: relative;
    width: fit-content;
    color: #1769e8;
}

.mern-content h2 span::after {
    content: "";
    position: absolute;
    height: 6px;
    left: 2px;
    right: 8px;
    bottom: -7px;
    border-radius: 20px;
    background: #ffc928;
}

.mern-description {
    margin: 23px 0 0;
    max-width: 620px;
    color: #53647d;
    font-size: 14px;
    line-height: 1.75;
}

.mern-description strong {
    color: #193764;
}

.mern-services {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 11px 20px;
    margin-top: 23px;
}

.mern-service {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #263d62;
    font-size: 12px;
    font-weight: 700;
}

.mern-service i {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #1769e8;
    background: #eaf3ff;
    font-size: 12px;
}

.mern-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.mern-btn {
    min-height: 43px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .25s ease;
}

.mern-btn:hover {
    transform: translateY(-3px);
}

.mern-btn.primary {
    color: #fff;
    background: #1769e8;
    box-shadow: 0 10px 22px rgba(23,105,232,.20);
}

.mern-btn.primary:hover {
    background: #0959d4;
}

.mern-btn.brochure {
    color: #1457bd;
    background: #fff;
    border: 1px solid #b8d4fa;
}

.mern-btn.contact {
    color: #15294c;
    background: #ffc928;
    border: 1px solid #ffc928;
}

/* RIGHT SIDE ILLUSTRATION */

.mern-visual {
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mern-illustration {
    position: relative;
    width: min(100%,720px);
    aspect-ratio: 1.22 / 1;
}

.mern-tech {
    position: absolute;
    z-index: 8;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(255,255,255,.97);
    border: 1px solid #dce8f8;
    box-shadow: 0 12px 28px rgba(27,67,122,.11);
}

.mern-tech i {
    font-size: 24px;
}

.mern-tech span {
    color: #17325d;
    font-size: 8px;
    font-weight: 800;
}

.tech-php {
    left: 8%;
    top: 7%;
}

.tech-php i {
    color: #777bb4;
}

.tech-laravel {
    left: 29%;
    top: 0;
}

.tech-laravel i {
    color: #f05340;
}

.tech-mysql {
    right: 27%;
    top: 2%;
}

.tech-mysql i {
    color: #0879a8;
}

.tech-api {
    right: 5%;
    top: 10%;
}

.tech-api i {
    color: #198754;
}

.mern-connection {
    position: absolute;
    left: 14%;
    right: 11%;
    top: 14%;
    height: 120px;
    border-top: 2px dashed rgba(41,111,255,.32);
    border-radius: 50%;
}

/* LAPTOP */

.mern-laptop {
    position: absolute;
    width: 82%;
    left: 9%;
    bottom: 5%;
    z-index: 5;
}

.mern-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    padding: 10px;
    border-radius: 18px 18px 9px 9px;
    background: #152035;
    border: 3px solid #273753;
    box-shadow: 0 28px 55px rgba(22,48,88,.22);
}

.mern-screen::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #71809a;
}

.mern-screen-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 9px;
    background: #0c1422;
}

.mern-browser {
    height: 28px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #151f31;
    border-bottom: 1px solid #26334a;
}

.mern-browser-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mern-browser-dot:nth-child(1) { background: #ff635c; }
.mern-browser-dot:nth-child(2) { background: #ffc229; }
.mern-browser-dot:nth-child(3) { background: #2ecf62; }

.mern-browser-url {
    flex: 1;
    height: 13px;
    max-width: 46%;
    margin-left: 8px;
    border-radius: 4px;
    background: #202d42;
}

.mern-screen-content {
    height: calc(100% - 28px);
    display: grid;
    grid-template-columns: 35% 65%;
}

/* PHP CODE PANEL */

.mern-code {
    padding: 14px 8px;
    background: #0b1320;
    border-right: 1px solid #26334a;
    font-family: "Courier New",monospace;
    font-size: clamp(6px,.68vw,9px);
    line-height: 1.9;
    overflow: hidden;
}

.code-row {
    white-space: nowrap;
}

.code-num {
    display: inline-block;
    width: 17px;
    color: #42516a;
}

.code-purple { color: #c982ff; }
.code-blue { color: #56bfff; }
.code-yellow { color: #ffc85b; }
.code-green { color: #87d85d; }
.code-gray { color: #64758e; }

/* WEBSITE PREVIEW */

.mern-web-preview {
    background: #fff;
    overflow: hidden;
}

.web-nav {
    height: 31px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf1f6;
}

.web-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #15345f;
    font-size: 8px;
    font-weight: 900;
}

.web-logo i {
    color: #f05340;
}

.web-nav-links {
    display: flex;
    gap: 8px;
}

.web-nav-links span {
    color: #8a96a8;
    font-size: 6px;
}

.web-main {
    padding: 13px 14px;
}

.web-small {
    color: #f05340;
    font-size: 6px;
    font-weight: 800;
    margin-bottom: 5px;
}

.web-heading {
    max-width: 180px;
    color: #10244a;
    font-size: clamp(16px,1.8vw,24px);
    line-height: 1.08;
    font-weight: 900;
}

.web-heading span {
    color: #f05340;
}

.web-text {
    max-width: 210px;
    margin-top: 7px;
    color: #8995a7;
    font-size: 6px;
    line-height: 1.6;
}

.web-button {
    display: inline-flex;
    margin-top: 9px;
    padding: 6px 10px;
    border-radius: 4px;
    background: #f05340;
    color: #fff;
    font-size: 6px;
    font-weight: 800;
}

.web-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    margin-top: 14px;
}

.web-card {
    min-height: 40px;
    padding: 6px;
    border-radius: 6px;
    background: #fff7f5;
    border: 1px solid #fde3dd;
}

.web-card i {
    color: #f05340;
    font-size: 9px;
}

.web-card strong {
    display: block;
    margin-top: 4px;
    color: #243a5d;
    font-size: 6px;
}

.web-card span {
    color: #9aa6b5;
    font-size: 5px;
}

/* LAPTOP BASE */

.mern-laptop-base {
    position: relative;
    width: 110%;
    height: 18px;
    margin-left: -5%;
    margin-top: -1px;
    border-radius: 0 0 25px 25px;
    background: linear-gradient(180deg,#aeb8c7,#e5e9ee);
    box-shadow: 0 15px 25px rgba(28,55,91,.20);
}

.mern-laptop-base::after {
    content: "";
    position: absolute;
    width: 15%;
    height: 4px;
    left: 42.5%;
    top: 3px;
    border-radius: 10px;
    background: #8995a6;
}

/* FLOATING TERMINAL */

.mern-terminal {
    position: absolute;
    z-index: 9;
    left: 0;
    bottom: 18%;
    width: 165px;
    padding: 12px;
    border-radius: 10px;
    background: #111b2b;
    border: 1px solid #263a58;
    box-shadow: 0 18px 35px rgba(15,31,57,.22);
    transform: rotate(-4deg);
}

.terminal-top {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
}

.terminal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.terminal-dot:nth-child(1) { background: #ff635c; }
.terminal-dot:nth-child(2) { background: #ffc229; }
.terminal-dot:nth-child(3) { background: #2ecf62; }

.terminal-code {
    color: #8fabc8;
    font-family: "Courier New",monospace;
    font-size: 8px;
    line-height: 1.7;
}

.terminal-code strong {
    color: #6ee7b7;
}

/* PHONE */

.mern-phone {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 9%;
    width: 90px;
    padding: 6px;
    border-radius: 16px;
    background: #18263d;
    box-shadow: 0 20px 35px rgba(20,46,83,.20);
    transform: rotate(4deg);
}

.phone-screen {
    aspect-ratio: 9 / 17;
    overflow: hidden;
    border-radius: 11px;
    background: #fff;
}

.phone-top {
    height: 25%;
    padding: 14px 7px 5px;
    background: linear-gradient(135deg,#f05340,#ff8a69);
}

.phone-top strong {
    color: #fff;
    font-size: 8px;
}

.phone-top span {
    display: block;
    margin-top: 4px;
    color: #fff0eb;
    font-size: 5px;
}

.phone-body {
    padding: 8px;
}

.phone-line {
    height: 5px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: #e8eef7;
}

.phone-line.short {
    width: 55%;
}

.phone-box {
    height: 40px;
    margin-top: 10px;
    border-radius: 7px;
    background: #fff3ef;
    border: 1px solid #fbded6;
}

.mern-accent {
    position: absolute;
    width: 55px;
    height: 55px;
    right: 9%;
    bottom: 1%;
    border-radius: 15px;
    background: #ffc928;
    transform: rotate(16deg);
    opacity: .95;
}

/* TABLET */

@media (max-width:1200px) {
    .mern-hero {
        padding-left: 4%;
        padding-right: 4%;
    }

    .mern-grid {
        gap: 25px;
    }

    .mern-content h2 {
        font-size: clamp(39px,4.5vw,60px);
    }

    .mern-illustration {
        width: min(100%,650px);
    }
}

/* MOBILE AND TABLET */

@media (max-width:1000px) {
    .mern-hero {
        min-height: auto;
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .mern-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .mern-content {
        max-width: 760px;
        margin: 0 auto;
        text-align: center;
    }

    .mern-content h2 span {
        margin-left: auto;
        margin-right: auto;
    }

    .mern-description {
        margin-left: auto;
        margin-right: auto;
    }

    .mern-services {
        text-align: left;
    }

    .mern-actions {
        justify-content: center;
    }

    .mern-visual {
        max-width: 750px;
        margin: 0 auto;
    }
}

@media (max-width:650px) {
    .mern-hero {
        padding: 35px 18px;
    }

    .mern-content h2 {
        font-size: clamp(34px,8vw,43px);
        letter-spacing: -1.7px;
        line-height: 1.1;
    }

    .mern-content h2 span::after {
        height: 5px;
        bottom: -5px;
    }

    .mern-description {
        font-size: 13px;
        line-height: 1.7;
        margin-top: 20px;
    }

    .mern-services {
        grid-template-columns: 1fr;
        gap: 9px;
        max-width: 390px;
        margin-left: auto;
        margin-right: auto;
    }

    .mern-actions {
        flex-direction: column;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }

    .mern-btn {
        width: 100%;
        min-height: 44px;
    }

    .mern-illustration {
        width: 100%;
        aspect-ratio: 1 / 1.05;
    }

    .mern-tech {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .mern-tech i {
        font-size: 17px;
    }

    .mern-tech span {
        font-size: 6px;
    }

    .mern-code {
        font-size: 6px;
        padding: 10px 5px;
    }

    .code-num {
        width: 12px;
    }

    .mern-terminal {
        width: 120px;
        padding: 9px;
        bottom: 16%;
    }

    .terminal-code {
        font-size: 6px;
    }

    .mern-phone {
        width: 65px;
    }

    .mern-screen {
        padding: 6px;
        border-radius: 13px 13px 7px 7px;
    }

    .mern-laptop-base {
        height: 12px;
    }

    .web-main {
        padding: 10px;
    }

    .web-nav {
        padding: 0 7px;
    }

    .web-nav-links {
        gap: 5px;
    }
}

@media (max-width:450px) {
    .mern-content h2 {
        font-size: 34px;
    }

    .mern-badge {
        font-size: 10px;
        padding: 8px 10px;
    }

    .mern-description {
        font-size: 12px;
    }

    .mern-service {
        font-size: 11px;
    }

    .mern-service i {
        width: 29px;
        height: 29px;
    }

    .mern-illustration {
        aspect-ratio: 1 / 1.08;
    }

    .mern-tech {
        width: 39px;
        height: 39px;
    }

    .mern-tech i {
        font-size: 14px;
    }

    .mern-tech span {
        font-size: 5px;
    }

    .mern-terminal {
        width: 100px;
        bottom: 15%;
    }

    .mern-phone {
        width: 56px;
    }

    .mern-screen {
        padding: 4px;
    }

    .mern-code {
        font-size: 5px;
    }

    .web-heading {
        font-size: 15px;
    }
}
</style>

<div class="mern-development-page">

    <section class="mern-hero">

        <div class="mern-bg-line-one"></div>
        <div class="mern-bg-line-two"></div>
        <div class="mern-bg-yellow"></div>
        <div class="mern-bg-blue"></div>

        <div class="mern-container">

            <div class="mern-grid">

                <!-- LEFT CONTENT -->

                <div class="mern-content">

                   <div>
    <h1 style="color: white;">qq</h1>
</div>

                    <h2>
                        Web Apps
                        <span>Built With Laravel</span>
                    </h2>

                    <p class="mern-description">
    From dynamic business websites and custom portals to
    enterprise applications and powerful management
    dashboards, we build secure digital solutions tailored
    to your business needs.
</p>

<p class="mern-description">
    Using <strong>PHP, Laravel, MySQL and modern web
    technologies</strong>, we develop reliable,
    responsive and scalable applications with clean
    architecture, efficient workflows and easy
    long term maintenance.
</p>

<p class="mern-description">
    Our Laravel development services include custom web
    application development, REST API integration, database
    design,
    and third party service integration to support your
    business operations.
</p>


                    

                    <div class="mern-actions">

                        <a href="/contact.php" class="mern-btn primary">
                            Start Your Project
                            <i class="fa-solid fa-arrow-right"></i>
                        </a>

                        <a href="/assets/laravel-brochure.pdf"
                           class="mern-btn brochure"
                           download>
                            <i class="fa-solid fa-file-arrow-down"></i>
                            Download Brochure
                        </a>

                        <a href="/contact.php" class="mern-btn contact">
                            <i class="fa-solid fa-envelope"></i>
                            Contact Us
                        </a>

                    </div>

                </div>

                <!-- RIGHT VISUAL -->

                <div class="mern-visual">

                    <div class="mern-illustration">

                        <div class="mern-connection"></div>

                        <!-- TECHNOLOGY ICONS -->

                        <div class="mern-tech tech-php">
                            <i class="fa-brands fa-php"></i>
                            <span>PHP</span>
                        </div>

                        <div class="mern-tech tech-laravel">
                            <i class="fa-brands fa-laravel"></i>
                            <span>Laravel</span>
                        </div>

                        <div class="mern-tech tech-mysql">
                            <i class="fa-solid fa-database"></i>
                            <span>MySQL</span>
                        </div>

                        <div class="mern-tech tech-api">
                            <i class="fa-solid fa-plug"></i>
                            <span>REST API</span>
                        </div>

                        <!-- LAPTOP -->

                        <div class="mern-laptop">

                            <div class="mern-screen">

                                <div class="mern-screen-inner">

                                    <div class="mern-browser">
                                        <span class="mern-browser-dot"></span>
                                        <span class="mern-browser-dot"></span>
                                        <span class="mern-browser-dot"></span>
                                        <div class="mern-browser-url"></div>
                                    </div>

                                    <div class="mern-screen-content">

                                        <!-- PHP CODE -->

                                        <div class="mern-code">

                                            <div class="code-row">
                                                <span class="code-num">01</span>
                                                <span class="code-purple">&lt;?php</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">02</span>
                                                <span class="code-purple">namespace</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">03</span>
                                                <span class="code-blue">App\Http</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">04</span>
                                                <span class="code-purple">class</span>
                                                <span class="code-yellow">Project</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">05</span>
                                                <span class="code-gray">{</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">06</span>
                                                <span class="code-purple">public</span>
                                                <span class="code-blue">function</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">07</span>
                                                <span class="code-yellow">index</span>()
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">08</span>
                                                <span class="code-gray">{</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">09</span>
                                                <span class="code-purple">return</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">10</span>
                                                <span class="code-blue">view</span>
                                                <span class="code-yellow">(home)</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">11</span>
                                                <span class="code-gray">}</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">12</span>
                                                <span class="code-gray">}</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">13</span>
                                                <span class="code-green">// Laravel</span>
                                            </div>

                                            <div class="code-row">
                                                <span class="code-num">14</span>
                                                <span class="code-green">running...</span>
                                            </div>

                                        </div>

                                        <!-- WEBSITE PREVIEW -->

                                        <div class="mern-web-preview">

                                            <div class="web-nav">

                                                <div class="web-logo">
                                                    <i class="fa-brands fa-laravel"></i>
                                                    AppStudio
                                                </div>

                                                <div class="web-nav-links">
                                                    <span>Home</span>
                                                    <span>Services</span>
                                                    <span>About</span>
                                                </div>

                                            </div>

                                            <div class="web-main">

                                                <div class="web-small">
                                                    PHP & LARAVEL SOLUTIONS
                                                </div>

                                                <div class="web-heading">
                                                    Build Smarter.
                                                    <span>Scale Faster.</span>
                                                </div>

                                                <div class="web-text">
                                                    Secure applications and
                                                    tailored digital experiences
                                                    for growing businesses.
                                                </div>

                                                <div class="web-button">
                                                    Explore Solutions
                                                </div>

                                                <div class="web-cards">

                                                    <div class="web-card">
                                                        <i class="fa-solid fa-lock"></i>
                                                        <strong>Secure</strong>
                                                        <span>By Design</span>
                                                    </div>

                                                    <div class="web-card">
                                                        <i class="fa-solid fa-bolt"></i>
                                                        <strong>Efficient</strong>
                                                        <span>Fast Apps</span>
                                                    </div>

                                                    <div class="web-card">
                                                        <i class="fa-solid fa-chart-line"></i>
                                                        <strong>Scalable</strong>
                                                        <span>Ready to Grow</span>
                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="mern-laptop-base"></div>

                        </div>

                        <!-- TERMINAL -->

                        <div class="mern-terminal">

                            <div class="terminal-top">
                                <span class="terminal-dot"></span>
                                <span class="terminal-dot"></span>
                                <span class="terminal-dot"></span>
                            </div>

                            <div class="terminal-code">
                                <strong>$ php artisan serve</strong><br>
                                Starting Laravel...<br>
                                Loading routes...<br>
                                Application ready ✓
                            </div>

                        </div>

                        <!-- MOBILE PREVIEW -->

                        <div class="mern-phone">

                            <div class="phone-screen">

                                <div class="phone-top">
                                    <strong>My App</strong>
                                    <span>Built with Laravel</span>
                                </div>

                                <div class="phone-body">

                                    <div class="phone-line"></div>
                                    <div class="phone-line short"></div>

                                    <div class="phone-box"></div>

                                    <div class="phone-line"></div>
                                    <div class="phone-line short"></div>

                                </div>

                            </div>

                        </div>

                        <div class="mern-accent"></div>

                    </div>

                </div>

            </div>

        </div>

    </section>

</div>

```