{% load static %}
<div class="container-fluid p-0">
    <!-- Carroussel -->
    <div class="col-md m-0 p-0 bg-main-1">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <ol class="carousel-indicators">
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
                <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="img-fluid d-block w-100" src="{% static 'img/banner_caroussel.png' %}" alt="Primeiro slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h3>Frota Eficiente - Serviço Impecável</h3>
                        <p>Nossa frota é completa e capaz de suprir todas as suas necessidades</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="img-fluid d-block w-100" src="{% static 'img/banner_caroussel2.png' %}" alt="Segundo slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h3>Nosso atendimento é o seu diferencial.</h3>
                        <p>Uma empresa que busca sempre mostrar o valor do bom relacionamento</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="img-fluid d-block w-100" src="{% static 'img/banner_caroussel3.png' %}" alt="Terceiro slide">
                    <div class="carousel-caption d-none d-md-block">
                        <h3>Invista em qualidade</h3>
                        <p>Oferecemos suporte 24h po dia ao nosso cliente, esteja onde estiver</p>
                    </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>
            </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>
            </button>
        </div>
    </div>
    <!-- Nosso Sistema -->
    <div class="row col-md-10 mx-auto m-2 p-0 bg-form-1 text-white">
        <div class="col-md-5 p-0">
            <img class="img-fluid d-block w-100" src="{% static 'img/imagem_analise.png' %}" alt="analise">
        </div>
        <div class="col-md-7 p-3">
            <h3 class="mt-3">Entenda nosso sistema</h3>
            <hr class="color-main-1">
            <p class="text-lg">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt molestiae porro sint labore nam eaque, harum aperiam, beatae impedit commodi assumenda vero ut aspernatur doloremque atque? Perferendis, quos. Sequi, sit?
            Explicabo placeat fugiat maiores molestiae! Necessitatibus repudiandae, laborum earum officia tempora debitis? Non labore nobis rem sunt, nihil optio qui alias praesentium obcaecati reiciendis aspernatur fugit accusamus voluptatibus amet placeat.
            Cupiditate explicabo, deserunt at quidem, nisi voluptates quibusdam aliquid sed facilis veniam quisquam fugiat. Sunt consequuntur alias eligendi beatae laboriosam natus tempora enim rerum! Ullam numquam aliquid minima autem quaerat?
            </p>
        </div>
    </div>

    <!-- Sobre Nós -->
    <div class="row col-md-12 mx-auto p-0 m-0">
        <div id="main-element" class="row bg-main-1 col-md-12 text-white m-0">
            <h2 class="card-title text-lg row mx-auto m-2 p-2">
                Sobre Nós
            </h2>
        </div>
        <div id="sobre-nos" class="row mx-auto col-md-10 m-0 p-0 pt-3">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-form-1 col-md">
                        <h3 class="card-title text-white">
                            Princípios
                        </h3>
                    </div>
                    <div class="card-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit nulla at blanditiis dicta facilis quisquam exercitationem! Dolore quidem exercitationem impedit voluptatum, corrupti eaque ad error unde fugiat. Dolorem, voluptates.
                        Voluptas, hic deleniti molestias ullam illum officia dolor omnis, totam asperiores expedita voluptates eius esse voluptatum architecto. Minus, aliquid deserunt! Labore voluptas ut sint perferendis illum facere voluptatum. Saepe, ipsa.
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-form-1 col-md">
                        <h3 class="card-title text-white">
                            Equipe
                        </h3>
                    </div>
                    <div class="card-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit nulla at blanditiis dicta facilis quisquam exercitationem! Dolore quidem exercitationem impedit voluptatum, corrupti eaque ad error unde fugiat. Dolorem, voluptates.
                        Voluptas, hic deleniti molestias ullam illum officia dolor omnis, totam asperiores expedita voluptates eius esse voluptatum architecto. Minus, aliquid deserunt! Labore voluptas ut sint perferendis illum facere voluptatum. Saepe, ipsa.
                    </div>
                </div>
            </div>
        </div>
        <div id="sobre-nos" class="row mx-auto col-md-10 m-0 p-0 pt-3">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-form-1 col-md">
                        <h3 class="card-title text-white">
                            Estrutura
                        </h3>
                    </div>
                    <div class="card-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit nulla at blanditiis dicta facilis quisquam exercitationem! Dolore quidem exercitationem impedit voluptatum, corrupti eaque ad error unde fugiat. Dolorem, voluptates.
                        Voluptas, hic deleniti molestias ullam illum officia dolor omnis, totam asperiores expedita voluptates eius esse voluptatum architecto. Minus, aliquid deserunt! Labore voluptas ut sint perferendis illum facere voluptatum. Saepe, ipsa.
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-form-1 col-md">
                        <h3 class="card-title text-white">
                            Objetivos
                        </h3>
                    </div>
                    <div class="card-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae impedit nulla at blanditiis dicta facilis quisquam exercitationem! Dolore quidem exercitationem impedit voluptatum, corrupti eaque ad error unde fugiat. Dolorem, voluptates.
                        Voluptas, hic deleniti molestias ullam illum officia dolor omnis, totam asperiores expedita voluptates eius esse voluptatum architecto. Minus, aliquid deserunt! Labore voluptas ut sint perferendis illum facere voluptatum. Saepe, ipsa.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Rodapé/Contato -->
    <footer id="main-element" class="bg-main-1 text-white">
        <div class="container">
            <div class="row p-3">
                <!-- Coluna de Contatos -->
                <div class="col-md-6">
                    <h5>Contato</h5>
                    <ul class="list-unstyled">
                        <li><strong>Telefone:</strong> (11) 1234-5678</li>
                    <li><strong>Email:</strong> contato@empresa.com.br</li>
                        <li><strong>Endereço:</strong> Rua Exemplo, 123 - Cidade, Estado</li>
                    </ul>
                </div>
    
                <!-- Coluna de Redes Sociais -->
                <div class="col-md-6">
                    <h5>Redes Sociais</h5>
                    <ul class="list-unstyled d-flex">
                        <li class="mx-2">
                            <a href="https://www.facebook.com" target="_blank" class="color-main-2">
                                <i id="icon" class="fab fa-facebook-f"></i> Facebook
                            </a>
                        </li>
                        <li class="mx-2">
                            <a href="https://www.instagram.com" target="_blank" class="color-main-2">
                                <i id="icon" class="fab fa-instagram"></i> Instagram
                            </a>
                        </li>
                        <li class="mx-2">
                            <a href="https://twitter.com" target="_blank" class="color-main-2">
                                <i id="icon" class="fab fa-twitter"></i> Twitter
                            </a>
                        </li>
                        <li class="mx-2">
                            <a href="https://www.linkedin.com" target="_blank" class="color-main-2">
                                <i id="icon" class="fab fa-linkedin-in"></i> LinkedIn
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-center">
                <p>&copy; 2025 Cuesta Transportes. Todos os direitos reservados.</p>
            </div>
        </div>
    </footer>
</div>