@extends('layouts.website.main')
@push('links')
    <link rel="stylesheet" href="{{ asset('vendor/css/swiper-slider/swiper-bundle.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/css/fancybox/fancybox.css') }}" />
@endpush
@section('main-section')
    <!-- Page Banner -->
    @include('component.Banner', [
        'pageTitle' => 'Interior Design Services',
        'bannerImage' =>
            'https://images.unsplash.com/photo-1591088398332-8a7791972843?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
    ])



    <!-- Careers & Job Opportunities in Dubai -->
    <section>
        <img src="{{ asset('assets/images/shaps/2.svg') }}" alt="ResidentialPropertiesshap1" class=" position-absolute"
            style="width: 218px; height: 189px; top: 25px; right: -40px;">
        <div class="container">
            <div class="text-center width-100 width-lg-70 mx-auto">
                <h3 class=" font-24px font-lg-32px fw-400 text-primary font-satisfy">Our Gallery</h3>
                <h2 class=" font-28px font-lg-36px fw-600 mb-3">Interior Design Services</h2>
                <div class="hb-line bg-primary mx-auto rounded-pill mb-5" style="width: 109px; height: 3px;"></div>
                <p>Amber Homes Interiors is a distinguished interior design company renowned for its commitment to elevating
                    spaces with timeless elegance. With an unwavering passion for impeccable design and attention to detail,
                    we specialize in transforming residential and commercial environments into captivating havens. Our team
                    of skilled designers and craftsmen work closely with clients, translating their visions into stunning
                    realities that harmoniously blend style, functionality, and personal expression. From exquisite material
                    selection to innovative techniques, we meticulously craft spaces that exude refinement and stand the
                    test of time. Experience the transformative power of Amber Homes Interiors and unlock the true potential
                    of your space. </p>
            </div>
            <br>
            <br>

            <div class="gridDesign" style="--bs-gap: 15px">
                <div class="tall">
                    <a href="https://images.unsplash.com/photo-1611892440504-42a792e24d32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                        data-fancybox="gallery">
                        <img src="https://images.unsplash.com/photo-1611892440504-42a792e24d32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                            alt="" />
                    </a>
                </div>
                <div>
                    <a data-fancybox="gallery"
                        href="https://images.unsplash.com/photo-1618773928121-c32242e63f39?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
                        <img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                            alt="" />
                    </a>
                </div>
                <div>
                    <a data-fancybox="gallery"
                        href="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
                        <img src="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                            alt="" />
                    </a>
                </div>
                <div class="wide">
                    <a data-fancybox="gallery"
                        href="https://images.unsplash.com/photo-1590490360182-c33d57733427?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">
                        <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"
                            alt="" />
                    </a>
                </div>
                <div>
                    <a data-fancybox="gallery"
                        href="https://images.unsplash.com/photo-1590490359854-dfba19688d70?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">
                        <img src="https://images.unsplash.com/photo-1590490359854-dfba19688d70?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"
                            alt="" />
                    </a>
                </div>
                <div class="tall">
                    <a data-fancybox="gallery"
                        href="https://images.unsplash.com/photo-1611892440504-42a792e24d32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
                        <img src="https://images.unsplash.com/photo-1611892440504-42a792e24d32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                            alt="" />
                    </a>
                </div>
                <div>
                    <a data-fancybox="gallery"
                        href="https://images.unsplash.com/photo-1566195992011-5f6b21e539aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80">
                        <img src="https://images.unsplash.com/photo-1566195992011-5f6b21e539aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80"
                            alt="" />
                    </a>
                </div>
                <div>
                    <a data-fancybox="gallery"
                        href="https://images.unsplash.com/photo-1581404554128-5032fe7874be?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80">
                        <img src="https://images.unsplash.com/photo-1581404554128-5032fe7874be?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
                            alt="" />
                    </a>
                </div>
                <div>
                    <a data-fancybox="gallery"
                        href="https://images.unsplash.com/photo-1578683010236-d716f9a3f461?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80">
                        <img src="https://images.unsplash.com/photo-1578683010236-d716f9a3f461?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                            alt="" />
                    </a>
                </div>

            </div>

        </div>

    </section>






    {{-- packages --}}
    <section>
        <div class="container">
            <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
                <div class="col">
                    <div class="card mb-4 rounded-3 shadow-sm">
                        <div class="card-header py-3">
                            <h4 class="my-0 fw-normal">Elegant</h4>
                        </div>
                        <div class="card-body">
                            <h1 class="card-title pricing-card-title">AED 30,000<small
                                    class="text-body-secondary fw-light">/mo</small></h1>
                            <ul class="list-unstyled mt-3 mb-4" style="min-height: 180px; overflow-y: auto;">
                               
                                <li>Refined selection of design elements</li>
                                <li>Expert craftsmanship</li>
                                <li>Creates a space with understated sophistication and timeless charm</li>
                            </ul>
                            <a href="{{route('contact')}}" type="button" class="w-100 btn justify-content-center fw-600 tracking-6 btn-lg btn-outline-primary">Contact Now</a>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4 rounded-3 shadow-sm">
                        <div class="card-header py-3">
                            <h4 class="my-0 fw-normal">Premium </h4>
                        </div>
                        <div class="card-body">
                            <h1 class="card-title pricing-card-title">AED 45,000<small
                                    class="text-body-secondary fw-light">/mo</small></h1>
                            <ul class="list-unstyled mt-3 mb-4" style="min-height: 180px; overflow-y: auto;">
                                <li>Luxurious materials</li>
                                <li>Bespoke furnishings</li>
                                <li>Meticulous attention to detail</li>
                                <li>Reflects your unique style and surpasses expectations</li>
                            </ul>
                            <a href="{{route('contact')}}" type="button" class="w-100 btn justify-content-center fw-600 tracking-6 btn-lg btn-primary">Contact Now</a>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4 rounded-3 shadow-sm border-primary">
                        <div class="card-header py-3 text-bg-primary border-primary">
                            <h4 class="my-0 fw-normal">Luxury </h4>
                        </div>
                        <div class="card-body">
                            <h1 class="card-title pricing-card-title">AED 60,000<small
                                    class="text-body-secondary fw-light">/mo</small></h1>
                            <ul class=" mt-3 mb-4" style="min-height: 180px; overflow-y: auto;">
                                <li>Epitome of opulence</li>
                                <li>Exquisite craftsmanship</li>
                                <li>High-end finishes</li>
                                <li>Bespoke design features</li>
                                <li>Creates a truly luxurious sanctuary tailored to your discerning tastes</li>
                            </ul>
                            <a href="{{route('contact')}}" type="button" class="w-100 btn justify-content-center fw-600 tracking-6 btn-lg btn-primary">Contact Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Standard Packages -->
    {{-- <section style="background: var(--bs-gray-100);">
    <div class="container">
        <div class="text-center width-100 width-lg-50 mx-auto">
            <h2 class=" font-28px font-lg-36px fw-600 mb-3">Standard Packages</h2>
            <div class="hb-line bg-primary mx-auto rounded-pill mb-4" style="width: 109px; height: 3px;"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
        </div>
        <br>
        <br>
        <div class=" rounded-3 overflow-hidden">
            <div class="swiper PackagesSlider" style="height: clamp(280px, 40vw, 603px); --swiper-navigation-sides-offset: 30px">
                <div class="swiper-wrapper">
                    <div class="swiper-slide position-relative">
                        <img src="https://images.unsplash.com/photo-1598928636135-d146006ff4be?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
                        <div class="overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center bg-black p-4" style="--bs-bg-opacity: 0.5;">
                            <div class="container px-7 px-md-15">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <h4 class=" font-24px font-lg-36px fw-600 text-white mb-2">Exquisite 2BR in Golf Views, Emaar South</h4>
                                        <ul>
                                            <li><a href="#" class=" font-18px fw-600 link-primary transition hover-tracking">EXPLORE MORE</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide position-relative">
                        <img src="https://images.unsplash.com/photo-1598928636135-d146006ff4be?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
                        <div class="overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center bg-black p-4" style="--bs-bg-opacity: 0.5;">
                            <div class="container px-7 px-md-15">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <h4 class=" font-24px font-lg-36px fw-600 text-white mb-2">Exquisite 2BR in Golf Views, Emaar South</h4>
                                        <ul>
                                            <li><a href="#" class=" font-18px fw-600 link-primary transition hover-tracking">EXPLORE MORE</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
</section> --}}




    <!-- Premium Packages -->
    {{-- <section>
    <div class="container">
        <div class="text-center width-100 width-lg-50 mx-auto">
            <h2 class=" font-28px font-lg-36px fw-600 mb-3">Premium Packages</h2>
            <div class="hb-line bg-primary mx-auto rounded-pill mb-4" style="width: 109px; height: 3px;"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
        </div>
        <br>
        <br>
        <div class=" rounded-3 overflow-hidden">
            <div class="swiper PackagesSlider" style="height: clamp(280px, 40vw, 603px); --swiper-navigation-sides-offset: 30px">
                <div class="swiper-wrapper">
                    <div class="swiper-slide position-relative">
                        <img src="https://images.unsplash.com/photo-1598928636135-d146006ff4be?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
                        <div class="overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center bg-black p-4" style="--bs-bg-opacity: 0.5;">
                            <div class="container px-7 px-md-15">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <h4 class=" font-24px font-lg-36px fw-600 text-white mb-2">Exquisite 2BR in Golf Views, Emaar South</h4>
                                        <ul>
                                            <li><a href="#" class=" font-18px fw-600 link-primary transition hover-tracking">EXPLORE MORE</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide position-relative">
                        <img src="https://images.unsplash.com/photo-1598928636135-d146006ff4be?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
                        <div class="overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center bg-black p-4" style="--bs-bg-opacity: 0.5;">
                            <div class="container px-7 px-md-15">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <h4 class=" font-24px font-lg-36px fw-600 text-white mb-2">Exquisite 2BR in Golf Views, Emaar South</h4>
                                        <ul>
                                            <li><a href="#" class=" font-18px fw-600 link-primary transition hover-tracking">EXPLORE MORE</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </div>
</section> --}}




    <!-- Contact us -->
    <section style="--bs-bg-opacity: 0.2" class=" overflow-hidden bg-primary">
        <img src="{{ asset('assets/images/shaps/2.svg') }}" alt="ResidentialPropertiesshap1" class=" position-absolute"
            style="width: 218px; height: 189px; top: 25px; right: -40px;">
        <img src="{{ asset('assets/images/shaps/1.svg') }}" alt="aboutsvgshap" class="d-none d-lg-block"
            style=" position: absolute;
    width: 205px;
    height: 103px;
    top: 50px;
    left: -20px;
    ">
        <div class="container">
            <div class="text-center width-100 width-lg-55 mx-auto">
                <h3 class=" font-28px font-lg-36px fw-600 mb-3">Get in touch with us & Our team are always
                    happy to help.</h3>
                <div class="hb-line bg-primary mx-auto rounded-pill" style="width: 109px; height: 3px;"></div>
            </div>
            <br>
            <br>
            <div class="width-100 width-lg-80 mx-auto">
                <h2 class=" font-20px font-md-28px fw-600">Email us</h2>
                <p class=" font-18px tracking-3 fw-400">Drop us an email and we’ll get back to you within 48hrs… </p>
                <form action="">
                    <div class="row mt-3 g-4">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="" class=" font-26px font-md-18px fw-600">Full Name</label>
                                <input type="text" class=" form-control" placeholder="Your Full Name">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="" class=" font-26px font-md-18px fw-600">Email </label>
                                <input type="email" class=" form-control" placeholder="Enter Email Address">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="" class=" font-26px font-md-18px fw-600">Phone </label>
                                <input type="phone" class=" form-control" placeholder="Enter Phone Number">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label for="" class=" font-26px font-md-18px fw-600">What's your Message? </label>
                                <textarea name="" class=" form-control" id="" rows="10"></textarea>
                            </div>
                        </div>

                    </div>
                    <div class="text-center mt-6">
                        <button
                            class=" btn btn-primary extra-btn-padding-40 font-18px fw-600 transition hover-tracking">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script src="{{ asset('vendor/js/swiper-slider/swiper-bundle.min.js') }}"></script>
    <script src="{{ asset('vendor/js/fancybox/fancybox.umd.js') }}"></script>
    <script>
        var swiper = new Swiper(".PackagesSlider", {
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
        Fancybox.bind("[data-fancybox]", {
            // Your custom options
        });
    </script>
@endpush