<!DOCTYPE html>
<html lang="en">

<head>
    <title> PNGIT - IDEA </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900" rel="stylesheet">

    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/animate.css">

    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/owl.carousel.min.css">
    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/magnific-popup.css">

    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/aos.css">

    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/ionicons.min.css">

    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/flaticon.css">
    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/icomoon.css">
    <link rel="stylesheet" href="<?php echo url('/'); ?>/css/style.css">
</head>

<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
    <div class="py-1 bg-black top">
        <div class="container">
            <div class="row no-gutters d-flex align-items-start align-items-center px-md-0">
                <div class="col-lg-12 d-block">
                    <div class="row d-flex">
                        <div class="col-md pr-4 d-flex topper align-items-center">
                            <div class="icon mr-2 d-flex justify-content-center align-items-center"><span
                                    class="icon-phone2"></span></div>
                            <span class="text">+9665341096576 - +966541102293</span>
                        </div>
                        <div class="col-md pr-4 d-flex topper align-items-center">
                            <div class="icon mr-2 d-flex justify-content-center align-items-center"><span
                                    class="icon-paper-plane"></span></div>
                            <span class="text">info@pngit.edu.sa</span>
                        </div>
                        <div class="col-md-5 pr-4 d-flex topper align-items-center text-lg-right justify-content-end">
                            <p class="mb-0 register-link"><a href="/login">Login</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light site-navbar-target"
        id="ftco-navbar">
        <div class="container">
            <a href="/"><img src="{{ URL::asset('assets/images/logo.png') }}" alt=""></a>
            <button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse"
                data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="oi oi-menu"></span> Menu
            </button>

            <div class="collapse navbar-collapse" id="ftco-nav">
                <ul class="navbar-nav nav ml-auto">
                    <li class="nav-item"><a href="#home-section" class="nav-link"><span>Home</span></a></li>
                    <li class="nav-item"><a href="#about-section" class="nav-link"><span>About</span></a></li>

                </ul>
            </div>
        </div>
    </nav>

    <section class="hero-wrap js-fullheight" style="background-image: url('<?php echo url('/'); ?>/images/bg_4.jpg');"
        data-section="home" data-stellar-background-ratio="0.5">
        <div class="overlay"></div>
        <div class="container">
            <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start"
                data-scrollax-parent="true">
                <div class="col-md-5 ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
                    <h3 class="md-10" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">
                    </h3>

                </div>

            </div>

        </div>

    </section>

    <section class="ftco-counter img ftco-section ftco-no-pt ftco-no-pb" id="about-section">
        <div class="container">
            <div class="row no-gutters d-flex">
                <div class="col-md-6 col-lg-5 d-flex">
                    <div class="img d-flex align-self-stretch align-items-center"
                        style="background-image:url(<?php echo url('/'); ?>/images/bg_6.jpg);">
                    </div>
                </div>
                <div class="col-md-6 col-lg-7 px-lg-5 py-md-5">
                    <div class="py-md-5">
                        <div class="row justify-content-start pb-3">
                            <div class="col-md-12 heading-section ftco-animate p-4 p-lg-5">
                                <h3 class="mb-4">The Petroleum and Natural Gas Institute of Technology and Training
                                </h3>
                                <p>PNGIT is a leading training institute in KSA, providing qualifying professional and
                                    technical training for various business sectors, and custom-tailored programs to
                                    fulfill
                                    specific training requirements.</p>
                                <p>PNGIT aims at developing human resource capital and satisfying the increasing needs
                                    for qualified and well-trained personnel.</p>
                                <p>Our standard and custom-tailored training programs provide both the theoretical and
                                    practical knowledge
                                    needed to deliver excellent professional skills.
                                    PNGIT is collaborating with many highly esteemed local and international
                                    accreditation bodies and
                                    guarantees the highest level of quality and proficiency in all our training
                                    programs.</p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- loader -->
    <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
            <circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4"
                stroke="#eeeeee" />
            <circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4"
                stroke-miterlimit="10" stroke="#F96D00" />
        </svg></div>


    <script src="<?php echo url('/'); ?>/js/jquery.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/jquery-migrate-3.0.1.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/popper.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/bootstrap.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/jquery.easing.1.3.js"></script>
    <script src="<?php echo url('/'); ?>/js/jquery.waypoints.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/jquery.stellar.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/owl.carousel.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/jquery.magnific-popup.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/aos.js"></script>
    <script src="<?php echo url('/'); ?>/js/jquery.animateNumber.min.js"></script>
    <script src="<?php echo url('/'); ?>/js/scrollax.min.js"></script>


    <script src="<?php echo url('/'); ?>/js/main.js"></script>
    <script>
        $('#van_add').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget)
            var id = button.data('id')
            var van_id = button.data('van_id')
            var name = button.data('name')
            var phone = button.data('phone')
            var email = button.data('email')
            var modal = $(this)
            modal.find('.modal-body #id').val(id);
            modal.find('.modal-body #van_id').val(van_id);
            modal.find('.modal-body #name').val(name);
            modal.find('.modal-body #phone').val(phone);
            modal.find('.modal-body #email').val(email);
        })
    </script>

</body>

</html>
