@extends('front.layout.app')
@section('content')

    <section class="main-slider aboutBanner p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <!-- <div class="swiper-wrapper"> -->
            <div class="swiper-slide">
                <div class="slide-inner bg-image" data-background="{{asset('assets/images/aboutbg.jpg')}}">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="slideOne">
                                    <h1 data-swiper-parallax="-200">Travel Services</h1>
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb">
                                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                                            <li class="breadcrumb-item active" aria-current="page">Services</li>
                                        </ol>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <style>
        /* Square container styles with smooth background */
        .activity-wrap {
            background-color: #f0f0f0; /* Light grey background */
            border-radius: 10px; /* Rounded corners for a smoother look */
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for smooth elevation */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition effects */
        }

        .activity-wrap:hover {
            transform: translateY(-5px); /* Slight lift effect on hover */
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
        }

        .activity-content {
            text-align: center; /* Center the text inside each box */
        }

        .activity-content h3 {
            font-size: 24px;
            font-weight: 600;
            color: #333; /* Darker text for contrast */
            margin-bottom: 15px;
        }

        .activity-content p {
            font-size: 16px;
            color: #555; /* Slightly lighter color for the paragraph */
            line-height: 1.6;
        }

        .cta-button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 18px;
            border-radius: 30px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            display: inline-block;
            margin-top: 15px;
        }

        .cta-button:hover {
            background-color: #0056b3;
            transform: scale(1.1);
        }

        /* Add some creative effects on button focus */
        .cta-button:focus {
            outline: none;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
        }
        .custom-margin-bottom {
            margin-bottom: 30px; /* Adjust the bottom margin as needed */
        }
        .custom-padding {
            padding: 20px; /* Adjust padding for the wrap around the content */
        }
        .cta-button {
            margin-top: 10px; /* Adds space above the button */
        }
        /* For responsive design and ensuring boxes look good on mobile */
        @media (max-width: 767px) {
            .activity-wrap {
                margin-bottom: 20px;
            }
        }

    </style>
    <section class="owsome-tour blogsection">
        <div class="container">
            <div class="owsometop" data-aos="fade-up">

                <p>THESE ARE THE TRAVEL SERVICES WE OFFER TO HELP YOU PLAN THE PERFECT TRIP. FROM CUSTOMIZED ITINERARIES
                    AND EXCLUSIVE DEALS TO EXPERT RECOMMENDATIONS AND SEAMLESS BOOKING, WE PROVIDE PERSONALIZED TRAVEL
                    EXPERIENCES TAILORED TO YOUR NEEDS. WHETHER YOU'RE SEEKING A RELAXING GETAWAY, AN ADVENTUROUS
                    ESCAPE, OR A LUXURY VACATION, OUR TEAM IS DEDICATED TO ENSURING EVERY DETAIL IS TAKEN CARE OF, SO
                    YOU CAN TRAVEL WITH EASE AND CONFIDENCE.</p>
            </div>

            <div class="container">
                <div class="row align-items-center">
                    @foreach($services as $service)
                        <div class="col-md-6 custom-margin-bottom" data-aos="fade-up">
                            <div class="activity-wrap custom-padding">
                                <div class="activity-content">
                                    <h3>{{ $service->name }}</h3>
                                    <p>{!! $service->short_description !!}</p>
                                    <a href="{{ route('services-details.front', $service->id) }}" class="cta-button">$ {{ $service->amount }}</a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>



        </div>

    </section>


@endsection