*{
box-sizing:border-box;
}


body{

margin:0;
font-family:'Tajawal',sans-serif;

}



.background{

height:100vh;
min-height:700px;

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

background:

radial-gradient(circle at top,#0B5F83 0%,transparent 35%),

linear-gradient(
135deg,
#020b18,
#071426 55%,
#0B5F83
);


overflow:hidden;

position:relative;

color:white;

}




.grid{


position:absolute;
inset:0;


background-image:

linear-gradient(
rgba(255,255,255,.04) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.04) 1px,
transparent 1px
);


background-size:
60px 60px;


}



.container{

position:relative;

z-index:2;

text-align:center;

max-width:900px;

padding:40px;


}




.logo-box{

margin-bottom:35px;

}



.logo{

width:220px;

filter:
drop-shadow(0 0 35px rgba(20,200,200,.35));

}



.badge{

display:inline-block;

padding:10px 25px;

border-radius:50px;

background:

rgba(255,255,255,.08);

border:

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


font-size:16px;

}



h1{

font-size:70px;

margin:30px 0 5px;

font-weight:800;

background:

linear-gradient(
90deg,
#fff,
#4fd1c5
);

-webkit-background-clip:text;

color:transparent;


}



h2{

font-size:38px;

margin:0 0 25px;

font-weight:700;


}



.description{

font-size:22px;

line-height:2;

color:#dbeafe;

}




.features{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin:40px 0;


}



.features div{


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.12);


padding:15px 25px;


border-radius:20px;


font-size:18px;


backdrop-filter:blur(10px);


}



.features span{

margin-right:8px;

}



.button{


display:inline-block;


padding:15px 45px;


border-radius:40px;


background:#1B7773;


color:white;


text-decoration:none;


font-size:20px;


box-shadow:

0 10px 30px rgba(27,119,115,.4);


transition:.3s;


}


.button:hover{

transform:translateY(-5px);

}




footer{


margin-top:50px;

color:#94a3b8;

font-size:15px;


}



.light{


position:absolute;

border-radius:50%;

filter:blur(120px);

}



.one{

width:300px;

height:300px;

background:#1B7773;

top:-100px;

right:-100px;

}



.two{

width:350px;

height:350px;

background:#0B5F83;

bottom:-150px;

left:-100px;


}



@media(max-width:700px){


h1{
font-size:45px;
}


h2{
font-size:30px;
}


.description{
font-size:18px;
}


.logo{
width:170px;
}


}