@extends('layouts.app_web')

@section('title', '403 Forbidden | Non Woven Fabric Manufacturer')

@push('styles')
    <style>
        .error-403-wrapper {
            min-height: calc(100vh - 200px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 80px 60px 100px 60px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .error-403-title {
            font-size: 46px;
            font-weight: 400;
            color: #456C6C;
            line-height: 1.2;
            margin-bottom: 40px;
            max-width: 600px;
        }

        .error-403-divider {
            width: 100%;
            height: 4px;
            background-color: #C9D4EA;
            margin-bottom: 40px;
        }

        .error-403-description {
            font-size: 18px;
            color: #555;
            line-height: 1.8;
            max-width: 800px;
        }

        .error-403-description a {
            color: #456C6C;
            text-decoration: underline;
        }

        .error-403-description a:hover {
            color: #4ECDC4;
        }

        @media (max-width: 768px) {
            .error-403-wrapper {
                padding: 60px 30px 80px 30px;
            }

            .error-403-title {
                font-size: 2.5rem;
            }
        }
    </style>
@endpush

@section('content')
    <div class="error-403-wrapper">
        <h2 class="error-403-title">You don't have permission<br> to access this page</h2>

        <div class="error-403-divider"></div>

        <p class="error-403-description">
            Access to this page is restricted. You may not have the necessary
            permissions to view this content. If you believe this is a mistake,
            please contact us or head back to the
            <a href="{{ url('/') }}">homepage</a> to find what you need.
        </p>
    </div>
@endsection