<!DOCTYPE html>
<html lang="pt-br">
<head>
  <?php include_once 'application/views/imports/head.php' ?>
</head>
<body class="overflow-x-hidden">
  <?php include_once 'application/views/imports/header.php' ?>

  <section class="flex items-center w-screen py-12 bg-cover bg-center bg-no-repeat" style="background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(<?= base_url('assets/uploads/images/intern-banners/' . $banner->image) ?>)">
    <div class="wrapper">
      <h2 class="text-white font-bold uppercase text-center text-xl md:text-4xl leading-relaxed">
        Serviço
      </h2>
      <ul class="mt-4 flex justify-center items-center text-white">
        <li class="text-white font-semibold"><a href="<?= base_url() ?>">Início</a></li>
        <li class="mx-4">/</li>
        <li class="text-gray-300 font-semibold">Serviço</li>
      </ul>
    </div>
  </section>

  <section class="py-12 md:py-20">
    <div class="wrapper">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="md:w-5/6">
          <p class="text-sm text-gray-500">Serviços</p>
          <h2 class="mt-3 mb-1 text-xl uppercase font-bold"><?= $service->title ?></h2>
          <span style="height: 2px" class="block w-32 bg-primary"></span>
          <p class="text-sm text-gray-700 mt-8 leading-relaxed w-2/3">
            <?= $service->text ?>
          </p>
        </div>
        <div>
          <div class="image-bg relative">
            <img class="h-96 w-full object-cover rounded-sm" src="<?= base_url('assets/uploads/images/services/' . $service->image) ?>" alt="<?= $service->title ?>">
          </div>
        </div>
      </div>
    </div>
  </section>

  <?php include_once 'application/views/imports/footer.php' ?>
  <?php include_once 'application/views/imports/scripts.php' ?>
</body>
</html>