@extends('frontend.mainlayout')
@section('title', 'RERF - Our Facilities')
@section('banner')
  <section class="color-1 background-10 font-1 fw-400 py-6">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <div class="fs--1 font-1 mb-2">
            <a class="mr-2" href="/home">Home</a><span class="fa fa-angle-double-right color-6"></span>
            <a class="mx-2">Our Facilities</a>
          </div>
          <h1 class="fs-3 fs-sm-4 fw-400">Our Facilities</h1>
          {{-- <p class="lead color-4">RERFGI is a renowned educational institution committed to academic excellence and holistic student development.</p> --}}
        </div>
      </div><!--/.row-->
    </div><!--/.container-->
  </section>
@endsection
@section('main')
  <section class="py-5">
    <div class="container">
      <div class="row font-1">
        <div class="col-lg-4 text-lg-left mb-lg-0 mb-5 text-center"><img class="rounded"
            src="/frontend/assets/images/s-2.jpg">
          <h5 class="mb-0 mt-4">Campus</h5>
          <p class="lead color-4">Integrated Hi-tech Campus</p>
          <p class="color-6 fs--1 text-justify">RERF's flagship project, its 1st
            Integrated Hi-tech Campus in India, located within Kolkata, West Bengal; the campus is spread over
            12 acres of land. The basic infrastructure constitutes modern academic facilities, sports and
            recreational facilities, total computerization of the different campuses and departments of the
            Institution with networking facility. </p>
        </div>
        <div class="col-lg-4 text-lg-left mb-lg-0 mb-5 text-center"><img class="rounded"
            src="/frontend/assets/images/s-3.jpg">
          <h5 class="mb-0 mt-4">Laboratories</h5>
          <p class="lead color-4">State of the art Laboratories</p>
          <p class="color-6 fs--1 text-justify">State of the art Hi-Tech
            Computer and other laboratories is designed to help students develop effective skills and
            capabilities in academic and professional settings. These labs focus on work environments and real
            life situations. </p>
        </div>
        <div class="col-lg-4 text-lg-left mb-lg-0 mb-5 text-center"><img class="rounded"
            src="/frontend/assets/images/s-7.jpg">
          <h5 class="mb-0 mt-4">Library</h5>
          <p class="lead color-4">Fully Equipped Library</p>
          <p class="color-6 fs--1 text-justify">Fully equipped library</span><br>The library has a vast
            and comprehensive collection in:
          <ul class="fs--1 color-6 text-justify">
            <li>Science and Engineering Textbooks</li>
            <li>Journals and Magazines</li>
            <li>Books on religion, ethics and political science to enable the students to broaden their
              perspective.</li>
            <li>No. of Books (Volumes) : 45000</li>
            {{-- <li>No. of Titles : 5300</li> --}}
          </ul>
          </p>
        </div>
      </div><!--/.row-->
      <div class="row font-1 pt-4">
        <div class="col-lg-4 text-lg-left mb-lg-0 mb-5 text-center"><img class="rounded"
            src="/frontend/assets/images/s-4.jpg">
          <h5 class="mb-0 mt-4">Canteen and cafeteria</h5>
          <p class="lead color-4">Hub of student activity</p>
          <p class="color-6 fs--1 text-justify">The cafeteria in the college are the hub of every student
            activity. Students throng the cafeterias and help themselves to a variety of tasty foods which of
            course comes at a very nominal rates. College Canteen provides delicious and hygienic food and very
            affordable prizes. South Indian, North Indian and Chinese Vegetarian foods are available. </p>
        </div>
        {{-- <div class="col-lg-4 text-lg-left mb-lg-0 mb-5 text-center"><img class="rounded"
            src="/frontend/assets/images/s-5.jpg">
          <h5 class="mb-0 mt-4">Hostel Facilities</h5>
          <p class="lead color-4">Convenient location</p>
          <p class="fs--1 text-justify">Conveniently located in
            close proximity to the RERF Campus, RERF provides hostel facility to both girls and boys along with
            exclusive transport facility. The hostel facility is granted to the students of RERF strictly on the
            basis of merit, the number of seats for each department depends on the department size &
            availability. RERF's student's hostels are formed with an view to provide excellent, homely and safe
            accommodation to our scholars.</p>
        </div> --}}
        <div class="col-lg-4 text-lg-left mb-lg-0 mb-5 text-center"><img class="rounded"
            src="/frontend/assets/images/s-6.jpg">
          <h5 class="mb-0 mt-4">Transportation facilities</h5>
          <p class="lead color-4">Easy transportation</p>
          <p class="color-6 fs--1 text-justify">Transportation facilities are available to facilitate easy transportation
            of the Faculties . </p>
        </div>
      </div><!--/.row-->
      <div class="row align-items-center font-1 pt-5">
        <div class="col">
            <h5 class="mb-4">— ICT</h5>
        </div>
    </div>
      <div class="row d-flex flex-wrap " data-toggle="modal" data-target="#lightbox">
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/1.jpg" data-target="#indicators" data-slide-to="0" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/2.jpg" data-target="#indicators" data-slide-to="1" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/3.jpg" data-target="#indicators" data-slide-to="2" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/4.jpg" data-target="#indicators" data-slide-to="3" alt=""/>
        </div>
      </div>
      <div class="row d-flex flex-wrap mt-4" data-toggle="modal" data-target="#lightbox">
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/5.jpg" data-target="#indicators" data-slide-to="4" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/6.jpg" data-target="#indicators" data-slide-to="5" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/7.jpg" data-target="#indicators" data-slide-to="6" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/8.jpg" data-target="#indicators" data-slide-to="7" alt=""/>
        </div>
      </div>
      <div class="row d-flex flex-wrap mt-4" data-toggle="modal" data-target="#lightbox">
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/9.jpg" data-target="#indicators" data-slide-to="8" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/10.jpg" data-target="#indicators" data-slide-to="9" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/11.jpg" data-target="#indicators" data-slide-to="10" alt=""/>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <img src="./uploads/ict/12.jpg" data-target="#indicators" data-slide-to="11" alt=""/>
        </div>
    </div>
    </div>
  </section>

  <style>

    .close {
        font-size: 1.5rem;
    }

    .col-12 img {
        opacity: 0.9;
        cursor: pointer;
        width: 100%;
    }

    .col-12 img:hover {
        opacity: 1;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
</style>
</div>



<script>
    // $('.portfolio-item').isotope({
    // itemSelector: '.item',
    // layoutMode: 'fitRows'
    // });
    $('.portfolio-menu ul li').click(function () {
        $('.portfolio-menu ul li').removeClass('active');
        $(this).addClass('active');

        var selector = $(this).attr('data-filter');
        $('.portfolio-item').isotope({filter: selector});
        return false;
    });
    $(document).ready(function () {
        var popup_btn = $('.popup-btn');
        popup_btn.magnificPopup({
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    });
</script>
@endsection