<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>

<!-- 1. Sliding Hero Section -->
<section class="hero-slider" style="position: relative; height: 100vh; overflow: hidden; background: #000;">
    <?php if (empty($slider_images)): ?>
        <!-- Fallback if no banners in DB -->
        <div class="slider-item active" style="position: absolute; inset: 0; background: linear-gradient(rgba(10, 25, 47, 0.7), rgba(10, 25, 47, 0.85)), url('<?= base_url('assets/images/home/hero_construction.png') ?>'); background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; transition: var(--transition);">
            <div class="container">
                <div class="hero-content animate-up" style="max-width: 950px;">
                    <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 30px;">
                        <div style="width: 50px; height: 2px; background: var(--accent);"></div>
                        <span style="text-transform: uppercase; letter-spacing: 5px; font-weight: 800; color: var(--accent); font-size: 0.9rem;">Established 2017</span>
                    </div>
                    <h1 style="font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -3px; margin-bottom: 25px;">Building Infrastructure That <span style="color: var(--accent);">Drives the Nation Forward</span></h1>
                    <p style="font-size: 1.4rem; color: rgba(255,255,255,0.85); max-width: 700px; line-height: 1.6; margin-bottom: 50px; font-weight: 400;">Experts in Railway Projects, Civil Construction & Premium Developments Since 2017.</p>
                    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                        <a href="<?= base_url('projects') ?>" class="btn btn-primary" style="background: var(--accent); box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4); padding: 18px 45px;">View Projects <i class="bi bi-arrow-right"></i></a>
                        <a href="<?= base_url('contact') ?>" class="btn" style="border: 2px solid rgba(255,255,255,0.3); color: #fff; padding: 18px 45px; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    <?php else: ?>
        <?php foreach ($slider_images as $index => $slider): 
            $imgUrl = $slider['image_url'];
            // If the image URL is broken or looks like an internal path, use our new public assets
            if (empty($imgUrl) || strpos($imgUrl, 'http') === false) {
                if (stripos($slider['title'], 'Railway') !== false) {
                    $imgUrl = base_url('assets/images/home/railway_bridge.png');
                } else {
                    $imgUrl = base_url('assets/images/home/hero_construction.png');
                }
            }
        ?>
            <div class="slider-item <?= $index === 0 ? 'active' : '' ?>" style="position: absolute; inset: 0; background: linear-gradient(rgba(10, 25, 47, 0.6), rgba(10, 25, 47, 0.8)), url('<?= $imgUrl ?>'); background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; opacity: <?= $index === 0 ? '1' : '0' ?>; z-index: <?= $index === 0 ? '1' : '0' ?>; transform: scale(<?= $index === 0 ? '1' : '1.1' ?>);">
                <div class="container">
                    <div class="hero-content" style="max-width: 950px;">
                        <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 30px;">
                            <div style="width: 50px; height: 2px; background: var(--accent);"></div>
                            <span style="text-transform: uppercase; letter-spacing: 5px; font-weight: 800; color: var(--accent); font-size: 0.9rem;">Saanvi Infratech</span>
                        </div>
                        <h1 style="font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -3px; margin-bottom: 25px;"><?= $slider['title'] ?></h1>
                        <p style="font-size: 1.4rem; color: rgba(255,255,255,0.85); max-width: 700px; line-height: 1.6; margin-bottom: 50px; font-weight: 400;"><?= $slider['subtitle'] ?></p>
                        <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                            <a href="<?= $slider['link_url'] ?? base_url('projects') ?>" class="btn btn-primary" style="background: var(--accent); box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4); padding: 18px 45px;">Explore More <i class="bi bi-arrow-right"></i></a>
                            <a href="<?= base_url('contact') ?>" class="btn" style="border: 2px solid rgba(255,255,255,0.3); color: #fff; padding: 18px 45px; background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);">Get in Touch</a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>

    <!-- Slider Navigation Dots -->
    <div style="position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; gap: 15px;">
        <?php foreach ($slider_images as $index => $slider): ?>
            <div class="slider-dot <?= $index === 0 ? 'active' : '' ?>" data-index="<?= $index ?>" style="width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; transition: var(--transition); border: 2px solid transparent;"></div>
        <?php endforeach; ?>
    </div>
</section>

<style>
    .slider-dot.active {
        background: var(--accent) !important;
        transform: scale(1.3);
        border-color: rgba(255,255,255,0.5) !important;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const slides = document.querySelectorAll('.slider-item');
        const dots = document.querySelectorAll('.slider-dot');
        let currentSlide = 0;

        if (slides.length <= 1) return;

        function showSlide(n) {
            slides.forEach((s, i) => {
                s.style.opacity = '0';
                s.style.zIndex = '0';
                s.style.transform = 'scale(1.1)';
            });
            dots.forEach(d => d.classList.remove('active'));

            slides[n].style.opacity = '1';
            slides[n].style.zIndex = '1';
            slides[n].style.transform = 'scale(1)';
            dots[n].classList.add('active');
            currentSlide = n;
        }

        dots.forEach((dot, i) => {
            dot.addEventListener('click', () => showSlide(i));
        });

        setInterval(() => {
            let next = (currentSlide + 1) % slides.length;
            showSlide(next);
        }, 6000);
    });
</script>

<!-- 2. About Company (Quick Intro) -->
<section style="padding: 100px 0; background: #fff;">
    <div class="container">
        <div class="grid-2" style="align-items: center;">
            <div class="animate-left">
                <h2 style="font-size: 3.5rem; line-height: 1.1; margin-bottom: 30px; color: var(--primary);"><?= $about['title'] ?></h2>
                <div style="font-size: 1.2rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 30px;">
                    <?= substr(strip_tags($about['description']), 0, 250) ?>...
                </div>
                <div style="margin-bottom: 40px;">
                    <a href="<?= base_url('about') ?>" class="btn btn-primary" style="padding: 12px 30px; font-size: 0.9rem; border-radius: 10px;">Read More <i class="bi bi-arrow-right"></i></a>
                </div>
                <div style="background: var(--bg-alt); padding: 30px; border-radius: 20px; border-left: 5px solid var(--accent); display: flex; align-items: center; gap: 20px;">
                    <i class="bi bi-shield-check" style="font-size: 3rem; color: var(--accent);"></i>
                    <div>
                        <h4 style="margin: 0; font-size: 1.2rem;"><?= $about['feature_title'] ?></h4>
                        <p style="margin: 5px 0 0; color: var(--text-muted); font-size: 0.95rem;"><?= $about['feature_desc'] ?></p>
                    </div>
                </div>
            </div>
            <div class="animate-right about-image-container" style="position: relative;">
                <img src="<?= $about['image'] ?>" style="width: 100%; border-radius: 40px; box-shadow: var(--shadow-lg); object-fit: cover; aspect-ratio: 4/3;">
                <div class="rvnl-badge" style="position: absolute; bottom: -30px; right: -30px; background: var(--primary); color: #fff; padding: 40px; border-radius: 30px; box-shadow: 0 20px 50px rgba(10, 25, 47, 0.3);">
                    <div style="font-size: 4rem; font-weight: 900; line-height: 1;">RVNL</div>
                    <div style="text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 0.8rem; margin-top: 10px;">Strategic Partner</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 3. Our Expertise & Services -->
<section style="background: var(--primary); padding: 140px 0;">
    <div class="container">
        <div class="section-title" style="margin-bottom: 80px;">
            <div class="underline"></div>
            <h2 style="color: var(--accent);">Our <span style="color: #fff;">Expertise</span></h2>
            <p style="font-size: 1.1rem; color: rgba(255,255,255,0.7); max-width: 600px; margin: 20px auto 0;">We offer a wide range of construction and design services.</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-bottom: 100px;">
            <?php foreach ($services as $service): ?>
                <div class="service-card" style="background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition);">
                    <?php 
                        $serviceImg = $service['image'];
                        if (empty($serviceImg)) {
                            $title = strtolower($service['title']);
                            if (strpos($title, 'railway bridge') !== false) {
                                $serviceImg = base_url('assets/images/services/railway_bridge.png');
                            } elseif (strpos($title, 'foot over') !== false || strpos($title, 'fob') !== false) {
                                $serviceImg = base_url('assets/images/services/foot_over_bridge.png');
                            } elseif (strpos($title, 'track') !== false || strpos($title, 'mast') !== false) {
                                $serviceImg = base_url('assets/images/services/track_works.png');
                            } elseif (strpos($title, 'gated') !== false || strpos($title, 'villas') !== false) {
                                $serviceImg = base_url('assets/images/services/gated_community.png');
                            } elseif (strpos($title, 'high-rise') !== false || strpos($title, 'tower') !== false) {
                                $serviceImg = base_url('assets/images/services/high_rise.png');
                            } else {
                                $serviceImg = base_url('assets/images/services/general_construction.png');
                            }
                        }
                    ?>
                    <?php if ($serviceImg): ?>
                        <img src="<?= $serviceImg ?>" style="width: 100%; height: 250px; object-fit: cover;">
                    <?php else: ?>
                        <div style="width: 100%; height: 250px; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; color: var(--primary);">
                            <i class="bi bi-gear" style="font-size: 3rem;"></i>
                        </div>
                    <?php endif; ?>
                    <div style="padding: 30px;">
                        <h4 style="font-size: 1.5rem; margin-bottom: 15px; color: var(--primary); text-transform: capitalize;"><?= $service['title'] ?></h4>
                        <p style="color: var(--text-muted); line-height: 1.6; font-size: 0.95rem;">
                            <?= $service['description'] ?>
                        </p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <div style="text-align: center;">
            <a href="<?= base_url('services') ?>" class="btn btn-primary" style="padding: 16px 45px; font-size: 1rem; border-radius: 50px; box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);">View All Services <i class="bi bi-arrow-right"></i></a>
        </div>
    </div>
</section>

<section style="background: var(--bg-alt); padding: 140px 0;">
    <div class="container">
        <div class="section-title" style="margin-bottom: 60px;">
            <h2 style="color: var(--primary); font-size: 2.5rem;">Expertise in <span style="color: var(--accent);">Infrastructure</span></h2>
            <p style="font-size: 1.1rem; color: var(--text-muted); max-width: 600px; margin: 20px auto 0;">Comprehensive construction solutions across public and private sectors.</p>
        </div>

        <div class="grid-2">
            <!-- Government Projects -->
            <div style="background: #fff; border-radius: 30px; padding: 50px; box-shadow: var(--shadow-md); border: 1px solid var(--border);">
                <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 40px;">
                    <div style="width: 60px; height: 60px; background: var(--primary-soft); color: var(--primary); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                        <i class="bi bi-bank"></i>
                    </div>
                    <h3 style="font-size: 2rem; margin: 0;">Government Projects</h3>
                </div>
                <div class="grid-2" style="gap: 20px;">
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: var(--text-main); font-size: 1.1rem;">Railway Bridges</span>
                        </div>
                        <p style="font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.4;">Construction and fabrication of major and minor bridges with precision engineering.</p>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: var(--text-main); font-size: 1.1rem;">Foot Over Bridges</span>
                        </div>
                        <p style="font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.4;">Safe and durable passenger crossing solutions at key railway stations.</p>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: var(--text-main); font-size: 1.1rem;">Track Works</span>
                        </div>
                        <p style="font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.4;">Expert laying, maintenance, and rehabilitation of high-capacity railway tracks.</p>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: var(--text-main); font-size: 1.1rem;">OH Mast Works</span>
                        </div>
                        <p style="font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.4;">Specialized installation of Overhead Equipment masts for railway electrification.</p>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: var(--text-main); font-size: 1.1rem;">Road Works</span>
                        </div>
                        <p style="font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.4;">High-quality asphalt and concrete road construction for municipal projects.</p>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: var(--text-main); font-size: 1.1rem;">Maintenance & Mods</span>
                        </div>
                        <p style="font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.4;">Reliable maintenance and strategic modifications of existing structures.</p>
                    </div>
                </div>
            </div>

            <!-- Private Projects -->
            <div style="background: var(--primary); border-radius: 30px; padding: 50px; box-shadow: var(--shadow-md); color: #fff;">
                <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 40px;">
                    <div style="width: 60px; height: 60px; background: rgba(255,255,255,0.1); color: var(--accent); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                        <i class="bi bi-building"></i>
                    </div>
                    <h3 style="font-size: 2rem; margin: 0; color: #fff;">Private Projects</h3>
                </div>
                <div class="grid-2" style="gap: 20px;">
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: #fff; font-size: 1.1rem;">Gated Community Villas</span>
                        </div>
                        <p style="font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.4;">Premium residential enclaves with integrated amenities and modern lifestyle features.</p>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: #fff; font-size: 1.1rem;">Luxury Villas</span>
                        </div>
                        <p style="font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.4;">Bespoke architectural masterpieces designed for exclusive comfort and elegance.</p>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: #fff; font-size: 1.1rem;">High-Rise Towers</span>
                        </div>
                        <p style="font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.4;">Modern residential and commercial towers featuring state-of-the-art infrastructure.</p>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; flex-direction: column;">
                        <div style="display: flex; gap: 12px; align-items: center;">
                            <i class="bi bi-check2-circle" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span style="font-weight: 700; color: #fff; font-size: 1.1rem;">Function Halls</span>
                        </div>
                        <p style="font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.4;">Elegant venues designed for large-scale corporate and private events.</p>
                    </div>
                </div>
                <div style="margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.95rem; color: rgba(255,255,255,0.7);">
                    Tailored solutions for premium residential and commercial spaces.
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 4. Key Highlights & 5. Certifications -->
<section style="padding: 100px 0; background: var(--primary);">
    <div class="container">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 60px; text-align: center; color: #fff;">
            <div>
                <div style="font-size: 4.5rem; font-weight: 900; color: var(--accent); line-height: 1;"><?= $counters['projects'] ?? '100+' ?></div>
                <div style="text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 0.9rem; margin-top: 15px;">Projects Done</div>
            </div>
            <div>
                <div style="font-size: 4.5rem; font-weight: 900; color: var(--accent); line-height: 1;"><?= $counters['years'] ?? '25+' ?></div>
                <div style="text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 0.9rem; margin-top: 15px;">Years Experience</div>
            </div>
            <div>
                <div style="font-size: 4.5rem; font-weight: 900; color: var(--accent); line-height: 1;"><?= $counters['clients'] ?? '500+' ?></div>
                <div style="text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 0.9rem; margin-top: 15px;">Happy Clients</div>
            </div>
            <div>
                <div style="font-size: 4.5rem; font-weight: 900; color: var(--accent); line-height: 1;"><?= $counters['active'] ?? '20+' ?></div>
                <div style="text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 0.9rem; margin-top: 15px;">Active Projects</div>
            </div>
        </div>

        <!-- Certifications -->
        <div style="margin-top: 100px; padding-top: 80px; border-top: 1px solid rgba(255,255,255,0.1);">
            <div style="text-align: center; margin-bottom: 50px;">
                <span style="color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: 0.8rem;">Our Credentials & Accreditations</span>
            </div>
            <div style="display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; align-items: center;">
                <div style="background: rgba(255,255,255,0.05); padding: 25px 40px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.1); text-align: center;">
                    <div style="font-size: 0.7rem; color: var(--accent); font-weight: 800; text-transform: uppercase; margin-bottom: 5px;">GST Registered</div>
                    <div style="color: #fff; font-weight: 700;">37AONPN4447B1ZU</div>
                </div>
                <div style="color: #fff; font-weight: 800; font-size: 1.5rem; display: flex; align-items: center; gap: 10px;">
                    <i class="bi bi-patch-check-fill" style="color: var(--accent);"></i> MSME
                </div>
                <div style="color: #fff; font-weight: 800; font-size: 1.5rem; display: flex; align-items: center; gap: 10px;">
                    <i class="bi bi-patch-check-fill" style="color: var(--accent);"></i> UDYAM
                </div>
                <div style="color: #fff; font-weight: 800; font-size: 1.5rem; display: flex; align-items: center; gap: 10px;">
                    <i class="bi bi-patch-check-fill" style="color: var(--accent);"></i> Railway Contractor
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 6. Featured Projects Section -->
<section style="padding: 140px 0;">
    <div class="container">
        <div class="projects-header" style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px;">
            <div class="section-title" style="text-align: left; margin-bottom: 0;">
                <div class="underline" style="margin-left: 0;"></div>
                <h2 style="color: var(--primary);">Showcasing <span style="color: var(--accent);">Excellence</span></h2>
            </div>
            <a href="<?= base_url('projects') ?>" class="btn view-portfolio-btn" style="color: var(--primary); font-weight: 800; display: flex; align-items: center; gap: 10px;">View Portfolio <i class="bi bi-arrow-right"></i></a>
        </div>

        <div class="projects-grid">
            <div class="project-card" style="height: 500px; border-radius: 40px; box-shadow: var(--shadow-lg);">
                <img src="<?= base_url('assets/images/home/railway_bridge.png') ?>" style="width: 100%; height: 100%; object-fit: cover;">
                <div class="project-overlay">
                    <span class="project-cat">Railway Infrastructure</span>
                    <h3 class="project-title">Major Railway Bridge - RVNL</h3>
                    <p class="project-desc">Complete fabrication and installation of high-capacity railway bridge.</p>
                </div>
            </div>
            <div class="project-card" style="height: 500px; border-radius: 40px; box-shadow: var(--shadow-lg);">
                <img src="<?= base_url('assets/images/home/high_rise_towers.png') ?>" style="width: 100%; height: 100%; object-fit: cover;">
                <div class="project-overlay">
                    <span class="project-cat">Private Sector</span>
                    <h3 class="project-title">Skyline High-Rise Towers</h3>
                    <p class="project-desc">Premium residential towers featuring state-of-the-art engineering.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 7. Why Choose Us -->
<section style="background: var(--bg-alt); padding: 140px 0;">
    <div class="container">
        <div class="section-title">
            <div class="underline"></div>
            <h2 style="color: var(--primary);">Why Choose <span style="color: var(--accent);">Saanvi Infratech?</span></h2>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;">
            <div class="service-card" style="text-align: center; padding: 50px 30px;">
                <div style="width: 70px; height: 70px; background: var(--primary); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 30px;">
                    <i class="bi bi-award"></i>
                </div>
                <h3>Quality Assurance</h3>
                <p style="color: var(--text-muted);">Uncompromising commitment to the highest quality of construction materials and processes.</p>
            </div>
            <div class="service-card" style="text-align: center; padding: 50px 30px;">
                <div style="width: 70px; height: 70px; background: var(--primary); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 30px;">
                    <i class="bi bi-alarm"></i>
                </div>
                <h3>On-Time Delivery</h3>
                <p style="color: var(--text-muted);">We respect timelines and ensure every project is handed over within the committed schedule.</p>
            </div>
            <div class="service-card" style="text-align: center; padding: 50px 30px;">
                <div style="width: 70px; height: 70px; background: var(--primary); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 30px;">
                    <i class="bi bi-people"></i>
                </div>
                <h3>Experienced Workforce</h3>
                <p style="color: var(--text-muted);">Our team of seasoned engineers and technicians bring decades of combined expertise.</p>
            </div>
            <div class="service-card" style="text-align: center; padding: 50px 30px;">
                <div style="width: 70px; height: 70px; background: var(--primary); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 30px;">
                    <i class="bi bi-cone-striped"></i>
                </div>
                <h3>Infrastructure Expertise</h3>
                <p style="color: var(--text-muted);">Specialized knowledge in complex railway and large-scale industrial infrastructure.</p>
            </div>
        </div>
    </div>
</section>

<!-- 8. Call to Action Section -->
<section style="padding: 100px 0; background: linear-gradient(rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.9)), url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; background-position: center; background-attachment: fixed;">
    <div class="container" style="text-align: center; color: #fff;">
        <h2 style="font-size: 3.5rem; font-weight: 900; margin-bottom: 20px; color: #fff;">Looking for a reliable <span style="color: var(--accent);">construction partner?</span></h2>
        <p style="font-size: 1.3rem; color: rgba(255,255,255,0.7); max-width: 700px; margin: 0 auto 50px;">Let's build the future together. Contact our team today for a comprehensive consultation.</p>
        <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
            <a href="<?= base_url('contact') ?>" class="btn btn-primary" style="background: var(--accent); padding: 18px 45px; font-size: 1rem;">Get a Quote <i class="bi bi-chat-dots"></i></a>
            <a href="tel:<?= $settings['contact_phone'] ?? '' ?>" class="btn" style="border: 2px solid rgba(255,255,255,0.3); color: #fff; padding: 18px 45px; font-size: 1rem;">Contact Now</a>
        </div>
    </div>
</section>

<?= $this->endSection() ?>
