@section('title', app()->getLocale() == 'en' ? '360 Virtual Tour | EMPHAIR' : '360 Sanal Tur | EMPHAIR')
@section('description', app()->getLocale() == 'en' ? 'EMPHAIR Hair Transplantation Centre with 360 Virtual Tour.' :
'360 Sanal Tur ile EMPHAIR Saç Ekim Merkezi.')

<section class="virtual-tour-area layout-3d overlay-dark" style="padding-bottom: 0px;">
  <div class="container">
    <div class="row virtual-tour-row">
      <div class="col-12 col-md-6 col-lg-6">
        <div class="content">
          <div class="relative">
            {{-- <div class="title-svg">
              <svg xmlns="http://www.w3.org/2000/svg" width="180" height="98" viewBox="0 0 120 38" fill="none">
                <path
                  d="M116.632 3.24864C101.841 0.619714 63.9308 -1.82967 30.6119 9.40418C-11.0367 23.4465 -7.2947 37.9843 37.7817 35.9495C82.8582 33.9148 125.322 20.2054 117.731 12.1046C110.14 4.00377 86.0268 6.38071 75.5843 6.52588"
                  stroke="#FA817C" stroke-width="2" stroke-linecap="round" />
              </svg>
            </div> --}}
            <h2 class="text-white virtual-tour-title" style="z-index: 2; position: relative;">{{
              __('messages.360.title') }}</h2>
          </div>
          <div class="button-group download-button ">
            @include('components.button', [
            'url' => route('page.360-virtual-tour.' . app()->getLocale()),
            'text' => __('messages.360.button'),
            'target' => '_blank',
            'isBordered' => false,
            'icon' => '<img src="'.env('APP_PREFIX_PATH').'assets/img/icons/360-rounded.svg" alt="before after"
              style="width: 22px; height: 22px; margin-left: 10px;">'
            ])
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-6">
        <img src="{{ env('APP_PREFIX_PATH') . 'assets/img/content/virtual.png' }}" alt="360-virtual-tour"
          class="virtual-tour-image" />
      </div>
    </div>
  </div>
</section>

<style>
  .virtual-tour-row {
    padding-bottom: 100px;
  }

  .virtual-tour-area.layout-3d {
    opacity: 0.95;
    background: linear-gradient(346deg, #080D1E 21.24%, #090F23 99.49%);
  }

  .title-svg {
    position: absolute;
    bottom: -20px;
    right: 100px;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .virtual-tour-title {
      text-align: center;
      margin-top: 0px;
      margin-bottom: 0px;
    }

    .virtual-tour-row {
      padding-bottom: 0px;
    }

    .button-group {
      justify-content: center;
      margin-top: 0px;
    }

    .virtual-tour-image {
      margin-top: 30px;
      margin-bottom: 50px;
      object-fit: contain;
    }

  }
</style>