@font-face{
font-family:"ArabicFont";
src:url("fonts/alfont_com_AlFont_com_GE-Hili-Light_15.otf");
}

@font-face{
font-family:"EnglishFont";
src:url("fonts/BrittanySignatureScript.ttf");
}

:root{

--primary:#00122B;
--secondary:#00C6FF;
--light:#CCF3FD;
--bg:#FFFFFF;

}

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

body{

font-family:"ArabicFont",sans-serif;
background:var(--bg);
color:var(--primary);
line-height:1.7;

}

/* navbar */

.navbar{

position:fixed;
top:0;
width:100%;

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

background:white;
border-bottom:1px solid #eee;

padding:20px;

z-index:1000;

}

.nav{

display:flex;
gap:40px;
list-style:none;

}

.nav a{

text-decoration:none;
color:var(--primary);
font-weight:500;

}

/* hero */

.hero{

height:100vh;

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

text-align:center;

background:linear-gradient(
180deg,
#00122B 0%,
#ffffff 50%,
#CCF3FD 100%
);

}

/* اسم سارة بالعربي */

.name-ar{

font-size:70px;
color:var(--primary);
position:relative;
z-index:1;

}

/* glow خلف الاسم */

.name-ar::before{

content:"";

position:absolute;

width:320px;
height:320px;

background:radial-gradient(
circle,
rgba(0,198,255,0.35) 0%,
rgba(0,198,255,0.15) 40%,
transparent 70%
);

filter:blur(40px);

top:50%;
left:50%;

transform:translate(-50%,-50%);

z-index:-1;

}

.name-en{

font-size:40px;
color:var(--primary);
font-family:"EnglishFont";
margin-top:10px;

}

.hero-text{

margin-top:20px;
font-size:20px;

}

.btn{

margin-top:30px;

padding:14px 30px;

background:var(--primary);
color:white;

border-radius:30px;

text-decoration:none;

}

/* sections */

.section{

padding:140px 12%;
text-align:center;

}

.section h2{

margin-bottom:50px;
font-size:36px;

}

/* about */

.about-grid{

display:grid;
grid-template-columns:1fr 1fr;

gap:40px;
align-items:center;

}

.profile{

width:100%;
border-radius:20px;

}

/* cards */

.grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;

}

.card{

background:#f8fafc;

padding:35px;

border-radius:20px;

transition:all .35s ease;

border:1px solid transparent;

position:relative;

overflow:hidden;

}

/* hover احترافي */

.card:hover{

transform:translateY(-12px) scale(1.02);

box-shadow:0 20px 40px rgba(0,0,0,0.12);

border:1px solid var(--secondary);

}

/* تأثير لمعان للكارد */

.card::after{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);

transition:.6s;

}

.card:hover::after{

left:100%;

}

/* social icons */

.socials{

display:flex;
justify-content:center;
gap:25px;
margin-top:40px;

}

.socials a{

font-size:24px;
color:var(--secondary);
transition:.3s;

}

.socials a:hover{

color:var(--primary);
transform:translateY(-3px);

}

.email{

margin-top:20px;

}