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

html{
scroll-behavior:smooth;
}

section{
scroll-margin-top:100px;
}

body{
background:#020b16;
color:white;
}

/* Navbar */

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 80px;

position:sticky;
top:0;
z-index:1000;
background:#071421;
border-bottom:1px solid rgba(255,255,255,0.05);
}

.logo{
font-size:24px;
font-weight:bold;
color:#22d3ee;
}

nav ul{
display:flex;
list-style:none;
gap:30px;
}

nav a{
text-decoration:none;
color:#bcd;
font-size:16px;
}

/* Hero Section */

.hero{
padding:120px 80px;
max-width:900px;
}

.tag{
display:inline-block;
border:1px solid #22d3ee;
color:#22d3ee;
padding:8px 16px;
border-radius:20px;
margin-bottom:25px;
font-size:14px;
}

h1{
font-size:70px;
line-height:1.1;
margin-bottom:20px;
}

h1 span{
color:#22d3ee;
}

p{
color:#9db0c9;
font-size:18px;
max-width:600px;
margin-bottom:40px;
}

/* Buttons */

.buttons{
display:flex;
gap:20px;
}

.btn-primary{
background:#22d3ee;
color:#000;
padding:15px 28px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
}

.btn-outline{
border:1px solid #3b4c63;
padding:15px 28px;
border-radius:10px;
text-decoration:none;
color:white;
}



/* ABOUT SECTION */

.about{
padding:120px 80px;
text-align:center;
}

.about h2{
font-size:50px;
margin-bottom:20px;
}

.about h2 span{
color:#22d3ee;
}

.about-text{
max-width:900px;
margin:auto;
color:#9db0c9;
font-size:18px;
line-height:1.7;
margin-bottom:70px;
}

/* cards */

.cards{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.card{
background:#071423;
padding:40px;
border-radius:15px;
width:320px;
text-align:left;
border:1px solid #0f2a44;
transition:0.3s;
}

.card:hover{
transform:translateY(-8px);
border-color:#22d3ee;
}

.icon{
font-size:30px;
margin-bottom:20px;
}

.card h3{
font-size:22px;
margin-bottom:15px;
}

.card p{
font-size:16px;
color:#9db0c9;
}

/* TEAM SECTION */

.team{
padding:120px 80px;
text-align:center;
}

.team h2{
font-size:50px;
margin-bottom:15px;
text-align: center;
}

.team h2 span{
color:#22d3ee;
}

.team-text{
color:#9db0c9;
margin:0 auto 70px auto;
font-size:18px;
max-width:700px;
text-align:center;
}

.team-container{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

.team-card{
background:#071423;
padding:40px;
border-radius:15px;
width:260px;
border:1px solid #0f2a44;
transition:0.3s;
}

.team-card:hover{
transform:translateY(-8px);
border-color:#22d3ee;
}

/* image placeholder */

.team-img{
width:120px;
height:120px;
border-radius:50%;
border:3px solid #22d3ee;
margin:0 auto 20px auto;
background:#0b1d2e;
}

.team-card h3{
font-size:20px;
margin-bottom:10px;
}

.role{
color:#22d3ee;
font-weight:bold;
margin-bottom:10px;
}

.desc{
color:#9db0c9;
font-size:14px;
}

.team-img img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
}



.contact-section{
    background:#071421;
    padding:120px 20px;
    text-align:center;
}

.contact-title{
    font-size:52px;
    font-weight:700;
    color:white;
}

.contact-title span{
    color:#22d3c5;
}

.contact-subtitle{
    color:#9fb3c8;
    font-size:18px;
    max-width:700px;
    margin:20px auto 60px;
    line-height:1.6;
}

.contact-card{
    background:#0c1a27;
    border:1px solid rgba(255,255,255,0.05);
    border-radius:16px;
    padding:60px 40px;
    max-width:750px;
    margin:auto;
}

.contact-info{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 auto 25px auto;   /* يوسّط السطر */
    color:#a8bed3;
    font-size:18px;
    width:fit-content;         /* يجعل العرض بحجم المحتوى */
}

.icon{
    color:#22d3c5;
    width:22px;
    height:22px;
    flex-shrink:0;
    align-items: center;
    
}

.contact-button{
    display:inline-block;
    margin-top:25px;
    padding:16px 38px;
    background:#27c7c7;
    color:#000;
    font-weight:600;
    border-radius:12px;
    text-decoration:none;
    transition:0.3s;
}

.contact-button:hover{
    background:#1fb5b5;
}