/* =========================================
   GLOBAL
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    font-size:16px;
}

body{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#10183d;

    overflow:hidden;

    position:relative;

}



/* =========================================
   BACKGROUND TEXT
========================================= */

.bg-text{

    position:absolute;

    color:rgba(255,255,255,.04);

    font-size:120px;

    font-weight:bold;

    user-select:none;

    transform:rotate(-10deg);

}

.text1{

    top:40px;

    left:120px;

}

.text2{

    top:40px;

    right:120px;

}

.text3{

    bottom:90px;

    left:150px;

}

.text4{

    bottom:90px;

    right:150px;

}



/* =========================================
   CARD
========================================= */

.card{

    width:430px;

    background:#fff;

    border-radius:16px;

    padding:40px;

    text-align:center;

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

    position:relative;

    z-index:5;

}



/* =========================================
   LOGO
========================================= */

.logo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#2d8cff;

    font-size:20px;

    font-weight:bold;

}

.logo-icon{

    display:flex;

    justify-content:center;

    align-items:center;

}

.line{

    height:1px;

    background:#e8e8e8;

    margin:25px 0;

}



/* =========================================
   ICON
========================================= */

.icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#2d8cff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

}

.icon svg{

    width:32px;

    height:32px;

}



/* =========================================
   TEXT
========================================= */

h3{

    margin-top:25px;

    font-size:25px;

    color:#222;

}

p{

    margin-top:12px;

    color:#888;

    font-size:15px;

    line-height:1.6;

}



/* =========================================
   BUTTONS
========================================= */

.verify-btn{

    width:100%;

    height:54px;

    margin-top:30px;

    border:none;

    border-radius:10px;

    background:#2d8cff;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

    position:relative;

    overflow:hidden;

}

.verify-btn:hover{

    background:#1576f2;

}

/* Progress bar */

.verify-btn::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:5px;

    background:white;

}

.verify-btn.holding::after{

    width:100%;

    transition:width 3s linear;

}

/* Spinner */

.spinner{

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.4);

    border-top:2px solid white;

    border-radius:50%;

    display:inline-block;

    margin-right:10px;

    vertical-align:middle;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.success{

    background:#16a34a !important;

}

.disabled{

    background:#e8f0ff;

    color:#4d6ca8;

}



/* =========================================
   FOOTER
========================================= */

.footer{

    margin-top:28px;

    color:#888;

    font-size:12px;

    line-height:1.8;

}



/* =========================================
   DESKTOP
========================================= */

@media(min-width:1200px){

    .card{

        width:460px;

        padding:45px;

    }

}

@media(max-width:768px){

    .card{

        width:92%;

    }

    .bg-text{

        font-size:70px;

    }

}