@extends('layouts.website-main-menu')

@section('content')
    <style>
        h4,h2,p {
            color: white !important;
        }

        .newsletter-area::after {
            background-color: rgba(45, 45, 45, 0.7);
        }
    </style>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v20.0" nonce="Y8glqexr"></script>
    <!-- ##### Breadcrumb Area Start ##### -->
<section class="breadcrumb-area bg-img bg-overlay jarallax" style="background-color:#c80505;">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <div class="breadcrumb-content">
                    <h2>Contact Us</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ##### Breadcrumb Area End ##### -->

<!-- Contact Start -->
<section class="newsletter-area section-padding-60 bg-img jarallax" style="background-image: url(main-website/img/call.jpg);">
<div class="container-fluid contact">
    <div class="container">
        <div class="row g-4 align-items-center">
            <div class="col-lg-4 col-xl-4 contact-form wow fadeInLeft" data-wow-delay="0.1s">
                <div class="fb-page" data-href="https://www.facebook.com/profile.php?id=100083542533389" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/profile.php?id=100083542533389" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/profile.php?id=100083542533389">KTVR Bus Services</a></blockquote></div>
            </div>
            <div class="col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.5s">
                <div class="bg-transparent rounded">
                    <div class="d-flex flex-column align-items-center text-center mb-4">
                        <div class="d-flex align-items-center justify-content-center mb-3" style="width: 90px; height: 90px; border-radius: 50px;"><i style="color: red" class="fa fa-map-marker-alt fa-2x"></i></div>
                        <h4 style="color: white !important;font-size: 18px;" class="text-dark">Head Office</h4>
                        <p class="mb-0">03 Margaret Avenue,Kempton-Park,Gauteng, South Africa</p>
                    </div>
                    <div class="d-flex flex-column align-items-center text-center mb-4">
                        <div class="d-flex align-items-center justify-content-center mb-3" style="width: 90px; height: 90px; border-radius: 50px;"><i style="color: red" class="fa fa-map-marker-alt fa-2x"></i></div>
                        <h4 style="color: white !important;font-size: 18px;" class="text-dark">Hospital View Office</h4>
                        <p class="mb-0">41 Flint Mazibuko Drive Hospital View, Thembisa </p>
                        <p class="mb-0"> 011 823 1672</p>
                    </div>
                    <div class="d-flex flex-column align-items-center text-center mb-4">
                        <div class="d-flex align-items-center justify-content-center mb-3" style="width: 90px; height: 90px; border-radius: 50px;"><i style="color: red" class="fa fa-phone-alt fa-2x"></i></div>
                        <h4 style="color: white !important;font-size: 18px;" class="text-dark">Emergency Contacts</h4>
                        <p class="mb-0">011 823 1672</p>
                        <!-- <p class="mb-0"> 071 688 8585</p>
                        <p class="mb-0"> 064 600 9734</p> -->
                    </div>

                    <div class="d-flex flex-column align-items-center text-center">
                        <div class="d-flex align-items-center justify-content-center mb-3" style="width: 90px; height: 90px; border-radius: 50px;"><i style="color: red" class="fa fa-map-marker-alt fa-2x"></i></div>
                        <h4 style="color: white !important;font-size: 18px;" class="text-dark">Depot Office</h4>
                        <p class="mb-0"> 2 Bros Crecent, Glayville Ext 20,Gauteng Business Park</p>
                        <p class="mb-0">011 823 1672</p><p></p><p></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-xl-4 wow fadeInRight" data-wow-delay="0.3s">
                <div class="rounded h-100">
                    <iframe class="rounded w-100" style="height: 500px;" _ngcontent-serverapp-c3730114600="" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d50059.12775918716!2d28.233334!3d-26.100000!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1533793756956" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
<!-- Contact End -->

@endsection