@include('frontend.header')

    <style>
:root {
    --accent: #0c7b3f;
    --accent-dark: #0a5e30;
    --gold: #e6b000;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    /* background: #f7fbf7; */
    color: #1e1e1e;
}

.rti-title {
    margin-top: 18px;
    /* text-align: center; */
    margin-bottom: 14px;
}

.card.rti-card {
    box-shadow: 0 8px 24px rgba(2, 48, 22, 0.06);
    border: 2px solid #dfefe0;
}

.table thead th {
    vertical-align: middle;
}

.small-note {
    font-size: 0.88rem;
}

footer.site-foot {
    background: #fff4ea;
    border-top: 4px solid #f0c08a;
    padding: 18px 0;
    margin-top: 18px;
}

@media (min-width: 992px) {
    .college-header h1 {
        font-size: 2.1rem;
    }

    .college-header img.logo {
        height: 110px;
    }
}

/* Improve table responsiveness */
.table-responsive-xl {
    overflow: auto;
}

.tag-links a {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgb(239, 185, 6);
    background: #fff;
    color: var(--accent-dark);
    font-weight: 600;
    margin: 4px;
    text-decoration: none;
}

.tag-links a:hover {
    background-color: #e6b000;
    color: white;
}

.style-end {
    border: 1px solid rgb(231, 226, 226);
    padding: 10px;
    border-radius: 10px;
}

.style-end li {
    border-bottom: 1px solid rgba(255, 217, 0, 0.589);
    /* margin-right: 10px; */
}

.style-end li a {
    color: red;
}
    </style>

  

    <!-- popup search -->
    <div class="search-popup">
        <button class="close-search"><span class="far fa-times"></span></button>
        <form action="#">
            <div class="form-group">
                <input type="search" name="search-field" placeholder="Search Here..." required />
                <button type="submit"><i class="far fa-search"></i></button>
            </div>
        </form>
    </div>
    <!-- popup search end -->

    <main class="main">
        <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/01.png)">
            <div class="container">
                <h2 class="breadcrumb-title">NEWSPAPER CLIPPINGS</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="#">Home</a></li>
                    <li class="active">NEWSPAPER CLIPPINGS</li>
                </ul>
            </div>
        </div>
        <section id="newspaper-clippings" class="py-5">
            <style>
            :root {
                --navy: #002147;
                --gold: #f4b400;
                --light: #ffffff;
                --gray: #f8f9fa;
            }

            #newspaper-clippings {
                background-color: var(--gray);
                color: var(--navy);
            }

            #newspaper-clippings .section-title {
                font-weight: 700;
                font-size: 2rem;
                color: var(--navy);
                position: relative;
                display: inline-block;
                margin-bottom: 1rem;
            }

            #newspaper-clippings .section-title::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -8px;
                width: 100%;
                height: 3px;
                background-color: var(--gold);
                border-radius: 2px;
            }

            .clip-table {
                width: 100%;
                border-collapse: collapse;
                background-color: #fff;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
                border-radius: 10px;
                overflow: hidden;
            }

            .clip-table th {
                background-color: var(--navy);
                color: var(--light);
                text-align: center;
                padding: 15px;
                font-weight: 600;
            }

            .clip-table td {
                padding: 15px;
                text-align: left;
                border-bottom: 1px solid #dee2e6;
                vertical-align: middle;
            }

            .clip-table tr:hover {
                background-color: rgba(244, 180, 0, 0.08);
                transition: 0.3s ease;
            }

            .clip-table a {
                color: var(--gold);
                font-weight: 600;
                text-decoration: none;
            }

            .clip-table a:hover {
                text-decoration: underline;
            }

            /* New badge style */
            .new-badge {
                background-color: var(--gold);
                color: var(--navy);
                font-weight: 700;
                font-size: 0.8rem;
                padding: 3px 8px;
                border-radius: 50px;
                margin-left: 10px;
                text-transform: uppercase;
                display: inline-block;
                animation: blink 1.5s infinite;
            }

            @keyframes blink {

                0%,
                100% {
                    opacity: 1;
                }

                50% {
                    opacity: 0.4;
                }
            }

            @media (max-width: 768px) {

                .clip-table th,
                .clip-table td {
                    font-size: 0.95rem;
                    padding: 10px;
                }

                .new-badge {
                    font-size: 0.7rem;
                    padding: 2px 6px;
                }
            }
            </style>

            <div class="container">
                <div class="text-center mb-4">
                    <h2 class="section-title">NEWSPAPER CLIPPINGS</h2>
                </div>

                <div class="table-responsive">
                    <table class="clip-table">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Title</th>
                                <th>View</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>
                                    CONTRIBUTION TO CM RELIEF FUND
                                    <span class="new-badge">NEW</span>
                                </td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/CMREL.png">Click Here to view</a>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>
                                    CHENNAI COLLEGE STUDENTS VISITED THE URBAN FOREST OF OUR
                                    COLLEGE <span class="new-badge">NEW</span>
                                </td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/NEWS.png">Click Here to view</a>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>
                                    SEED FESTIVAL IN COLLEGE CAMPUS
                                    <span class="new-badge">NEW</span>
                                </td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/SEEDCOLL.png">Click Here to view</a>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>
                                    AZADI KA AMRUT MAHOTSAV PADAYATRA
                                    <span class="new-badge">NEW</span>
                                </td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/PADACOLL.png">Click Here to view</a>
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>
                                    Lt. GOVERNOR PLANT TREES IN TGA&SC CAMPUS
                                    <span class="new-badge">NEW</span>
                                </td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/LG1.jpg">Click Here to view</a>
                                </td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>Lt. GOVERNOR URGES ENVIRONMENTALISM</td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/LG2.jpg">Click Here to view</a>
                                </td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>
                                    Lt. GOVERNOR EMPHASISES VACCINATION IS IMPORTANT TO ATTEND
                                    EXAMINATIONS
                                </td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/LG3.jpg">Click Here to view</a>
                                </td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>
                                    HALL TICKETS WILL BE GIVEN TO VACCINATED STUDENTS – LT.
                                    GOVERNOR
                                </td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/LG4.jpg">Click Here to view</a>
                                </td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>LT. GOVERNOR UNVEILS THE CORONA MEMORIAL GARDEN</td>
                                <td>
                                    <a href="./assets/documents/NEWSPAPER CLIPPINGS/LG5.jpg">Click Here to view</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </main>

    @include('frontend.footer')