<?php
include("admin/connection.php");
include('include/header.php');
$query = "SELECT * FROM `slider` ORDER BY id DESC";
$sql = mysqli_query($con, $query);
?>
<div class="th-hero-wrapper hero-1" id="hero">

    <div class="swiper th-slider" id="heroSlider1"
        data-slider-options='{"effect":"fade", "loop":true, "autoplay":true, "autoHeight": "false"}'>
        <div class="swiper-wrapper">
            <?php
            while ($row = mysqli_fetch_assoc($sql)) {
            ?>
            <div class="swiper-slide">
                <div class="hero-inner hero-style1"
                    data-bg-src="<?php path(); ?>/admin/assets/images/slider/<?php echo $row['Image']; ?>">

                </div>
            </div>
            <?php
            }
            ?>
        </div>
        <div class="slider-pagination"></div>
        <div class="slider-pagination-wrapper"><button data-slider-prev="#heroSlider1"
                class="slider-arrow default slider-prev style-2">prev</button>
            <div class="slider-pagination2"></div>
            <div class="line"></div><button data-slider-next="#heroSlider1"
                class="slider-arrow default style-2">Next</button>
        </div>
    </div>
</div>
<section id="category-sec" class="category-sec-1 position-relative space bg-smoke">
    <div class="shape-mockup moving d-none d-md-block" data-top="12%" data-left="7%"><img
            src="assets/img/shape/category-1-left.png" alt="img"></div>
    <div class="shape-mockup jump d-none d-md-block" data-top="14%" data-right="2%"><img
            src="assets/img/shape/category-1-right.png" alt="img"></div>
    <div class="container">
        <div class="title-area text-center mb-50">
            <!-- <h3 class="sub-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.1s"><span
                        class="double-line"></span> CATEGORIES</h3> -->

            <p class="sub-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.1s">
                <span class="double-line"></span> Features & Benefits
            </p>
            <h2 class="sec-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.3s">
                uPVC Excellence for Modern Interiors
            </h2>


        </div>
        <div class="slider-area">
            <div class="swiper th-slider" id="categorySlider1"
                data-slider-options='{"breakpoints":{"0":{"slidesPerView":2},"400":{"slidesPerView":"2"},"768":{"slidesPerView":"3"},"992":{"slidesPerView":"4"},"1200":{"slidesPerView":"5"}, "1300":{"slidesPerView":"6"}}}'>
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon1.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Strength</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon2.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Value for Money</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon3.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Fire-resistant</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon4.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Environment Friendly</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon5.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Weather-proof</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon6.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Termite-resistant</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon7.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">High Quality Finish</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon8.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Designs to choose</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon9.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Maintenance-free</a></h3>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="category-card">
                            <div class="box-icon"><img src="assets/img/icon/icon10.png" alt="Image"></div>
                            <h3 class="box-title"><a href="">Longevity</a></h3>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="about-1-wrapper space overflow-hidden" id="about-sec">


    <div class="container">
        <div class="row flex-row-reverse gy-40 gx-70 justify-content-center">
            <div class="col-xl-6">
                <div class="title-area text-left mb-50">
                    <p class="sub-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.1s">
                        <span class="double-line"></span> About Us
                    </p>
                    <h2 class="sec-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.3s">
                        ND WE MAKE
                    </h2>
                    <p class="sec-text fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.5s">
                        At <strong>ND We Make</strong>, we redefine the standards of modern living with our premium
                        range of
                        <strong>uPVC doors and windows</strong>. Combining elegance, durability, and performance, we
                        deliver
                        innovative solutions that enhance comfort, security, and energy efficiency in every space.

                        <br><br>
                        Along with being a trusted name in the uPVC industry, we are also actively involved in the
                        <strong>interior design and architectural solutions</strong> sector — offering complete,
                        customized
                        solutions that elevate the look and feel of modern homes and commercial spaces. From concept to
                        completion,
                        our team ensures designs that blend functionality with timeless aesthetics.

                        <br><br>
                        From <strong>Sliding</strong> and <strong>Casement</strong> windows to <strong>Tilt &
                            Turn</strong>,
                        <strong>Villa</strong>, <strong>Bay</strong>, <strong>Fixed</strong>, and
                        <strong>Glass-to-Glass</strong> designs,
                        every ND We Make system is engineered for <strong>strength, insulation, and aesthetic
                            appeal</strong>.
                        Whether you’re designing a new home or upgrading an existing one, our uPVC solutions blend
                        modern design
                        with low maintenance and lasting value.
                    </p>
                </div>


            </div>
            <div class="col-xl-6">
                <div class="img-box1 about-1 fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.3s">

                    <div class="img-box"><img src="assets/img/about/about.jpg" alt="Image"></div>

                </div>
            </div>

        </div>
    </div>
</div>
<section class="popular-sec-1 space bg-smoke">
    <div class="container">
        <!-- Section Title -->
        <div class="row justify-content-center">
            <div class="col-xl-7">
                <div class="title-area text-center mb-2">
                    <p class="sub-title fadeinup wow" data-wow-duration="1.2s" data-wow-delay="0.1s">
                        <span class="double-line"></span> Our Door Product
                    </p>
                    <h2 class="sec-title mb-4 fadeinup wow" data-wow-duration="1.3s" data-wow-delay="0.3s">
                        UPVC Doors
                    </h2>
                </div>
            </div>
        </div>

        <!-- Swiper Slider -->
        <div class="slider-area position-relative">
            <div class="swiper th-slider has-shadow" id="upvcDoorSlider" data-slider-options='{
            "breakpoints": {
                "0": {"slidesPerView": 1},
                "576": {"slidesPerView": 1},
                "768": {"slidesPerView": 1},
                "992": {"slidesPerView": 3},
                "1200": {"slidesPerView": 3},
                "1300": {"slidesPerView": 3}
            },
            "autoHeight": true,
            "loop": false,
            "spaceBetween": 30,
            "navigation": {
                "nextEl": "#upvcNext",
                "prevEl": "#upvcPrev"
            }
              }'>

                <!-- Swiper Wrapper Start -->
                <div class="swiper-wrapper">
                    <?php
                    $ser = mysqli_query($con, "SELECT * FROM `upvc_door`");
                    while ($row = mysqli_fetch_array($ser)) {
                        $title = $row['title'];
                        $description = $row['description'];
                        $slug = $row['slug'];
                        $Image = $row['Image'];
                    ?>
                    <!-- Slide Start -->
                    <div class="swiper-slide">
                        <div class="popular-list-1">
                            <div class="thumb-wrapper">
                                <a class="popular-popup-image"
                                    href="<?php path(); ?>/admin/assets/images/service/<?php echo $Image; ?>">
                                    <img src="<?php path(); ?>/admin/assets/images/service/<?php echo $Image; ?>"
                                        alt="Sliding UPVC Door">
                                </a>
                            </div>
                            <div class="property-content">
                                <h3 class="box-title">
                                    <a href="<?php path(); ?>/upvc-door-details.php?slug=<?php echo $slug; ?>">
                                        <?php echo $title; ?>
                                    </a>
                                </h3>
                                <div class="box-text boxslide">
                                    <?php echo html_entity_decode(strip_tags($description)); ?>

                                </div>
                                <div class="property-bottom">
                                    <a class="th-btn sm style3 pill"
                                        href="<?php path(); ?>/upvc-door-details.php?slug=<?php echo $slug; ?>">
                                        Read More
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Slide End -->
                    <?php } ?>
                </div>
                <!-- Swiper Wrapper End -->

            </div>

            <!-- Swiper Navigation Buttons -->
            <button id="upvcPrev" class="slider-arrow slider-prev"><i class="far fa-arrow-left"></i></button>
            <button id="upvcNext" class="slider-arrow slider-next"><i class="far fa-arrow-right"></i></button>
        </div>

    </div>
</section>

<section class="why-sec-1" id="why-sec">
    <div class="container">

        <!-- Title -->
        <div class="section-title text-center">
            <!-- <h3 class="sec-title">OUR WORK PROCESS <span class="accent"></span></h3> -->


            <p class="sub-title fadeinup wow" data-wow-duration="1.2s" data-wow-delay="0.1s">
                <span class="double-line"></span> OUR WORK PROCESS
            </p>
            <p class="section-sub ">
                At ND we make, we believe in making every interaction with our clients as pleasurable and hassle-free as
                possible.
                The superior quality of our products speaks for itself. ND we make is committed to offering excellent
                experiential services to all our clients.
            </p>

        </div>

        <!-- Cards row -->
        <div class="row g-4 justify-content-center mt-15">
            <!-- Card 1 -->
            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="process-card">
                    <div class="process-icon">
                        <!-- Replace with your icon path -->
                        <img src="assets/img/icon/preorder.png" alt="Pre-Order">
                    </div>

                    <h4 class="process-title">Pre-Order Process</h4>
                    <p class="process-text">
                        Once you are connected with our sales executive, they will set up a meeting at the site where
                        the installations of products are required.
                    </p>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="process-card">
                    <div class="process-icon">
                        <img src="assets/img/icon/installation.png" alt="Installation">
                    </div>

                    <h4 class="process-title">Installation Process</h4>
                    <p class="process-text">
                        ND we make offers installation services to clients and believes that customer satisfaction is of
                        immense importance and we ensure it.
                    </p>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="process-card">
                    <div class="process-icon">
                        <img src="assets/img/icon/support.png" alt="Support">
                    </div>

                    <h4 class="process-title">Customer Service & End Support Process</h4>
                    <p class="process-text">
                        ND we make doesn’t believe in just selling the product — we believe in forging long-lasting
                        relationships with our customers.
                    </p>
                </div>
            </div>
        </div>

    </div>
</section>
<style>
/* Section */
.why-sec-1 {
    background-color: #f3f4f5;
    padding: 80px 0;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

/* Title block */
.section-title {
    margin-bottom: 50px;
}

.section-title .sec-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #111827;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
}

.section-title .sec-title .accent {
    display: inline-block;
    width: 46px;
    height: 4px;
    background: #d9382a;
    margin-left: 12px;
    vertical-align: middle;
    border-radius: 3px;
}

.section-sub {
    max-width: 980px;
    margin: 18px auto 0;
    /* color: black; */
    font-size: 16px;
    line-height: 1.75;
}

/* Card */
.process-card {
    background: #fff;
    border-radius: 8px;
    padding: 38px 25px 30px;
    position: relative;
    box-shadow: 0 18px 32px rgba(18, 24, 31, 0.06);
    transition: transform .28s ease, box-shadow .28s ease;
    overflow: visible;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

.process-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 26px 45px rgba(18, 24, 31, 0.09);
}

/* Floating icon box */
.process-icon {
    width: 96px;
    height: 96px;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(12, 18, 24, 0.06);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -48px;
    z-index: 3;
}

.process-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

.process-card::before {
    /* subtle dotted pattern behind card (faint) */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.06;
    transform: translateY(28px);
    z-index: 0;
    border-radius: 8px;
    pointer-events: none;
}

.process-title {
    margin-top: 26px;
    /* offset for floating icon */
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    z-index: 4;
    position: relative;
}

.process-text {
    color: #576270;
    font-size: 15px;
    line-height: 1.7;
    margin-top: 14px;
    z-index: 4;
    position: relative;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
    .process-card {
        padding: 20px 17px 19px;
        min-height: 245px;
        /* margin-top: 25px; */
    }

    .process-icon {
        width: 84px;
        height: 84px;
        top: -42px;
    }

    .process-icon img {
        width: 48px;
        height: 48px;
    }
}
</style>




<section class="popular-sec-1 space">
    <div class="container">
        <!-- Section Title -->
        <div class="row justify-content-center">
            <div class="col-xl-7">
                <div class="title-area text-center mb-2">
                    <p class="sub-title fadeinup wow" data-wow-duration="1.2s" data-wow-delay="0.1s">
                        <span class="double-line"></span> Our Window Product
                    </p>
                    <h2 class="sec-title mb-4 fadeinup wow" data-wow-duration="1.3s" data-wow-delay="0.3s">
                        UPVC window
                    </h2>
                </div>
            </div>
        </div>

        <!-- Swiper Slider -->
        <div class="slider-area position-relative">
            <div class="swiper th-slider has-shadow" id="upvcDoorSlider" data-slider-options='{
            "breakpoints": {
                "0": {"slidesPerView": 1},
                "576": {"slidesPerView": 1},
                "768": {"slidesPerView": 1},
                "992": {"slidesPerView": 3},
                "1200": {"slidesPerView": 3},
                "1300": {"slidesPerView": 3}
            },
            "autoHeight": true,
            "loop": false,
            "spaceBetween": 30,
            "navigation": {
                "nextEl": "#upvcNext",
                "prevEl": "#upvcPrev"
            }
              }'>

                <!-- Swiper Wrapper Start -->
                <div class="swiper-wrapper">
                    <?php
                    $ser = mysqli_query($con, "SELECT * FROM `upvc_window`");
                    while ($row = mysqli_fetch_array($ser)) {
                        $title = $row['title'];
                        $description = $row['description'];
                        $slug = $row['slug'];
                        $Image = $row['Image'];
                    ?>
                    <!-- Slide Start -->
                    <div class="swiper-slide">
                        <div class="popular-list-1">
                            <div class="thumb-wrapper">
                                <a class="popular-popup-image"
                                    href="<?php path(); ?>/admin/assets/images/service/<?php echo $Image; ?>">
                                    <img src="<?php path(); ?>/admin/assets/images/service/<?php echo $Image; ?>"
                                        alt="Sliding UPVC Door">
                                </a>
                            </div>
                            <div class="property-content">
                                <h3 class="box-title">
                                    <a href="<?php path(); ?>/upvc-window-details.php?slug=<?php echo $slug; ?>">
                                        <?php echo $title; ?>
                                    </a>
                                </h3>
                                <div class="box-text boxslide">
                                    <?php echo html_entity_decode(strip_tags($description)); ?>

                                </div>
                                <div class="property-bottom">
                                    <a class="th-btn sm style3 pill"
                                        href="<?php path(); ?>/upvc-window-details.php?slug=<?php echo $slug; ?>">
                                        Read More
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Slide End -->
                    <?php } ?>
                </div>
                <!-- Swiper Wrapper End -->

            </div>

            <!-- Swiper Navigation Buttons -->
            <button id="upvcPrev" class="slider-arrow slider-prev"><i class="far fa-arrow-left"></i></button>
            <button id="upvcNext" class="slider-arrow slider-next"><i class="far fa-arrow-right"></i></button>
        </div>
    </div>
</section>



<section class="property-values-sec-1 bg-smoke overflow-hidden"
    data-bg-src="assets/img/bg/property-values-bg-shape.png">
    <div class="shape-mockup d-none d-xxl-block" data-right="0" data-bottom="0"><img
            src="assets/img/property-values/propery-values-right-man.png" alt="img"></div>
    <div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-lg-6">
                <div class="property-values-1-video"><a href="https://www.youtube.com/watch?v=_sI_Ps7JSEk"
                        class="play-btn popup-video"><i class="fa-sharp fa-solid fa-play"></i></a>
                    <div class="video-thumb"><img src="assets/img/property-values/property-values-1-1.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="property-values-1-content space">
                    <div class="title-area text-left">
                        <!-- <p class="sub-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.1s"><span
                                class="double-line"></span> Property Values</p> -->
                        <h2 class="sec-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.3s"
                            style="text-align: center;">Our Achievements</h2>
                    </div>
                    <div class="property-values-1-counter-wrapper">
                        <div class="property-values-1-counter fadeinup wow">
                            <div class="icon"><img src="assets/img/icon/counter-icon4-1.svg" alt=""></div>
                            <h2 class="counter"><span class="counter-number">2800</span> +</h2><span>Projects
                                Complete</span>
                        </div>
                        <div class="property-values-1-counter fadeinup wow">
                            <div class="icon"><img src="assets/img/icon/counter-icon4-2.svg" alt=""></div>
                            <h2 class="counter"><span class="counter-number">20</span> +</h2><span>Our Team
                                Members</span>
                        </div>
                        <div class="property-values-1-counter fadeinup wow">
                            <div class="icon"><img src="assets/img/icon/counter-icon4-3.svg" alt=""></div>
                            <h2 class="counter"><span class="counter-number">2500</span> +</h2><span>Clients Are
                                Happy</span>
                        </div>
                        <div class="property-values-1-counter fadeinup wow">
                            <div class="icon"><img src="assets/img/icon/counter-icon4-4.svg" alt=""></div>
                            <h2 class="counter"><span class="counter-number">20</span> +</h2><span>Year Of
                                Experience</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="gallery-sec-2 overflow-hidden  space overflow-hidden">

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7">
                <div class="title-area text-center">
                    <!-- <p class="sub-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.1s"><span
                                class="double-line"></span>Explore Cities</p> -->
                    <h2 class="sec-title mb-2 fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.3s">Our Gallery
                    </h2>

                </div>
            </div>
        </div>
        <div class="gallery-2-slider-wrap">
            <div class="slider-area">
                <div class="swiper th-slider has-shadow gallery-1" id="gallerySlider1" data-slider-options='{
                                    "centeredSlides": false,
                                    "loop": true,
                                    "breakpoints": {
                                        "0": {"slidesPerView": 2},
                                        "576": {"slidesPerView": 2},
                                        "768": {"slidesPerView": 2},
                                        "992": {"slidesPerView": 4},
                                        "1200": {"slidesPerView": 4},
                                        "1400": {"slidesPerView": 4}
                                    }
                                }'>

                    <div class="swiper-wrapper">
                        <?php
                        $gallery = mysqli_query($con, "SELECT * FROM media WHERE page_name = 'Image' ORDER BY id DESC");
                        while ($row = mysqli_fetch_array($gallery)) {
                            $photo = $row['photo'];
                        ?>

                        <div class="swiper-slide">
                            <div class="gallery-card style-2">
                                <div class="gallery-img">
                                    <img src="<?php echo path(); ?>/admin/assets/images/gallery/<?php echo $photo; ?>"
                                        alt="gallery image">
                                </div>
                            </div>
                        </div>

                        <?php } ?>
                    </div>

                    <button data-slider-prev="#gallerySlider1" class="slider-arrow slider-prev style2">
                        <i class="far fa-arrow-left"></i>
                    </button>
                    <button data-slider-next="#gallerySlider1" class="slider-arrow slider-next style2">
                        <i class="far fa-arrow-right"></i>
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>

<?php
// testimonial
$queryt = "SELECT * FROM `testimonial` ORDER BY id DESC";
$sqlt = mysqli_query($con, $queryt);
// end testimonial
?>

<section class="testi-card-area-1 py-5 overflow-hidden">
    <div class="container">
        <!-- Section Title -->
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-8 text-center">
                <div class="title-area">

                    <p class="sub-title fadeinup wow" data-wow-duration="1.2s" data-wow-delay="0.1s">
                        <span class="double-line"></span> Our Testimonials
                    </p>
                    <h2 class="sec-title mb-4 fadeinup wow" data-wow-duration="1.3s" data-wow-delay="0.3s">
                        What Our Clients Say ??
                    </h2>

                </div>
            </div>
        </div>

        <!-- Testimonial Slider -->
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="swiper th-slider" id="testiSlide1" data-slider-options='{
                        "centeredSlides": true,
                        "loop": true,
                        "autoplay": { "delay": 4000 },
                        "breakpoints": {
                            "0": {"slidesPerView": 1},
                            "768": {"slidesPerView": 2},
                            "1200": {"slidesPerView": 3}
                        }
                    }'>
                    <div class="swiper-wrapper">
                        <?php while ($rowt = mysqli_fetch_assoc($sqlt)): ?>
                        <div class="swiper-slide">
                            <div class="testi-card">
                                <div class="testi-content">
                                    <p class="testi-text">
                                        <?php echo nl2br($rowt['para']); ?>
                                    </p>
                                </div>
                                <div class="testi-footer mt-4">
                                    <h5 class="testi-name mb-1">
                                        <?php echo htmlspecialchars($rowt['customer_name'] ?? '', ENT_QUOTES); ?>
                                    </h5>
                                    <?php if (!empty($rowt['customer_designation'])): ?>
                                    <p class="testi-role mb-0">
                                        <?php echo htmlspecialchars($rowt['customer_designation'], ENT_QUOTES); ?>
                                    </p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                        <?php endwhile; ?>
                    </div>

                    <!-- Pagination -->
                    <div class="swiper-pagination mt-4"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* ---------- Testimonial Section Styling ---------- */

.testi-card-area-1 {
    background-color: #e8e8e8;
}





.testi-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    padding: 32px 26px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.testi-text {
    color: #444;
    font-size: 15px;
    line-height: 1.75;
    text-align: left;
    font-style: normal;
}

.testi-footer {
    text-align: left;
}

.testi-name {
    color: #111;
    font-weight: 700;
    font-size: 17px;
}

.testi-role {
    color: #777;
    font-size: 14px;
}



.swiper-pagination-bullet-active {
    opacity: 1;
}

/* Responsive spacing */
@media (max-width: 991.98px) {
    .testi-card {
        padding: 26px 22px;
    }
}
</style>




<section class="space overflow-hidden" id="blog-sec">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7">
                <div class="title-area text-center">
                    <p class="sub-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.1s"><span
                            class="double-line"></span> latest News</p>
                    <h2 class="sec-title fadeinup wow" data-wow-duration="1.5s" data-wow-delay="0.3s">Our Blog</h2>
                </div>
            </div>
        </div>
        <div class="slider-area">
            <div class="swiper th-slider has-shadow" id="blogSlider1" data-slider-options='{
            "breakpoints": {
                "0": {"slidesPerView": 1},
                "576": {"slidesPerView": 1},
                "768": {"slidesPerView": 1},
                "992": {"slidesPerView": 3},
                "1200": {"slidesPerView": 3},
                "1300": {"slidesPerView": 3}
            },
            "autoHeight": true
        }'>

                <div class="swiper-wrapper">
                    <?php
                    $blogs = mysqli_query($con, "SELECT * FROM `blog` ORDER BY id DESC LIMIT 3");
                    while ($row = mysqli_fetch_array($blogs)) {
                        $title = $row['title'];
                        $description = $row['description'];
                        $slug = $row['slug'];
                        $Image = $row['Image'];
                    ?>
                    <div class="swiper-slide">
                        <div class="blog-card style-2">
                            <div class="blog-img">
                                <a href="<?php path(); ?>/blog-details.php?slug=<?php echo $slug; ?>">
                                    <img src="<?php path(); ?>/admin/assets/images/blog/<?php echo htmlspecialchars($Image); ?>"
                                        alt="<?php echo htmlspecialchars($title); ?>">
                                </a>
                            </div>
                            <div class="blog-content">
                                <h3 class="box-title">
                                    <a href="<?php path(); ?>/blog-details.php?slug=<?php echo $slug; ?>">
                                        <?php echo htmlspecialchars($title); ?>
                                    </a>
                                </h3>
                                <div class="box-text boxslide">
                                    <?php echo htmlspecialchars(strip_tags($description)); ?>
                                </div>
                                <a href="<?php path(); ?>/blog-details.php?slug=<?php echo $slug; ?>"
                                    class="th-btn pill style3 mt-3">
                                    Read More
                                </a>
                            </div>
                        </div>
                    </div>
                    <?php } ?>
                </div>

            </div>

            <!-- Navigation Buttons -->
            <button data-slider-prev="#blogSlider1" class="slider-arrow slider-prev">
                <i class="far fa-arrow-left"></i>
            </button>
            <button data-slider-next="#blogSlider1" class="slider-arrow slider-next">
                <i class="far fa-arrow-right"></i>
            </button>
        </div>

    </div>
</section>
<?php
include("include/footer.php");
?>