@extends('layouts.app')
@section('site_title', 'Discover easy travel options to IFFI Goa')
@section('site_description',
    'Find details on flights, trains, and road routes for a seamless journey to the
    International Film Festival of India.')
@section('site_keywords',
    'IFFI Goa connectivity, Travel to IFFI Goa, Goa transport options, IFFI venue access, Reach
    IFFI Goa, Airport to IFFI Goa, Public Transport Goa, Transport in Goa for IFFI')
@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-IFFI-Connect-banner py-5">
        <div class="container text-center ">
            <h1 class="page-title-header">Connectivity</h1>
        </div>
    </div>

    {{-- Inner Page Banner Section  --}}

    <section class="py-5 reach-goa">
        <div class="container">

            <div class="text-center mb-5">
                <h2 class="fw-bold">How To Reach Goa</h2>
                <p class="text-muted">Goa is well connected by Air, Rail and Road.</p>
            </div>

            <div class="row g-4">

                <!-- Air -->
                <div class="col-lg-4 col-md-6">
                    <div class="reach-card h-100">
                        <div class="d-flex align-items-center ">
                            <div class="icon-box">
                                <i class="bi bi-airplane"></i>
                            </div>

                            <h3>Air</h3>
                        </div>

                        <p>
                            Goa is served by two International Airports, the Goa International Airport, is a civil
                            enclave at INS Hansa, a Naval airfield located at Dabolim, near Vasco da Gama and the New
                            Goa International Airport in Mopa. The airport caters to scheduled domestic and
                            international air services, with the new airport starting international operations from
                            March 2023.
                        </p>

                        <span class="badge bg-primary-subtle text-primary">
                            International Flights
                        </span>

                    </div>
                </div>

                <!-- Rail -->
                <div class="col-lg-4 col-md-6">
                    <div class="reach-card h-100">
                        <div class="d-flex align-items-center">
                            <div class="icon-box">
                                <i class="bi bi-train-front"></i>
                            </div>

                            <h3>Rail</h3>
                        </div>
                        <p>
                            The two major railheads that connect Goa with other states of the country are Vasco da Gama
                            and Madgaon Railway Station.
                        </p>

                        <span class="badge bg-success-subtle text-success">
                            Pan India Connectivity
                        </span>

                    </div>
                </div>

                <!-- Road -->
                <div class="col-lg-4 col-md-6">
                    <div class="reach-card h-100">
                        <div class="d-flex align-items-center ">
                            <div class="icon-box">
                                <i class="bi bi-car-front-fill"></i>
                            </div>

                            <h3>Road</h3>
                        </div>

                        <p>
                            Goa has an extensive roadway network which is efficiently connected with other states of the
                            nation.
                        </p>

                        <span class="badge bg-warning-subtle text-dark">
                            National Highway Access
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <section class="container connectivity">
        <div class="connectivity-block">
            <img src="{{ asset('images/icon/Air-icon.png') }}" class="img-fluid" alt="image" srcset="">
            <div class="connectivity-block-content">
                <h3>Air</h3>
                <p>Goa is served by two International Airports, the Goa International Airport, is a civil enclave at INS
                    Hansa, a Naval airfield located at Dabolim, near Vasco da Gama and the New Goa International Airport
                    in Mopa. The airport caters to scheduled domestic and international air services, with the new
                    airport starting international operations from March 2023.</p>
            </div>
        </div>
        <div class="connectivity-block">
            <img src="{{ asset('images/icon/Rail-icon.png') }}" class="img-fluid" alt="image" srcset="">
            <div class="connectivity-block-content">
                <h3>Rail</h3>
                <p>The two major railheads that connect Goa with other states of the country are Vasco da Gama and
                    Madgaon Railway Station.</p>
            </div>
        </div>
        <div class="connectivity-block">
            <img src="{{ asset('images/icon/Car-icon.png') }}" class="img-fluid" alt="image" srcset="">
            <div class="connectivity-block-content">
                <h3>Road</h3>
                <p>Goa has an extensive roadway network which is efficiently connected with other states of the nation.
                </p>
            </div>
        </div>
    </section> --}}

@endsection


<style>
    .reach-goa {
        background: #f8fafc;
    }

    .reach-card {
        background: #fff;
        border-radius: 18px;
        padding: 35px 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
        transition: .35s;
        border: 1px solid #edf2f7;
        position: relative;
        overflow: hidden;
    }

    .reach-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    }

    .reach-card:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: #2541b7;
    }

    .icon-box {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #eef3ff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        margin-right: 10px;
    }

    .icon-box i {
        font-size: 28px;
        color: #2541b7;
    }

    .reach-card h3 {
        font-size: 28px;
        font-weight: 700;

        margin-bottom: 15px;
    }

    .reach-card p {
        color: #555;
        line-height: 1.8;
        margin-bottom: 20px;
    }

    .badge {
        padding: 10px 18px;
        border-radius: 30px;
        font-weight: 500;
    }
</style>