@extends('frontend.layouts.app') @section('content')
<!-- START SECTION RECENTLY PROPERTIES -->
<section class="recently portfolio bg-white-3">
    <div class="container-fluid recently-slider custom-recent-portfolio">
        <div class="section-title">
            <h3>Vacation Rentals</h3>
            <h2>in Dubai</h2>
        </div>
        <div class="portfolio right-slider">
            <div class="owl-carousel home5-right-slider">
                @foreach ($vacational_rent as $row)
                <div class="inner-box">
                    <a href="{{ $row['link'] }}" class="recent-16" data-aos="fade-up" data-aos-delay="250">
                        <div class="recent-img16 img-center" onerror="this.onerror=null; this.src='{{ asset('frontend/images/interior/p-1.jpg') }}'" style="background-image: url({{ $row['image'] }});"></div>
                        <div class="recent-content"></div>
                        <div class="recent-details">
                            <div class="recent-title">{{ $row['property_name'] }}</div>
                            @if($row['final_amount'] > 0)
                            <div class="recent-price">
                                {{ amount_currency($row['final_amount']) }}
                                <small>/{{ $row['deals_of_month'] == 1 ? 'Month' : 'Day'}}</small>
                            </div>
                            @endif @if ($row['discount_percentage'] > 0)
                            <div class="recent-price">{{ $row['discount_percentage'] }} <small>% OFF</small></div>
                            @endif @if ($row['discount_percentage'] > 0)
                            <div class="recent-price">
                                <strike>{{ amount_currency($row['amount']) }} <small>/{{ $row['deals_of_month'] == 1 ? 'Month' : 'Day'}}</small></strike>
                            </div>
                            @endif
                            <div class="house-details">{{ $row['bed'] == 0 ? 'Studio' : $row['bed'] }} <span>|</span> {{ $row['bath'] }} <span>|</span> {{ $row['sqft'] }}</div>
                        </div>
                        <div class="view-proper">View Details</div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
<!-- START SECTION INFO -->
<section _ngcontent-bgi-c3="" class="featured-boxes-area">
    <div _ngcontent-bgi-c3="" class="container">
        <div _ngcontent-bgi-c3="" class="featured-boxes-inner">
            @include('frontend.partials.service_list') @if($services->count() > 12)
            <a href="{{route('listing')}}" class="btn button view-btn">view all</a>
            <br />
            @endif
        </div>
    </div>
</section>
<style>
    #popular-places .owl-nav {
        display: block !important;
    }

    #popular-places .owl-nav .owl-next,
    #popular-places .owl-nav .owl-prev {
        background: #fff;
        color: inherit;
        border: 1px solid #e5e8ef;
        padding: 0 !important;
        font-size: 12px;
        width: 30px;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        outline: none;
        border-radius: 50%;
    }

    #popular-places .owl-nav .owl-prev {
        position: absolute;
        left: -30px;
        top: 45%;
        background: #686D52 !important;
        border-color: #686D52 !important;
        color: #fff !important;
        transition: 0.5s all ease-in-out;
        width: 54px;
        height: 54px;
        font-size: 24px;
    }

    #popular-places .owl-nav .owl-next .fa-long-arrow-right,
    #popular-places .owl-nav .owl-prev .fa-long-arrow-left {
        font-weight: 900;
    }

    #popular-places .owl-nav .owl-next {
        position: absolute;
        right: -30px;
        top: 45%;
        background: #686D52!important;
        border-color: #686D52!important;
        color: #fff !important;
        transition: 0.5s all ease-in-out;
        width: 54px;
        height: 54px;
        font-size: 24px;
    }

    #popular-places .owl-nav .owl-next:hover,
    #popular-places .owl-nav .owl-prev:hover {
        background: #D6BF80 !important;
        border-color: #D6BF80 !important;
        color: #686D52 !important;
    }

    @media (max-width: 600px) {
        .popular-item {
            padding: 10px;
        }

        #popular-places .owl-nav .owl-prev {
            left: 0px !important;
            width: 40px;
            height: 40px;
            font-size: 16px;
        }

        #popular-places .owl-nav .owl-next {
            right: 0px !important;
            width: 40px;
            height: 40px;
            font-size: 16px;
        }
    }
</style>

<!-- START SECTION POPULAR PLACES -->
<section class="popular-places bg-white-1">
    <div class="container">
        <div class="sec-title">
            <!-- <h2><span>Short Term Rental Areas </span> in Dubai</h2> -->
            <h2>Short Term Rental Areas in Dubai</h2>
            <p>Check out the popular locations offering accommodations on short term rental</p>
        </div>
        <div class="row">
            <div id="popular-places" class="owl-carousel owl-theme" data-aos="zoom-in" data-aos-delay="150">
                @foreach ($areas as $row)

                <div class="popular-item">
                    <!-- Image Box -->
                    <a href="{{ url('listing') }}?area_id={{ $row->id }}" class="img-box hover-effect">
                        <img src="{{ public_url('uploads/banner_image/') . $row->banner_image }}" class="img-responsive" alt="" />
                        <!-- Badge -->
                        @if ($row->featured)
                        <div class="listing-badges">
                            <span class="featured">Featured</span>
                        </div>
                        @endif
                        <div class="img-box-content visible">
                            <h4>{{ $row->name_en }}</h4>
                            <span>{{ $row->properties_count }} Verified Properties</span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
<!-- END SECTION POPULAR PLACES -->

<!-- START SECTION INFO-HELP -->
{{--<section class="info-help h17" style="display: none;">
    <div class="container">
        <div class="row info-head">
            <div class="col-lg-6 col-md-8 col-xs-8" data-aos="fade-right">
                <div class="info-text">
                    <h3>Apartment for rent</h3>
                    <h5 class="mt-3">$6,400/month</h5>
                    <p class="pt-2">We Help you find the best places and offer near you. Bring to the table win-win survival strategies to ensure proactive domination going forward.</p>
                    <div class="inf-btn pro">
                        <a href="route('home')" class="btn btn-pro btn-secondary btn-lg">Get Started</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>--}}

<section class="recently portfolio bg-white-1">
    <div class="container-fluid recently-slider">
        <div class="section-title">
            <h3>Recommended Vacation Rentals</h3>
            <h2>in Dubai</h2>
        </div>
        <div class="portfolio right-slider">
            <div class="owl-carousel home5-right-slider">
                @foreach ($recommended_vacational_rent as $row)
                <div class="inner-box">
                    <a href="{{ $row['link'] }}" class="recent-16" data-aos="fade-up" data-aos-delay="250">
                        <div class="recent-img16 img-center" onerror="this.onerror=null; this.src='{{ asset('frontend/images/interior/p-1.jpg') }}'" style="background-image: url({{ $row['image'] }});"></div>
                        <div class="recent-content"></div>
                        <div class="recent-details">
                            <div class="recent-title">{{ $row['property_name'] }}</div>
                            @if($row['final_amount'] > 0)
                            <div class="recent-price">
                                {{ amount_currency($row['final_amount']) }}
                                <small>/{{ $row['deals_of_month'] == 1 ? 'Month' : 'Day'}}</small>
                            </div>
                            @endif
                            <div class="house-details">{{ $row['bed'] == 0 ? 'Studio' : $row['bed'] }} <span>|</span> {{ $row['bath'] }} <span>|</span> {{ $row['sqft'] }}</div>
                        </div>
                        <div class="view-proper">View Details</div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
<!-- END SECTION RECENTLY PROPERTIES -->

<!-- START SECTION RECENTLY PROPERTIES -->
<section class="recently portfolio bg-white-2">
    <div class="container-fluid recently-slider">
        <div class="section-title">
            <h3>Luxury Apartment</h3>
            <h2>in Dubai</h2>
        </div>
        <div class="portfolio right-slider">
            <div class="owl-carousel home5-right-slider">
                @foreach ($luxury as $row)
                <div class="inner-box">
                    <a href="{{ $row['link'] }}" class="recent-16" data-aos="fade-up" data-aos-delay="250">
                        <div class="recent-img16 img-center" onerror="this.onerror=null; this.src='{{ asset('frontend/images/interior/p-1.jpg') }}'" style="background-image: url({{ $row['image'] }});"></div>
                        <div class="recent-content"></div>
                        <div class="recent-details">
                            <div class="recent-title">{{ $row['property_name'] }}</div>
                            @if($row['final_amount'] > 0)
                            <div class="recent-price">
                                {{ amount_currency($row['final_amount']) }}
                                <small>/{{ $row['deals_of_month'] == 1 ? 'Month' : 'Day'}}</small>
                            </div>
                            @endif
                            <div class="house-details">{{ $row['bed'] == 0 ? 'Studio' : $row['bed'] }} <span>|</span> {{ $row['bath'] }} <span>|</span> {{ $row['sqft'] }}</div>
                        </div>
                        <div class="view-proper">View Details</div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
<!-- END SECTION RECENTLY PROPERTIES -->
<!-- START SECTION AGENTS -->
{{--<section class="team bg-white-3" style="display: none;">
    <div class="container-fluid recently-slider">
        <div class="section-title">
            <h3>Meet Our</h3>
            <h2>Agents</h2>
        </div>
        <div class="row">
            <div class="owl-carousel home5-right-slider">
                <!--Team Block-->
                <div class="team-block" data-aos="fade-up" data-aos-delay="150">
                    <div class="inner-box team-details">
                        <div class="image team-head">
                            <a href="route('home')"><img src="{{ asset('frontend/images/team/t-5.jpg') }}" alt="" /></a>
                            <div class="team-hover">
                                <ul class="team-social">
                                    <li>
                                        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lower-box">
                            <h3><a href="route('home')">Carls Jhons</a></h3>
                            <div class="designation">Real Estate Agent</div>
                        </div>
                    </div>
                </div>
                <!--Team Block-->
                <div class="team-block" data-aos="fade-up" data-aos-delay="250">
                    <div class="inner-box team-details">
                        <div class="image team-head">
                            <a href="route('home')"><img src="{{ asset('frontend/images/team/t-6.jpg') }}" alt="" /></a>
                            <div class="team-hover">
                                <ul class="team-social">
                                    <li>
                                        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lower-box">
                            <h3><a href="route('home')">Arling Tracy</a></h3>
                            <div class="designation">Real Estate Agent</div>
                        </div>
                    </div>
                </div>
                <!--Team Block-->
                <div class="team-block pb-none" data-aos="fade-up" data-aos-delay="350">
                    <div class="inner-box team-details">
                        <div class="image team-head">
                            <a href="route('home')"><img src="{{ asset('frontend/images/team/t-7.jpg') }}" alt="" /></a>
                            <div class="team-hover">
                                <ul class="team-social">
                                    <li>
                                        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lower-box">
                            <h3><a href="route('home')">Mark Web</a></h3>
                            <div class="designation">Real Estate Agent</div>
                        </div>
                    </div>

                    <!--Team Block-->
                    <div class="team-block pb-none" data-aos="fade-up" data-aos-delay="450">
                        <div class="inner-box team-details">
                            <div class="image team-head">
                                <a href="route('home')"><img src="{{ asset('frontend/images/team/t-8.jpg') }}"
                                        alt="" loading="lazy"/></a>
                                <div class="team-hover">
                                    <ul class="team-social">
                                        <li>
                                            <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="lower-box">
                                <h3><a href="route('home')">Katy Grace</a></h3>
                                <div class="designation">Real Estate Agent</div>

                            </div>
                        </div>
                        <div class="lower-box">
                            <h3><a href="route('home')">Katy Grace</a></h3>
                            <div class="designation">Real Estate Agent</div>
                        </div>
                    </div>
                </div>
                <div class="team-block pb-none" data-aos="fade-up" data-aos-delay="550">
                    <div class="inner-box team-details">
                        <div class="image team-head">
                            <a href="route('home')"><img src="{{ asset('frontend/images/team/team-image-2.jpg') }}" alt="" /></a>
                            <div class="team-hover">
                                <ul class="team-social">
                                    <li>
                                        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lower-box">
                            <h3><a href="route('home')">Chris Melo</a></h3>
                            <div class="designation">Real Estate Agent</div>
                        </div>
                    </div>
                </div>
                <div class="team-block pb-none" data-aos="fade-up" data-aos-delay="650">
                    <div class="inner-box team-details">
                        <div class="image team-head">
                            <a href="route('home')"><img src="{{ asset('frontend/images/team/team-image-7.jpg') }}" alt="" /></a>
                            <div class="team-hover">
                                <ul class="team-social">
                                    <li>
                                        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
                                    </li>
                                    <li>
                                        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lower-box">
                            <h3><a href="route('home')">Nina Thomas</a></h3>
                            <div class="designation">Real Estate Agent</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
--}}
<!-- END SECTION AGENTS -->

<!-- START SECTION BLOG -->
{{--<section class="blog-section bg-white" style="display: none;">
    <div class="container">
        <div class="sec-title">
            <h2><span>Articles &amp; </span>Tips</h2>
            <p>Read the latest news from our blog.</p>
        </div>
        <div class="news-wrap">
            <div class="row">
                <div class="col-xl-4 col-md-6 col-xs-12">
                    <div class="news-item" data-aos="fade-up" data-aos-delay="150">
                        <a href="route('home')" class="news-img-link">
                            <div class="news-item-img">
                                <img class="img-responsive" src="{{ asset('frontend/images/blog/b-10.jpg') }}" alt="blog image" />
                            </div>
                        </a>
                        <div class="news-item-text">
                            <a href="route('home')">
                                <h3>Explore The World</h3>
                            </a>
                            <div class="dates">
                                <span class="date">April 11, 2020 &nbsp;/</span>
                                <ul class="action-list pl-0">
                                    <li class="action-item pl-2"><i class="fa fa-heart"></i> <span>306</span></li>
                                    <li class="action-item"><i class="fa fa-comment"></i> <span>34</span></li>
                                    <li class="action-item"><i class="fa fa-share-alt"></i> <span>122</span></li>
                                </ul>
                            </div>
                            <div class="news-item-descr big-news">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ipsum dolor sit amet, consectetur.</p>
                            </div>
                            <div class="news-item-bottom">
                                <a href="route('home')" class="news-link">Read more...</a>
                                <div class="admin">
                                    <p>By, Karl Smith</p>
                                    <img src="{{ asset('frontend/images/testimonials/ts-6.jpg') }}" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 col-xs-12">
                    <div class="news-item" data-aos="fade-up" data-aos-delay="250">
                        <a href="route('home')" class="news-img-link">
                            <div class="news-item-img">
                                <img class="img-responsive" src="{{ asset('frontend/images/blog/b-11.jpg') }}" alt="blog image" />
                            </div>
                        </a>
                        <div class="news-item-text">
                            <a href="route('home')">
                                <h3>Find Good Places</h3>
                            </a>
                            <div class="dates">
                                <span class="date">May 20, 2020 &nbsp;/</span>
                                <ul class="action-list pl-0">
                                    <li class="action-item pl-2"><i class="fa fa-heart"></i> <span>306</span></li>
                                    <li class="action-item"><i class="fa fa-comment"></i> <span>34</span></li>
                                    <li class="action-item"><i class="fa fa-share-alt"></i> <span>122</span></li>
                                </ul>
                            </div>
                            <div class="news-item-descr big-news">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ipsum dolor sit amet, consectetur.</p>
                            </div>
                            <div class="news-item-bottom">
                                <a href="route('home')" class="news-link">Read more...</a>
                                <div class="admin">
                                    <p>By, Lis Jhonson</p>
                                    <img src="{{ asset('frontend/images/testimonials/ts-5.jpg') }}" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 col-xs-12">
                    <div class="news-item no-mb" data-aos="fade-up" data-aos-delay="350">
                        <a href="route('home')" class="news-img-link">
                            <div class="news-item-img">
                                <img class="img-responsive" src="{{ asset('frontend/images/blog/b-12.jpg') }}" alt="blog image" />
                            </div>
                        </a>
                        <div class="news-item-text">
                            <a href="route('home')">
                                <h3>All Places In Town</h3>
                            </a>
                            <div class="dates">
                                <span class="date">Jun 30, 2020 &nbsp;/</span>
                                <ul class="action-list pl-0">
                                    <li class="action-item pl-2"><i class="fa fa-heart"></i> <span>306</span></li>
                                    <li class="action-item"><i class="fa fa-comment"></i> <span>34</span></li>
                                    <li class="action-item"><i class="fa fa-share-alt"></i> <span>122</span></li>
                                </ul>
                            </div>
                            <div class="news-item-descr big-news">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ipsum dolor sit amet, consectetur.</p>
                            </div>
                            <div class="news-item-bottom">
                                <a href="route('home')" class="news-link">Read more...</a>
                                <div class="admin">
                                    <p>By, Ted Willians</p>
                                    <img src="{{ asset('frontend/images/testimonials/ts-4.jpg') }}" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
--}}
<!-- END SECTION BLOG -->

<!-- Client Reviews Starts Here-->

<style > 
    .testimonial-client {
        padding: 60px 20px 60px;
    }
    .client-testimonial-title {
        text-align: center;
        margin-bottom: 30px;
    }
    .client-testimonial-title h2 span {
        color: #686d52;
    }
    .client-inner {
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: space-between;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        /* align-content: center; */
        text-align: center;
    }

    .client-img {
        margin-right: 20px;
    }

    .client-img img {
        border-radius: 50%;
        width: 80px !important;
        height: auto;
    }

    .client-info {
        position: relative;
        padding: 25px 25px 25px 10px;
        background: url("{{ asset('website-assets/images/testimonial-quote.svg')}}") no-repeat right 10px top 10px;
        background-size: 20px;
    }
    .testimonial-client .owl-carousel .owl-item .client-info img {
        width: 80px !important;
        height: auto !important;
    }

    .client-info h3 {
        font-size: 18px;
    }

    .client-info h4 {
        font-size: 16px;
    }

    .client-info p {
        font-size: 12px;
        line-height: 2;
        margin-bottom: 0 !important;
    }

    .readmore-btn {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .readmore-btn a {
        text-decoration: none;
    }
    .rating {
        display: flex;
        justify-content: center;
        align-items: baseline;
    }

    .rating h3 {
        margin-bottom: 0;
        margin-right: 10px;
    }
    .rating h3 {
        font-size: 16px;
    }
    .rating h3 span {
        font-size: 36px;
    }

    .rating img {
        margin-left: 20px;
    }

    .rating img {
        width: 80px !important;
    }

    .bg {
        /*background: #fff;*/
        /*right: 0;*/
        /*width: 82%;*/
        /*position: absolute;*/
        /*height: 100%;*/
        /*-webkit-box-shadow: 0 0 40px 0 rgb(0 0 0 / 6%);*/
        /*-moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, .06);*/
        /*box-shadow: 0 0 40px 0 rgb(0 0 0 / 6%);*/
        /*z-index: -1;*/
    }

    .testimonial-client .owl-carousel .owl-nav .owl-next,
    .testimonial-client .owl-carousel .owl-nav .owl-prev,
    .testimonial-client .owl-carousel .owl-dot {
        background: #fff;
        color: inherit;
        border: 1px solid #e5e8ef;
        padding: 0 !important;
        font-size: 12px;
        width: 30px;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        outline: none;
        border-radius: 50%;
    }

    .testimonial-client .owl-nav {
        display: block !important;
    }

    .testimonial-client .owl-carousel .owl-nav .owl-prev {
        position: absolute;
        left: -15px !important;
        top: 35%;
        background: #686d52 !important;
        border-color: #686d52 !important;
        color: #fff !important;
        transition: 0.5s all ease-in-out;
        width: 54px;
        height: 54px;
    }

    .testimonial-client .owl-carousel .owl-nav .owl-next {
        position: absolute;
        right: -15px !important;
        top: 35%;
        background: #686d52 !important;
        border-color: #686d52 !important;
        color: #fff !important;
        transition: 0.5s all ease-in-out;
        width: 54px;
        height: 54px;
    }

    .testimonial-client .owl-carousel .owl-nav .owl-next,
    .testimonial-client .owl-carousel .owl-nav .owl-prev {
        font-size: 0;
    }
    .testimonial-client .owl-carousel .owl-nav .owl-next:hover,
    .testimonial-client .owl-carousel .owl-nav .owl-prev:hover {
        background: #d6bf80 !important;
        border-color: #d6bf80 !important;
        color: #686d52 !important;
    }

    .testimonial-client .owl-carousel .owl-prev i,
    .testimonial-client .owl-carousel .owl-next i {
        font-size: 20px;
    }
    @media (max-width: 992px) {
        .testimonial-client .row {
            padding: 0px !important;
            margin: 0px !important;
        }
    }

    @media (max-width: 599px) {
        .client-inner {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center !important;
            text-align: center !important;
        }
        .rating {
            display: flex;
            align-items: flex-end !important;
            justify-content: center !important;
        }
        .bg {
            display: none !important;
        }
        .testimonial-client {
          padding:  20px 10px 20px; !important;
        }
        .testimonial-client .container {
            padding: 0px !important;
            margin: 0px !important;
        }
        .testimonial-client .owl-carousel .owl-nav .owl-prev,
        .testimonial-client .owl-carousel .owl-nav .owl-next {
            width: 40px !important;
            height: 40px !important;
        }
    }
</style>
@if($client_testimonials->count() > 0)
<div class="container-fluid testimonial-client">
    <div class="container">
        <div class="client-testimonial-title">
            <h2>What <span>People</span> Are Saying</h2>
        </div>
        <div class="row owl-carousel" id="client-testimonial-slider">
            @foreach ($client_testimonials as $key => $testimonial)
            <div class="col-lg-12">
                <div class="item">
                    <div class="client-inner">
                        <div class="client-img">
                            @if($testimonial->image)
                            <img src="{{$testimonial->image}}" alt="" />
                            @else
                            <img src="{{asset('frontend/images/user_avatar.png')}}" class="img-fluid" alt="" />
                            @endif
                        </div>
                        <div class="client-info">
                            <h3>{{$testimonial->name}}</h3>
                            <h6>{{$testimonial->designation}}</h6>
                            <p>{{short_description($testimonial->desc_en,20)}}</p>
                            <div class="rating">
                                <h3><span>{{$testimonial->ratings}}</span>/ 5</h3>
                                <span>via</span>
                                @if($testimonial->brand)
                                <img src="{{$testimonial->brand->image}}" data-toggle="tooltip" data-placement="bottom" title="{{$testimonial->brand->text_en}}" alt="" />
                                @endif
                            </div>
                        </div>
                        <div class="bg"></div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

<!-- Client Reviews Ends Here-->

<!-- STAR SECTION PARTNERS -->
@if ($partners->count() > 0)
<div class="partners bg-white-3">
    <div class="container">
        <div class="sec-title">
            <h2><span>Our </span>Partners</h2>
            <p>The Companies That Represent Us.</p>
        </div>
        <div class="owl-carousel style2">
            @foreach ($partners as $row)
            <div class="owl-item" data-aos="fade-up"><img src="{{ public_url() . $row->image }}" alt="{{ $row->name }}" /></div>
            @endforeach
        </div>
    </div>
</div>
@endif
<!-- END SECTION PARTNERS -->
@endsection @section('script') @endsection