@extends('layouts.app')

@section('content')
<div data-bgimage="url({{ asset('front/images/background/bg-service-3.jpg')}}) top center" class="text-light" data-stellar-background-ratio=".1" style="display: block; background: url(&quot;images-photography/bg/1.jpg&quot;) 50% 0px;">

    <!-- subheader begin -->
        <section class="no-bg" style="background-size: cover;">
            <div class="container" style="background-size: cover;">
                <div class="row" style="background-size: cover;">
                    <div class="col-md-12 text-center" style="background-size: cover;">
                        <h1 class="title-2">About Us</h1>
                    </div>
                </div>
            </div>
        </section>    
    <!-- subheader close -->
    
    <!-- content begins -->
        <div id="content" class="no-bg no-top no-bottom" style="background-size: cover;">
            <section id="section-about-us-2" class="no-bg no-top no-bottom side-bg no-padding" style="background-size: cover;">
                <div class="container-fluid" style="background-size: cover;">
                    <div class="row" style="background-size: cover;">
                        
                        <div class="col-md-10 m-auto mb-5 bg-color text-dark" data-animation="fadeInRight" style="background-size: cover;">
                            <div class="padding80" style="background-size: cover;">
                                <!-- <h2 class="text-dark">Award Winning Photography</h2> -->
                                <p>
                                   Trusthaven Interior Developers is a premium amalgamation of design & execution. We take projects beyond the ordinary and develop interior spaces as a whole by providing all that is required. Planning, designing, drawings, procurement, management, execution, restoration, furnishings and more, as an individual or a complete solution, Trust Heaven is a trustworthy answer to every interior.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            @if(!empty($abouts))
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6" data-animation="fadeInRight" data-bgcolor="#111111">
                            <div class="padding80">
                                <h2 class="text-white">{{$abouts[0]->title}}</h2>
                                <div>
                                    {{ $abouts[0]->description }}
                                </div>
                               <!--  <div id="testimonial-carousel-single" class="owl-carousel owl-theme wow fadeInUp">
                                    @if(!empty($abouts))
                                        @foreach($abouts as $about)
                                            <blockquote class="testimonial-big s2">
                                                <span class="title">{{$about->title }}</span>
                                                {{ $about->description }}
                                                 <span class="name">John, Customer</span> 
                                            </blockquote>
                                        @endforeach
                                    @endif
                                </div> -->
                            </div>
                        </div>
                        <div class="col-md-6 " data-animation="fadeInRight">
                            <div class="d-flex align-items-center justify-content-center h-100">
                                <img src="{{ asset($abouts[0]->image) }}" style="max-height: 350px;margin: 25px 0;" class="img-fluid">
                            </div>
                        </div>
                    </div>
                     <div class="row">
                       
                        <div class="col-md-6 " data-animation="fadeInRight">
                            <div class="d-flex align-items-center justify-content-center h-100">
                                <img src="{{ asset($abouts[1]->image) }}" style="max-height: 350px;margin: 25px 0;" class="img-fluid">
                            </div>
                        </div>
                         <div class="col-md-6" data-animation="fadeInRight" data-bgcolor="#111111">
                            <div class="padding80">
                                <h2 class="text-white">{{$abouts[1]->title}}</h2>
                                <div>
                                    {{ $abouts[1]->description }}
                                </div>
                               <!--  <div id="testimonial-carousel-single" class="owl-carousel owl-theme wow fadeInUp">
                                    @if(!empty($abouts))
                                        @foreach($abouts as $about)
                                            <blockquote class="testimonial-big s2">
                                                <span class="title">{{$about->title }}</span>
                                                {{ $about->description }}
                                                 <span class="name">John, Customer</span> 
                                            </blockquote>
                                        @endforeach
                                    @endif
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            </section>
    <!-- content ends -->
</div>
@endsection

@section('js')
    
@endsection