@extends('frontend.layouts.app' ,['title' => 'ZAKH offers elegant and trendy ladies fashion, featuring stylish outfits, accessories, and timeless essentials for the modern woman'])

@section('content')
        <!-- start section -->
        <section class="top-space-margin-s half-section bg-gradient-very-light-gray">
            <div class="container">
                <div class="row align-items-center justify-content-center" data-anime='{ "el": "childs", "translateY": [-15, 0], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }'>
                    <div class="col-12 col-xl-8 col-lg-10 text-center position-relative page-title-extra-large">
                        <h1 class="alt-font fw-600 text-dark-gray mb-10px">Contact</h1> 
                    </div>
                    <div class="col-12 breadcrumb breadcrumb-style-01 d-flex justify-content-center">
                        <ul>
                             <li><a href="{{ route('index') }}">Home</a></li>
                            <li>Contact</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- end section --> 
        <!-- start section -->
        <section class="pt-0 position-relative overflow-hidden">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-12 col-xl-12 col-lg-12 md-mb-8 text-center text-sm-start" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                        <div class="alt-font text-dark-gray mb-15px fs-20"><span class="text-highlight">Feel free to get in touch!</span></div>
                        <h4 class="alt-font text-dark-gray fw-400 ls-minus-1px">Call or visit us at different <span class="fw-600">locations.</span></h4>
                        <div class="row row-cols-1 row-cols-sm-2 mb-4">
                            <div class="col last-paragraph-no-margin xs-mb-20px">
                                <p class="w-95 xl-w-100"> <strong> ZAKH e-COMMERCE PRIVATE LIMITED</strong>
                                    <br>
                                    LIG FLAT NO 3, G/F, PH II, SEC 18B, DWARKA, NSIT DWARKA, SOUTH WEST DELHI, DELHI, INDIA, 110078
                                </p>
                            </div>
                            <div class="col">
                                <div class="d-block">
                                <span class="text-dark-gray fw-600">Email:</span> 
                                <a href="mailto:contact@zakh.in" class="fw-500 text-decoration-line-bottom text-dark-gray text-dark-gray-hover">contact@zakh.in</a>
                            </div>
                            <div class="d-block">
                                <span class="text-dark-gray fw-600">Phone:</span> 
                                <a href="callto:9910336595" class="fw-500 text-decoration-line-bottom text-dark-gray text-dark-gray-hover">+91 9910336595</a>
                            </div>
                               
                            </div>
                        </div>
                       
                    </div>
                  
                </div>
            </div>
        </section>
        <!-- end section -->
       
        <!-- end section -->
        <!-- start section -->
        <section class="position-relative sm-pt-20px" style="margin-top: 90px;"> 
            <div class="container overlap-section overlap-section-three-fourth"> 
                <div class="row row-cols-md-1 justify-content-center">
                    <div class="col-xl-12" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 500, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }'>
                        <div class="bg-white pt-8 pb-8 box-shadow-double-large ps-10 pe-10 border-radius-6px sm-pe-5 sm-ps-5">
                            <div class="row mb-2">
                                <div class="col-10">
                                    <h2 class="alt-font text-dark-gray ls-minus-2px">How we can help you? </h2>
                                </div>
                               <!--  <div class="col-2 text-end">
                                    <i class="bi bi-send icon-large text-dark-gray animation-float"></i>
                                </div> -->
                            </div>
                            <!-- start contact form -->
                            @livewire('contact-us')
                            <!-- end contact form -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end section -->   
@endsection