@extends('layouts.main')

@section('title', 'Education & Development')

@section('styles')
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, Helvetica, sans-serif;
    }

    body {
        background: #f4f4f4;
        color: #222;
    }

    /* HERO */
    .hero {
        height: 400px;
        background: linear-gradient(rgba(22,25,80,.75), rgba(22,25,80,.75)), url('https://images.unsplash.com/photo-1517649763962-0c623066013b?w=1600');
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

        .hero::before {
            content: "";
            position: absolute;
            right: -120px;
            bottom: -120px;
            width: 450px;
            height: 450px;
            border-radius: 50%;
            background: linear-gradient(135deg,#00d4ff,#c6ff00);
            opacity: .5;
        }

        .hero h2 {
            color: white;
            font-size: 65px;
            text-align: center;
            z-index: 2;
            letter-spacing: 3px;
        }

    /* CONTENT AREA */
    .container {
        width: 90%;
        max-width: 1200px;
        margin: 50px auto;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
    }

    .content,
    .sidebar {
        background: white;
        border-radius: 10px;
        padding: 40px;
        box-shadow: 0 5px 15px rgba(0,0,0,.05);
    }

        .content h3 {
            font-size: 38px;
            color: #2f2f6d;
            margin-bottom: 20px;
        }

        .content p {
            color: #666;
            line-height: 1.8;
            margin-bottom: 30px;
        }

    .form-links a {
        display: block;
        text-decoration: none;
        color: #2f5cff;
        font-size: 22px;
        margin-bottom: 18px;
        transition: .3s;
    }

        .form-links a:hover {
            transform: translateX(6px);
            color: #001c7a;
        }

    /* SIDEBAR */
    .sidebar h4 {
        font-size: 32px;
        color: #2f2f6d;
        margin-bottom: 25px;
    }

    .sidebar ul {
        list-style: none;
    }

        .sidebar ul li {
            padding: 14px 0;
            border-bottom: 1px solid #eee;
        }

            .sidebar ul li:last-child {
                border-bottom: none;
            }

            .sidebar ul li a {
                text-decoration: none;
                color: #444;
                font-size: 18px;
                transition: .3s;
            }

                .sidebar ul li a:hover {
                    color: #2f5cff;
                    padding-left: 8px;
                }

    /* RESPONSIVE */
    @media(max-width:900px) {
        .container {
            grid-template-columns: 1fr;
        }

        .hero h2 {
            font-size: 42px;
        }
    }
</style>
@endsection

@section('content')
    <section class="hero">
        <h2>EDUCATION & DEVELOPMENT</h2>
    </section>

    <div class="container">

        <div class="content">

            <h3>Education & Development</h3>

            <p>
                Discover coaching education pathways, academy programmes,
                age-group development initiatives, webinars, judge education,
                and international development opportunities.
            </p>

            <div class="form-links">
                <a href="#">Coaches ID Data Base</a>
                <a href="#">Overview of Education Programme</a>
                <a href="#">Academy Programme</a>
                <a href="#">Age Group Programme</a>
                <a href="#">Webinars</a>
                <a href="#">Judge Education</a>
                <a href="#">Olympic Solidarity</a>
                <a href="#">Development Officers</a>
            </div>

        </div>

        <div class="sidebar">

            <h4>Coach Education</h4>

            <ul>
                <li><a href="#">Coaches ID Data Base</a></li>
                <li><a href="#">Overview of Education Programme</a></li>
                <li><a href="#">Academy Programme</a></li>
                <li><a href="#">Age Group Programme</a></li>
                <li><a href="#">Webinars</a></li>
                <li><a href="#">Judge Education</a></li>
                <li><a href="#">Olympic Solidarity</a></li>
                <li><a href="#">Development Officers</a></li>
            </ul>

        </div>

    </div>
@endsection