@extends('site.master.layout')

@section('content')

  <style>
        .carousel-content{
            text-align: left !important;
        }

        .btn-get-started{
            padding: 20px 56px !important;
            font-size: 18px !important;
            font-weight: 600 !important;
        }

        .carousel-container{
            top: 40% !important;
        }
  </style>

 <!-- ======= Hero Section ======= -->
 <section id="hero">
    <div class="hero-container">
      <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">

        <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

        <div class="carousel-inner" role="listbox">

          <!-- Slide StartUp Challenge + -->
          <div class="carousel-item active" style="background-image: url('site/assets/img/slide/startup_challenge.jpg');">
            <div class="carousel-container">
              <div class="carousel-content container">
                <!-- <a href="startupchallenge/candidatura" class="btn-get-started animate__animated animate__fadeInUp">CANDIDATURA</a> -->
              </div>
            </div>
          </div>

          <!-- Slide 1 -->
          <!-- <div class="carousel-item" style="background-image: url('site/assets/img/slide/fundo_lavanta.jpeg');">
            <div class="carousel-container">
              <div class="carousel-content container">
                <h2 class="animate__animated animate__fadeInDown"><span>Fundo Lavanta</span></h2>
                <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Registar</a>
              </div>
            </div>
          </div> -->

          <!-- Slide 2 -->
          <!-- <div class="carousel-item" style="background-image: url('site/assets/img/slide/fundo_lavanta_2.jpeg');">
            <div class="carousel-container">
            </div>
          </div> -->

        </div>

        <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
          <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
          <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
        </a>

      </div>
    </div>
  </section><!-- End Hero -->
  
@endsection