/* =========================================
   ABOUT PAGE — page-specific styles only
   ========================================= */

/* --- Hero section --- */
.hero {
  background: url('../images/bg1.jpeg') no-repeat center center / cover;
  color: #fff;
  padding: 120px 0;
  position: relative;
  overflow: visible;
}
.hero .container { position: relative; z-index: 1; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
  opacity: .1;
}

/* Navbar brand (about page only) */
.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
}

/* Hero button (future proof) */
.hero .btn-light {
  border-radius: 25px;
  padding: 12px 30px;
  transition: .3s all;
  color: #343a40;
  font-weight: 500;
}
.hero .btn-light:hover {
  background-color: #f8f9fa;
  transform: scale(1.05);
}

/* --- Section fade-in --- */
.section-fade { opacity: 0; transform: translateY(24px); }
.section-fade.fade-in { opacity: 1; transform: translateY(0); transition: all .7s ease; }

/* --- Tech badges --- */
.tech-badge {
  background: #f2f4f8;
  color:#110f0f;
  padding: .6rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
}

/* --- Timeline --- */
.timeline li { position: relative; padding-left: 28px; }
.timeline li::before {
  content: "";
  position: absolute; left: 8px; top: .55rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: #0d6efd;
}

/* --- Promises (Who We Are) --- */
.promises .promise-pill {
  background:#f2f4f8; color:#222;
  padding:.55rem .85rem;
  border-radius:999px;
  border:1px solid #e5e7eb;
  font-weight:600;
  display:flex; align-items:center; gap:.4rem;
}

/* --- Service-style cards (Mission / Vision / Values) --- */
.service-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: center;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}
.icon-wrap {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #f9f9ff;
  box-shadow: 0 0 12px rgba(99,102,241,0.25);
}
/* Feature list inside service cards */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem auto 0;
  display: inline-block;
  text-align: left;
}
.feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: #444;
  font-size: 0.95rem;
}
.feature-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #6366f1;
  font-weight: bold;
}

/* =========================
   TEAM — responsive carousel
   ========================= */
.team-carousel { position: relative; }

/* gap variable so math is exact */
.team-track {
  --g: 24px;                          /* gap between cards */
  display: flex;
  gap: var(--g);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 56px 10px;             /* space for arrows left/right */
  scroll-padding-inline: 56px;        /* snap respects arrow space */
  min-height: 520px;
}

/* DESKTOP (>=1200px): EXACT 3 cards */
.team-item {
  box-sizing: border-box;
  flex: 0 0 calc((100% - (2 * var(--g))) / 3);
  max-width: calc((100% - (2 * var(--g))) / 3);
  height: 560px;                       /* slot height (increased for bigger img) */
  scroll-snap-align: start;
}

/* TABLET (768px–1199px): EXACT 2 cards */
@media (max-width: 1199.98px) {
  .team-item {
    flex: 0 0 calc((100% - var(--g)) / 2);
    max-width: calc((100% - var(--g)) / 2);
    height: 520px;
  }
}

/* MOBILE (<768px): 1 card */
@media (max-width: 767.98px) {
  .team-item {
    flex: 0 0 100%;
    max-width: 100%;
    height: 500px;
  }
}

/* Flip card fills the slot */
.team-item .flip-card { height: 100%; perspective: 1200px; position: relative; }
.team-item .flip-inner { height: 100%; width: 100%; transform-style: preserve-3d; transition: transform .7s ease; }
.team-item .flip-card.flipped .flip-inner { transform: rotateY(180deg); }

.team-item .flip-front,
.team-item .flip-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: .5rem; overflow: hidden; display: flex; flex-direction: column;
}
.team-item .flip-back  { transform: rotateY(180deg); background: #fff; }
.team-item .flip-back .card-body a { font-size: .95rem; }

/* Arrows */
.scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.08); cursor: pointer;
}
.scroll-btn.left  { left: 0; }
.scroll-btn.right { right: 0; }
.scroll-btn:active { transform: translateY(-50%) scale(.97); }

/* --- Section Titles (consistent underline like home page) --- */
.section-title {
  position: relative;
  display: inline-block;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: center;
  width: 100%;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
}

/* ===== Team card: image top, text pinned to bottom ===== */
.team-item .flip-front {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.team-item .flip-front img.card-img-top {
  width: 100%;
  height: 360px;              /* bigger image */
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #eee;
}
.team-item .flip-front .card-body {
  margin-top: auto;           /* pushes body to bottom */
  padding: 16px 18px 18px;
  text-align: center;
}
.team-item .flip-front .card-title {
  font-size: clamp(1.05rem, 1.2vw + .8rem, 1.35rem);
  margin-bottom: .4rem;
  line-height: 1.2;
}
.team-item .flip-front .text-muted {
  margin-bottom: .85rem;
  font-size: .98rem;
  color: #555;
}
.team-item .flip-front .btn {
  padding: .55rem 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

/* responsive image adjustments */
@media (max-width: 1199.98px) {
  .team-item .flip-front img.card-img-top { height: 320px; }
}
@media (max-width: 767.98px) {
  .team-item .flip-front img.card-img-top { height: 260px; }
}
/* --- Ultra small phones (<=360px) adjust --- */
@media (max-width: 360px) {
  .team-item { height: 460px; }
  .team-item .flip-front img.card-img-top { height: 220px; }
  .team-item .flip-front .card-title { font-size: 1.05rem; }
}

/* Safe text wrapping for long names/designations */
#team .card-title, #team .text-muted {
  word-break: break-word;
}
.badge {
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.35em;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 700;
    --bs-badge-color: #110f0f;
    --bs-badge-border-radius: var(--bs-border-radius);
    display: inline-block;
    padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
    font-size: var(--bs-badge-font-size);
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    color: #110f0f;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--bs-badge-border-radius);
}