@extends('frontend.template.index')
@push('between-css')
    <style>
        iframe {
            width: 100%;
            margin-top: 100px;
            border-radius: 20px;
            height: 60vh;
        }

        #section-1 {
            margin-top: 100px !important;
        }

    </style>
@endpush
@section('content')
    <!-- END SECTION 1 -->
    <section id="section-1">
        <div class="container">
            <h1 class="fw-bold text-center ">Hai, Apa yang bisa kami Bantu ?</h1>
            <h6 class=" text-center mb-5">silahkan hubungi kami di :</h6>

            <div class="row justify-content-center contact ">
                <div class="col-2 col-md-1">
                    <a href="{{ $office->facebook ? $office->facebook : '#' }}" class="text-decoration-none"><i
                            class="fa-brands fa-facebook text-dark fa-3x "></i>
                    </a>
                </div>
                <div class="col-2 col-md-1">
                    <a href="{{ $office->youtube ? $office->youtube : '#' }}" class="text-decoration-none">
                        <i class="fa-brands fa-youtube text-dark fa-3x "></i>
                    </a>
                </div>
                <div class="col-2 col-md-1">
                    <a href="{{ $office->instagram ? $office->instagram : '#' }}" class="text-decoration-none">
                        <i class="fa-brands fa-instagram-square text-dark fa-3x "></i>
                    </a>
                </div>
                <div class="col-2 col-md-1">
                    <a href="mailto:{{ $office->email ? $office->email : '#' }}" class="text-decoration-none">
                        <i class="fa-solid fa-at text-dark fa-3x "></i>
                    </a>
                </div>
                <div class="col-2 col-md-1">
                    <a href="tel:{{ $office->phone ? $office->phone : '#' }}" class="text-decoration-none">
                        <i class="fas fa-phone fa-3x text-dark"></i>
                    </a>
                </div>
            </div>

            <div class="text-center mt-5">
                {!! $office->map !!}
            </div>
        </div>

    </section>
    <!-- SECTION 2 -->
@endsection