{{#
@name Topbar
@desc Topbar Navigation
#}}

<!-- /components/_topbar.antlers.html -->
<!-- Topbar -->
<div class="w-full px-4 sm:px-6 lg:px-8 z-50 bg-primary">
    <div class="max-w-7xl mx-auto">
        <div class="lg:flex items-center lg:justify-between gap-x-5 w-full py-2 sm:pt-2">
            <div class="left-side md:flex items-center">
                {{if theme:has_email}}
                <p class="text-beige font-bold text-sm flex justify-center items-center  mr-3">
                    <i class="fa fa-envelope mr-2"></i>
                    {{company:email_address_1}}
                </p>
                {{/if}}
                {{if theme:has_phone}}
               
                <p class="text-beige font-bold text-sm flex justify-center items-center">
                    <i class="fa fa-whatsapp mr-2"></i>
                   {{company:phone_number_1}} 
                </p>
                {{/if}}
            </div>
            <div class="right-side flex items-center justify-between lg:justify-end">
                <!-- Language Dropdown -->
                {{if theme:has_translator}}
                <div id='google_translate_element' class="w-48"></div>
                {{/if}}
                <!-- End Language Dropdown -->
                {{if theme:has_cta_button}}
                <a class="py-2 px-2 inline-flex justify-center items-center gap-2 rounded-md border-2 border-beige-camel font-semibold bg-primary-dark text-white hover:bg-primary hover:border-beige-almond focus:outline-none focus:ring-2 focus:ring-primary-light focus:ring-offset-2 transition-all text-sm"
                    href="{{theme:cta_button_link}}">{{theme:cta_button_text}}</a>
                {{/if}}
            </div>
        </div>
    </div>
</div>
<!-- End Topbar -->
<!-- End: /components/_topbar.antlers.html -->