@font-face {
    font-family: 'Poppins';
    src: local('Poppins Medium'), local('Poppins-Medium'),
        url('Poppins-Medium.woff2') format('woff2'),
        url('Poppins-Medium.woff') format('woff'),
    font-weight: 400;
    font-style: normal;
}


body,html{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
 	font-family: 'Poppins', sans-serif;

background:linear-gradient(135deg,#eef2f7,#ffffff);
overflow:hidden;
}

/* circulos decorativos */

.bg-shape{
position:absolute;
border-radius:50%;
opacity:.25;
filter:blur(40px);
}

.shape1{
width:260px;
height:260px;
background:#0d6efd;
top:10%;
left:15%;
}

.shape2{
width:200px;
height:200px;
background:#6c757d;
bottom:12%;
right:18%;
}

/* card */

.maintenance-box{

position:relative;
z-index:2;

text-align:center;
max-width:520px;
padding:45px 35px;

background:white;
border-radius:18px;

box-shadow:
0 20px 45px rgba(0,0,0,.08);

animation:fadeIn .6s ease;

}

/* logo */

.logo{
max-width:190px;
margin-bottom:25px;
}

/* titulo */

h1{
font-size:30px;
font-weight:600;
margin-bottom:18px;
}

/* texto */

p{
color:#6c757d;
font-size:16px;
margin-bottom:25px;
}

/* icono animado */

.icon{
font-size:42px;
margin-bottom:15px;
animation:pulse 2s infinite;
}

/* footer */

.small-text{
font-size:13px;
color:#adb5bd;
margin-top:20px;
}

/* animaciones */

@keyframes fadeIn{

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

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

}

@keyframes pulse{

0%{transform:scale(1)}
50%{transform:scale(1.08)}
100%{transform:scale(1)}

}