@extends('layouts.frontend.master')

@section('content')
<div id="rev_slider_one_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="mask-showcase"
    data-source="gallery">
    <!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
    <div id="rev_slider_two" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.1">
        <ul>
            @foreach ($sliders as $slider)
            <!-- SLIDE 1 -->
            <li data-index="rs-{{ $slider->id }}" data-transition="fade" data-slotamount="default"
                data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default"
                data-masterspeed="300" data-thumb="https://via.placeholder.com/1920x800.png" data-rotate="0"
                data-saveperformance="off" data-title="" data-param1="1" data-param2="" data-param3="" data-param4=""
                data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10=""
                data-description="">
                <!-- MAIN IMAGE -->
                <img src="{{$slider->main_image()}}" data-bgcolor='rgba(255,255,255,0)' style='' alt=""
                    data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off"
                    class="rev-slidebg" data-no-retina>

                <!-- LAYER 1  right image overlay dark-->


                <!-- LAYER 3  Thin text title-->
                <div class="tp-caption tp-resizeme caption-big-2" id="slide-70-layer-1"
                    data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                    data-y="['center','center','center','center']" data-voffset="['-38','-30','-30','-18']"
                    data-fontsize="['150',142','110','70']" data-lineheight="['150','130','110','70']"
                    data-fontweight="['200','200','200','200']" data-color="['#fff','#fff','#fff','#fff']"
                    data-whitespace="nowrap" data-type="text" data-responsive_offset="on"
                    data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"x:50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"x:50px;opacity:0;","ease":"power3.inOut"}]'
                    data-textAlign="['center','center','center','center']">{{ $slider->title_en }}
                </div>

                <!-- LAYER 4  Bold Title-->
                <div class="tp-caption   tp-resizeme tp-desc-2" id="slide-70-layer-6"
                    data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                    data-y="['center','center','center','center']" data-voffset="['60','58','50','35']"
                    data-fontsize="['18','18','16','16']" data-lineheight="['20','20','16','16']"
                    data-color="['#fff','#fff','#fff','#fff']" data-letterspacing="['8','8','8','8']"
                    data-fontweight="['300','300','300','300']" data-whitespace="nowrap" data-type="text"
                    data-responsive_offset="on"
                    data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"x:50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"x:50px;opacity:0;","ease":"power3.inOut"}]'
                    data-textAlign="['left','left','left','left']">{!! $slider->description_en !!}
                </div>

                <!-- LAYER 5  Paragraph-->
                <div class="tp-caption tp-resizeme" id="slide-70-layer-3" data-x="['left','left','left','left']"
                    data-hoffset="['15','15','15','15']" data-y="['top','top','top','top']"
                    data-voffset="['420','279','271','235']" data-fontsize="['18','18','22','16']"
                    data-lineheight="['30','34','32','28']" data-whitespace="nowrap" data-type="text"
                    data-responsive_offset="on"
                    data-frames='[{"delay":2900,"speed":1000,"frame":"0","from":"x:50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"x:50px;opacity:0;","ease":"power3.inOut"}]'
                    data-textAlign="['left','left','left','left']">
                </div>

                <!-- LAYER 6  Read More-->
                <div class="tp-caption rev-btn" id="slide-70-layer-4" data-x="['left','left','left','left']"
                    data-hoffset="['15','15','15','15']" data-y="['top','top','top','top']"
                    data-voffset="['525','385','370','320']" data-lineheight="['18','18','16','16']" data-width="none"
                    data-height="none" data-whitespace="nowrap" data-responsive_offset="on"
                    data-frames='[{"delay":3400,"speed":1000,"frame":"0","from":"x:50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"x:50px;opacity:0;","ease":"power3.inOut"}]'
                    data-textAlign="['center','center','center','center']" data-paddingtop="[0,0,0,0]"
                    data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]">
                </div>

            </li>
            @endforeach
        </ul>
    </div>
</div>

<section class="pb-0 pt-xl-0">
    <div class="container">
        <div class="row mt-xl--40 justify-content-center">
            <div class="col-lg-4 col-md-6 col-sm-12 mb-5 mb-lg-0">
                <div class="ot-features-box max-w-350 mx-auto">
                    <div class="features-image">
                        <a>
                            <span class="overlay flex-middle"><i class="ot-flaticon-add"></i></span>
                            <img src="{{ asset('frontend/images/real/features.jpg')}}" alt="">
                        </a>
                    </div>
                    <div class="features-content">
                        <h6><a><span>01.</span> Craftsmanship</a></h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12 mb-5 mb-lg-0">
                <div class="ot-features-box max-w-350 mx-auto">
                    <div class="features-image">
                        <a>
                            <span class="overlay flex-middle"><i class="ot-flaticon-add"></i></span>
                            <img src="{{ asset('frontend/images/real/featured2.jpg')}}" alt="">
                        </a>
                    </div>
                    <div class="features-content">
                        <h6><a><span>02.</span> Bespoke Design</a></h6>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12 mb-5 mb-lg-0">
                <div class="ot-features-box max-w-350 mx-auto">
                    <div class="features-image">
                        <a>
                            <span class="overlay flex-middle"><i class="ot-flaticon-add"></i></span>
                            <img src="{{ asset('frontend/images/real/featured3.jpg')}}" alt="">
                        </a>
                    </div>
                    <div class="features-content">
                        <h6><a><span>03.</span> Flawless Execution</a></h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="benefits">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-12 mb-5 mb-lg-0">
                <div class="benefits-desc-1">
                    <div class="ot-heading">
                        <span> Why Choose Elite ? </span>
                        <h2 class="main-heading">Experience the difference in design, detail, and delivery.</h2>
                    </div>
                    <div class="ot-button">
                        <a href="#portfolio" class="scroll-target octf-btn octf-btn-light border-hover-light">View
                            Projects</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-md-12">
                <div class="row">
                    <div class="col-lg-6 col-md-6 mb-5 mb-md-0">
                        <div class="icon-box icon-box--classic icon-box--icon-top s-light">
                            <div class="icon-main"><span class="ot-flaticon-sphere"></span></div>
                            <div class="content-box">
                                <h5><a class="title-link">Customer Focus</a></h5>
                                <p>Customers choose us for the simplicity of communication and an understanding of what
                                    it’s necessary to receive in the end.</p>
                            </div>
                        </div>
                        <div class="d-none d-md-block space-70"></div>
                    </div>
                    <div class="col-lg-6 col-md-6 mb-5 mb-md-0">
                        <div class="icon-box icon-box--classic icon-box--icon-top s-light">
                            <div class="icon-main"><span class="ot-flaticon-measure"></span></div>
                            <div class="content-box">
                                <h5><a class="title-link">Tailored Luxury</a></h5>
                                <p>We don’t just design spaces — we curate lifestyles. Every detail is customized to
                                    reflect your personality and preferences.</p>
                            </div>
                        </div>
                        <div class="d-none d-md-block space-70"></div>
                    </div>
                    <div class="col-lg-6 col-md-6 mb-5 mb-md-0">
                        <div class="icon-box icon-box--classic icon-box--icon-top s-light">
                            <div class="icon-main"><span class="ot-flaticon-home"></span></div>
                            <div class="content-box">
                                <h5><a class="title-link">Flawless Execution</a></h5>
                                <p>From the drawing board to the final polish, we ensure seamless project delivery with
                                    top-tier craftsmanship.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6">
                        <div class="icon-box icon-box--classic icon-box--icon-top s-light">
                            <div class="icon-main"><span class="ot-flaticon-house"></span></div>
                            <div class="content-box">
                                <h5><a class="title-link">End-to-End Solutions</a></h5>
                                <p>From design, finishing, furniture manufacturing, and smart home integration — we
                                    handle it all under one roof.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="process" class="process-step">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 text-center theratio-align-center">
                <div class="ot-heading is-dots">
                    <h2 class="main-heading">Our Working Process</h2>
                    <span>From vision to reality – step by step</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="ot-process" data-tab="true">
                    <ul class="process_nav unstyle">
                        <li class="current">
                            <div class="icon-main">
                                <span class="dcell"><i class="ot-flaticon-support"></i></span>
                                <span class="number-stroke">01</span>
                            </div>
                            <h5>Consultation</h5>
                        </li>
                        <li>
                            <div class="icon-main">
                                <span class="dcell"><i class="ot-flaticon-blueprint"></i></span>
                                <span class="number-stroke">02</span>
                            </div>
                            <h5>Concept Design</h5>
                        </li>
                        <li>
                            <div class="icon-main">
                                <span class="dcell"><i class="ot-flaticon-measure"></i></span>
                                <span class="number-stroke">03</span>
                            </div>
                            <h5>Detailed Planning</h5>
                        </li>
                        <li>
                            <div class="icon-main">
                                <span class="dcell"><i class="ot-flaticon-tools"></i></span>
                                <span class="number-stroke">04</span>
                            </div>
                            <h5>Execution & Supervision</h5>
                        </li>
                        <li>
                            <div class="icon-main">
                                <span class="dcell"><i class="ot-flaticon-box"></i></span>
                                <span class="number-stroke">05</span>
                            </div>
                            <h5>Delivery & Handover</h5>
                        </li>
                    </ul>
                    <div class="process-des">
                        <div class="process-des-item">We listen, understand, and assess your needs and goals.</div>
                        <div class="process-des-item">Our creative team transforms ideas into visual concepts and design
                            boards.</div>
                        <div class="process-des-item">We prepare drawings, material selections, and clear schedules for
                            seamless execution.</div>
                        <div class="process-des-item">Our expert team brings the design to life with precision and
                            quality control.</div>
                        <div class="process-des-item">We deliver your space fully finished and furnished — ready to live
                            in.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="services" class="services-1">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center theratio-align-center">
                <div class="ot-heading is-dots">
                    <h2 class="main-heading" style="color: #ffffff;">What We Do ?</h2>
                    <span>Comprehensive design and build services tailored to your lifestyle</span>
                </div>
                <div class="space-50"></div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="icon-box icon-box--bg-img icon-box--icon-top icon-box--is-line-hover icon-bg-1 text-center">
                    <div class="icon-main"><img src="{{ asset('frontend/images/real/iconbox1.2.png')}}" alt=""></div>
                    <div class="content-box custom-h5">
                        <h5><a>Interior Design</a></h5>
                        <p>Bespoke design solutions for residential and commercial spaces with a luxury finish.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="icon-box icon-box--bg-img icon-box--icon-top icon-box--is-line-hover icon-bg-2 text-center">
                    <div class="icon-main"><img src="{{ asset('frontend/images/real/iconbox2.png')}}" alt=""></div>
                    <div class="content-box custom-h5">
                        <h5><a>Turnkey Finishing</a></h5>
                        <p>Full project execution including painting, flooring, ceilings, lighting, and more.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="icon-box icon-box--bg-img icon-box--icon-top icon-box--is-line-hover icon-bg-3 text-center">
                    <div class="icon-main"><img src="{{ asset('frontend/images/real/iconbox3.png')}}" alt=""></div>
                    <div class="content-box custom-h5">
                        <h5><a>Custom Furniture</a></h5>
                        <p>In-house furniture production for unique, functional, and stylish interiors.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-12">
                <div class="icon-box icon-box--bg-img icon-box--icon-top icon-box--is-line-hover icon-bg-2 text-center">
                    <div class="icon-main"><img src="{{ asset('frontend/images/real/iconbox2.png')}}" alt=""></div>
                    <div class="content-box custom-h5">
                        <h5><a>Smart Home Integration</a></h5>
                        <p>Smart lighting, climate control, security systems, and more for modern living.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="portfolio" class="our-portfolio-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center theratio-align-center">
                <div class="ot-heading is-dots s-light">
                    <span></span>
                    <h2 class="main-heading">Selected Projects</h2>
                    <span> Elegance crafted into every corner </span>
                </div>
                <div class="space-40"></div>
                <div class="project-slider projects-grid style-1 img-scale m-0 owl-theme owl-carousel">
                    @foreach ($projects as $project)
                    <div class="project-items {{ $project->announcement->id }} ">
                        <div class="projects-box">
                            <div class="projects-thumbnail">
                                <a>
                                    <img src="{{$project->image()}}" alt="">
                                </a>
                                <div class="overlay">
                                    <i class="ot-flaticon-add"></i>
                                </div>
                            </div>
                            <div class="portfolio-info">
                                <div class="portfolio-info-inner">
                                    <p class="portfolio-cates"><a>{{ $project->announcement->title_en }}</a></p>
                                    <p class="portfolio-cates"><a>{{ $project->name_en }}</a></p>
                                    <p class="portfolio-cates"><a>{{ $project->location_en }}</a></p>
                                    <p class="portfolio-cates"><a>{{ $project->description_en }}</a></p>
                                </div>
                                <a class="overlay"></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="ot-button text-center">
                    <a href="{{ route('projects') }}" class="octf-btn octf-btn-light border-hover-light">all
                        Projects</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="about" class="p-0 bg-dark-theratio">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 align-self-center">
                <div class="about-img-2">
                    {{-- <img src="{{ asset('frontend/images/real/image3-home2.png')}}" alt=""> --}}
                </div>
            </div>
            <div class="col-lg-12 align-self-center">
                <div class="about-content-2 ml-xl-70">
                    <div class="ot-heading">
                        <span></span>
                        <h2 class="main-heading text-light">Our Philosophy in Simply and Quality Design</h2>
                    </div>
                    <div class="ot-tabs tabs-light">
                        <ul class="tabs-heading unstyle">
                            <li class="tab-link current" data-tab="tab-1">Founder’s Message</li>
                            <li class="tab-link" data-tab="tab-2">Our Mission</li>
                            <li class="tab-link" data-tab="tab-3">Our Vision</li>
                            <li class="tab-link" data-tab="tab-4">Our Philosophy</li>
                        </ul>
                        <div id="tab-1" class="tab-content current">
                            {!! $settings['message'] !!}
                        </div>
                        <div id="tab-2" class="tab-content">
                            {!! $settings['mission'] !!}
                        </div>
                        <div id="tab-3" class="tab-content">
                            {!! $settings['vision'] !!}
                        </div>
                        <div id="tab-4" class="tab-content">
                            {!! $settings['philosophy'] !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="cta-2">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Your Dream House</h2>
                <p>Original design project of high quality raises profit – this is proved in practice by many of our
                    customers.</p>
                <div class="ot-button">
                    <a href="#contact" class="octf-btn octf-btn-light border-hover-light scroll-target">get in touch</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="progress-studio">
    <div class="container">
        <div class="row">
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center mb-5 mb-xl-0">
                <div class="circle-progress tbottom text-light" data-color="#939393" data-height="2" data-size="165"
                    data-processed="true">
                    <div class="inner-bar" data-percent="80"><span><span class="percent">0</span>%</span></div>
                    <h4>interior sketch</h4>
                    <p class="main-color-stext">All kinds of buildings in chematic or working design</p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center mb-5 mb-xl-0">
                <div class="circle-progress tbottom text-light" data-color="#939393" data-height="2" data-size="165"
                    data-processed="true">
                    <div class="inner-bar" data-percent="95"><span><span class="percent">0</span>%</span></div>
                    <h4>3D MODELING</h4>
                    <p class="main-color-stext">Studio provides a full range of 3D interior modeling</p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center mb-5 mb-md-0">
                <div class="circle-progress tbottom text-light" data-color="#939393" data-height="2" data-size="165"
                    data-processed="true">
                    <div class="inner-bar" data-percent="90"><span><span class="percent">0</span>%</span></div>
                    <h4>ROOM MEASUREMENT</h4>
                    <p class="main-color-stext">Development of iperfect design of the project</p>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 text-center">
                <div class="circle-progress tbottom text-light" data-color="#939393" data-height="2" data-size="165"
                    data-processed="true">
                    <div class="inner-bar" data-percent="95"><span><span class="percent">0</span>%</span></div>
                    <h4>2D PLANNING</h4>
                    <p class="main-color-stext">We provide 2D planning for great visualization</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="testimonials" class="testi-2 bg-dark-theratio">
    <div class="container">
        <div class="row m-0">
            <div class="studio-testi-slide s-light mb-5 mb-xl-0">
                <div class="studio-testi-slide-block z-index-2 position-relative">
                    <div class="ot-heading is-dots s-light">
                        <span></span>
                        <h2 class="main-heading">What People Say</h2>
                    </div>
                    <div class="ot-testimonials v-dark">
                        <div class="testimonials-slide-2 ot-testimonials-slider-s2 owl-theme owl-carousel">
                            @foreach ($testimonials as $testimonial)
                            <div class="testi-item">
                                <div class="ttext">
                                    “{{ $testimonial->description_en }}”
                                </div>
                                <div class="t-head flex-middle">
                                    <div class="tinfo">
                                        <h5>{{ $testimonial->name_en }}</h5>
                                        <span>{{ $testimonial->title_en }}</span>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="studio-testi-img text-center">
                <div class="studio-testi-img-block z-index-1">
                    <img src="{{ asset('frontend/images/real/image2-home2.jpg')}}" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

{{-- <div class="team-clients bg-dark-theratio">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="clients-slide owl-theme owl-carousel">
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                    <div class="img-item">
                        <figure><img src="https://via.placeholder.com/300x145.png" alt=""></figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}

<section id="blog" class="our-blog-2">
    <div class="container">
        <div class="row pb-50">
            <div class="col-lg-8 col-md-12 mb-4 mb-lg-0">
                <div class="ot-heading is-dots s-light">
                    <h2 class="main-heading">From the Studio</h2>
                    <span>Trends, tips, and inspiration from the world of interior design </span>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 text-lg-right align-self-center">
                <div class="ot-button">
                    <a href="{{ route('blogs') }}" class="octf-btn octf-btn-light border-hover-light">View all</a>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            @foreach ($blogs as $blog)
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="post-box masonry-post post-item v-dark">
                    <div class="post-inner">
                        <div class="entry-media post-cat-abs">
                            <a href="{{ route('article.show',  $blog->slug )}}"><img src="{{$blog->main_image()}}"
                                    style="width: 328px; height: 280px" alt=""></a>
                            <div class="post-cat">
                                <div class="posted-in"><a>{{$blog->announcement->title_en}}</a></div>
                            </div>
                        </div>
                        <div class="inner-post">
                            <div class="entry-header">
                                <div class="entry-meta">
                                    <span class="posted-on"><a>{{ $blog->created_at }}</a></span>
                                    <span class="byline">
                                        <span class="author vcard"><a class="url fn n">{{ $blog->user->name }}</a></span>
                                    </span>
                                </div><!-- .entry-meta -->

                                <h5 class="entry-title">
                                    <a class="title-link"
                                        href="{{ route('article.show',  $blog->slug )}}">{{$blog->title_en}}</a>
                                </h5>
                            </div><!-- .entry-header -->

                            <div class="the-excerpt">
                                {!! \Str::limit($blog->description_en, 40) !!}
                            </div><!-- .entry-content -->
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<section class="contact-page" id="contact">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 align-self-center mb-5 mb-lg-0">
                <div class="contact-left">
                    <h2 style="color: white;">Get in Touch</h2>
                    <p class="font14">Your email address will not be published. Required fields are marked *</p>
                    <form id="ajaxFormContact" action="{{ route('contact-post') }}" method="POST" class="wpcf7">
                        @csrf
                        <input type="hidden" name="page_id" value="1">
                        <div class="main-form">
                            <p>
                                <label for="name"> <span class="error" id="err-name">please enter name</span></label>
                                <input type="text" name="name" id="name" value="" size="40" class=""
                                    aria-invalid="false" placeholder="Your Name *" required>
                            </p>
                            <div style="color: red" id="nameError"></div>
                            <p>
                                <label for="phone"> <span class="error" id="err-phone">please enter name</span></label>
                                <input type="number" name="phone" id="phone" value="" size="40" class=""
                                    aria-invalid="false" placeholder="Your Phone *" required>
                            </p>
                            <div style="color: red" id="phoneError"></div>
                            <p>
                                <label for="email">
                                    <span class="error" id="err-emailvld">e-mail is not a valid format</span>
                                </label>
                                <input type="email" name="email" id="email" value="" size="40" class=""
                                    aria-invalid="false" placeholder="Your Email *" required>
                            </p>
                            <div style="color: red" id="emailError"></div>
                            <p>
                                <label for="message"></label>
                                <textarea name="message" id="message" cols="40" rows="10" class="" aria-invalid="false"
                                    placeholder="Message..." required></textarea>
                            </p>
                            <div style="color: red" id="messageError"></div>
                            <p><button class="octf-btn">Send Message</button></p>
                            <div id="successMessageContact" class="alert alert-success d-none" style="color: green">
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="contact-right">
                    <div class="ot-heading">
                        <span> our contact details </span>
                        <h2 class="main-heading">Let’s create something beautiful together</h2>
                    </div>
                    <p>Give us a call or drop by anytime, we endeavour to answer all enquiries within 24 hours on
                        business days. We will be happy to answer your questions.</p>
                    <div class="contact-info">
                        <i class="ot-flaticon-place"></i>
                        <div class="info-text">
                            <h6>OUR OFFICE:</h6>
                            <p><a href="{{ $settings['address'] }}" style="color:#c4c4c4;"
                                    onmouseover="this.style.color='white'" onmouseout="this.style.color='#c4c4c4'"> {{
                                    $settings['address'] }} </a></p>
                        </div>
                    </div>
                    <div class="contact-info">
                        <i class="ot-flaticon-mail"></i>
                        <div class="info-text">
                            <h6>OUR EMAIL:</h6>
                            <p><a href="mailto:{{ $settings['contact_email'] }}" style="color:#c4c4c4;"
                                    onmouseover="this.style.color='white'" onmouseout="this.style.color='#c4c4c4'">{{
                                    $settings['contact_email'] }}</a></p>
                        </div>
                    </div>
                    <div class="contact-info">
                        <i class="ot-flaticon-phone-call"></i>
                        <div class="info-text">
                            <h6>OUR PHONE:</h6>
                            <p><a href="tel:{{ $settings['phone'] }}" style="color:#c4c4c4;"
                                    onmouseover="this.style.color='white'" onmouseout="this.style.color='#c4c4c4'"> {{
                                    $settings['phone'] }} </a></p>
                            <p><a href="tel:{{ $settings['phone2'] }}" style="color:#c4c4c4;"
                                    onmouseover="this.style.color='white'" onmouseout="this.style.color='#c4c4c4'"> {{
                                    $settings['phone2'] }} </a></p>
                        </div>
                    </div>
                    <div class="list-social">
                        <ul>
                            <li><a class="face" href="{{ $settings['facebook_link'] }}" target="_blank"><i
                                        class="fab fa-facebook-f"></i></a></li>
                            <li><a class="insta" href="{{ $settings['instagram_link'] }}" target="_blank"><i
                                        class="fab fa-instagram"></i></a></li>
                            <li><a class="whats"
                                    href="https://api.whatsapp.com/send?phone={{ $settings['whatsapp_phone'] }}"
                                    target="_blank"><i class="fab fa-whatsapp"></i></a></li>
                            <li><a class="twit" href="{{ $settings['twitter_link'] }}" target="_blank"><i
                                        class="fab fa-twitter"></i></a></li>
                        </ul>
                        <br>
                        <ul>
                            <li><a class="linked" href="{{ $settings['linkedin_link'] }}" target="_blank"><i
                                        class="fab fa-linkedin-in"></i></a></li>
                            <li><a class="pint" href="{{ $settings['pinterest_link'] }}" target="_blank"><i
                                        class="fab fa-pinterest-p"></i></a></li>
                            <li><a class="behance" href="{{ $settings['behance_link'] }}" target="_blank"><i
                                        class="fab fa-behance"></i></a></li>
                            <li><a class="youtube" href="{{ $settings['youtube_link'] }}" target="_blank"><i
                                        class="fab fa-youtube"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="contact-map">
    <div class="map">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d1448.1752125194616!2d30.965027799999994!3d30.035916699999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMzDCsDAyJzA5LjMiTiAzMMKwNTcnNTQuMSJF!5e1!3m2!1sen!2seg!4v1745330392658!5m2!1sen!2seg"
            height="522" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    </div>
</div>
@endsection