<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Not Available</title>

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

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        body{
            font-family:'Poppins', sans-serif;
            height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            background: linear-gradient(135deg, #0f172a, #111827, #1e293b);
            overflow:hidden;
            color:#fff;
        }

        .bg-animation span{
            position:absolute;
            display:block;
            width:20px;
            height:20px;
            background:rgba(255,255,255,0.05);
            animation:animate 25s linear infinite;
            bottom:-150px;
            border-radius:50%;
        }

        .bg-animation span:nth-child(1){
            left:10%;
            width:80px;
            height:80px;
            animation-duration:20s;
        }

        .bg-animation span:nth-child(2){
            left:20%;
            width:30px;
            height:30px;
            animation-duration:12s;
        }

        .bg-animation span:nth-child(3){
            left:35%;
            width:100px;
            height:100px;
            animation-duration:28s;
        }

        .bg-animation span:nth-child(4){
            left:50%;
            width:50px;
            height:50px;
            animation-duration:18s;
        }

        .bg-animation span:nth-child(5){
            left:70%;
            width:120px;
            height:120px;
            animation-duration:30s;
        }

        .bg-animation span:nth-child(6){
            left:85%;
            width:40px;
            height:40px;
            animation-duration:15s;
        }

        @keyframes animate{
            0%{
                transform:translateY(0) rotate(0deg);
                opacity:0;
            }
            10%{
                opacity:1;
            }
            100%{
                transform:translateY(-1200px) rotate(720deg);
                opacity:0;
            }
        }

        .container{
            position:relative;
            z-index:10;
            width:90%;
            max-width:650px;
            background:rgba(255,255,255,0.08);
            backdrop-filter:blur(15px);
            border:1px solid rgba(255,255,255,0.1);
            padding:50px;
            border-radius:25px;
            text-align:center;
            box-shadow:0 10px 40px rgba(0,0,0,0.5);
            animation:fadeIn 1s ease;
        }

        @keyframes fadeIn{
            from{
                opacity:0;
                transform:translateY(30px);
            }
            to{
                opacity:1;
                transform:translateY(0);
            }
        }

        .icon{
            width:120px;
            height:120px;
            margin:auto;
            margin-bottom:25px;
            background:linear-gradient(135deg,#ff4d4d,#ff0000);
            border-radius:50%;
            display:flex;
            justify-content:center;
            align-items:center;
            box-shadow:0 0 30px rgba(255,0,0,0.5);
        }

        .icon i{
            font-size:55px;
            color:#fff;
        }

        h1{
            font-size:42px;
            margin-bottom:15px;
            font-weight:700;
        }

        p{
            font-size:18px;
            color:#d1d5db;
            line-height:1.8;
            margin-bottom:30px;
        }

        .status{
            display:inline-block;
            padding:12px 25px;
            border-radius:50px;
            background:rgba(255,255,255,0.1);
            color:#fff;
            font-weight:600;
            margin-bottom:25px;
            border:1px solid rgba(255,255,255,0.1);
        }

        .btn{
            display:inline-block;
            text-decoration:none;
            padding:14px 35px;
            border-radius:50px;
            background:linear-gradient(135deg,#22c55e,#16a34a);
            color:#fff;
            font-weight:600;
            transition:0.3s;
            box-shadow:0 5px 20px rgba(34,197,94,0.4);
        }

        .btn:hover{
            transform:translateY(-3px);
            box-shadow:0 8px 25px rgba(34,197,94,0.6);
        }

        .footer{
            margin-top:25px;
            font-size:14px;
            color:#9ca3af;
        }

        @media(max-width:768px){
            .container{
                padding:35px 25px;
            }

            h1{
                font-size:30px;
            }

            p{
                font-size:16px;
            }
        }
    </style>
</head>
<body>

    <div class="bg-animation">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="container">

        <div class="icon">
            <i class="fas fa-server"></i>
        </div>

        <div class="status">
            SYSTEM TEMPORARILY UNAVAILABLE
        </div>

        <h1>Oops! Service Interrupted</h1>

        <p>
            The system is currently unavailable .
        </p>

       

        <div class="footer">
            © <?php echo date('Y'); ?> All Rights Reserved
        </div>

    </div>

</body>
</html>