@include('site.header')
<style>
    section,
    .section-t-space {
        padding-top: 0px;
    }

    .collection-product-wrapper .product-wrapper-grid .product-box {
        margin-top: 0;
    }

    .col-grid-box {
        float: left;
        height: 400px;
    }

    .product-pagination {
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
        margin: 50px 0;
        clear: both;
    }

    .product-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        /* ensures equal height for all boxes */
    }

    .product-box .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .product-box .img-wrapper {
        width: 100%;
        height: 200px;
        /* fixed height for images */
        overflow: hidden;
    }

    .product-box .img-wrapper img {
        width: 100%;
        height: 100%;
        /* object-fit: cover; */
    }

    .product-detail {
        padding: 10px;
        margin-top: auto;
        /* aligns text to the bottom if needed */
    }

    .product-box,
    .product-wrap {
        position: relative;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        vertical-align: middle;
        border: 1px solid #cccccc;
    }

    .product-box .product-detail,
    .product-box .product-info,
    .product-wrap .product-detail,
    .product-wrap .product-info {
        padding-left: 5px;
        margin-top: 15px;
        height: 200px;
        text-align: center;
    }

    .product-box img {
        width: 100%;
        height: 200px;
    }

    .product-name {
        height: 50px;
        overflow: hidden;
    }

    .estd-website {
        height: 25px;
        overflow: hidden;
    }

    .business-type {
        height: 60px;
        overflow: hidden;
    }

    .company-info {
        height: 60px;
        overflow: hidden;
    }

    .price {
        height: 25px;
        overflow: hidden;
    }

    .enquiry-blk {
        height: 50px;
        overflow: hidden;
    }

    @media (max-width: 767px) {
        .col-grid-box {
            width: 50% !important;
            float: left;
            margin-bottom: 10px;
            height: 100%;
        }

        .product-box .img-wrapper,
        .product-box img {
            height: 120px;
        }

        .product-box .product-detail,
        .product-box .product-info {
            height: auto;
            margin-top: 10px;
            padding-left: 2px;
        }

        .product-box .product-detail h6 {
            font-size: 12px;
            white-space: normal;
            line-height: 1.5;
        }

        .product-name {
            height: 70px;
            overflow: hidden;
        }

        .estd-website {
            height: 30px;
            overflow: hidden;
        }

        .business-type {
            height: 70px;
            overflow: hidden;
        }

        .company-info {
            height: 60px;
            overflow: hidden;
        }

        .enquiry-blk {
            height: 50px;
            overflow: hidden;
            font-size: 12px;
        }

        .enquiry-blk button {
            font-size: 12px;
        }

        .desktop {
            display: none !important;
        }

        .mobile {
            display: flex !important;
            flex-wrap: wrap;
        }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        .col-grid-box {
            width: 33.3333% !important;
            float: left;
            margin-bottom: 30px;
        }

        .product-box .img-wrapper,
        .product-box img {
            height: 150px;
        }

        .product-box .product-detail,
        .product-box .product-info {
            height: 150px;
            margin-top: 10px;
            padding-left: 3px;
        }

        .desktop {
            display: flex !important;
            flex-wrap: wrap;
        }

        .mobile {
            display: none !important;
        }
    }
</style>
<!-- breadcrumb start -->
<div class="mb-3 breadcrumb-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="page-title">
                    <h2>{{ $page_title ?? '' }} Companies</h2>
                </div>
            </div>
            <div class="col-sm-6">
                <nav aria-label="breadcrumb" class="theme-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $page_title ?? '' }} Companies</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- breadcrumb end -->

<!-- section start -->
<section class="section-b-space ratio_asos">
    <div class="collection-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="collection-content col">
                    <div class="page-main-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="collection-product-wrapper">
                                    <div class="product-wrapper-grid">
                                        <div class="row margin-res">
                                            @foreach ($companies as $row)
                                                <div class="mb-3 col-xl-2 col-4 col-grid-box">