@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500;700;900&display=swap');


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


body{

min-height:100vh;

background:
radial-gradient(circle,#1a0505,#000);

color:white;

overflow-x:hidden;

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

padding:20px;

font-family:'Segoe UI',sans-serif;

}




main{

text-align:center;
z-index:5;
max-width:900px;

}



.logo-box img{

width:230px;
max-width:65vw;

border-radius:50%;

animation:show 1.5s, glow 2.5s infinite alternate;

}



@keyframes show{

from{
transform:scale(0);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}



@keyframes glow{

to{

filter:drop-shadow(0 0 25px #ab1e28);

}

}




h1{

font-size:clamp(30px,6vw,45px);

margin-top:25px;

}


h2{

font-size:clamp(18px,4vw,25px);

margin:15px;

}



span{

color:#d12c38;

}




.arabic{

margin-top:25px;

font-family:'Tajawal';

}


.arabic h3{

font-size:35px;

}



.arabic p{

font-size:24px;

margin-top:10px;

}



.finish{

margin-top:30px;

font-size:28px;

padding:15px;

border-radius:30px;

border:2px solid #d12c3866;

background:#ffffff08;

}





.social{

margin-top:35px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}



.social a{


display:flex;

align-items:center;

gap:8px;


text-decoration:none;

color:white;


padding:12px 25px;


border-radius:25px;

border:1px solid #ffffff33;


background:#ffffff0d;


transition:.3s;

}



.social svg{

width:20px;
height:20px;

fill:currentColor;

}



.social a:hover{

background:#ab1e28;

transform:translateY(-3px);

}





.balloon{


position:absolute;


bottom:-120px;


width:60px;

height:80px;


border-radius:50%;


box-shadow:
inset -10px -15px 20px #0005,
0 0 20px #ffffff22;


animation:
float linear infinite;


}



.balloon:after{


content:"";

position:absolute;

top:12px;
left:15px;


width:20px;
height:30px;


background:#ffffff55;

border-radius:50%;

}



.balloon:before{


content:"";

position:absolute;

bottom:-90px;

left:50%;

width:2px;

height:90px;

background:#aaa;

}




@keyframes float{


100%{

transform:
translateY(-130vh)
rotate(15deg);

}

}





.confetti{

position:absolute;

width:8px;

height:16px;

animation:fall linear infinite;

}


@keyframes fall{

to{

transform:
translateY(110vh)
rotate(720deg);

}

}






@media(max-width:600px){


body{

align-items:flex-start;

padding-top:40px;

}



.logo-box img{

width:140px;

}



.arabic h3{

font-size:27px;

}


.arabic p{

font-size:18px;

}



.finish{

font-size:19px;

}



.social a{

width:90%;

justify-content:center;

}



.balloon{

width:40px;

height:55px;

}


}