@extends('frontend.layouts.main')

@section('title','Write to CSV Pharmaceuticals for Quality, Process and Quotations')

@section('content')
    
    <div class="theme-inner-banner">
        <div class="bg" style="background: url(/storage/home-page-banners/16-Natural-Oils-AOS-Products.jpg) no-repeat center;">
            <div class="opacity">
                <div class="container">
                    <h1>Natural Oils</h1>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="clearfix">
                <ul class="float-left">
                    <li><a href="{{ route('home') }}" class="tran3s">Home</a></li>
                    <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                    <li>Natural Oils</li>
                </ul>
            </div>
        </div>
    </div>

    <section class="service-style-two service-inner-page">
        <div class="container">
            
                    <div class="services-wrapper">
                        <div class="row">
                    @foreach($categories as $category)
                    
                       <div class="col-md-4">
                            <div class="single-service tran3s">
                            <img src="{{ asset($category->image) }}" alt="{{ $category->category }}" title="{{ $category->category }}" />
                            <div class="text">
                                <h5><a href="{{ route('product-category',$category->slug) }}" class="tran3s">{{ $category->category }}</a></h5>
                                <p>{{ $category->brief }} </p>
                                <a href="{{ route('product-category',$category->slug) }}" class="tran3s read-more hvr-icon-wobble-horizontal">View Products<i class="fa fa-caret-right" aria-hidden="true"></i></a>
                            </div>
                        </div>
                       </div>
                    
                    @endforeach
                    </div>
                </div>
            </div>
    </section>
<style>
    .service-style-two img {
    height:315px;
}
.service-inner-page .single-service .text {
    height: 330px;
}
.service-inner-page .single-service .text p{
   margin: 0px !important;
}
.single-service{
        justify-content: left;
}
.services-wrapper {
    display: inline-block !important;
}
</style>

    
@endsection