@extends('frontend.layouts.app')
@section('content')

<!-- Inner Banner Start -->
<div class="innerBanner Loader mb-5">
    <img class="modify-img"
         data-image-small="{{ asset('frontend/assets/images/project/landowner.jpg') }}"
         data-image-large="{{ asset('frontend/assets/images/project/landowner.jpg') }}"
         data-image-standard="{{ asset('frontend/assets/images/project/landowner.jpg') }}"
         alt="">
    <div class="container">
        <div class="row">
            <h1 class="anim" style="font-size:3.5rem; font-weight:600;"><span><span>PROJECT</span></span></h1>
        </div>
    </div>
</div>
<!-- Inner Banner End -->

<style>
    .product-image {
        position: relative;
        overflow: hidden;
    }

    .main-image {
        width: 100%;
        height: auto;
    }

    .zoom-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: none;
        /* Initially hidden */
    }

    .zoom-image {
        position: absolute;
        width: 200%;
        /* Adjust as needed */
        height: auto;
        /* Maintain aspect ratio */
        transition: transform 0.5s ease;
        pointer-events: none;
        /* Prevent mouse events on the zoom image */
    }

    /* Show zoom effect on hover */
    .product-image:hover .zoom-container {
        display: block;
    }

    .product-image:hover .zoom-image {
        transform: scale(2);
        /* Zoom in effect */
    }

    /* Optional: Position the zoomed image on cursor movement */
    .product-image:hover {
        cursor: crosshair;
    }
</style>
<section class="Project pt80 pb80"> 
    <div class="container">
        <div class="project-header-wrapper">
    <div class="Project__title anim-parent">
        <h4 class="subTitle anim"><span><span>Featured projects </span></span></h4>
        <h2 class="Title anim"><span><span>Our Projects</span></span></h2>
    </div>
</div>


        <div class="container-fluid">
            <div class="row">
                <!-- Project 1 -->
                <div class="col-md-4">
                    <div class="project-box" style="text-align: center; margin-bottom: 40px;">
                        <div class="product-image" 
                            style="width: 100%; height: 250px; overflow: hidden; border-radius: 8px; transition: transform 0.3s ease;" 
                            onmouseover="this.firstElementChild.style.transform='scale(1.05)'" 
                            onmouseout="this.firstElementChild.style.transform='scale(1)'">
                            <img src="{{ asset('frontend/assets/images/team/1.jpg') }}" class="main-image" alt="Project 1" 
                                style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;">
                        </div>
                        <p style="font-size: 26px; font-weight: 700; margin-top: 15px;">
                            Hikma Iconic Tower
                        </p>

                        <!-- SMALL TEXT -->
                        <h5 class="project-title" 
                            style="margin-top: 5px; font-weight: 500; font-size: 15px; color:#444;">
                            Luxury Apartment in Barisal
                        </h5>
                        <a class="dcBtn mt30" href="#"><span>Explore</span></a>
                    </div>
                </div>

        <!-- Project 2 -->
        <div class="col-md-4">
            <div class="project-box" style="text-align: center; margin-bottom: 40px;">
                <div class="product-image" 
                    style="width: 100%; height: 250px; overflow: hidden; border-radius: 8px; transition: transform 0.3s ease;" 
                    onmouseover="this.firstElementChild.style.transform='scale(1.05)'" 
                    onmouseout="this.firstElementChild.style.transform='scale(1)'">
                    <img src="{{ asset('frontend/assets/images/team/10.png') }}" class="main-image" alt="Project 2" 
                        style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;">
                </div>
                <p style="font-size: 26px; font-weight: 700; margin-top: 15px;">
                    Barisal Rupatoli Housing
                </p>

                
                <h5 class="project-title" 
                    style="margin-top: 5px; font-weight: 500; font-size: 15px; color:#444;">
                    Commercial Tower at Barisal
                </h5>
                <a class="dcBtn mt30" href="#"><span>Explore</span></a>
            </div>
        </div>

<!-- Project 3 -->
            <div class="col-md-4">
                <div class="project-box" style="text-align: center; margin-bottom: 40px;">
                    <div class="product-image" 
                        style="width: 100%; height: 250px; overflow: hidden; border-radius: 8px; transition: transform 0.3s ease;" 
                        onmouseover="this.firstElementChild.style.transform='scale(1.05)'" 
                        onmouseout="this.firstElementChild.style.transform='scale(1)'">
                        <img src="{{ asset('frontend/assets/images/team/11.png') }}" class="main-image" alt="Project 3" 
                            style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;">
                    </div>
                     <p style="font-size: 26px; font-weight: 700; margin-top: 15px;">
                        Dhaka Bashundhara
                    </p>

                
                    <h5 class="project-title" 
                        style="margin-top: 5px; font-weight: 500; font-size: 15px; color:#444;">
                        Modern Duplex in Bashundhara
                    </h5>
                    <a class="dcBtn mt30" href="#"><span>Explore</span></a>
                </div>
            </div>

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



@endsection