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

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

.maintenance-container{

    width:90%;
    max-width:650px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:20px;

    padding:60px 40px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

    animation:fadeIn .8s ease;
}

.icon{

    font-size:90px;

    animation:rotate 5s linear infinite;
}

h1{

    margin-top:20px;

    font-size:40px;

    font-weight:700;
}

p{

    margin-top:20px;

    line-height:1.8;

    font-size:18px;

    color:#e5e7eb;
}

.sub-text{

    font-size:15px;

    color:#cbd5e1;
}

.loader{

    width:70px;
    height:70px;

    margin:45px auto;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.25);

    border-top-color:#ffffff;

    animation:spin 1s linear infinite;
}

.footer{

    margin-top:20px;

    font-size:14px;

    color:#94a3b8;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes rotate{

    0%{
        transform:rotate(0deg);
    }

    20%{
        transform:rotate(-15deg);
    }

    40%{
        transform:rotate(15deg);
    }

    60%{
        transform:rotate(-15deg);
    }

    80%{
        transform:rotate(15deg);
    }

    100%{
        transform:rotate(0deg);
    }

}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@media(max-width:768px){

    .maintenance-container{

        padding:45px 25px;
    }

    h1{

        font-size:30px;
    }

    p{

        font-size:16px;
    }

    .icon{

        font-size:70px;
    }

}