<?php
    // NOTE: All database and session logic has been removed, 
    // but we retain the logic that includes site config variables 
    // needed for custom assets (like favicon).
    
    // We assume 'get_setting.php' still defines $use_favicon, $favicon_mime, and $favicon_path
    require_once 'get_setting.php'; 
    
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?php echo htmlspecialchars($site_settings['site_title'] ?? 'ReliParcel Express'); ?> | Our Services</title> 
        
        <?php if (isset($use_favicon) && $use_favicon): ?>
        <link rel="icon" type="<?php echo $favicon_mime; ?>" href="<?php echo $favicon_path; ?>">
        <?php else: ?>
        <link rel="icon" type="image/x-icon" href="../assets/images/favicon.ico">
        <?php endif; ?>
        
        <link href="assets/css/style.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
        <link rel="stylesheet" href="assets/css/font-awesome-pro.css">
        <link rel="stylesheet" href="assets/css/gtranslate.css">
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        
        <style>
            .service-card {
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        border: none;
        box-shadow: 0 0 30px 5px rgb(0 0 0 / 8%) !important;
        /* CRUCIAL: Hides the expanding image */
        overflow: hidden;
    }
    .service-card:hover {
        /* Better lift and shadow effect */
        transform: translateY(-8px);
        
    }

    .service-card .card-img-top {
        height: 250px;
        object-fit: cover;
        /* Set up the image for a smooth zoom transition */
        transition: transform 0.4s ease-out;
        /*border-bottom: 3px solid var(--bs-crimson-dark); */
    }
    .service-card:hover .card-img-top {
        /* The image subtly expands and draws attention */
        transform: scale(1.05);
    }
            .text-crimson {
                color: #6d0000 !important; /* RETAINED: Using your original giveaway color for prominence */
            }
            .service-btn{
                padding: 6px 20px;
                border-radius: 50px;
                /* RETAINED: Using original button style for brand consistency */
                background: #fff;
                border: 2px #7d0000 solid;
                color: #7b0000 !important;
                font-weight: 700;
            }
            .service-btn:hover{
                /* RETAINED: Using original hover gradient for brand consistency */
                background: linear-gradient(135deg, var(--bs-crimson-light), var(--bs-crimson-dark));
                color:#fff !important;
                box-shadow:none !Important;
                border: 2px #970000 solid !important;
            }
			
			.btn-skew {transform: skewX(-15deg);padding: 10px 30px !important;border-radius: 5px !important;font-size: 13px;font-weight: 800 !important;transition: transform 0.3s ease, box-shadow 0.3s ease;font-family: 'Work Sans', sans-serif !important;display: inline-block;border: none;}.btn-skew-text {transform: skewX(15deg);display: inline-block;transition: transform 0.3s ease;}.btn-skew:hover {transform: skewX(15deg) scale(1.05);box-shadow: 0 5px 15px rgba(0,0,0,0.2);}.btn-skew:hover .btn-skew-text {transform: skewX(-15deg);}
        </style>
    </head>
    <body>
        
        <?php include "nav.php" ?>
        
        <header class="hero-gradient-bg text-white text-center pt-5 pb-5 shadow-lg">
            <div class="container mt-5 pt-5">
			<div class="mx-auto text-center" style="max-width: 800px;">
                <h1 class="display-6 fw-bolder mb-3">OUR WORLD-CLASS SHIPPING & LOGISTICS SERVICES</h1>
                <p class="lead mb-0 fs-5">Choose the service that meets your speed and budget requirements, globally or locally.</p>
			</div>	
            </div>
        </header>

        <section id="services-offered" class="py-5">
            <div class="container">
                <h2 class="text-center fw-bolder mb-5 text-dark">Flexible Shipping Options</h2>
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
                    
                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/d.jpg" class="card-img-top" alt="International Express Delivery">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    International Priority Express
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-geo-alt-fill text-crimson me-2"></i> Global Reach: 220+ Countries.</li>
                                    <li><i class="bi bi-clock-fill text-crimson me-2"></i> Speed: 1-3 Business Days Guaranteed.</li>
                                    <li><i class="bi bi-shield-fill-check text-crimson me-2"></i> Ideal For: Urgent documents and time-critical e-commerce.</li>
                                    <li><i class="bi bi-truck text-crimson me-2"></i> Features: Door-to-door, end-to-end live tracking, customs clearance.</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="quote.php" class="btn btn-md service-btn btn-gradient text-white" data-service="express">
                                        <i class="far fa-badge-check me-2"></i> Get Express Quote
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/slide3.jpg" class="card-img-top" alt="Air and Sea Freight Logistics">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    Air & Sea Freight Logistics
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-box-seam-fill text-crimson me-2"></i> Volume: Heavy, LCL/FCL, and Pallet Shipments.</li>
                                    <li><i class="bi bi-clock-fill text-crimson me-2"></i> Speed: 5-15 Business Days (Best Value).</li>
                                    <li><i class="bi bi-truck-flatbed text-crimson me-2"></i> Ideal For: Commercial inventory, large industrial parts, and bulk trade.</li>
                                    <li><i class="bi bi-list-columns-reverse text-crimson me-2"></i> Features: Customs brokerage, secure warehousing, optimized routing.</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="quote.php" class="btn btn-md service-btn btn-gradient text-white" data-service="freight">
                                        <i class="far fa-badge-check me-2"></i> Request Freight Pricing
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/bg3.jpg" class="card-img-top" alt="Domestic Same-Day Delivery">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    Domestic & Ground Shipping
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-house-door-fill text-crimson me-2"></i> Local Focus: Fast service within your regional hub.</li>
                                    <li><i class="bi bi-clock-fill text-crimson me-2"></i> Speed: Same-Day to Next-Day Delivery.</li>
                                    <li><i class="bi bi-shop text-crimson me-2"></i> Ideal For: Local B2B transfers and rapid e-commerce fulfillment.</li>
                                    <li><i class="bi bi-map text-crimson me-2"></i> Features: Flexible scheduling and instant Proof of Delivery (POD).</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="quote.php" class="btn btn-md service-btn btn-gradient text-white" data-service="domestic">
                                        <i class="far fa-badge-check me-2"></i> Book Local Delivery
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/cold.jpg" class="card-img-top" alt="Temperature Controlled Delivery">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    Cold Chain & Medical Logistics
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-thermometer-half text-crimson me-2"></i> Control: Temperature-controlled containers ($\pm 0.1^{\circ}C$).</li>
                                    <li><i class="bi bi-hospital text-crimson me-2"></i> Compliance: Full regulatory compliance (GDP, GAMP).</li>
                                    <li><i class="bi bi-bandaid-fill text-crimson me-2"></i> Ideal For: Vaccines, organs, lab samples, and sensitive pharmaceuticals.</li>
                                    <li><i class="bi bi-alarm-fill text-crimson me-2"></i> Features: Real-time temperature monitoring, emergency intervention teams.</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="contact.php" class="btn btn-md service-btn btn-gradient text-white" data-service="medical">
                                        <i class="far fa-badge-check me-2"></i> Consult Experts
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/ecommerce.jpg" class="card-img-top" alt="E-commerce Fulfillment Services">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    E-commerce Fulfillment & 3PL
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-boxes text-crimson me-2"></i> Storage: Inventory warehousing (Pick, Pack, Ship).</li>
                                    <li><i class="bi bi-link-45deg text-crimson me-2"></i> Integration: Seamless API integration with major e-commerce platforms.</li>
                                    <li><i class="bi bi-currency-dollar text-crimson me-2"></i> Ideal For: Scaling online stores, subscription boxes, and dropshipping.</li>
                                    <li><i class="bi bi-arrow-return-left text-crimson me-2"></i> Features: Returns processing, custom packaging, last-mile delivery.</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="contact.php" class="btn btn-md service-btn btn-gradient text-white" data-service="ecommerce">
                                        <i class="far fa-badge-check me-2"></i> View 3PL Solutions
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/customs.jpg" class="card-img-top" alt="Customs and Documentation Service">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    Customs Brokerage & Consulting
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-file-earmark-check-fill text-crimson me-2"></i> Expertise: Dedicated licensed customs brokers.</li>
                                    <li><i class="bi bi-globe2 text-crimson me-2"></i> Compliance: Handling duties, taxes, tariffs, and complex declarations.</li>
                                    <li><i class="bi bi-x-octagon-fill text-crimson me-2"></i> Ideal For: Avoiding delays, reducing fines, and navigating complex regulations.</li>
                                    <li><i class="bi bi-book text-crimson me-2"></i> Features: Harmonized System (HS) classification, import/export permits.</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="contact.php" class="btn btn-md service-btn btn-gradient text-white" data-service="customs">
                                        <i class="far fa-badge-check me-2"></i> Simplify Customs
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/bg5.jpg" class="card-img-top" alt="Oversized Cargo Transport">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    Heavy & Specialized Transport
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-toggles text-crimson me-2"></i> Handling: Oversized, odd-dimension, and project cargo.</li>
                                    <li><i class="bi bi-sign-turn-right-fill text-crimson me-2"></i> Planning: Route surveys, permitting, and police escorts.</li>
                                    <li><i class="bi bi-tools text-crimson me-2"></i> Ideal For: Construction machinery, industrial plant components, and oil/gas equipment.</li>
                                    <li><i class="bi bi-shield-lock-fill text-crimson me-2"></i> Features: Specialized rigging, lifting, and insurance consultation.</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="contact.php" class="btn btn-md service-btn btn-gradient text-white" data-service="heavy">
                                        <i class="far fa-badge-check me-2"></i> Plan Your Project
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/whiteglove.jpg" class="card-img-top" alt="White Glove Service">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    White Glove & Final Mile
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-person-fill text-crimson me-2"></i> Service: Dedicated personnel for premium handling.</li>
                                    <li><i class="bi bi-wrench-adjustable-fill text-crimson me-2"></i> Value-Add: Inside delivery, assembly, and debris removal.</li>
                                    <li><i class="bi bi-house-fill text-crimson me-2"></i> Ideal For: Luxury goods, sensitive electronics, fine art, and furniture.</li>
                                    <li><i class="bi bi-calendar-check text-crimson me-2"></i> Features: Appointment scheduling, real-time customer updates, signature confirmation.</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="quote.php" class="btn btn-md service-btn btn-gradient text-white" data-service="whiteglove">
                                        <i class="far fa-badge-check me-2"></i> Book Premium Service
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col">
                        <div class="card service-card h-100 shadow">
                            
                            <img src="assets/images/secured_b.jpg" class="card-img-top" alt="Secure Document Delivery">
                            <div class="card-body d-flex flex-column">
                                <h5 class="card-title fw-bold text-crimson mb-2">
                                    Secure Document & Banking Runs
                                </h5>
                                <ul class="card-text text-muted flex-grow-1 list-unstyled">
                                    <li><i class="bi bi-file-lock2-fill text-crimson me-2"></i> Security: Dedicated, non-stop, secure transport.</li>
                                    <li><i class="bi bi-fingerprint-fill text-crimson me-2"></i> Verification: Chain of custody (COC) and mandated signature capture.</li>
                                    <li><i class="bi bi-bank text-crimson me-2"></i> Ideal For: Legal contracts, banking deposits, passports, and high-value paperwork.</li>
                                    <li><i class="bi bi-geo-alt-fill text-crimson me-2"></i> Features: GPS-enabled couriers, scheduled daily/weekly route planning.</li>
                                </ul>
                                <div class="mt-4">
                                    <a href="contact.php" class="btn btn-md service-btn btn-gradient text-white" data-service="secure">
                                        <i class="far fa-badge-check me-2"></i> Arrange Secure Pickup
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row justify-content-center mt-5">
                    <div class="col-lg-8">
                        <div class="p-4 rounded-3 text-white shadow-lg d-flex align-items-start" style="background-color:#0c0c0c; border: 4px solid rgba(255, 255, 255, 0.5);">
                            <i class="bi bi-star-fill fs-2 me-3 flex-shrink-0 text-warning"></i>
                            <div>
                                <h4 class="fw-bold mb-1 text-uppercase" style="letter-spacing: 1px;">We Ship It All, Safely.</h4>
                                <p class="lead mb-0 fs-6">
                                    If you are unsure which service is best for your cargo, simply use our <a href="quote.php" class="text-warning fw-semibold text-decoration-underline">Instant Quote Calculator</a>. Our system will recommend the perfect solution for your route!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <?php include "footer.php" ?>
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
        <?php include "custom_script.php" ?>
    </body>
</html>