4WDCSA.co.za/contact.php

<?php define('HEADER_VARIANT', '02');
require_once('header.php'); ?>

<style>
    .image {
        width: 400px;
        /* Set your desired width */
        height: 320px;
        /* Set your desired height */
        overflow: hidden;
        /* Hide any overflow */
        display: block;
        /* Ensure proper block behavior */
    }

    .image img {
        width: 100%;
        /* Image scales to fill the container */
        height: 100%;
        /* Image scales to fill the container */
        object-fit: cover;
        /* Fills the container while maintaining aspect ratio */
        object-position: top;
        /* Aligns the top of the image with the top of the container */
        display: block;
        /* Prevents inline whitespace issues */
    }
</style>

<?php
$bannerFolder = 'assets/images/banners/';
$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);

$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
if (!empty($bannerImages)) {
    $randomBanner = $bannerImages[array_rand($bannerImages)];
}
?>
<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
    <div class="banner-overlay"></div>
    <div class="container">
        <div class="banner-inner text-white">
            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">Contact Us</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item active">Contact Us</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
<!-- Page Banner End -->


<!-- Contact Info Area start -->
<section class="contact-info-area pt-100 rel z-1">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-4">
                <div class="contact-info-content mb-30 rmb-55" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
                    <div class="section-title mb-30">
                        <h2>For any queries, please don't hesitate to contact us:</h2>
                    </div>
                    <!-- <p>Our dedicated support team is always ready to assist you with any questions or issues, offering prompt and personalized solutions to meet your needs.</p> -->
                    <!-- <div class="features-team-box mt-40">
                        <h6>85+ Expert Team member</h6>
                        <div class="feature-authors">
                            <img src="assets/images/features/feature-author1.jpg" alt="Author">
                            <img src="assets/images/features/feature-author2.jpg" alt="Author">
                            <img src="assets/images/features/feature-author3.jpg" alt="Author">
                            <img src="assets/images/features/feature-author4.jpg" alt="Author">
                            <img src="assets/images/features/feature-author5.jpg" alt="Author">
                            <img src="assets/images/features/feature-author6.jpg" alt="Author">
                            <img src="assets/images/features/feature-author7.jpg" alt="Author">
                            <span>+</span>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="col-lg-8">
                <div class="row">
                    <div class="col-md-6">
                        <div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="50">
                            <div class="icon"><i class="fas fa-envelope"></i></div>
                            <div class="content">
                                <h5>Need Help & Support</h5>
                                <div class="text"><i class="far fa-envelope"></i> <a href="mailto:info@4wdcsa.co.za">info@4wdcsa.co.za</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="100">
                            <div class="icon"><i class="fas fa-phone"></i></div>
                            <div class="content">
                                <h5>Need Anything Urgent</h5>
                                <div class="text"><i class="far fa-phone"></i> <a href="callto:+27 079 065 2795">+2779 065 2795</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="contact-info-item" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50" data-aos-delay="50">
                            <div class="icon"><i class="fas fa-map-marker-alt"></i></div>
                            <div class="content">
                                <h5>BASE 4</h5>
                                <div class="text"><i class="fal fa-map-marker-alt"></i> Plot 50, Gemstone Rd, Doornrandje, Centurion, 0157</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<!-- Contact Info Area end -->


<!-- Contact Form Area start -->
<!--  -->
<!-- Contact Form Area end -->


<!-- Contact Map Start -->
<div class="contact-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d818.9371187805272!2d28.000391592597513!3d-25.864399472588936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sza!4v1744639736430!5m2!1sen!2sza" style="border:0; width: 100%;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- Contact Map End -->


<?php include_once("insta_footer.php"); ?>