@extends('layouts.'.env('THEME'))


@section('style')
<style>
.top-feature {
    background-image: url("/uploads/brand/bg-help.jpg");
    background-size: 100%;
    background-position: right center;
}
.top-feature-text {
    text-shadow: 2px 2px #000;
}

@media (max-width: 992px) {
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .card-columns {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

</style>
@endsection

@section('content')

<div class="container-fluid darken top-feature" style="overflow: hidden;">
    <div class="row py-5 my-5">
        <div class="col-12 text-center top-feature-text">
            <h1 class="px-2" style="display: inline-block; margin-top: 0px;">
                Help &amp; Support
            </h1>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6 col-sm-7 col-10">
                    <h2 style="font-size: 1.5rem; font-weight: normal;">
                        Guides and help for your internet service
                    </h2>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container pt-4" id="main-container">

    <x-articles :articles="$articles" grid="0" date="0" />

    <x-section_heading title="Can't find what you're looking for?" subtitle="Let us know and we'll add it to our list." rowclass="mt-5"/>
     <x-contact />

</div>
@endsection