@extends('layouts.app')

@section('content')

<!-- end page title -->
<section class="mt-3">
    <div class="container " data-anime='{"el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 800, "delay": 500, "staggervalue": 150, "easing": "easeOutQuad" }'>
        <div class="row row-cols-md-1 justify-content-center">
            <div class="col-xl-10">
                <div class="bg-very-light-gray p-8 border-radius-10px">
                    <div class="row">
                        <div class="col-12 text-center mb-6">
                            <span class="fs-16 lh-22 fw-700 mb-15px d-inline-block text-uppercase text-dark-gray border-bottom border-2 border-color-base-color">Bize Yazın</span>
                            <h2 class="text-dark-gray mb-0 fw-700 ls-minus-1px">Size nasıl yardımcı olabiliriz?</h2>
                        </div>
                    </div>
                    <!-- start contact form -->
                    <form id="contactForm" method="post" class="row contact-form-style-01">
                      	@csrf
                        <div class="col-md-6 mb-20px">
                            <div class="position-relative form-group">
                                <span class="form-icon"><i class="bi bi-person"></i></span>
                                <input class="input-name form-control required" type="text" name="name" placeholder="Adınız Soyadınız*" />
                            </div>
                        </div>
                        <div class="col-md-6 mb-20px">
                            <div class="position-relative form-group">
                                <span class="form-icon"><i class="bi bi-telephone-outbound"></i></span>
                                <input class="form-control required" type="tel" name="phone" placeholder="Telefon No*" />
                            </div>
                        </div>
                        <div class="col-md-6 mb-20px">
                            <div class="position-relative form-group">
                                <span class="form-icon"><i class="bi bi-envelope"></i></span>
                                <input class="form-control required" type="email" name="email" placeholder="Mail Adresiniz*" />
                            </div>
                        </div>
                        <div class="col-md-6 mb-20px">
                            <div class="position-relative form-group">
                                <span class="form-icon"><i class="bi bi-journals"></i></span>
                                <input class="form-control" type="text" name="subject" placeholder="Konu" />
                            </div>
                        </div>
                        <div class="col-md-12 mb-30px">
                            <div class="position-relative form-group form-textarea">
                                <span class="form-icon"><i class="bi bi-chat-square-dots"></i></span>
                                <textarea class="form-control" cols="40" rows="4" name="message" placeholder="Sormak İstedikleriniz"></textarea>
                            </div>
                        </div>
                        <div class="col-xl-7 col-md-7 last-paragraph-no-margin">
                            <p class="text-center text-md-start fs-16 lh-24">Gizliliğinizi korumaya kararlıyız. Açık izniniz olmadan hakkınızda asla bilgi toplamayacağız.</p>
                        </div>
                        <div class="col-xl-5 col-md-5 text-center text-md-end sm-mt-20px">
                            <input type="hidden" name="redirect" value="">
                            <button class="btn btn-large btn-dark-gray btn-box-shadow btn-round-edge btn-switch-text left-icon submit" type="submit">
                                <span>
                                    <span><i class="feather icon-feather-mail"></i></span>
                                    <span class="btn-double-text" data-text="Gönder">Gönder</span>
                                </span>
                            </button>
                        </div>
                        <div class="col-12">
                            <div class="form-results mt-20px d-none"></div>
                        </div>
                    </form>
                    <!-- end contact form -->
                </div>
            </div>

        </div>
    </div>
</section>
<!-- start section -->
<section  class="pt-1">
    <div class="container">
        <div class="row">
          <div class="col-xl-6">

              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3051.1745906940328!2d32.59740550000001!3d40.1161125!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x408277b598b17095%3A0xbd0e590fec807a05!2zWcOcS1RBxZ4gTE9KxLBTVMSwSyBBLsWeLg!5e0!3m2!1str!2str!4v1720003635173!5m2!1str!2str" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
          </div>
            <div class="col-xl-6 col-lg-12 ">
                <div class="row row-cols-1 justify-content-center" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
                    <!-- start services box item -->
                    <div class="col services-box-style-02 mb-30px">
                        <div class="row g-0 box-shadow-quadruple-large border-radius-6px overflow-hidden">
                            <div class="col-lg-6 col-sm-6">
                                <div class="h-100 cover-background xs-h-300px" style="background-image: url(https://yuktas.com.tr/images/kares.jpg)"></div>
                            </div>
                            <div class="col-lg-6 col-sm-6 bg-white box-shadow-extra-large p-30px">
                                <div class="services-box-content last-paragraph-no-margin">
                                    <span class="d-block text-dark-gray fw-700 fs-19 mb-10px">Adres</span>
                                    <p>Kışla Mahallesi Ankara Yurtiçi Nakliye ve Lojistik Merkezi C Blok No:100/148, 06980 Kahramankazan/Ankara</p>
                                    <div class="text-dark-gray fw-600"><i class="feather icon-feather-phone-call icon-small me-10px text-dark-gray"></i><a href="tel:+903122780803">+90 312 278 08 03</a></div>
                                    <div class="text-dark-gray fw-600"><i class="feather icon-feather-smartphone icon-small me-10px text-dark-gray"></i><a href="tel:+903122780803">+90 538 390 83 63</a></div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end services box item -->
               </div>
<div class="row align-items-center justify-content-center mt-8">
                        <div class="col-md-auto text-center text-md-end sm-mb-20px">
                            <h6 class="text-dark-gray fw-600 mb-0">Connect with social media </h6>
                        </div>
                        <div class="col-2 d-none d-lg-inline-block">
                            <span class="w-100 h-1px bg-dark-gray opacity-2 d-flex mx-auto"></span>
                        </div>
                        <!-- start social icon -->
                        <div class="col-md-auto elements-social social-icon-style-04 text-center text-md-start ps-lg-0">
                            <ul class="large-icon dark">

                                <li class="m-0"><a class="instagram" href="https://www.instagram.com/yuktaslojistik/" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
                                <li class="m-0"><a class="linkedin" href="https://www.linkedin.com/company/y%C3%BCkta%C5%9F-loji%CC%87sti%CC%87k-a-%C5%9F/" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>

                            </ul>
                        </div>
                        <!-- end social icon -->
                    </div>
            </div>
        </div>
    </div>
</section>
<!-- end section -->
<!-- start section -->
<section class="p-0">
    <div class="container-fluid p-o">
        <div class="row g-0 justify-content-center">

        </div>
    </div>
</section>
<!-- end section -->
<!-- start section -->





@endsection