:root {
  --pph-primary:#58a6ff;        
  --pph-primary-2:#6ec1ff;      
  --pph-accent:#0b6bcb;         
  --pph-bg:#f5faff;             
  --pph-text:#0b2545;           
  --pph-muted:#5b6b82;
  --pph-white:#ffffff;
  --shadow-soft: 0 10px 30px rgba(11,107,203,.12);
  --glass-bg: rgba(255,255,255,.72);
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --focus: 0 0 0 .25rem rgba(88,166,255,.45);
}

html,body {
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--pph-text);
  background:var(--pph-bg);
}

/* Skip link for accessibility */
.skip-link {
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus {
  left:1rem; top:1rem;
  width:auto; height:auto;
  background:#000; color:#fff;
  padding:.5rem 1rem;
  border-radius:.5rem;
  z-index:9999;
}

/* Top info bar */
.topbar {
  background:linear-gradient(90deg,#e8f3ff 0%, #f2f8ff 100%);
  font-size:.925rem;
  border-bottom:1px solid #e3effd;
}
.topbar a { color:var(--pph-accent); text-decoration:none; }
.topbar a:hover { color:#073b86; }

/* Navbar */
.navbar-brand { font-weight:700; letter-spacing:.2px; }
.brand-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--pph-primary),var(--pph-primary-2));
  color:#fff; margin-right:.5rem; box-shadow:var(--shadow-soft);
}
.navbar { background:linear-gradient(180deg,#f7fbff, #ffffff 60%); }
.nav-link { font-weight:500; }
.btn-gradient {
  background:linear-gradient(135deg,var(--pph-primary-2),var(--pph-primary));
  border:none; color:#fff; box-shadow:var(--shadow-soft);
}
.btn-gradient:hover { filter:brightness(.97); }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 500px at 10% -10%, #d7ebff 10%, transparent 60%),
              linear-gradient(135deg,#e6f2ff 0%, #ffffff 70%),
              url('/assets/images/5.jpeg') center/cover no-repeat;
  color: var(--pph-text);
  padding: 120px 0;
  text-align: center;
}

.hero:before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="%236ec1ff" stop-opacity="0.25"/><stop offset="100%" stop-color="%2358a6ff" stop-opacity="0.15"/></linearGradient></defs><path d="M0,300 C200,180 350,420 600,260 C740,190 800,240 800,240 L800,0 L0,0 Z" fill="url(%23g)"/></svg>') no-repeat center/cover;
  transform: skewY(-3deg);
}
.hero-content { position: relative; z-index: 1; }

.hero-figure {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.hero-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.hero-figure:hover img { transform: scale(1.035); }

.glass {
  backdrop-filter: saturate(1.3) blur(6px);
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
}

/* Sections */
.elegant-section {
  position: relative;
  padding: 5rem 0;
}

.text-gradient {
  background: linear-gradient(90deg, #0b6bcb, #58a6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-figure img {
  transition: transform .6s ease;
}
.about-figure:hover img {
  transform: scale(1.05);
}

.icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6f2ff, #ffffff);
  color: #0b6bcb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(11,107,203,.15);
}

.service-elegant {
  background: #fff;
  border-radius: 1.25rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.4s ease;
  border: 1px solid #eef4ff;
}
.service-elegant:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 28px rgba(11,107,203,.12);
}

.service-icon-lg {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  background: linear-gradient(135deg,#e6f3ff,#ffffff);
  color: #0b6bcb;
  box-shadow: 0 8px 20px rgba(88,166,255,.15);
}


/* Services */
.service-card { perspective: 1200px; }
.service-inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.service-card:hover .service-inner { transform: rotateY(180deg); }
.service-face {
  position:absolute; inset:0;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:1.6rem; background:#fff;
  backface-visibility:hidden;
}
.service-face.back {
  transform: rotateY(180deg);
  background:linear-gradient(135deg,#eaf4ff,#ffffff);
}
.service-icon {
  width:64px; height:64px; border-radius:18px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#e6f3ff,#ffffff);
  color:var(--pph-accent);
  box-shadow:0 8px 16px rgba(88,166,255,.15);
  margin-bottom:1rem;
}

/* Testimonials */
.testimonial {
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg,#f7fbff,#ffffff);
  box-shadow:var(--shadow-soft);
}

/* Forms */
.form-control:focus, .btn:focus { box-shadow: var(--focus); }
.modal-content {
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-soft);
}

/* Footer */
footer {
  background:linear-gradient(0deg,#e9f2ff,#f7fbff);
}
.social a {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid #e3effd;
  color:var(--pph-accent);
}
.social a:hover { color:#073b86; background:#eef6ff; }

/* Utilities */
.divider { height:1px; background:linear-gradient(90deg,transparent,#e5efff,transparent); }

/* divider */
.divider {
  height: 2px;
  width: 100%;
  margin: 3rem auto;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    #58a6ff,
    #0b6bcb,
    transparent
  );
  opacity: 0.9;
  border-radius: 50px;
}

/* Career Section */
.career-hero {
  position: relative; 
  background: url('/assets/images/3.jpeg') center/cover no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.career-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 37, 69, 0.55); 
  z-index: 0; 
}

.career-hero .container {
  position: relative;
  z-index: 1; 
}