<div>
    <?php
        $company = $this->company;
        $page = $this->page;
        $vision = $this->vision;
        $mission = $this->mission;
        $goals = $this->goals;
    ?>
    
    <!-- Page Title -->
    <section class="s-page-title" style="background: linear-gradient(135deg, #2E3191 0%, #1B75BB 100%);">
        <div class="container">
            <h2 class="page-title text-white font-sora">About Us</h2>
        </div>
    </section>
    <!-- /Page Title -->
    
    <!-- Company Description -->
    <section class="section-company-desc">
        <div class="container">
            <div class="company-desc-wrap">
                <h3 class="company-name text-primary">
                    <?php echo e($company->name); ?>

                </h3>
                <div class="company-description">
                    <?php echo $page->description; ?>

                </div>
            </div>
        </div>
    </section>
    <!-- /Company Description -->
    
    <!-- Vision & Mission -->
    <section class="section-vision-mission">
        <div class="container">
            <div class="vision-mission-grid">
                <!-- Vision -->
                <div class="vm-card">
                    <div class="vm-card-inner">
                        <h4 class="vm-title text-primary">Our Vision</h4>
                        <div class="vm-content">
                            <?php echo $vision->description; ?>

                        </div>
                    </div>
                </div>
                
                <!-- Mission -->
                <div class="vm-card">
                    <div class="vm-card-inner">
                        <h4 class="vm-title text-primary">Our Mission</h4>
                        <div class="vm-content">
                            <?php echo $mission->description; ?>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /Vision & Mission -->
    
    <!-- Goals (if available) -->
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($goals && $goals->count() > 0): ?>
    <section class="section-goals">
        <div class="container">
            <div class="goals-head text-center mb-4">
                <h3 class="text-primary">Our Core Values</h3>
            </div>
            <div class="goals-grid">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $goals; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $goal): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="goal-card">
                    <div class="goal-card-inner">
                        <div class="goal-number"><?php echo e($loop->iteration); ?></div>
                        <h5 class="goal-title text-primary"><?php echo e($goal->title); ?></h5>
                        <p class="goal-description"><?php echo e($goal->description); ?></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; ?>
    <!-- /Goals -->

    <style>
        /* ===== MOBILE FIRST ABOUT US PAGE STYLES ===== */
        
        /* Page Title */
        .s-page-title {
            padding: 40px 0;
        }

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

        /* Company Description Section */
        .section-company-desc {
            padding: 40px 0;
            background: #f8f9fa;
        }

        .company-desc-wrap {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .company-name {
            font-size: 22px;
            margin-bottom: 16px;
            font-weight: 600;
        }

        .company-description {
            font-size: 14px;
            line-height: 1.8;
            color: #555;
        }

        .company-description p {
            margin-bottom: 12px;
        }

        .company-description p:last-child {
            margin-bottom: 0;
        }

        /* Vision & Mission Section */
        .section-vision-mission {
            padding: 40px 0;
        }

        .vision-mission-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .vm-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .vm-card:hover {
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transform: translateY(-4px);
        }

        .vm-card-inner {
            padding: 20px;
        }

        .vm-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #2E3191 0%, #1B75BB 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            margin-bottom: 16px;
        }

        .vm-title {
            font-size: 20px;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .vm-content {
            font-size: 14px;
            line-height: 1.7;
            color: #666;
        }

        .vm-content p {
            margin-bottom: 10px;
        }

        .vm-content p:last-child {
            margin-bottom: 0;
        }

        /* Goals Section */
        .section-goals {
            padding: 40px 0;
            background: #f8f9fa;
        }

        .goals-head h3 {
            font-size: 24px;
            margin-bottom: 8px;
        }

        .goals-head p {
            font-size: 14px;
        }

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

        .goal-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .goal-card:hover {
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transform: translateY(-4px);
        }

        .goal-card-inner {
            padding: 20px;
            position: relative;
        }

        .goal-number {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #2E3191 0%, #1B75BB 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            font-weight: 700;
        }

        .goal-title {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 600;
            padding-right: 50px;
        }

        .goal-description {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
            margin: 0;
        }

        /* Small Mobile (320px - 374px) */
        @media (max-width: 374px) {
            .page-title {
                font-size: 24px;
            }

            .company-desc-wrap {
                padding: 15px;
            }

            .company-name {
                font-size: 20px;
            }

            .company-description {
                font-size: 13px;
            }

            .vm-card-inner,
            .goal-card-inner {
                padding: 15px;
            }

            .vm-icon {
                width: 45px;
                height: 45px;
                font-size: 22px;
            }

            .vm-title {
                font-size: 18px;
            }

            .vm-content {
                font-size: 13px;
            }

            .goal-number {
                width: 35px;
                height: 35px;
                font-size: 16px;
            }

            .goal-title {
                font-size: 16px;
                padding-right: 45px;
            }

            .goal-description {
                font-size: 13px;
            }
        }

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

            .company-name {
                font-size: 21px;
            }

            .vm-title {
                font-size: 19px;
            }

            .goal-title {
                font-size: 17px;
            }
        }

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

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

            .section-company-desc,
            .section-vision-mission,
            .section-goals {
                padding: 50px 0;
            }

            .company-desc-wrap {
                padding: 25px;
            }

            .company-name {
                font-size: 24px;
                margin-bottom: 20px;
            }

            .company-description {
                font-size: 15px;
            }

            .vision-mission-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            .vm-card-inner {
                padding: 25px;
            }

            .vm-icon {
                width: 55px;
                height: 55px;
                font-size: 26px;
            }

            .vm-title {
                font-size: 21px;
            }

            .vm-content {
                font-size: 15px;
            }

            .goals-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            .goal-card-inner {
                padding: 25px;
            }
        }

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

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

            .section-company-desc,
            .section-vision-mission,
            .section-goals {
                padding: 60px 0;
            }

            .company-desc-wrap {
                padding: 30px;
            }

            .company-name {
                font-size: 26px;
                margin-bottom: 24px;
            }

            .company-description {
                font-size: 16px;
            }

            .vision-mission-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }

            .vm-card-inner {
                padding: 30px;
            }

            .vm-icon {
                width: 60px;
                height: 60px;
                font-size: 28px;
                margin-bottom: 20px;
            }

            .vm-title {
                font-size: 22px;
                margin-bottom: 16px;
            }

            .vm-content {
                font-size: 15px;
            }

            .goals-head h3 {
                font-size: 28px;
            }

            .goals-head p {
                font-size: 15px;
            }

            .goals-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }

            .goal-card-inner {
                padding: 30px;
            }

            .goal-number {
                width: 45px;
                height: 45px;
                font-size: 20px;
            }

            .goal-title {
                font-size: 19px;
            }

            .goal-description {
                font-size: 15px;
            }
        }

        /* Large Desktop (992px+) */
        @media (min-width: 992px) {
            .s-page-title {
                padding: 60px 0;
            }

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

            .section-company-desc,
            .section-vision-mission,
            .section-goals {
                padding: 80px 0;
            }

            .company-desc-wrap {
                padding: 40px;
            }

            .company-name {
                font-size: 32px;
                margin-bottom: 28px;
            }

            .company-description {
                font-size: 17px;
                line-height: 2;
            }

            .vision-mission-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;
            }

            .vm-card-inner {
                padding: 40px;
            }

            .vm-icon {
                width: 70px;
                height: 70px;
                font-size: 32px;
                margin-bottom: 24px;
            }

            .vm-title {
                font-size: 24px;
                margin-bottom: 20px;
            }

            .vm-content {
                font-size: 16px;
                line-height: 1.8;
            }

            .goals-head h3 {
                font-size: 32px;
                margin-bottom: 12px;
            }

            .goals-head p {
                font-size: 16px;
            }

            .goals-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 30px;
            }

            .goal-card-inner {
                padding: 35px;
            }

            .goal-number {
                width: 50px;
                height: 50px;
                font-size: 22px;
            }

            .goal-title {
                font-size: 20px;
                margin-bottom: 12px;
            }

            .goal-description {
                font-size: 15px;
                line-height: 1.7;
            }
        }

        /* Extra Large Desktop (1200px+) */
        @media (min-width: 1200px) {
            .goals-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

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

            .section-company-desc,
            .section-vision-mission,
            .section-goals {
                padding: 30px 0;
            }
        }

        /* Print Styles */
        @media print {
            .s-page-title {
                background: #2E3191 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>
</div>
<?php /**PATH C:\2026\2.February\BLEYS\resources\views/livewire/about-us.blade.php ENDPATH**/ ?>