:root{
  --navy:#0b1f3a;
  --navy2:#091a31;
  --teal:#13b8a6;
  --teal2:#0ea5e9;
  --bg:#071426;
}

body{
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fff;
  font-weight: 400;
}

.text-teal{ color: var(--teal) !important; }

.brand-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), #35d39c);
  box-shadow: 0 0 0 4px rgba(19,184,166,.15);
}

.nav-blur{
  background: rgba(11,31,58,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.btn-teal{
  background: linear-gradient(135deg, var(--teal), #35d39c);
  border: 0;
  color: #06202a;
  font-weight: 700;
}
.btn-teal:hover{ filter: brightness(0.95); color:#06202a; }

.hero{
  position: relative;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(19,184,166,.18), transparent 50%),
              radial-gradient(900px 500px at 80% 10%, rgba(14,165,233,.14), transparent 50%),
              linear-gradient(180deg, var(--navy), var(--navy2));
  color: #fff;
  overflow: hidden;
}
.hero .hero-img{
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  max-width: 100%;
}


.section-pad{ padding: 72px 0; }
@media (max-width: 767px){ .section-pad{ padding: 54px 0; } }

.card-soft{
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(2,10,30,.08);
}
.card-soft .icon{
  width: 44px; height: 44px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(19,184,166,.12);
  color: var(--teal);
}

.kpi{
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid rgba(11,31,58,.10);
  border-radius: 18px;
  padding: 18px;
}

.badge-soft{
  background: rgba(19,184,166,.12);
  color: #0b6b61;
  border: 1px solid rgba(19,184,166,.18);
}

.footer{
  background: radial-gradient(900px 500px at 20% 20%, rgba(19,184,166,.14), transparent 55%),
              linear-gradient(180deg, #061225, #040b16);
  color:#fff;
}
.footer-link{ color: rgba(255,255,255,.65); text-decoration:none; }
.footer-link:hover{ color:#fff; text-decoration:underline; }

.icon-pill{
  width: 38px; height: 38px;
  border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  color:#fff; text-decoration:none;
}
.icon-pill:hover{ background: rgba(255,255,255,.08); }

.form-control, .form-select{
  border-radius: 14px;
  border: 1px solid rgba(11,31,58,.14);
  padding: .75rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(19,184,166,.55);
  box-shadow: 0 0 0 .25rem rgba(19,184,166,.18);
}

.rtl{
  direction: rtl;
  text-align: right;
}
.rtl .ms-auto{ margin-right:auto !important; margin-left:0 !important; }



a{
  text-decoration: none;
  color: var(--navy);
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover{
  color: var(--teal);
}

/* Footer links */
.footer a,
.footer a:hover{
  text-decoration: none;
}

.footer-link{
  color: rgba(255,255,255,.65);
}

.footer-link:hover{
  color: #fff;
}

.case-img{
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(11,31,58,.08);
  display: block;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

.section-img{
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(2,10,30,.18);
  border: 1px solid rgba(11,31,58,.10);
}

.founder-img{
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 20px;
}

@media (max-width: 768px){
  .section-img,
  .case-img,
  .founder-img{
    max-height: 260px;
  }

  .hero-img{
    border-radius: 18px;
  }
}


/* ===== About Page Animations ===== */

.fade-up{
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp .8s ease forwards;
}

.fade-delay-1{ animation-delay: .15s; }
.fade-delay-2{ animation-delay: .3s; }
.fade-delay-3{ animation-delay: .45s; }

@keyframes fadeUp{
  to{
    opacity: 1;
    transform: none;
  }
}

/* ===== Founder Cards ===== */

.founder-card{
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(11,31,58,.08);
  box-shadow: 0 14px 45px rgba(2,10,30,.12);
  transition: transform .35s ease, box-shadow .35s ease;
}

.founder-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(2,10,30,.18);
}

.founder-card img{
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: top; /* 🔥 حل مشكلة قص صورة محمود */
}

.founder-info{
  padding: 20px;
}

.founder-name{
  font-weight: 700;
}

.founder-role{
  font-size: .9rem;
  color: var(--teal);
}

/* Mobile tweak */
@media (max-width:768px){
  .founder-card img{
    height: 280px;
  }
}


/* ===============================
   Global Card Hover Animation
================================ */

.card-soft{
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
  position: relative;
}

.card-soft::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(19,184,166,.12),
    rgba(14,165,233,.08)
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.card-soft:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(2,10,30,.18);
  border-color: rgba(19,184,166,.45);
}

.card-soft:hover::after{
  opacity: 1;
}

.card-soft .icon{
  transition: transform .35s ease, background .35s ease;
}

.card-soft:hover .icon{
  transform: scale(1.08);
  background: rgba(19,184,166,.18);
}


/* ===============================
   Contact Page Logo
================================ */

.contact-logo{
  max-width: 180px;
  height: auto;
  opacity: .9;
  transition: transform .3s ease, opacity .3s ease;
}

.contact-logo:hover{
  transform: scale(1.05);
  opacity: 1;
}