@extends('layouts.app')
@section('site_title', 'Explore Top Tourist Places in Goa')
@section('site_description',
    'Discover top tourist places in Goa, from pristine beaches to historic forts. Plan your
    visit with our detailed guide to Goas must-see attractions.')
@section('site_keywords',
    'Goa Tourist Places, Top Attractions In Goa, Best Places To Visit In Goa, Goa Tourism, Popular
    Goa Destinations, Must-See Places In Goa')
@section('content')

    <!-- Header start-->
    @include('layouts.header')
    <!-- Header end-->

    <!-- Menu slide start-->
    @include('layouts.menu')
    <!-- Menu slide end -->

    <!-- Inner Page Banner Section -->
    <div class="container-fluid page-header bannerBg-goa-tourist-places py-5">
        <div class="container text-center ">
            <h1 class="page-title-header">Goa Tourist Places</h1>
        </div>
    </div>

    <!-- Inner Page Banner Section -->

    {{-- <div class="col-lg-12 mt-5 static-content">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                    <p>Goa Tourist Places
                        Goa is a state in western India with coastlines stretching along the Arabian Sea. Its long history
                        as a Portuguese colony prior to 1961 is evident in its preserved 17th-century churches and the
                        area's tropical spice plantations. Goa is also known for its beaches, ranging from popular stretches
                        at Baga and Palolem to those in laid-back fishing villages such as Agonda.
                    </p>
                    <p>
                        The multi-religious fabric of Goa's society shines brightly, imbibed with the spirit of “Sarva
                        Dharma, Sama Bhava” or Equal Respect for all Religions. Today, Goa has one of India's highest
                        per-capita incomes, with farming, fishing, tourism and iron-ore mining forming the basis of its
                        economy.
                    </p>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                    <p>
                        <img src="{{ asset('images/about-us/goa.jpg') }}" alt="image" class="img-fluid">
                    </p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-lg-12 mt-5 ">
                    <div class="section-heading title-line mb-4">
                        <h2>Unesco Heritage Monuments</h2>
                    </div>
                    <div class="row">
                        @foreach ($gtp as $value)
                            <div class="col-md-4 col-sm-4 col-xs-12 d-flex">
                                <div class="card shadow-sm">
                                    <div class="card-image">
                                        <img src="{{ asset('images/about-us/' . $value->image) }}" alt="image"
                                            class="img-fluid">
                                    </div>
                                    <div class="card-body text-start">
                                        <h4 class="title">{{ $value->title }}</h4>
                                        <p>{!! $value->description !!}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 mt-5 ">
                    <div class="section-heading title-line mb-4">
                        <h2>Other Unesco Heritage Sites In Goa</h2>
                    </div>

                    <div class="owl-carousel ">
                        @foreach ($gtpu11 as $item)
                            <div class=" item d-flex ">
                                <div class="card shadow-sm">
                                    <div class="card-image">
                                        <img src="{{ asset('images/about-us/' . $item->image) }}" alt="image"
                                            class="img-fluid">
                                    </div>
                                    <div class="card-body text-start title-height">
                                        <h4 class="title">{{ $item->title }}</h4>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
           
            <div class="row">
                <div class="col-lg-12 mt-5 ">
                    <div class="section-heading title-line mb-4">
                        <h2>Forts</h2>
                    </div>

                    <div class="row">
                        @foreach ($gtpp22 as $dd22)
                            <div class="col-md-6 col-sm-6 d-flex">
                                <div class="card shadow-sm">
                                    <div class="card-image min-img-height-card">
                                        <img src="{{ asset('images/about-us/' . $dd22->image) }}" alt="image"
                                            class="img-fluid">
                                    </div>
                                    <div class="card-body text-start">
                                        <h4 class="title">{{ $dd22->title }}</h4>
                                        <p>{!! $dd22->description !!}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </div>
    </div> --}}

    <div class="col-lg-12 mt-5 static-content">
        <div class="container">
            <div class="goa-section py-5">
                <div class="row align-items-center g-5">
                    <!-- Content -->
                    <div class="col-lg-6">
                        <div class="section-heading mb-4">
                            <span class="sub-title">Experience Goa</span>
                            <h2>Goa - The Heart of IFFI</h2>
                            <div class="heading-line"></div>
                        </div>

                        <p>
                            Goa Tourist Places Goa is a state in western India with coastlines stretching along the
                            Arabian Sea. Its long history as a Portuguese colony prior to 1961 is evident in its
                            preserved 17th-century churches and the area's tropical spice plantations. Goa is also known
                            for its beaches, ranging from popular stretches at Baga and Palolem to those in laid-back
                            fishing villages such as Agonda.
                        </p>

                        <p>
                            The multi-religious fabric of Goa's society shines brightly, imbibed with the spirit of
                            <strong>“Sarva Dharma, Sama Bhava” </strong>
                            or Equal Respect for all Religions. Today, Goa
                            has one of India's highest per-capita incomes, with farming, fishing, tourism and iron-ore
                            mining forming the basis of its economy.
                        </p>
                    </div>

                    <div class="col-lg-6">
                        <div class="goa-image position-relative">
                            <img src="{{ asset('images/about-us/goa.jpg') }}" class="img-fluid rounded-4 shadow-lg"
                                alt="Goa">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 mt-5 ">
                    <div class="section-heading title-line mb-4">
                        <h2>Unesco Heritage Monuments</h2>
                    </div>

                    <div class="row">

                        @foreach ($unescoHeritages as $value)
                            <div class="col-md-4 col-sm-4 col-xs-12 d-flex">
                                <div class="card shadow-sm">
                                    <div class="card-image">
                                        <img src="{{ asset('images/about-us/' . $value->image) }}" alt="image"
                                            class="img-fluid">
                                    </div>
                                    <div class="card-body text-start">
                                        <h4 class="title">{{ $value->title }}</h4>
                                        <p>{!! $value->description !!}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="row align-items-center g-4">
                <div class="col-lg-12 mt-5 ">
                    <div class="row align-items-center g-4">
                        <div class="col-md-3 col-sm-3 title-page">
                            <div class="country-title">
                                <h2>Other Unesco Heritage Sites In Goa</h2>
                            </div>
                        </div>

                        <div class="col-md-9 col-sm-9">
                            <div class="country-focus unesco">
                                @foreach ($otherUnescoHeritages as $value)
                                    <div class=" item d-flex ">
                                        <div class="card shadow-sm">
                                            <div class="card-image">
                                                <img src="{{ asset('images/about-us/' . $value->image) }}"
                                                    alt="image" class="img-fluid">
                                            </div>
                                            <div class="card-body text-start title-height">
                                                <h4 class="title">{{ $value->title }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 mt-5">
                    <div class="section-heading title-line mb-5">
                        <h2>Forts</h2>
                    </div>

                    <div class="row g-4">
                        @foreach ($forts as $value)
                            <div class="col-lg-6 col-md-6 d-flex">
                                <div class="fort-card w-100">
                                    <div class="fort-image">
                                        <img src="{{ asset('images/about-us/' . $value->image) }}" alt="image">
                                    </div>
                                    <div class="fort-content">
                                        <h4>{{ $value->title }}</h4>
                                        <p>{!! $value->description !!}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    .goa-section {
        background: #fff;
        border-radius: 25px;
        padding: 60px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
        position: relative;
    }

    .section-heading .sub-title {
        display: inline-block;
        color: #f5a623;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }

    .section-heading h2 {

        font-weight: 700;

        margin-bottom: 15px;
    }


    .goa-section p {
        color: #555;
        line-height: 1.9;

    }

    .goa-image {
        overflow: hidden;
        border-radius: 20px;
    }

    .goa-image img {
        width: 100%;
        transition: .6s;
    }

    .goa-image:hover img {
        transform: scale(1.05);
    }

    .image-badge {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: rgba(20, 36, 96, .92);
        color: #fff;
        padding: 12px 22px;
        border-radius: 40px;
        font-weight: 600;
        backdrop-filter: blur(10px);
    }

    .btn-goa {
        background: #2541b7;
        color: #fff;
        padding: 12px 28px;
        border-radius: 50px;
        font-weight: 600;
        transition: .3s;
    }

    .btn-goa:hover {
        background: #f5a623;
        color: #fff;
    }

    @media(max-width:991px) {

        .section-heading h2 {
            font-size: 32px;
        }

        .goa-section p {
            font-size: 16px;
        }

    }

    .fort-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        transition: .4s;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
        border: 1px solid #eee;
        display: flex;
        flex-direction: column;
    }

    .fort-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0, 0, 0, .15);
    }

    .fort-image {
        position: relative;
        overflow: hidden;
        height: 280px;
    }

    .fort-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .6s;
    }

    .fort-card:hover img {
        transform: scale(1.08);
    }

    .fort-image::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120px;
        background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
    }

    .fort-content {
        padding: 30px;
    }

    .fort-content h4 {

        font-weight: 700;

        margin-bottom: 18px;
        position: relative;
        padding-left: 18px;
    }

    .fort-content h4:before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        width: 5px;
        height: 28px;
        border-radius: 10px;
        background: #ff9800;
    }

    .fort-content p {
        color: #666;
        line-height: 1.8;

        margin-bottom: 25px;

        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .read-more {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: #12345b;
        font-weight: 600;
        transition: .3s;
    }

    .read-more:hover {
        color: #ff9800;
        transform: translateX(5px);
    }

    @media(max-width:768px) {

        .fort-image {
            height: 220px;
        }

        .fort-content {
            padding: 20px;
        }

        .fort-content h4 {
            font-size: 22px;
        }

    }

    .unesco img {
        height: 200px
    }
</style>