@extends('layout.app')

@section('content')
<!-- ==== Banner Breadcrumbs ==== -->
<div class="banner-bredcrumbs pt-70-fixed n4-bg position-relative overflow-hidden">
    <div class="container">
        <div class="breadcrumbs-content position-relative cus-z1 pt-120 pb-120 text-center">
            <span class="mb-xxl-8 mb-xl-6 mb-5 display-two nw1-clr" data-aos="zoom-in" data-aos-duration="2000">
                Contact Us
            </span>
            <div class="box">
                <ul class="bread d-flex justify-content-center align-items-center gap-2">
                    <li>
                        <a href="index.html" class="fs20 fw_600 nw1-clr">
                            Home
                        </a>
                    </li>
                    <li>
                        <i class="ph ph-caret-double-right nw1-clr"></i>
                    </li>
                    <li>
                        <span class="fs20 fw_600 p1-clr">
                            Contact Us
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--Banner Shape Images-->
    <img src="assets/images/global/ball-shape19-1.png" alt="img" class="ball-shape-breadcrumb" data-aos="zoom-in-right" data-aos-duration="2200">
    <img src="assets/images/global/ball-breadcrumbs.png" alt="img" class="ball-circle-breadcrumb">
    <img src="assets/images/global/shape-breadcrum-right.png" alt="img" class="shape-breadcrumbright">
    <!--Banner Shape Images-->
</div>
<!-- ==== Banner Breadcrumbs ==== -->

<!-- ==== Contact Section ==== -->
<section class="blog-section pt-120 pb-120 n0-bg">
    <div class="container">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-xxl-15 mb-xl-12 mb-10">
            <span class="display-three" data-aos="zoom-in-left" data-aos-duration="1500">
                Let’s Get in
                <span class="d-block">
                    Touch
                </span>
            </span>
            <p class="max-340 fs18 n3-clr" data-aos="zoom-in-right" data-aos-duration="1600">
                Great! We're excited to hear from you and let's start something special togerter. call us for any inquery.
            </p>
        </div>
        <div class="row g-6">
            <div class="col-lg-6 col-md-5">
                <div class="contact-content">
                    <div class="contact-cont-items d-flex align-items-center gap-xxl-8 gap-xl-6 gap-lg-4 gap-3 mb-xxl-15 mb-xl-10 mb-lg-8 mb-sm-7 mb-6" data-aos="zoom-in-left" data-aos-duration="1400">
                        <div class="icon d-center s1-border radius-circle">
                            <i class="ph ph-headset fs-three s1-clr"></i>
                        </div>
                        <div class="cont">
                            <h4 class="n1-clr mb-1">Help & Support</h4>
                            <span class="n3-clr">
                                supports@babuZ.com
                            </span>
                        </div>
                    </div>
                    <div class="contact-cont-items d-flex align-items-center gap-xxl-8 gap-xl-6 gap-lg-4 gap-3 mb-xxl-15 mb-xl-10 mb-lg-8 mb-sm-7 mb-6" data-aos="zoom-in-left" data-aos-duration="1500">
                        <div class="icon d-center s1-border radius-circle">
                            <i class="ph ph-chats fs-three s1-clr"></i>
                        </div>
                        <div class="cont">
                            <h4 class="n1-clr mb-1">Sales</h4>
                            <span class="n3-clr">
                                sales@babuZ.com
                            </span>
                        </div>
                    </div>
                    <div class="contact-cont-items d-flex align-items-center gap-xxl-8 gap-xl-6 gap-lg-4 gap-3" data-aos="zoom-in-left" data-aos-duration="1600">
                        <div class="icon d-center s1-border radius-circle">
                            <i class="ph ph-address-book fs-three s1-clr"></i>
                        </div>
                        <div class="cont">
                            <h4 class="n1-clr mb-1">Media & Press</h4>
                            <span class="n3-clr">
                                media@babuZ.com
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-7">
                <form action="#" class="contact-form" data-aos="zoom-in-left" data-aos-duration="1800">
                    <div class="row g-6">
                        <div class="col-lg-6 col-md-6">
                            <input type="text" placeholder="Fast Name">
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <input type="text" placeholder="Last Name">
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <input type="email" placeholder="Email">
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <input type="number" placeholder="Phone">
                        </div>
                        <div class="col-lg-12">
                            <textarea name="message" rows="1" placeholder="Message"></textarea>
                        </div>
                        <button type="submit" class="cmn__collection mt-xl-13 radius-circle n0-bg nw4-border d-center position-relative">
                            <span class="cmn-cont-box text-center position-relative">
                                <span class="icon mb-1">
                                    <i class="ph-bold ph-arrow-up-right n4-clr fs-three"></i>
                                </span>
                                <span class="d-block n4-clr fw_700">
                                    Send Message
                                </span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!-- ==== Contact Section ==== -->
@endsection