*,
*::before,
*::after{
    box-sizing: border-box;
}

html,
body{
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

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

body{

    font-family:"Vazirmatn",sans-serif;

    direction:rtl;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
    linear-gradient(
    135deg,
    #081c36,
    #123b68,
    #1e5aa8
    );

    color:white;

    overflow-y:hidden;
}

.bg{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    opacity:.25;
}

.bg1{

    width:350px;
    height:350px;

    background:#4fc3f7;

    top:-120px;
    right:-80px;
}

.bg2{

    width:400px;
    height:400px;

    background:#7c4dff;

    bottom:-150px;
    left:-100px;
}

.card{

    position:relative;

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

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

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

    border-radius:25px;

    padding:35px 45px;

    text-align:center;

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

    animation:fade .8s ease;
}

.logo-box{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    background:#ffffff;

    padding:18px;

    border-radius:22px;

    margin-bottom:25px;

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

.logo{

    width:120px;

    display:block;
}

h1{

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;
}

.subtitle{

    color:#dbeafe;

    font-size:21px;

    margin-bottom:28px;
}

.status{

    display:inline-block;

    background:#16a34a;

    padding:12px 28px;

    border-radius:50px;

    font-weight:700;

    margin-top:25px;

    margin-bottom:30px;
    font-size:19px;
}

.description{

    font-size:17px;

    line-height:2;

    color:#edf2f7;

    margin-bottom:30px;
}

hr{

    border:none;

    height:1px;

    background:rgba(255,255,255,.15);

    margin:25px 0;
}

.thanks{

    color:#dbeafe;

    font-size:15px;
}

footer{
    margin-top:25px;

    font-size:14px;

    color:#cbd5e1;
}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(30px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

@media(max-width:600px){

    .card{

        padding:30px 22px;
    }

    h1{

        font-size:34px;
    }

    .subtitle{

        font-size:18px;
    }

    .description{

        font-size:15px;
    }
.logo{
    width:180px;
    height:auto;
    max-width:100%;
    display:block;
    margin:0 auto;
}

/* Mobile */
@media (max-width: 768px) {

    .container{
        padding: 24px;
    }

    h1{
        font-size: 42px;
    }

    .subtitle{
        font-size: 20px;
        margin-bottom: 28px;
    }

    .status{
        font-size: 22px;
    }

    .description{
        font-size: 16px;
        line-height: 1.7;
    }

    .footer{
        margin-top: 50px;
        font-size: 14px;
    }

}

.logo{
        width:140px;
        height:auto;
    }