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

body{

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

    background:url('background.jpg') center center/cover no-repeat;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.72);

}

.container{

    position:relative;

    z-index:5;

    text-align:center;

    width:90%;

    max-width:700px;

    padding:60px 40px;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(10px);

    border-radius:18px;

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

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

}

.logo{

    width:260px;

    max-width:90%;

    margin-bottom:40px;

}

h1{

    color:#ffffff;

    font-size:48px;

    font-weight:700;

    margin-bottom:20px;

}

p{

    color:#dddddd;

    font-size:18px;

    line-height:32px;

    margin-bottom:45px;

}

.loader{

    display:flex;

    justify-content:center;

    gap:12px;

}

.loader span{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#ffffff;

    animation:bounce 1.2s infinite;

}

.loader span:nth-child(2){

    animation-delay:.2s;

}

.loader span:nth-child(3){

    animation-delay:.4s;

}

footer{

    margin-top:50px;

    color:#bdbdbd;

    font-size:14px;

    letter-spacing:1px;

}

@keyframes bounce{

0%,80%,100%{

transform:scale(0);

opacity:.5;

}

40%{

transform:scale(1);

opacity:1;

}

}

@media(max-width:768px){

.container{

padding:40px 25px;

}

.logo{

width:200px;

}

h1{

font-size:34px;

}

p{

font-size:16px;

line-height:28px;

}

}