@include('frontend.header')

   <style>
body {
    background: linear-gradient(135deg, #f4f7fb 0%, #e9eff5 100%);
    font-family: "Poppins", sans-serif;
    /* padding: 40px 20px; */
    color: #2d3748;
}

.header-bar {
    background: linear-gradient(90deg, #004d99, #00bcd4);
    color: white;
    padding: 10px 15px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    border-radius: 8px 8px 0 0;
}

.mou-container {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    transition: 0.3s ease;
}

.mou-header {
    text-align: center;
    background: linear-gradient(90deg, #1976d2, #64b5f6);
    color: #fff;
    padding: 25px;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background-color: #f8fafc;
}

th {
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a202c;
    padding: 14px 20px;
    border-bottom: 2px solid #e2e8f0;
}

td {
    padding: 14px 20px;
    font-size: 0.93rem;
    border-bottom: 1px solid #edf2f7;
}

tr:hover {
    background-color: #f1f5fb;
    transition: 0.2s;
}

.dept-name {
    font-weight: 500;
    color: #2d3748;
}

.dept-name.important {
    color: #c62828;
    font-weight: 600;
}

a.view-link {
    color: #1976d2;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

a.view-link:hover {
    color: #0d47a1;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    thead {
        display: none;
    }

    tr {
        margin-bottom: 15px;
        border-radius: 10px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
        background-color: #fff;
    }

    td {
        border: none;
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
    }

    td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #4a5568;
    }
}
   </style>



   <main class="main">
       <div class="header-bar">
           <div>
               Website Maintained By Tagore Government Arts and Science College,
               Puducherry
           </div>
           <div>Hosted By National Informatics Centre, Puducherry</div>
       </div>

       <div class="mou-container mt-3 mb-3">
           <div class="mou-header">MEMORANDUM OF UNDERSTANDING SIGNED</div>
           <div class="table-responsive">
               <table>
                   <thead>
                       <tr>
                           <th>NAME OF THE DEPARTMENT</th>
                           <th>LINK</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of Tamil
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MTAM.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of English
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MENG.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of French
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MFRE.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name important">
                               Department of Economics
                           </td>
                           <td data-label="Link">
                               <a href="#" class="view-link">Click Here to view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of Philosophy
                           </td>
                           <td data-label="Link">
                               <a href="#" class="view-link">Click Here to view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name important">
                               Department of Sociology
                           </td>
                           <td data-label="Link">
                               <a href="#" class="view-link">Click Here to view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of Tourism
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MTOU.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name important">
                               Department of Physics
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MPHY.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of Chemistry
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MCHE.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name important">
                               Department of Mathematics
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MMAT.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of Plant Science
                           </td>
                           <td data-label="Link">
                               <a href="#" class="view-link">Click Here to view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name important">
                               Department of Zoology
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MZOO.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of Computer Science
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MCSC (1).pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name important">
                               Department of Psychology
                           </td>
                           <td data-label="Link">
                               <a href="#" class="view-link">Click Here to view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               Department of Commerce
                           </td>
                           <td data-label="Link">
                               <a href="#" class="view-link">Click Here to view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name important">
                               Department of History
                           </td>
                           <td data-label="Link">
                               <a href="#" class="view-link">Click Here to view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               MOU by College Library
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MLIB.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name important">
                               MOU Signed by College
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MGEN.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                       <tr>
                           <td data-label="Department" class="dept-name">
                               MOU Signed by Institute Innovation Council (IIC)
                           </td>
                           <td data-label="Link">
                               <a href="assets/documents/Accadamic-collap/MIIC.pdf" class="view-link">Click Here to
                                   view</a>
                           </td>
                       </tr>
                   </tbody>
               </table>
           </div>
       </div>
   </main>

   @include('frontend.footer')