@extends('layout.master')

@push('stylesheet')
    <link href="{{ asset('plugins/slickslider/slick.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('plugins/slickslider/slick-theme.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .hero-3-bg {
            padding: 100px 0 100px;
        }
        .hero-1-bg {
            padding: 170px 0 140px;
        }

        .hero-1-bg .hero-small-title {
            letter-spacing: 2px;
        }

        .hero-1-bg .main-title {
            font-size: 2.8rem;
            line-height: 1.35;
            color: #00aeef;
        }

        .hero-2-bg {
            padding: 220px 0px 0px;
        }

        .hero-2-bg .hero-2-img {
            position: relative;
            top: 92px;
        }

        .hero-3-bg {
            padding: 100px 0 100px;
        }

        .hero-4-bg {
            padding: 220px 0 190px;
        }

        .hero-4-bg .hero-login-form {
            background: #fbfbfb;
            -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .hero-4-bg .hero-login-form .form-border {
            border: 1px solid #9e9eb0;
        }

        .hero-4-bg .hero-4-title {
            line-height: 1.4;
        }

        .hero-5-bg {
            position: relative;
            overflow: hidden;
        }

        .hero-5-bg .carousel-control-next,
        .hero-5-bg .carousel-control-prev {
            width: 6%;
        }

        .hero-5-bg .carousel-item,
        .hero-5-bg .carousel {
            height: 100vh;
            width: 100%;
        }

        .hero-5-bg .carousel-item {
            background-position: center center !important;
            background-size: cover !important;
        }

        .hero-5-bg .carousel-item .play-icon-circle {
            background: #ffffff;
            height: 46px;
            width: 46px;
            line-height: 46px;
            text-align: center;
            border-radius: 50%;
            display: inline-block;
        }

        .hero-5-bg .slide-icon i {
            font-size: 50px;
        }

        .hero-6-bg {
            padding: 280px 0 300px;
        }

        .hero-6-bg .hero-6-title {
            z-index: 1;
            position: relative;
        }

        .hero-6-bg .subcribe-form form {
            position: relative;
            margin: 0px auto;
        }

        .hero-6-bg .subcribe-form input {
            padding: 12px 20px;
            width: 60%;
            font-size: 17px;
            color: #9b9bae !important;
            border: none;
            outline: none !important;
            background-color: rgba(251, 251, 251, 0.85);
            -webkit-box-shadow: 0 2px 10px rgba(52, 58, 64, 0.12);
            box-shadow: 0 2px 10px rgba(52, 58, 64, 0.12);
            border-radius: 30px;
            position: relative;
            top: 3px;
        }

        .hero-7-bg {
            padding: 160px 0 200px;
        }

        .hero-7-bg .hero-7-title {
            position: relative;
            font-weight: 200;
            font-size: 3.55em;
        }

        .hero-7-bg .hero-7-title .text-wrapper {
            position: relative;
            display: inline-block;
            padding-top: 0.2em;
            padding-right: 0.05em;
            padding-bottom: 0.1em;
            overflow: hidden;
        }

        .hero-7-bg .hero-7-title .letter {
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            display: inline-block;
            line-height: 1em;
        }

        .hero-7-bg .hero-7-bg-overlay {
            background-image: url("../images/hero-7-bg.png");
            background-repeat: no-repeat;
            opacity: 1;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }

        .hero-7-bg .shape-light {
            display: block;
        }

        .hero-7-bg .shape-dark {
            display: none;
        }

        @media (max-width: 425px) {
            .hero-1-bg .main-title {
                font-size: 2rem;
            }
            .hero-2-bg .hero-2-img {
                top: 50px !important;
            }
            .hero-5-bg .carousel-item,
            .hero-5-bg .carousel {
                height: 100vh !important;
            }
            .hero-5-bg .carousel-item .hero-5-title,
            .hero-5-bg .carousel .hero-5-title {
                font-size: 2rem !important;
            }
            .hero-5-bg .carousel-item .hero-5-subtitle,
            .hero-5-bg .carousel .hero-5-subtitle {
                font-size: 14px !important;
                width: 90%;
                margin: 0 auto;
            }
            .hero-6-bg {
                padding: 160px 0 160px !important;
            }
            .hero-6-bg .subcribe-form input {
                width: 100%;
            }
            .hero-7-bg .hero-7-title {
                font-size: 2.55em;
            }
        }

        @media (max-width: 768px) {
            .hero-1-bg {
                padding: 120px 0;
            }
            .hero-2-bg {
                padding: 150px 0px 0px;
            }
            .hero-2-bg .hero-2-img {
                top: 90px;
            }
            .hero-4-bg {
                padding: 160px 0 100px;
            }
            .hero-5-bg .carousel-item,
            .hero-5-bg .carousel {
                height: 75vh;
            }
            .hero-6-bg {
                padding: 220px 0 200px;
            }
            .hero-7-bg {
                padding: 140px 0;
            }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .hero-1-bg {
                background: none !important;
            }
            .hero-5-bg .carousel-item,
            .hero-5-bg .carousel {
                height: 60vh;
            }
        }

    </style>
@endpush


@section('title', 'Welcome')

@section('content')
    @include('partials.welcome.banner')
    <section class="section-content padding-y bg">
        <div class="container">
            <h4 class="text-uppercase">our services</h4>
            <div class="row">
                @if($services->count())
                    @foreach($services as $item)
                        <div class="col-md-4 mt-3">
                            @include('partials.welcome.service_card', ['service' => $item])
                        </div>
                    @endforeach
                @else
                    <p>No content yet</p>
                @endif
            </div>
        </div>
    </section>
    <section class="section-content padding-y">
        @include('partials.welcome.about')
    </section>

    <section class="section-content bg padding-y">
        <div class="container">
            <h4>Our Clients</h4>
            @include('partials.welcome.partners', ['partners' => $partners])
            <br><br>
        </div>
    </section>
@stop