@extends('layouts.web_master')
@section('header-content')

  <div class="header-blog" style="background-image: url('{{asset($banner->about_banner)}}'); background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;">
        <section class="hero">
            <div class="container">
                <div class="row justify-content-center mt-5">
                    <div class="col-lg-11 col-md-12 text-center aos-init aos-animate" data-aos="fade">
                        <h2>About Us</h2>
                        <div class="d-flex justify-content-center gap-4 pt-4">
                            <nav aria-label="breadcrumb">
                                <div class="breadcrumb d-flex gap-4 align-items-center">
                                    <div class="breadcrumb-item"><a href="index.html">Home</a></div>
                                    <i class="fa-solid fa-angles-right"></i>
                                    <div class="breadcrumb-item" aria-current="page">About</div>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection
<style>
    .overlay {
        height: 347px !important;
    }
</style>
@section('main-content')
    <!-- ====== 1.4 about section ====== -->
    <section id="about">
        <div class="container  mt-0 pt-lg-5 pt-md-4 pt-0">
            <div class="row">
                <div class="col-lg-8 col-md-9">

                    <div class="col-lg-10 col-md-9 aos-init aos-animate" data-aos="fade" data-aos-duration="2000">
                        <div>
                            <h4>About Us</h4>
                            <h2>{{ $about->title }}</h2>
                            <div style="text-align: justify">{!! $about->details !!}</div>
                            <div class="globalBtnActive justify-content-md-start justify-content-center mt-3">
                                <ul>
                                    <li>
                                        <a href="{{ route('tourPackages') }}"> Destinations
                                            <span></span><span></span><span></span><span></span>
                                            <i class="fa-solid fa-arrow-right"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-9 col-12 about-Image about-img" style="margin-top:120px">
                    <div class="aboutImg position-relative" data-aos="fade-up">
                        <figure>
                            <img src="{{ asset($about->image) }}" alt="about-sec">
                        </figure>
                        <div class="customer d-flex flex-column justify-content-between align-items-center">
                            <div class="d-flex">
                                <h2 class="count">{{ $about->no_of_client }} </h2>
                                <h2>+</h2>
                            </div>
                            <p>Happy Customers</p>
                        </div>
                        <div class="experience d-flex flex-column justify-content-between align-items-center"
                            data-aos="fade-up">
                            <div class="d-flex">
                                <h2 class="count">{{ $about->year_of_experience }}</h2>
                                <h2>+</h2>
                            </div>
                            <p>Years of experience</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 1.4 about section ====== -->

    <!-- ====== 1.9 what we do section ====== -->
    <section id="weDo" class="weDo">
        <div class="container">
            <div class="row">
                <div class="col-md-6 d-flex justify-content-center">
                    <div class="weDo-video">
                        <div>
                            <a class="video-play-button" href="{{ $video->video_link }}" target="_blank">
                                <span class="fa-solid fa-play"></span>
                            </a>
                        </div>
                        <figure><img src="{{ asset($video->image) }}" alt="weDo" style="height:660px"></figure>
                    </div>
                </div>
                <div class="col-md-6 d-flex justify-content-center align-content-center">
                    <div class="weDo-content d-flex flex-column justify-content-center align-items-start">
                        <div data-aos="fade" data-aos-duration="2000" class="aos-init aos-animate">
                            <h4>What We Do</h4>
                            <h2>{{ $video->title }}</h2>
                            <p>{{ $video->short_description }}</p>
                        </div>
                        <div class="globalBtnActive mt-3 aos-init aos-animate" data-aos="fade" data-aos-duration="2000">
                            <ul>
                                <li>
                                    <a href="{{ route('contact') }}"> Contact Us
                                        <span></span><span></span><span></span><span></span>
                                        <i class="fa-solid fa-arrow-right"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 1.9 what we do section ====== -->

    <!-- ====== 1.7 why choose us section ====== -->
    <section id="choose">
        <div class="chooseBg">
            <div class="position-relative z-2" data-aos="fade" data-aos-duration="2000">
                <h4>Why choose us</h4>
                <h2>Let Us Show You The Beauty
                    Of The World</h2>
                <div class="globalBtn mt-lg-5 mt-md-5">
                    <ul>
                        <li>
                            <a href="{{ route('contact') }}">contact us
                                <span></span><span></span><span></span><span></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="chooseCrads position-relative z-2">
            <div class="container">
                <div class="row gap-md-0 gap-4 justify-content-center card-text">
                    @foreach ($speciality as $key => $item)
                        <div class="col-lg-3 col-md-4" data-aos="fade-up" data-aos-delay="{{ 100 + $key * 100 }}">
                            <div>
                                <figure>
                                    <img src="{{ asset($item->icon) }}" alt="chooseIcon">
                                </figure>
                                <h6>{{ $item->title }}</h6>
                                <p style="text-align: justify">
                                    {{ Str::limit($item->short_description, 130, '...') }}
                                </p>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 1.7 why choose us section ====== -->

    <!-- ====== 1.10 our team section ====== -->
    <section id="team">
        <div class="container">
            <div data-aos="fade" data-aos-duration="2000">
                <h4>Our Team</h4>
                <h2>Experience The World With Us</h2>
            </div>

            <div class="row justify-content-md-between justify-content-center gap-md-0 gap-4">

                @foreach ($team as $key => $item)
                    <div class=" col-md-4 col-sm-8 col-10" data-aos="fade-up" data-aos-delay="{{ 100 + $key * 200 }}">
                        <div class="teamCard">
                            <img src="{{ asset($item->image) }}" alt="teamimg">
                            <div class="overlaythree">
                                <div class="overlay_text">
                                    <div class="d-flex justify-content-center gap-2">

                                        <a href="mailto:{{ $item->email }}" target="_blank"><i
                                                class=" fa-regular fa-envelope"></i></a>
                                        <a href="tel:{{ $item->phone }}" target="_blank"><i
                                                class="fa-solid fa-phone"></i></a>
                                        <a href="{{ $item->facebook }}" target="_blank"><i
                                                class="fa-brands fa-facebook-f"></i></a>
                                        <a href="{{ $item->twitter }}" target="_blank"><i
                                                class="fa-brands fa-twitter"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h6>{{ $item->name }}</h6>
                            <p>{{ $item->designation }}</p>
                        </div>
                    </div>
                @endforeach

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

    <!-- ====== End 1.10 our team section ====== -->

    <!-- ====== 1.14 start planning section ====== -->
    <section id="planning">
        <div class="planningContent aos-init aos-animate" data-aos="fade" data-aos-duration="2000">
            <h3>Start Planning Your Trip Now and <span>Get {{ $offer->discount_one }} Discount</span></h3>
            <p>{{ $offer->short_description_one }}</p>
            <div class="globalBtn mt-lg-4 mt-3">
                <ul>
                    <li>
                        <a href="{{route('contact')}}">Book Now
                            <span></span><span></span><span></span><span></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== End 1.14 start planning section ====== -->
@endsection