@include('frontend.header')

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />


<main class="main">
    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/sports.png)">
        <div class="container">
            <h2 class="breadcrumb-title">SPORTS FACILITIES</h2>
            <ul class="breadcrumb-menu">
                <li><a href="#">Home</a></li>
                <li class="active">SPORTS FACILITIES</li>
            </ul>
        </div>
    </div>
    <section id="physical-education" class="py-5">
        <style>
        :root {
            --navy: #002147;
            --gold: #f4b400;
            --bg-light: #f4f8ff;
            --gradient-bg: linear-gradient(135deg, #f4f8ff 0%, #e6ecff 100%);
        }

        /* Decorative background shapes */
        #physical-education::before,
        #physical-education::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            /* background: radial-gradient(circle at center, var(--gold) 0%, transparent 70%); */
            opacity: 0.15;
            border-radius: 50%;
            z-index: 0;
        }

        #physical-education::before {
            top: -50px;
            left: -60px;
        }

        #physical-education::after {
            bottom: -50px;
            right: -60px;
        }

        #physical-education .container {
            position: relative;
            z-index: 2;
        }

        .section-title {
            font-weight: 700;
            color: var(--navy);
            font-size: 2.3rem;
            letter-spacing: 0.5px;
        }

        .section-line {
            width: 90px;
            height: 4px;
            background: var(--gold);
            border-radius: 3px;
            margin: 12px auto 25px;
        }

        .lead {
            font-size: 1.1rem;
            color: #555;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Director card */
        .director-card {
            /* height: 200px; */
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
        }

        .director-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
        }

        .director-img:hover {
            transform: scale(1.06);
        }

        .text-navy {
            color: var(--navy);
        }

        /* About & facilities */
        .about-sports {
            background: white;
            border-radius: 18px;
            padding: 40px;
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
            transition: all 0.4s ease;
        }

        .about-sports:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        }

        .about-sports h3 {
            font-size: 1.6rem;
            color: var(--navy);
        }

        .about-sports p {
            line-height: 1.8;
            font-size: 1rem;
            color: #555;
        }

        .facility-box {
            background: var(--bg-light);
            border-left: 6px solid var(--navy);
            padding: 20px;
            border-radius: 12px;
            transition: 0.3s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }

        .facility-box:hover {
            border-left-color: var(--gold);
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }

        .facility-box h5 {
            color: var(--navy);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .facility-box ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .facility-box li {
            font-size: 0.95rem;
            padding: 6px 0;
            color: #444;
        }

        .btn-download {
            background: var(--gold);
            color: #fff;
            padding: 12px 32px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 5px 15px rgba(244, 180, 0, 0.3);
        }

        .btn-download:hover {
            background: #c99b00;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(244, 180, 0, 0.4);
            color: #fff;
        }

        /* Responsive */
        @media (max-width: 992px) {
            #physical-education {
                padding: 60px 0;
            }

            .about-sports {
                text-align: center;
                padding: 30px 25px;
            }

            .facility-box {
                text-align: left;
            }
        }
        </style>

        <div class="container">
            <div class="text-center mb-5">
                <h2 class="section-title">Director of Physical Education</h2>
                <div class="section-line"></div>
                <p class="lead">
                    “Empowering students through sports, discipline, and holistic
                    well-being.”
                </p>
            </div>

            <div class="row align-items-center g-4">
                <!-- Left: Image & Info -->
                <div class="col-lg-12 text-center">
                    <div class="director-card">
                        <img src="{{ asset('assets/img/director/dr-nagaraj.jpg') }}" alt="Dr. S. Nagaraj"
                            class="director-img mb-3" />
                        <h4 class="fw-bold text-navy mb-1">Dr. S. NAGARAJ</h4>
                        <p class="text-muted small">
                            B.A., B.P.Ed., M.P.Ed., M.Phil., Ph.D., M.Sc (Yoga)<br />
                            PG Diploma in Yoga | PG Diploma in Health Fitness & Lifestyle
                            Management
                        </p>
                    </div>
                </div>

                <!-- Right: Description -->
                <div class="col-lg-12">
                    <div class="about-sports">
                        <h3 class="fw-bold mb-3">About the Department</h3>
                        <p>
                            The Department of Physical Education at
                            <b>Tagore Government Arts & Science College, Puducherry</b>,
                            aims to foster physical fitness, discipline, teamwork, and
                            sportsmanship among students. Under the guidance of
                            <strong>Dr. S. Nagaraj</strong>, the department encourages
                            participation in inter-collegiate and national-level events,
                            producing numerous prize-winning athletes.
                        </p>

                        <div class="row mt-4 g-3">
                            <div class="col-md-6">
                                <div class="facility-box h-100">
                                    <h5>Outdoor Facilities</h5>
                                    <ul>
                                        <li>🏃‍♂️ Athletics & Football Ground</li>
                                        <li>🏏 Cricket Practice Nets</li>
                                        <li>🏐 Volleyball Court (Men & Women)</li>
                                        <li>🤼 Kabaddi & Kho-Kho Fields</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="facility-box h-100">
                                    <h5>Indoor Facilities</h5>
                                    <ul>
                                        <li>🏸 Badminton, Table Tennis & Chess</li>
                                        <li>💪 Fitness & Weight Training Zone</li>
                                        <li>🧘 Yoga & Meditation Hall</li>
                                        <li>🏟️ Indoor Stadium (SAI)</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="text-center mt-5">
                            <a href="./assets/documents/studentSports/pd.pdf" target="_blank" class="btn-download">
                                <i class="fas fa-file-download"></i> Download Department
                                Document
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

@include('frontend.footer')