<%- include("pages/header")%>
    <!-- Navbar End -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- Header Start -->
   <!-- Header Start -->
<div class="jumbotron jumbotron-fluid mb-5" style="background-image: url('img/airfreight.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
    <div class="container text-center py-5" style="background-color: rgba(0, 0, 0, 0.6); border-radius: 10px;">
        <h1 class="text-white display-3">AIR FREIGHT</h1>
        <h4 class="text-primary display-3">
            ATAYESHE OIL & MARINE SERVICES
        </h4>
        <div class="d-inline-flex align-items-center text-white">
            <p class="m-0 d-flex align-items-center">
                <a class="text-white text-decoration-none mx-2" href="/" aria-label="Home">Home</a>
                <span class="px-2 text-muted">|</span>
            </p>
            <p class="m-0 d-flex align-items-center">
                <a class="text-white text-decoration-none mx-2" href="/airfrieght" aria-label="Services">Air Freight</a>
                <span class="px-2 text-muted">|</span>
            </p>
            <p class="m-0 d-flex align-items-center">
                <a class="text-white text-decoration-none mx-2" href="/contact" aria-label="Contact">Contact</a>
                <span class="px-2 text-muted">|</span>
            </p>
            <p class="m-0 d-flex align-items-center">
                <a class="text-white text-decoration-none mx-2" href="/about" aria-label="About">About</a>
            </p>
        </div>
    </div>
</div>
<!-- Header End -->

<!-- About End -->

        <!-- Video Modal -->
        <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>        
                        <!-- 16:9 aspect ratio -->
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
    <!-- About End -->


    <!--  Quote Request Start -->
    <div class="container-fluid bg-secondary my-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-7 py-5 py-lg-0">
                    <h6 class="text-primary text-uppercase font-weight-bold">Get A Quote</h6>
                    <h1 class="mb-4">Request A Free Quote</h1>
                    <p class="mb-4">Discover tailored logistics solutions designed to meet your specific requirements. Whether it’s imports, exports, or global transportation, we ensure seamless and efficient service. Request a free quote today and let us handle your logistics with professionalism and precision.</p>
                    <div class="row">
                        <div class="col-sm-4">
                            <h1 class="text-primary mb-2" data-toggle="counter-up">40</h1>
                            <h6 class="font-weight-bold mb-4">SKilled Experts</h6>
                        </div>
                        <div class="col-sm-4">
                            <h1 class="text-primary mb-2" data-toggle="counter-up">100</h1>
                            <h6 class="font-weight-bold mb-4">Happy Clients</h6>
                        </div>
                        <div class="col-sm-4">
                            <h1 class="text-primary mb-2" data-toggle="counter-up">100 +</h1>
                            <h6 class="font-weight-bold mb-4">Complete Projects</h6>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="bg-primary py-5 px-4 px-sm-5">
                        <form class="py-5">
                            <div class="form-group">
                                <input type="text" class="form-control border-0 p-4" placeholder="Your Name" required="required" />
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control border-0 p-4" placeholder="Your Email" required="required" />
                            </div>
                            <div class="form-group">
                               
                                <select id="serviceSelect" class="custom-select border-0 px-4" style="height: 47px;">
                                    <option value="" disabled selected>Select a Service</option>
                                    <option value="1">Freight Forwarding</option>
                                    <option value="2">Customs Clearance</option>
                                    <option value="3">Door-to-Door Delivery</option>
                                    <option value="4">Warehousing</option>
                                    <option value="5">Air Cargo</option>
                                    <option value="6">Sea Freight</option>
                                    <option value="7">Road Transport</option>
                                </select>
                            </div>
                            
                            <div>
                                <button class="btn btn-dark btn-block border-0 py-3" type="submit">Get A Quote</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Quote Request Start -->
    <!-- Features End -->


    <!-- Pricing Plan Start -->
    <div class="container-fluid pt-5">
        <div class="container">
            <!-- Section Header -->
            <div class="text-center pb-4">
                <h6 class="text-primary text-uppercase font-weight-bold">Freight Services</h6>
                <h1 class="mb-4">Affordable Freight Pricing Packages</h1>
                <p class="text-muted">Our flexible and transparent pricing ensures you get reliable freight services tailored to your needs.</p>
            </div>
    
            <!-- Pricing Cards -->
            <div class="row">
                <!-- Basic Freight Package -->
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card border-0 shadow h-100">
                        <div class="card-header bg-primary text-center text-white py-4">
                            <h3 class="m-0">Basic Package</h3>
                        </div>
                        <div class="card-body text-center">
                            <h1 class="display-4 mb-3">
                                <span class="align-top text-muted" style="font-size: 24px;">$</span>499
                                <small class="align-bottom text-muted">/Shipment</small>
                            </h1>
                            <ul class="list-unstyled mb-4">
                                <li>Lightweight Cargo (up to 5 Tons)</li>
                                <li>Domestic Freight Only</li>
                                <li>Standard Delivery (5-7 Days)</li>
                                <li>Basic Cargo Tracking</li>
                            </ul>
                            <a href="#" class="btn btn-primary px-4 py-2">Order Now</a>
                        </div>
                    </div>
                </div>
    
                <!-- Premium Freight Package -->
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card border-0 shadow h-100">
                        <div class="card-header bg-primary text-center text-white py-4">
                            <h3 class="m-0">Premium Package</h3>
                        </div>
                        <div class="card-body text-center">
                            <h1 class="display-4 mb-3">
                                <span class="align-top text-muted" style="font-size: 24px;">$</span>999
                                <small class="align-bottom text-muted">/Shipment</small>
                            </h1>
                            <ul class="list-unstyled mb-4">
                                <li>Medium Cargo (up to 15 Tons)</li>
                                <li>International Freight (Selected Destinations)</li>
                                <li>Expedited Delivery (3-5 Days)</li>
                                <li>Advanced Cargo Tracking</li>
                            </ul>
                            <a href="#" class="btn btn-primary px-4 py-2">Order Now</a>
                        </div>
                    </div>
                </div>
    
                <!-- Business Freight Package -->
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card border-0 shadow h-100">
                        <div class="card-header bg-primary text-center text-white py-4">
                            <h3 class="m-0">Business Package</h3>
                        </div>
                        <div class="card-body text-center">
                            <h1 class="display-4 mb-3">
                                <span class="align-top text-muted" style="font-size: 24px;">$</span>1,499
                                <small class="align-bottom text-muted">/Shipment</small>
                            </h1>
                            <ul class="list-unstyled mb-4">
                                <li>Heavy Cargo (up to 30 Tons)</li>
                                <li>Global Freight Coverage</li>
                                <li>Priority Delivery (1-3 Days)</li>
                                <li>Real-Time Cargo Tracking</li>
                            </ul>
                            <a href="#" class="btn btn-primary px-4 py-2">Order Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Pricing Plan End -->
    
    <%- include('pages/footer')%>

    