@extends('layouts.app')

@section('content')
    {{-- @include('frontend.bar.header', [
        'pageTitle' => $pageTitle ?? 'Website Policy',
        'pageIcon' => 'fa-shield-halved',
        'pageDesc' => 'Read the official website policies of the Zoological Survey of India.',
    ]) --}}

    <section class="policy-section py-5">
        <div class="container">

            <div class="policy-card">

                <div class="policy-content">

                    {!! $page->szPageContent !!}

                </div>

            </div>
        </div>
    </section>
@endsection
<style>
    /*==================================================
                ZSI POLICY PAGE
==================================================*/

    :root {
        --zsi-primary: #1B5E20;
        --zsi-secondary: #2E7D32;
        --zsi-light: #43A047;
        --zsi-bg: #F5FAF5;
        --zsi-border: #E3EFE3;
        --zsi-text: #4B5563;
        --zsi-heading: #143A1A;
    }

    /*========================================*/

    .policy-section {

        padding: 80px 0;

        background:
            linear-gradient(rgba(245, 250, 245, .97), rgba(245, 250, 245, .97)),
            url("/frontend/images/background__layout.png") center repeat;

        background-size: 280px;

    }

    /*========================================*/

    .policy-card {

        background: #fff;

        border-radius: 20px;

        padding: 50px;

        border: 1px solid var(--zsi-border);

        position: relative;

        overflow: hidden;

        box-shadow:
            0 15px 45px rgba(0, 0, 0, .08);

    }

    /* Top Accent */

    .policy-card::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 6px;

        background:
            linear-gradient(90deg,
                var(--zsi-primary),
                var(--zsi-light),
                #81C784);

    }

    /* Decorative Circle */

    .policy-card::after {

        content: "";

        position: absolute;

        width: 220px;

        height: 220px;

        right: -80px;

        top: -80px;

        border-radius: 50%;

        background: rgba(67, 160, 71, .05);

    }

    /*========================================*/

    .policy-content {

        position: relative;

        z-index: 2;

        color: var(--zsi-text);

        font-size: 16px;

        line-height: 1.9;

    }

    /*========================================*/

    .policy-content h1 {

        font-size: 36px;

        color: var(--zsi-heading);

        margin-bottom: 25px;

        font-weight: 700;

    }

    .policy-content h2 {

        position: relative;

        font-size: 28px;

        color: var(--zsi-primary);

        margin-top: 45px;

        margin-bottom: 18px;

        padding-left: 18px;

        font-weight: 700;

    }

    .policy-content h2::before {

        content: "";

        position: absolute;

        left: 0;

        top: 3px;

        width: 5px;

        height: 90%;

        border-radius: 20px;

        background: var(--zsi-light);

    }

    .policy-content h3 {

        font-size: 22px;

        color: var(--zsi-secondary);

        margin-top: 30px;

        margin-bottom: 15px;

        font-weight: 600;

    }

    .policy-content h4 {

        font-size: 18px;

        color: #234;

        margin-top: 25px;

        margin-bottom: 12px;

        font-weight: 600;

    }

    /*========================================*/

    .policy-content p {

        margin-bottom: 18px;

        color: #555;

        text-align: justify;

    }

    /*========================================*/

    .policy-content ul,
    .policy-content ol {

        margin: 20px 0;

        padding-left: 25px;

    }

    .policy-content ul li {

        margin-bottom: 12px;

    }

    .policy-content ul li::marker {

        color: var(--zsi-light);

    }

    .policy-content ol li {

        margin-bottom: 12px;

    }

    /*========================================*/

    .policy-content blockquote {

        margin: 30px 0;

        padding: 20px 25px;

        background: #F4FAF4;

        border-left: 5px solid var(--zsi-light);

        border-radius: 0 10px 10px 0;

        font-style: italic;

    }

    /*========================================*/

    .policy-content table {

        width: 100%;

        border-collapse: collapse;

        margin: 30px 0;

        overflow: hidden;

        border-radius: 12px;

    }

    .policy-content table th {

        background: var(--zsi-primary);

        color: #fff;

        padding: 14px;

        font-weight: 600;

    }

    .policy-content table td {

        padding: 14px;

        border: 1px solid #E5E7EB;

    }

    .policy-content table tr:nth-child(even) {

        background: #F8FCF8;

    }

    /*========================================*/

    .policy-content img {

        max-width: 100%;

        height: auto;

        display: block;

        margin: 25px auto;

        border-radius: 12px;

        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

    }

    /*========================================*/

    .policy-content a {

        color: var(--zsi-secondary);

        text-decoration: none;

        font-weight: 600;

        transition: .3s;

    }

    .policy-content a:hover {

        color: var(--zsi-primary);

        text-decoration: underline;

    }

    /*========================================*/

    .policy-content hr {

        border: none;

        height: 1px;

        background: #E5E7EB;

        margin: 35px 0;

    }

    /*========================================*/

    .policy-content strong {

        color: #1B5E20;

    }

    .policy-content b {

        color: #1B5E20;

    }

    /*========================================*/

    .policy-content iframe {

        width: 100%;

        min-height: 450px;

        border: none;

        border-radius: 12px;

    }

    /*========================================*/

    @media (max-width:991px) {

        .policy-card {

            padding: 35px;

        }

        .policy-content h1 {

            font-size: 30px;

        }

        .policy-content h2 {

            font-size: 24px;

        }

    }

    @media (max-width:767px) {

        .policy-section {

            padding: 50px 0;

        }

        .policy-card {

            padding: 25px;

            border-radius: 15px;

        }

        .policy-content {

            font-size: 15px;

            line-height: 1.8;

        }

        .policy-content h1 {

            font-size: 26px;

        }

        .policy-content h2 {

            font-size: 22px;

        }

        .policy-content h3 {

            font-size: 20px;

        }

        .policy-content table {

            display: block;

            overflow-x: auto;

            white-space: nowrap;

        }

    }
</style>