@extends('layouts.base')

@section('icone-modulo',"fa fa-building")

@section('icone','fa fa-houzz')



@section('content')

            <section class="page-header page-header-modern page-header-background page-header-background-md overlay overlay-color-dark overlay-show overlay-op-7" style="background-image: url({{ asset('frontend/img/slides/slide-corporate-9-2.jpg') }});">
                <div class="container">
                    <div class="row mt-5">
                        <div class="col-md-12 align-self-center p-static order-2 text-center">
                            <h1 class="text-12 font-weight-semibold">Apresentação</h1>
                        </div>
                        <div class="col-md-12 align-self-center order-1">
                            <ul class="breadcrumb breadcrumb-light d-block text-center">
                                <li><a href="#">Pagina principal</a></li>
                                <li class="active">O FAMELO</li>
                                <li class="active">Apresentação</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>




                    </div>
                </div>

            </div>


            <!--   <div class="row justify-content-center text-center mb-4 appear-animation"
                    data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                    <div class="col-lg-8">
                        <h2 class="font-weight-bold mb-3 mt-3">Sobre Nós</h2>
                        <p class="text-6 text-color-dark line-height-7 negative-ls-1 px-5">Atendendo a importância do Sector dos Transportes, como alavanca do crecimento e desenvolvimento sócio-económico do País,cujo cumprimento cabal das suas atribuições assenta no profissionalismo e melhor desempenho das funções pelos deus quadros.</p>
                        <p class="opacity-9 text-4">O FSTT tem como objectivos a melhoria das condições de trabalho e sócioeconómicas dos funcionários, agentes administrativos, pessoal contratado e trabalhadores, assim como o apoio a actividades culturais, recreativas e desportivas.</p>
                    </div>-->


                    <section class="section section-height-3 bg-color-grey m-0 border-0">
                        <div class="container">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-lg-6 pb-sm-4 pb-lg-0 pe-lg-5 mb-sm-5 mb-lg-0">
                                    <h2 class="text-color-dark font-weight-normal text-6 mb-2">Conheça o <strong class="font-weight-extra-bold">Famelo</strong></h2>
                                    <p class="lead text-color-dark" align="justify">A Famelo Investimento Lda, é um empresa comprometida, possui uma vasta gama de clientes nacionais e internacionais. </p>
                                    <p class="lead text-color-dark" align="justify">Transportamos desde materiais petrolíferos, caminhões à mercadoria a granel...
                                    </p>
                                </div>
                                <div class="col-sm-8 col-md-6 col-lg-4 offset-sm-4 offset-md-4 offset-lg-2 position-relative mt-sm-5"
                                    style="top: 1.7rem;">
                                    <img src="{{ asset('frontend/img/generic/generic-corporate-3-1.jpg') }}" class="img-fluid position-absolute d-none d-sm-block appear-animation" data-appear-animation="expandIn" data-appear-animation-delay="300" style="top: 10%; left: -50%;" alt="" />
                                    <img src="{{ asset('frontend/img/generic/generic-corporate-3-2.jpg') }}" class="img-fluid position-absolute d-none d-sm-block appear-animation" data-appear-animation="expandIn" style="top: -33%; left: -29%;" alt="" />
                                    <img src="{{ asset('frontend/img/generic/generic-corporate-3-3.jpg') }}" class="img-fluid position-relative appear-animation mb-2" data-appear-animation="expandIn" data-appear-animation-delay="600" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="container py-4 my-5">

                            <div class="row mt-3 mb-5">
                                <div class="col-md-4 appear-animation" data-appear-animation="fadeInLeftShorter"
                                    data-appear-animation-delay="800">
                                    <div class="text-center ">
                                        <img src="frontend/img/missao.png" alt="">
                                        <h3 class="font-weight-bold text-4 mb-2">Missão</h3>
                                    </div>
                                    <p class="text-color-dark" align="justify">Criamos rotas seguras.
                                        Temos um tarifário compatível com o seu bolso.
                                        Temos experiências na área e transportamos com comodidade a sua mercadoria.</p>
                                </div>
                                <div class="col-md-4 appear-animation" data-appear-animation="fadeIn"
                                    data-appear-animation-delay="600">
                                    <div class="text-center ">
                                        <img src="frontend/img/visao.png" alt="" align="justify">
                                        <h3 class="font-weight-bold text-4 mb-2">Visão</h3>
                                    </div>
                                    <p class="text-color-dark" align="justify">Criamos rotas seguras.
                                        Temos um tarifário compatível com o seu bolso.
                                        Temos experiências na área e transportamos com comodidade a sua mercadoria.</p>
                                </div>
                                <div class="col-md-4 appear-animation" data-appear-animation="fadeInRightShorter"
                                    data-appear-animation-delay="800">
                                    <div class="text-center ">
                                        <img src="frontend/img/valores.png" alt="">
                                        <h3 class="font-weight-bold text-4 mb-2">Valor</h3>
                                    </div>
                                    <p class="text-color-dark" align="justify"> Criamos rotas seguras.
                                        Temos um tarifário compatível com o seu bolso.
                                        Temos experiências na área e transportamos com comodidade a sua mercadoria.</p>
                                </div>
                            </div>

                        </div>
                    </section>

                    <section class="parallax section section-height-3 section-parallax m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5}" data-image-src="frontend/img/parallax/parallax-corporate-14-1.png">
                        <div class="container">
                            <div class="row align-items-center">
                                <div class="col-lg-7 mb-5 mb-lg-0 appear-animation"
                                    data-appear-animation="fadeInRightShorter">
                                    <p class="text-color-primary text-2 line-height-1 mb-2">Famelo</p>
                                    <h4 class="text-color-dark font-weight-normal line-height-3 text-6">Famelo <strong class="font-weight-extra-bold">Investimento</strong></h4>
                                    <p class="text-color-dark" align="justify" class="lead pb-2 mb-4">A Famelo Investimento, LDA é a aposta segura para o transporte de materiais de construção e diversos pelo litoral do país.
                                        Temos rotas seguras, polílicas que vão de acordo ao seu bolso e uma equipa competente, disponível para dar respostas aos seus problemas, enquanto você se concentra no seu core business.
                                    </p>
                                    <a href="#"
                                        class="btn btn-outline btn-primary font-weight-bold text-1 px-4 btn-py-2">Conheça-nos melhor</a>
                                </div>
                                <div class="col-lg-5">
                                    <div class="row">
                                        <div class="col appear-animation" data-appear-animation="fadeInRightShorter"
                                            data-appear-animation-delay="200">
                                            <div class="row counters counters-lg counters-text-dark">
                                                <div class="col-md-6 mb-5">
                                                    <div class="counter">
                                                        <strong class="font-weight-extra-bold text-12" data-to="30"
                                                            data-append="+">0</strong>
                                                        <label class="opacity-8 font-weight-normal text-4">Colaboradores</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-5">
                                                    <div class="counter">
                                                        <strong class="font-weight-extra-bold text-12" data-to="300"
                                                            data-append="+">0</strong>
                                                        <label class="opacity-8 font-weight-normal text-4">Agentes
                                                            de navegação</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 mb-5 mb-md-0">
                                                    <div class="counter">
                                                        <strong class="font-weight-extra-bold text-12" data-to="10"
                                                            data-append="+">0</strong>
                                                        <label
                                                            class="opacity-8 font-weight-normal text-4">Navios</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="counter">
                                                        <strong class="font-weight-extra-bold text-12" data-to="20"
                                                            data-append="+">0</strong>
                                                        <label class="opacity-8 font-weight-normal text-4">Parceiros</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>



                    <div class="row">
                        <div class="col">
                            <hr class="solid my-5">
                        </div>
                    </div>

                </div>
                    <div class="container">

                        <div class="row text-center pt-4 mt-5">
                            <div class="col">
                                <h2 class="word-rotator slide font-weight-bold text-8 mb-2">
                                    <span>Parceiros </span>
                                    <span class="word-rotator-words bg-primary">

                                    </span>

                                </h2>
                            </div>
                        </div>


                        <div class="row py-4 my-5">
                            <div class="col py-3">
                                <div class="owl-carousel owl-theme mb-0"
                                    data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 5}, '992': {'items': 7}, '1200': {'items': 7}}, 'autoplay': true, 'autoplayTimeout': 3000, 'dots': false}">
                                    <div>
                                        <img class="img-fluid opacity-2" src="{{ asset('frontend/img/logos/logo-1.png') }}"
                                            alt="">
                                    </div>
                                    <div>
                                        <img class="img-fluid opacity-2" src="{{ asset('frontend/img/logos/logo-2.png') }}"
                                            alt="">
                                    </div>
                                    <div>
                                        <img class="img-fluid opacity-2" src="{{ asset('frontend/img/logos/logo-1.png') }}"
                                            alt="">
                                    </div>
                                    <div>
                                        <img class="img-fluid opacity-2" src="{{ asset('frontend/img/logos/logo-2.png') }}"
                                            alt="">
                                    </div>

                                </div>

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

                    <div class="row">
                        <div class="col py-3">
                            <hr class="solid mt-5 mb-2">
                        </div>
                    </div>


                    <div class="container pb-1">

                        <div class="row pt-4 text-center">
                            <div class="col">
                                <div class="overflow-hidden mb-3">
                                    <h2 class="font-weight-bold text-8 mb-0 appear-animation" data-appear-animation="maskUp">
                                        Nossos Serviços
                                    </h2>
                                </div>
                            </div>
                        </div>



                        <div class="row">
                            <div class="featured-boxes featured-boxes-style-2">
                                <div class="row">
                                    <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
                                        data-appear-animation-delay="700">
                                        <div class="featured-box featured-box-effect-4">
                                            <div class="box-content">
                                                <i
                                                    class="icon-featured icon-screen-tablet icons text-color-primary bg-color-grey"></i>
                                                <h4 class="font-weight-bold">Transporte Marítimo de Mercadoria a Granel
                                                </h4>
                                                <p align="justify" class="px-3">Transporte Marítimo de Maquinas e outros. </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
                                        data-appear-animation-delay="900">
                                        <div class="featured-box featured-box-effect-4">
                                            <div class="box-content">
                                                <i
                                                    class="icon-featured icon-layers icons text-color-light bg-color-primary"></i>
                                                <h4 class="font-weight-bold">Transporte Marítimo de Caminhões</h4>
                                                <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInRightShorter"
                                        data-appear-animation-delay="1100">
                                        <div class="featured-box featured-box-effect-4">
                                            <div class="box-content">
                                                <i
                                                    class="icon-featured icon-magnifier icons text-color-primary bg-color-grey"></i>
                                                <h4 class="font-weight-bold">Transporte Marítimo de Carros</h4>
                                                <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter"
                                        data-appear-animation-delay="1500">
                                        <div class="featured-box featured-box-effect-4">
                                            <div class="box-content">
                                                <i
                                                    class="icon-featured icon-screen-desktop icons text-color-light bg-color-primary"></i>
                                                <h4 class="font-weight-bold">Transporte Marítimo de Gruas                                        </h4>
                                                <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter"
                                        data-appear-animation-delay="1300">
                                        <div class="featured-box featured-box-effect-4">
                                            <div class="box-content">
                                                <i class="icon-featured icon-doc icons text-color-primary bg-color-grey"></i>
                                                <h4 class="font-weight-bold">Transporte Marítimo de Contetores</h4>
                                                <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-4 appear-animation" data-appear-animation="fadeInLeftShorter"
                                        data-appear-animation-delay="1100">
                                        <div class="featured-box featured-box-effect-4">
                                            <div class="box-content">
                                                <i class="icon-featured icon-menu icons text-color-light bg-color-primary"></i>
                                                <h4 class="font-weight-bold">Transporte Marítimo de Materiais Petroliferos</h4>
                                                <p class="px-3" align="justify">Transporte Marítimo de Maquinas e outros.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <section class="section section-primary border-0 mb-0 appear-animation" data-appear-animation="fadeIn"
                        data-plugin-options="{'accY': -150}">
                        <div class="container">
                            <div class="row counters counters-sm pb-4 pt-3">
                                <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                                    <div class="counter">
                                        <i class="icons icon-user text-color-light"></i>
                                        <strong class="text-color-light font-weight-extra-bold" data-to="45000"
                                            data-append="+">0</strong>
                                        <label class="text-4 mt-1 text-color-light">Transportes</label>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3 mb-5 mb-lg-0">
                                    <div class="counter">
                                        <i class="icons icon-badge text-color-light"></i>
                                        <strong class="text-color-light font-weight-extra-bold" data-to="15">0</strong>
                                        <label class="text-4 mt-1 text-color-light">Parceiros</label>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3 mb-5 mb-sm-0">
                                    <div class="counter">
                                        <i class="icons icon-graph text-color-light"></i>
                                        <strong class="text-color-light font-weight-extra-bold" data-to="20">0</strong>
                                        <label class="text-4 mt-1 text-color-light">Serviços</label>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3">
                                    <div class="counter">
                                        <i class="icons icon-cup text-color-light"></i>
                                        <strong class="text-color-light font-weight-extra-bold" data-to="352">0</strong>
                                        <label class="text-4 mt-1 text-color-light">Beneficios</label>
                                    </div>
                                </div>
                            </div>
                        </div>
            </section>


            <div class="row text-center pt-4 mt-5">
                <div class="col">
                    <h2 class="word-rotator slide font-weight-bold text-8 mb-2">
                        <span>Notícias </span>
                        <span class="word-rotator-words bg-primary">

                        </span>

                    </h2>
                </div>
            </div>



            <hr>






        </div>

@endsection


@section('javascript')

@endsection