@extends('layout.front.master')  
@section('content')
<style>
  /* Basic styling for the table */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Styling for table headers */
.responsive-table th {
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}

/* Styling for table data cells */
.responsive-table td {
  padding: 10px;
  border: 1px solid #ddd;
  word-wrap: break-word;
}

/* Make the table responsive by ensuring it is scrollable horizontally if the content overflows */
@media (max-width: 768px) {
  .responsive-table {
    display: block;
    overflow-x: auto;
  }
}

/* Hover effect for rows */
.responsive-table tr:hover {
  background-color: #f2f2f2;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

/* Alternate row colors for better readability */
.responsive-table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* Add subtle borders and shadow to table for a more elegant look */
.responsive-table td, .responsive-table th {
  border: 1px solid #ddd;
}

/* Make the table responsive */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.responsive-table th,
.responsive-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

/* Add hover effect */
.responsive-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Add media queries to make the table responsive */
@media (max-width: 768px) {
    .responsive-table th,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table td {
        padding-left: 50%;
        position: relative;
    }

    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 10px;
        font-weight: bold;
    }
}

</style>
    <!-- Page Header Start -->
    <div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
        <div class="container text-center">
            <h1 class="display-4 text-white animated slideInDown mb-4">About Us</h1>
            <!-- <nav aria-label="breadcrumb animated slideInDown">
                <ol class="breadcrumb justify-content-center mb-0">
                    <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
                    <li class="breadcrumb-item text-primary active" aria-current="page">About</li>
                </ol>
            </nav> -->
        </div>
    </div>

    <div class="container my-4">
    <div class="row">
        <div class="col-12 col-md-12">
            <div class="table-container">
                <table class="responsive-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Contact</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Shri Justice Ajay Manikrao Khanwilkar<br>Chairperson</td>
                            <td>+91 11 2612 1330/32 (0) <br> chairperson [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Justice Lingappa Narayana Swamy<br>Judicial Member</td>
                            <td>+91 11 2612 1336 (0) <br> justicelnswamy [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Justice Sanjay Yadav<br>Judicial Member</td>
                            <td>+91 11 2612 1347 (0) <br> js [dot] sanjayyadav [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Sushil Chandra<br>Member</td>
                            <td>+91 11 26125014 (0) <br> chandra [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Justice Ritu Raj Awasthi<br>Judicial Member</td>
                            <td>+91 11 2612 1346 (0) <br> justiceriturajawasthi [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Pankaj Kumar<br>Member</td>
                            <td>+91 11 2612 1338 (0) <br> pkumar [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Ajay Tirkey<br>Member</td>
                            <td>+91 11 2612 1345/+91 11 2086 7276 (0) <br> atirkey [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Pradip Kumar Tripathi<br>Secretary</td>
                            <td>+91 11 2612 1329 (0) <br> secretary [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Abhishek Bhagotia<br>Joint Secretary</td>
                            <td>+91 11 26125017 (0) <br> js [dot] lokpal [at]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Ziley Singh Vical<br>Director</td>
                            <td>dy [dot] registrar-lokpal [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Ramanjaneyulu<br>Director</td>
                            <td>ramanjaneyulu [dot] irs [at] gov [dot] in</td>
                        </tr>
                        <tr>
                            <td>Shri Yuvraj Patil<br>Deputy Secretary</td>
                            <td>ds1-lokpal [at]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Arun Kumar<br>Deputy Secretary</td>
                            <td>us [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Wren Mishra<br>Deputy Secretary</td>
                            <td>director-adm [at] lokpal [dot]gov[dot]in</td>
                        </tr>
                        <tr>
                            <td>Shri Rahul Kumar<br>Under Secretary</td>
                            <td>rahul [dot] kumar [at] nic [dot] in</td>
                        </tr>
                        <tr>
                            <td>Shri Binod Kumar<br>Under Secretary</td>
                            <td>bkumar77 [at] nic [dot] in</td>
                        </tr>
                        <tr>
                            <td>Registry Wing<br>Lokpal of India</td>
                            <td>dy [dot] registrar-lokpal [at]gov[dot]in</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>





@endsection