@extends('home.layouts.index')

@section('title')
    مقالات
@endsection

@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
<style>
    .blog-category a {
    background-color: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(25px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    padding: 2px 10px;
    border-radius: 4px;
    color: #000;
    font-size: 14px;
 
    
}
</style>
@endsection

@section('script')

@endsection

@section('content')
 <div class="header-top-campaign">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-5 col-lg-6 col-md-10">
                    <div class="header-campaign-activation axil-slick-arrow arrow-both-side header-campaign-arrow">
                        @foreach($animation_banners as $animation_banner)
                            @if($animation_banner->is_active == 1)
                                <div class="slick-slide">
                                    <div class="campaign-content">
                                        <p>{{$animation_banner->animation_text}} <a href="{{$animation_banner->btn_link}}">{{$animation_banner->btn_text}}</a></p>
                                    </div>
                                </div>
                            @endif
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Start of Main -->
    <main class="main-wrapper">
        <!-- Start Breadcrumb Area  -->
        <div class="axil-breadcrumb-area">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-8">
                        <div class="inner">
                            <ul class="axil-breadcrumb">
                                <li class="axil-breadcrumb-item"><a href="{{route('home.index')}}">خانه</a></li>
                                <li class="separator"></li>
                                <li class="axil-breadcrumb-item active" aria-current="page">مقالات</li>
                            </ul>
                            <h1 class="title">مقالات</h1>
                        </div>
                    </div>