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

:root{
  --primary:#0d6efd;
  --secondary:#00c2ff;
  --dark:#071527;
  --light:#f5f8fc;
  --text:#334155;
}

*{font-family:'Tajawal',sans-serif;}
html{scroll-behavior:smooth;}
body{color:var(--text);}

.custom-nav{
  background:rgba(7,21,39,.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
}
.navbar-brand,.nav-link{color:#fff!important;}
.nav-link{margin:0 8px;opacity:.9;}
.nav-link:hover{color:var(--secondary)!important;}
.brand-icon{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  margin-left:8px;
}
.navbar-toggler{background:#fff;}

.hero-section{
  min-height:100vh;
  background:
    linear-gradient(135deg,rgba(7,21,39,.95),rgba(13,110,253,.72)),
    url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1600&q=80') center/cover;
  color:#fff;
  position:relative;
}
.hero-section .badge{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  padding:12px 18px;
}
.hero-card{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;
  padding:45px;
  backdrop-filter:blur(15px);
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.hero-card i{font-size:70px;color:var(--secondary);}

.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border:0;
  box-shadow:0 12px 30px rgba(13,110,253,.25);
}
.btn-primary:hover{transform:translateY(-2px);}

.section-padding{padding:95px 0;}
.section-title span{
  color:var(--primary);
  font-weight:800;
  display:block;
  margin-bottom:10px;
}
.section-title h2{
  color:var(--dark);
  font-weight:800;
  margin-bottom:18px;
}
.section-title.light h2,.dark-section .section-title h2{color:#fff;}

.stat-box,.mini-card,.service-card,.why-card,.contact-form{
  background:#fff;
  border-radius:24px;
  padding:28px;
  box-shadow:0 15px 45px rgba(15,23,42,.08);
}
.stat-box h3{font-size:38px;font-weight:800;color:var(--primary);}
.about-card{
  background:linear-gradient(135deg,#eaf4ff,#ffffff);
  border-radius:32px;
  padding:28px;
}
.mini-card{text-align:center;min-height:145px;}
.mini-card i,.service-card i{
  color:var(--primary);
  font-size:42px;
  margin-bottom:18px;
  display:block;
}
.mini-card p{font-weight:700;margin:0;color:var(--dark);}

.service-card{
  height:100%;
  transition:.3s;
  border:1px solid #edf2f7;
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 60px rgba(13,110,253,.16);
}
.service-card h4,.why-card h4{font-weight:800;color:var(--dark);}

.dark-section{
  background:
    radial-gradient(circle at top left,rgba(0,194,255,.25),transparent 35%),
    linear-gradient(135deg,#071527,#0f2d52);
  color:#dbeafe;
}
.solution-item{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:20px;
  color:#fff;
  font-weight:700;
}
.solution-item i{color:var(--secondary);margin-left:8px;}

.why-card{
  height:100%;
  border-bottom:4px solid var(--primary);
}
.why-card span{
  color:var(--secondary);
  font-size:34px;
  font-weight:800;
}

.contact-info p{
  background:#fff;
  padding:15px 18px;
  border-radius:16px;
  margin-bottom:12px;
  box-shadow:0 10px 25px rgba(15,23,42,.06);
}
.contact-info i{color:var(--primary);margin-left:8px;}
.form-control{
  padding:14px 16px;
  border-radius:14px;
  border:1px solid #dbe3ef;
}
.form-control:focus{
  box-shadow:0 0 0 .2rem rgba(13,110,253,.12);
}

.footer{
  background:#071527;
  color:#cbd5e1;
  padding:55px 0 25px;
}
.footer h4,.footer h5{color:#fff;font-weight:800;}
.footer a{
  display:block;
  color:#cbd5e1;
  text-decoration:none;
  margin-bottom:10px;
}
.footer a:hover{color:var(--secondary);}
.social-links a{
  display:inline-flex;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  margin-left:8px;
}
.footer hr{border-color:rgba(255,255,255,.12);margin:35px 0 20px;}

@media(max-width:991px){
  .hero-section{padding-top:80px;}
  .display-4{font-size:2.4rem;}
  .section-padding{padding:70px 0;}
}