@extends('frontend.component.layout')

@section('head')

@stop

@section('extended_css')
<style type="text/css">
    :root {
        --theme: #023375 !important;
    }
    @media (max-width: 767px) {
        .container-fluid{
            padding: 0 5px !important;
        }
    }

    @media (min-width: 767px) {
        .img-desktop{
            width: auto !important;
            height: 640px !important;
        }

        .about-image{
            width: auto !important;
            height: 640px !important;
            margin-left: -10% !important;
        }

        .about-wrapper-3 .about-image img {
            width: auto !important;
            height: 640px !important;
        }
    }
    
    .about-wrapper-3 .about-image img {
        border-radius: 0px 26px 26px 0px;
    }

    /*.section-padding {
        padding: 30px 0 !important;
    }*/
    .section-padding {
        padding-top: 30px !important;
    }

    .offcanvas__wrapper {
        background-color: #023375 !important;
    }

    .back-to-top, .feature-provide-box-items:hover {
        background-color: #023375 !important;
    }

    .preloader p, .preloader .animation-preloader .txt-loading .letters-loading {
        color: #023375 !important;
    }

    .preloader .animation-preloader .spinner {

    }

    /*.breadcumb-container-wrapper {
        padding: 170px 0 170px !important;
    }*/

    p, ol li{
        color: #000 !important;
    }
</style>
@stop

@section('content')
<div class="breadcumb-section fix">
    <div class="breadcumb-container-wrapper background-image" style="background-image: url('{{ url('img/bg2.jpg') }}');">
        <div class="container">
            <div class="breadcumb-wrapper">
                <div class="page-heading">
                    <h1>Galeri</h1>
                    <div class="links">
                        <a href="{{ url('/') }}">Home<span class="slash">/</span></a>Foto
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="project-details-section section-padding fix">
    <div class="project-details-container-wrapper">
        <div class="container">
            <div class="project-details-wapper">
                <div class="row">
                    <div class="single-desc">
                        <div class="row gy-5">
                            <div class="col-12 px-5">
                                <h3 class="single-desc-title">
                                    Album
                                </h3>
                            </div>
                        </div>
                        <div class="row clearfix">
                            @foreach ($album as $a)