@extends('layouts.app')

@section('title','Itineraries - Dusty helmets')
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />


@section('content')
    <style type="text/css">
    .template_faq {
    background: #edf3fe none repeat scroll 0 0;
}
.panel-group {
    background: #fff none repeat scroll 0 0;
    border-radius: 3px;
    /*box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.04);*/
    margin-bottom: 0;
    padding: 30px;
}
#accordion .panel {
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 15px 10px;
}
#accordion .panel-heading {
    border-radius: 15px;
    padding: 0;
}
#accordion .panel-title a {
    background: #fbaf32 none repeat scroll 0 0;
    border: 1px solid transparent;
    border-radius: 30px;
    color: #fff;
    display: block;
    font-size: 18px;
    box-shadow:  0 5px 30px 0 rgba(0, 0, 0, 0.04) !important;
    font-weight: 600;
    padding: 12px 20px 12px 50px;
    position: relative;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    color: #333;
}
#accordion .panel-title a::after, #accordion .panel-title a.collapsed::after {
    background: #719a0a none repeat scroll 0 0;
    border: 1px solid transparent;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
    color: #fff;
    content: "";
    font-family: fontawesome;
    font-size: 25px;
    height: 55px;
    left: -20px;
    line-height: 55px;
    position: absolute;
    text-align: center;
    top: -5px;
    transition: all 0.3s ease 0s;
    width: 55px;
}
#accordion .panel-title a.collapsed::after {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ddd;
    box-shadow: none;
    color: #333;
    content: "";
}
#accordion .panel-body {
    background: transparent none repeat scroll 0 0;
    border-top: medium none;
    padding: 20px 25px 10px 9px;
    position: relative;
}
#accordion .panel-body {
    /*border-left: 1px dashed #fbaf32;*/
    padding-left: 25px;
}

        .myCard {
            padding: 20px;
            border-radius: 15px;
            border-left: 1px solid #fbaf32 !important;
            border-right: 1px solid #fbaf32 !important;
        }
    </style>
    <!-- Page Header Start -->
    <!-- p8/pic1 -->
    <div class="mb-0 page-header" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(public/assets/P8/pic1.jpg);background-position: center;
    background-repeat: no-repeat;
    background-size: cover;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Itineraries</h2>
                </div>
                <div class="col-12">
                    <a href="{{url('/')}}">Home</a>
                    <a href="#">Itineraries</a>
                    <a href="{{url('/generalInformation')}}">General Information</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->

    <div class="about">
        <div class="container">
            <div class="row align-items-center">

                <div class="col-lg-12">
                    <div class="about-content">
                        <div class="section-header">
                            <p>{{$page->title}}</p>
                            <h2 class="dusty-color">{{$page->title1}}</h2>
                        </div>
                        {!! $page->content1 !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--<hr>-->


@endsection