@extends('layouts.app_web')

@section('title', '503 Service Unavailable | Non Woven Fabric Manufacturer')

@push('styles')
    <style>
        .error-503-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-503-title {
            font-size: 46px;
            font-weight: 400;
            color: #456C6C;
            line-height: 1.2;
            margin-bottom: 40px;
            max-width: 600px;
        }

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

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

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

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

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

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

@section('content')
    <div class="error-503-wrapper">
        <h2 class="error-503-title">We'll be back<br> very soon</h2>

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

        <p class="error-503-description">
            Our website is currently undergoing scheduled maintenance to improve
            your experience. We apologize for any inconvenience caused.
            Please check back shortly, or visit our
            <a href="{{ url('/') }}">homepage</a> once the service is restored.
        </p>
    </div>
@endsection