{% extends 'layouts/base-fullscreen.html' %}

{% block title %} Login {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %} <style>
  .carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .carousel-caption {
    z-index: 2;
    bottom: 110px !important;
    /* letter-spacing: 1px; */
  }

  a,
  a:active,
  a:focus {
    color: #6f6f6f;
    text-decoration: none;
    transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -ms-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
  }

  .fancy-title-view1 {
    float: left;
    width: 100%;
    margin-bottom: 70px;
    text-align: center;
  }

  .fancy-title-view1 h2 {
    margin-bottom: 8px;
    font-size: 40px;
    font-weight: 700;
    display: block;
  }

  .fancy-title-view1 p {
    margin-bottom: 0px;
    display: inline-block;
    width: 65%;
  }

  .fancy-title-view1 i {
    font-size: 22px;
  }

  .fancy-title-view1-color h2,
  .fancy-title-view1-color p {
    color: #ffffff;
  }

  .light-transparent {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.65;
    background-color: #000;
  }

  .categories-view1-full {
    padding: 80px 0px 80px 0px;
    margin-top: 0;
    margin-bottom: 0;
    background: url(/static/assets/img/catjob.jpg);
    background-attachment: fixed;
    position: relative;
    min-height: 100vh;
  }

  .categories,
  .categories-view1-wrap {
    float: left;
    width: 100%;
  }

  .categories ul li {
    list-style: none;
  }

  .categories>ul>li {
    float: none;
    display: inline-block;
    margin: 0px 0px 30px 0px;
    vertical-align: top;
  }

  .categories-view1-wrap {
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.08);
    padding: 30px 50px 30px 95px;
    border-radius: 10px;
    position: relative;
    background-color: #ffffff;
  }

  .categories-view1 i {
    position: absolute;
    left: 0px;
    top: 50%;
    font-size: 30px;
    color: #080808;
    width: 70px;
    height: 70px;
    border-radius: 0 100% 100% 0;
    text-align: center;
    padding-top: 18px;
    margin-top: -36px;
    background-color: #ffffff;
    border: 1px solid #eee;
    border-left: none;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }

  .categories-view1 li:hover i {
    color: #ffffff;
    background-color: #274160;
  }

  .categories-view1 a {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 0px;
  }

  .categories-view1 small {
    font-size: 13px;
    color: #666;
  }

  .categories-view1 span {
    position: absolute;
    right: 5px;
    top: 8px;
    font-size: 90px;
    font-weight: 500;
    color: #999;
    opacity: 0.07;
    line-height: 1;
  }

  .main-load-btn {
    float: left;
    width: 100%;
    text-align: center;
    margin: 30px 0px;
  }

  .main-load-btn a {
    display: inline-block;
    line-height: 1;
    padding: 18px 45px;
    color: #ffffff;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    background-color: #2974c9;
  }

  .main-load-btn a:hover {
    background-color: #274160;
  }

  .more-spacer {
    float: left;
    width: 100%;
    margin: 10px 0px;
  }
</style> {% endblock stylesheets %}

{% block content %}



<!-- Cover Section -->
<section id="cover" class="cover">
  <div class="container text-warning">
    <h1>Um Trabalho Só para Ti</h1>
    <p class="text-muted">Excelência em nossos serviços</p>
    <a href="#services" class="btn btn-default btn-lg mt-4">Conheça nossos serviços</a>
  </div>
</section>

<!-- Corousel  -->
<!-- <div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
      aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
      aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
      aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../../static/assets/img/cover.jpg" class="d-block w-100 " alt="..." height="750px">
      <div class="carousel-caption d-none d-md-block mb-5">
        <h2 class="fw-bold">Rio de Janeiro</h2>
        <small class="mt-3">A partir de</small>
        <h5 class="fw-bold">31,765 Mzn</h5>
        <p>Ida e Volta - Económica</p>
        <Button class="btn btn-warning">Reserva já</Button>
        <div class="mb-5"></div>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../../static/assets/img/cover2.jpg" class="d-block w-100" alt="..." height="750px">
      <div class="carousel-caption d-none d-md-block mb-5">
        <h2 class="fw-bold">Roma</h2>
        <small class="mt-3">A partir de</small>
        <h5 class="fw-bold">31,765 Mzn</h5>
        <p>Ida e Volta - Económica</p>
        <Button class="btn btn-warning">Reserva já</Button>
        <div class="mb-5"></div>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../../static/assets/img/cover3.jpg" class="d-block w-100" alt="..." height="750px">
      <div class="carousel-caption d-none d-md-block mb-5">
        <h2 class="fw-bold">A Cidade do Vaticano</h2>
        <small class="mt-3">A partir de</small>
        <h5 class="fw-bold">41,765 Mzn</h5>
        <p>Ida e Volta - Económica</p>
        <Button class="btn btn-warning">Reserva já</Button>
        <div class="mb-5"></div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div> -->



<!-- Services Section -->
<section id="services" class="py-3 bg-white">
  <div class="container">
    <h1 class="text-center py-4 fw-bold">Tralhadores Mais Procurados</h1>
    <!-- <h2 class="text-center mb-4 text-white">Serviços</h2>
    <p class="text-center mb-3">Oferecemos soluções completas para você e sua empresa.</p> -->
    <!-- Card stats -->
    <div class="row">
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Salésio Joao Banze</h5>
                <span class="h2 font-weight-bold mb-0">350,897</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
                  <img src="../../static/assets/img/theme/team-1.jpg" height="50px">
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <a href="">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
                  <span class="h2 font-weight-bold mb-0">2,356</span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
                    <img src="../../static/assets/img/theme/team-1.jpg" height="50px">
                  </div>
                </div>
              </div>
            </a>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
                <span class="h2 font-weight-bold mb-0">924</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
                  <i class="ni ni-money-coins"></i>
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
                <span class="h2 font-weight-bold mb-0">49,65%</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                  <i class="ni ni-chart-bar-32"></i>
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
                <span class="h2 font-weight-bold mb-0">49,65%</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                  <i class="ni ni-chart-bar-32"></i>
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
                <span class="h2 font-weight-bold mb-0">49,65%</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                  <i class="ni ni-chart-bar-32"></i>
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
                <span class="h2 font-weight-bold mb-0">49,65%</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                  <i class="ni ni-chart-bar-32"></i>
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
                <span class="h2 font-weight-bold mb-0">49,65%</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                  <i class="ni ni-chart-bar-32"></i>
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
                <span class="h2 font-weight-bold mb-0">49,65%</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                  <i class="ni ni-chart-bar-32"></i>
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-md-6">
        <div class="card card-stats">
          <!-- Card body -->
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
                <span class="h2 font-weight-bold mb-0">49,65%</span>
              </div>
              <div class="col-auto">
                <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                  <i class="ni ni-chart-bar-32"></i>
                </div>
              </div>
            </div>
            <p class="mt-3 mb-0 text-sm">
              <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
              <span class="text-nowrap">Since last month</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="justify-content-center text-center">
  <div class="main-section categories-view1-full">
    <span class="light-transparent"></span>
    <div class="container">
      <div class="row">

        <div class="col-md-12">

          <!-- FancyTitle -->
          <div class="fancy-title-view1 fancy-title-view1-color">
            <h2>Top Categories</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Etiam in dui velit Fusce accumsan.</p>
          </div>
          <!-- FancyTitle -->

          <!-- Categories List -->
          <div class="categories categories-view1">
            <ul class="row">
              <li class="col-md-4">
                <div class="categories-view1-wrap">
                  <i class="fas fa-biohazard"></i>
                  <a href="#">Lorem Ipsum</a>
                  <small>(3 Open Vacancies)</small>
                  <span>01</span>
                </div>
              </li>
              <li class="col-md-4">
                <div class="categories-view1-wrap">
                  <i class="fas fa-broadcast-tower"></i>
                  <a href="#">Lorem Ipsum</a>
                  <small>(2 Open Vacancies)</small>
                  <span>02</span>
                </div>
              </li>
              <li class="col-md-4">
                <div class="categories-view1-wrap">
                  <i class="far fa-chart-bar"></i>
                  <a href="#">Lorem Ipsum</a>
                  <small>(13 Open Vacancies)</small>
                  <span>03</span>
                </div>
              </li>
              <li class="col-md-4">
                <div class="categories-view1-wrap">
                  <i class="fab fa-codepen"></i>
                  <a href="#">Lorem Ipsum</a>
                  <small>(22 Open Vacancies)</small>
                  <span>04</span>
                </div>
              </li>
              <li class="col-md-4">
                <div class="categories-view1-wrap">
                  <i class="fas fa-dna"></i>
                  <a href="#">Lorem Ipsum</a>
                  <small>(18 Open Vacancies)</small>
                  <span>05</span>
                </div>
              </li>
              <li class="col-md-4">
                <div class="categories-view1-wrap">
                  <i class="fas fa-layer-group"></i>
                  <a href="#">Lorem Ipsum</a>
                  <small>(4 Open Vacancies)</small>
                  <span>06</span>
                </div>
              </li>
            </ul>
          </div>
          <!-- Categories List -->

          <div class="more-spacer"></div>
          <div class="main-load-btn"> <a href="#">Browse All Categories</a> </div>

        </div>

      </div>
    </div>
  </div>
</section>



<!-- Team Section -->
<section id="team" class="py-5 bg-warning">
  <div class="container">
    <h2 class="text-center mb-4">Nossa Equipe</h2>
    <div class="row justify-content-center">
      <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
        <div class="card team-member text-center shadow-sm">
          <img src="../../static/assets/img/theme/team-3.jpg" class="card-img-top mx-auto mt-3" alt="João Silva"
            style="width:150px; height:150px; object-fit:cover;">
          <div class="card-body">
            <h5 class="card-title">João Silva</h5>
            <p class="card-text text-muted">CEO</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
        <div class="card team-member text-center shadow-sm">
          <img src="../../static/assets/img/theme/team-1.jpg" class="card-img-top mx-auto mt-3" alt="Maria Souza"
            style="width:150px; height:150px; object-fit:cover;">
          <div class="card-body">
            <h5 class="card-title">Maria Souza</h5>
            <p class="card-text text-muted">Desenvolvedora</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
        <div class="card team-member text-center shadow-sm">
          <img src="../../static/assets/img/theme/team-4.jpg" class="card-img-top mx-auto mt-3" alt="Carlos Lima"
            style="width:150px; height:150px; object-fit:cover;">
          <div class="card-body">
            <h5 class="card-title">Carlos Lima</h5>
            <p class="card-text text-muted">Marketing</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Map Section -->
<section id="map" class="py-5 bg-white">
  <div class="container">
    <h2 class=" mb-4 fw-bold h1">Como nos Encontrar</h2>
    <div class="row">
      <div class="col-md-6">
        <div class="">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.3253143371576!2d-46.656574!3d-23.588062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce59c3d74e6b17%3A0x1a61efabce3e6a4!2sAv.%20Paulista%2C%20S%C3%A3o%20Paulo%20-%20SP!5e0!3m2!1spt-BR!2sbr!4v1614018894291!5m2!1spt-BR!2sbr"
            style="border:0;" allowfullscreen="" loading="lazy" height="500px" width="500px">
          </iframe>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <div class="row align-items-center">
              <div class="col-8">
                <h3 class="mb-0"> Entre em Contacto </h3>
              </div>
              <div class="col-4 text-right">
                <a href="#!" class="btn btn-sm btn-primary">Enviar</a>
              </div>
            </div>
          </div>
          <div class="card-body">
            <form>

              <h6 class="heading-small text-muted mb-4">Contact information</h6>
              <div class="pl-lg-4">
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label class="form-control-label" for="input-address">Address</label>
                      <input id="input-address" class="form-control" placeholder="Home Address"
                        value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label class="form-control-label" for="input-city">City</label>
                      <input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label class="form-control-label" for="input-country">Country</label>
                      <input type="text" id="input-country" class="form-control" placeholder="Country"
                        value="United States">
                    </div>
                  </div>
                  <div class="col-lg-4">
                    <div class="form-group">
                      <label class="form-control-label" for="input-country">Postal code</label>
                      <input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
                    </div>
                  </div>
                  <div class="col-lg-12">
                    <div class="form-group">
                      <label class="form-control-label">About Me</label>
                      <textarea rows="4" class="form-control"
                        placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 4. It is Free and Open Source.</textarea>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}{% endblock javascripts %}