@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

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

body{

    font-family:'Inter',sans-serif;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(180deg,#f8fbff,#eef4ff);

    overflow:hidden;

}


.container{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:25px;

}


.logo{

    width:170px;

    height:170px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 18px 35px rgba(37,99,235,.18);

    animation:logo 1.3s ease infinite alternate;

}


.logo img{

    width:130px;

}


h1{

    color:#1d4ed8;

    font-size:42px;

}


p{

    color:#475569;

    font-size:18px;

}


.loader{

    display:flex;

    gap:12px;

}


.loader span{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#2563eb;

    animation:loading 1.2s infinite;

}


.loader span:nth-child(2){

    animation-delay:.2s;

}

.loader span:nth-child(3){

    animation-delay:.4s;

}



@keyframes loading{

    0%{

        transform:translateY(0);
        opacity:.3;

    }

    50%{

        transform:translateY(-15px);
        opacity:1;

    }

    100%{

        transform:translateY(0);
        opacity:.3;

    }

}


@keyframes logo{

    from{

        transform:scale(.95);

    }

    to{

        transform:scale(1.05);

    }

}