@extends('layout.front.master')

@section('content')

<div role="main" class="main">

    {{-- Page Header --}}
    <section class="page-header p-relative border-0 bg-quaternary overflow-hidden m-0 p-0">
        <div class="custom-hero-bg">
            <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
                <defs>
                    <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
                        <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate>
                        <stop offset="0%" class="custom-stop-color-1"></stop>
                        <stop offset="100%" class="custom-stop-color-1" stop-opacity="0"></stop>
                    </radialGradient>
                </defs>
                <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)">
                    <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite"></animate>
                    <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite"></animate>
                    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform>
                </rect>
            </svg>
        </div>
        <div class="container">
            <div class="row align-items-center my-5 pt-5 pb-4">
                <div class="col text-center my-5 pb-5">
                    <div class="py-4">
                        <ul class="breadcrumb d-flex justify-content-center text-4-5 font-weight-medium mb-2">
                            <li><a href="{{ route('front.homepage') }}" class="text-color-primary text-decoration-none">{{ __('HOME') }}</a></li>
                            <li class="text-color-primary active">{{ __('ABOUT US') }}</li>
                        </ul>
                        <h1 class="text-color-light font-weight-bold text-10">{{ __('About Us') }}</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-absolute custom-el-1 custom-el-pos-5">
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
            </div>
        </div>
    </section>

    {{-- Content Section --}}
    <div class="custom-page-content p-relative z-index-2">
        <div class="container custom-padding-top-1 custom-padding-bottom-1 px-lg-5 bg-light">
            <div class="row px-lg-3">
                <div class="col">
                    <p class="text-4-5 line-height-7 text-dark pb-1 mb-4 mb-lg-2 mb-xl-4">{{ __('Cras a elit sit amet leo accumsan volutpat. Suspendisse hendreriast ehicula leo, vel efficitur felis ultrices non. Cras a elit sit amet leo acun volutpat. Suspendisse hendrerit vehicula leo, vel efficitur fel.') }}</p>
                </div>
            </div>
            <div class="row px-lg-3 py-4">
                <div class="col-lg-6 mb-5 mb-lg-0">
                    <img src="{{ asset('cd-project/img/demos/creative-agency-2/generic/generic-1.jpg') }}" class="img-fluid custom-border-radius-1" alt="">
                </div>
                <div class="col-lg-6 ps-lg-4">
                    <p class="text-4 line-height-7">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum eleifend eros a pharetra. Cras aliquam vestibulum vehicula. Sed sed lectus risus. Vestibulum maximus ac purus in euismod. In venenatis tellus ante, id porta risus semper quis. Aenean vel posuere urna, sit amet placerat massa. Quisque efficitur interdum libero, sed dictum lorem euismod sed.') }}</p>
                    <p class="text-4 line-height-7">{{ __('Aenean vel posuere urna, sit amet placerat massa. Quisque efficitur interdum libero, sed dictum lorem euismod sed.') }}</p>

                    <div class="d-block">
                        <div class="toggle toggle-minimal toggle-dark" data-plugin-toggle>
                            <section class="toggle">
                                <a class="toggle-title text-dark text-4">{{ __('What We Do') }}</a>
                                <div class="toggle-content">
                                    <p>{{ __('We provide comprehensive creative solutions including brand development, graphic design, web development, and digital marketing strategies tailored to your business needs.') }}</p>
                                </div>
                            </section>
                            <section class="toggle">
                                <a class="toggle-title text-dark text-4">{{ __('Pro Experience') }}</a>
                                <div class="toggle-content">
                                    <p>{{ __('With over 10 years of experience in the creative industry, our team brings expertise and innovation to every project, ensuring exceptional results for our clients.') }}</p>
                                </div>
                            </section>
                            <section class="toggle">
                                <a class="toggle-title text-dark text-4">{{ __('Partners and Investors') }}</a>
                                <div class="toggle-content">
                                    <p>{{ __('We work with leading companies and investors, building strong partnerships that drive growth and success in the digital marketplace.') }}</p>
                                </div>
                            </section>
                        </div>
                    </div>

                    <div class="d-block appear-animation pt-4" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                        <a href="{{ route('front.contact') }}" class="btn btn-modern btn-primary text-capitalize text-dark text-3 px-2 py-1 anim-hover-translate-top-5px transition-2ms">{{ __('Let\'s Talk') }} <i class="fas fa-arrow-right rotate-l-45 ms-2"></i></a>
                    </div>
                </div>
            </div>

            <div class="row px-lg-3 py-5">
                <div class="col">
                    <p class="text-4 line-height-7">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum eleifend eros a pharetra. Cras aliquam vestibulum vehicula. Sed sed lectus risus. Vestibulum maximus ac purus in euismod. In venenatis tellus ante, id porta risus semper quis. Aenean vel posuere urna, sit amet placerat massa. Quisque efficitur interdum libero, sed dictum lorem euismod sed.') }}</p>
                </div>
            </div>

            {{-- Numbers Section --}}
            <div class="row px-lg-3">
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 border-radius-0 bg-color-dark">
                        <div class="card-body">
                            <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">345+</h4>
                            <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ __('Cras a elit sit amet leo accumsan volutpat.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 border-radius-0 bg-color-dark">
                        <div class="card-body">
                            <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">1000+</h4>
                            <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ __('A crasa elit sit amet leo accumsan volutpat.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 border-radius-0 bg-color-dark">
                        <div class="card-body">
                            <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">123+</h4>
                            <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ __('Elit cras a elit sit amet leo accumsan volutpat.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 border-radius-0 bg-color-dark">
                        <div class="card-body">
                            <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">15+</h4>
                            <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ __('Sit cras a elit sit amet leo accumsan volutpat.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 border-radius-0 bg-color-dark">
                        <div class="card-body">
                            <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">45+</h4>
                            <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ __('Lorem a elit sit amet leo accumsan volutpat.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border-0 border-radius-0 bg-color-dark">
                        <div class="card-body">
                            <h4 class="card-title mb-1 custom-font-size-1 font-weight-semi-bold text-light">345+</h4>
                            <p class="text-4-5 line-height-7 text-light pb-0 mt-5 mb-0">{{ __('Cras a elit sit amet leo accumsan volutpat.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection