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

body{

height:100vh;

background: radial-gradient(circle at center, #ffffff 0%, #e5e5e5 40%, #8c8c8c 100%);

display:flex;
justify-content:center;
align-items:center;

animation: fadeIn 1.5s ease;

}


.container{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}


.card{

background:white;

padding:40px 60px;

border-radius:14px;

box-shadow:0 20px 50px rgba(0,0,0,0.15);

text-align:center;

animation: slideUp 1.2s ease;

}


.logo{

width:300px;
margin-bottom:20px;

}


.loader{

border:6px solid #f3f3f3;

border-top:6px solid #0d2a4d;

border-radius:50%;

width:45px;
height:45px;

margin:20px auto;

animation: spin 1s linear infinite;

}


.countdown{

font-size:28px;

font-weight:bold;

color:#0d2a4d;

margin-bottom:15px;

}


.arabic{

font-size:20px;

color:#0d2a4d;

margin-top:10px;

}


.english{

font-size:16px;

color:#0d2a4d;

opacity:0.8;

margin-top:6px;

}


@keyframes spin{

0%{ transform:rotate(0deg); }

100%{ transform:rotate(360deg); }

}


@keyframes fadeIn{

from{ opacity:0 }

to{ opacity:1 }

}


@keyframes slideUp{

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

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

}