<div>
   <!-- Page Title -->
      <section class="s-page-title" style="background: linear-gradient(135deg, #2E3191 0%, #1B75BB 100%); padding: 60px 0;">
         <div class="container">
               <h2 class="page-title text-white font-sora"><?php echo e($category->name); ?></h2>
         </div>
      </section>
   <!-- /Page Title -->
    <!-- Benefit -->
    <section class="bg-surface flat-spacing">
        <div class="pt-0">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div style="width: 100%; max-width: 100%; margin: 0; padding: 0;">
                            <p class="desc text-body-large mb-4" style="text-align: left; width: 100%;"><?php echo $category->description; ?></p>
                            <div class="d-flex gap-3 mt-4">
                                <a href="<?php echo e(url('/contact')); ?>" class="btn text-uppercase px-4 py-3" style="border: 2px solid #000; color: #000; background: transparent; font-weight: 600; letter-spacing: 1px; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.background='#000'; this.style.color='#fff';" onmouseout="this.style.background='transparent'; this.style.color='#000';">
                                    GET IN TOUCH
                                </a>
                                <!-- <a href="<?php echo e(url('/portfolio')); ?>" class="btn text-uppercase px-4 py-3" style="border: 2px solid #000; color: #000; background: transparent; font-weight: 600; letter-spacing: 1px; text-decoration: none; transition: all 0.3s ease;" onmouseover="this.style.background='#000'; this.style.color='#fff';" onmouseout="this.style.background='transparent'; this.style.color='#000';">
                                    VIEW PORTFOLIO
                                </a> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /Benefit -->

    <!-- Service -->
     <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($services->count() > 0): ?>
    <section class="section-service-provide flat-spacing">
        <div class="container">
            <div class="tf-grid-layout sm-col-2 xl-col-3">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="card-service-v01 hover-img4">
                        <div class="card-content">
                            <a href="#" class="name text-primary h5 fw-medium link-underline">
                                <?php echo e(Str::upper($service->title)); ?>

                            </a>
                            <p class="desc">
                                <?php echo $service->content; ?>

                            </p>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            </div>
        </div>
    </section>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    <!-- Service -->

    <style>
        /* ===== MOBILE FIRST RESPONSIVE STYLES FOR SERVICES BY CATEGORY ===== */
        
        /* Page Title - Mobile First */
        .s-page-title {
            padding: 40px 0 !important;
        }

        .page-title {
            font-size: 24px;
            text-align: center;
            margin: 0;
        }

        /* Benefit Section */
        .bg-surface {
            padding: 40px 0;
        }

        .desc {
            font-size: 14px;
            line-height: 1.6;
            text-align: left !important;
            margin-bottom: 20px;
        }

        /* Buttons */
        .d-flex.gap-3 {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 20px;
        }

        .d-flex.gap-3 .btn {
            width: 100%;
            padding: 14px 20px !important;
            font-size: 14px;
            text-align: center;
            border: 2px solid #000 !important;
            color: #000 !important;
            background: transparent !important;
            font-weight: 600 !important;
            letter-spacing: 1px !important;
            text-decoration: none !important;
            transition: all 0.3s ease !important;
            border-radius: 4px;
        }

        .d-flex.gap-3 .btn:hover {
            background: #000 !important;
            color: #fff !important;
        }

        /* Service Cards */
        .section-service-provide {
            padding: 40px 0;
        }

        .tf-grid-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .card-service-v01 {
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .card-service-v01:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .card-service-v01 .name {
            font-size: 18px;
            margin-bottom: 12px;
            display: block;
            color: var(--primary-color, #3F99D4);
        }

        .card-service-v01 .desc {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
            margin: 0;
        }

        /* Small Mobile (375px and up) */
        @media (min-width: 375px) {
            .page-title {
                font-size: 26px;
            }

            .desc {
                font-size: 15px;
            }
        }

        /* Tablet (576px and up) */
        @media (min-width: 576px) {
            .s-page-title {
                padding: 50px 0 !important;
            }

            .page-title {
                font-size: 32px;
                text-align: left;
            }

            .bg-surface {
                padding: 50px 0;
            }

            .desc {
                font-size: 16px;
            }

            .d-flex.gap-3 {
                flex-direction: row;
                gap: 16px;
            }

            .d-flex.gap-3 .btn {
                width: auto;
                padding: 16px 32px !important;
                font-size: 15px;
            }

            .section-service-provide {
                padding: 50px 0;
            }

            .tf-grid-layout.sm-col-2 {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }

            .card-service-v01 {
                padding: 28px;
            }

            .card-service-v01 .name {
                font-size: 20px;
            }

            .card-service-v01 .desc {
                font-size: 15px;
            }
        }

        /* Desktop (768px and up) */
        @media (min-width: 768px) {
            .s-page-title {
                padding: 60px 0 !important;
            }

            .page-title {
                font-size: 36px;
            }

            .bg-surface {
                padding: 60px 0;
            }

            .desc {
                font-size: 17px;
                line-height: 1.7;
            }

            .d-flex.gap-3 {
                gap: 20px;
            }

            .d-flex.gap-3 .btn {
                padding: 18px 40px !important;
                font-size: 16px;
            }

            .section-service-provide {
                padding: 60px 0;
            }

            .card-service-v01 {
                padding: 32px;
            }

            .card-service-v01 .name {
                font-size: 22px;
                margin-bottom: 16px;
            }

            .card-service-v01 .desc {
                font-size: 16px;
            }
        }

        /* Large Desktop (992px and up) */
        @media (min-width: 992px) {
            .page-title {
                font-size: 40px;
            }

            .bg-surface {
                padding: 80px 0;
            }

            .desc {
                font-size: 18px;
            }

            .section-service-provide {
                padding: 80px 0;
            }

            .tf-grid-layout.xl-col-3 {
                grid-template-columns: repeat(3, 1fr);
                gap: 30px;
            }

            .card-service-v01 {
                padding: 36px;
            }

            .card-service-v01 .name {
                font-size: 24px;
            }
        }

        /* Extra Large Desktop (1200px and up) */
        @media (min-width: 1200px) {
            .page-title {
                font-size: 44px;
            }

            .desc {
                font-size: 19px;
            }

            .card-service-v01 {
                padding: 40px;
            }
        }

        /* Touch Optimization */
        @media (hover: none) and (pointer: coarse) {
            .d-flex.gap-3 .btn,
            .card-service-v01 {
                min-height: 44px;
            }
        }

        /* Landscape Mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            .s-page-title {
                padding: 30px 0 !important;
            }

            .bg-surface,
            .section-service-provide {
                padding: 30px 0;
            }
        }
    </style>
</div>
<?php /**PATH /home/niifam/preview.niifam.co.tz/resources/views/livewire/services-by-category.blade.php ENDPATH**/ ?>