/* ==========================================================================
   FULL-STACK-DEVELOPMENT-IN-MOHALI.CSS
   Selectors used exclusively on this page.  Prefix: fsd-
   Accent: indigo-blue, scoped to .fsd-page so site-wide --primary stays untouched.
   ========================================================================== */

.fsd-page {
  --fsd-solid: #3B5BDB;
  --fsd-grad: linear-gradient(135deg, #5C7CFA 0%, #364FC7 100%);
  --fsd-soft: rgba(59, 91, 219, 0.10);
}

/* Dark theme: lighter blue so text/borders stay readable on dark cards */
[data-theme="dark"] .fsd-page {
  --fsd-solid: #91A7FF;
  --fsd-soft: rgba(145, 167, 255, 0.14);
}

.fsd-page .section-label::before { background: var(--fsd-grad); }
.fsd-page .bl-hero-badge { background: var(--fsd-soft); border-color: rgba(59, 91, 219, 0.25); color: var(--fsd-solid); }
.fsd-page .bl-hero-badge-dot { background: var(--fsd-solid); }
.fsd-page .bl-hero-chip i { color: var(--fsd-solid); }

/* Hero: stacked layers visual */
.fsd-layers { max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.fsd-layer { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; color: #fff; box-shadow: var(--shadow-md); animation: fsdFloat 5s ease-in-out infinite; }
.fsd-layer i { font-size: 1.5rem; }
.fsd-layer span { font-size: 0.78rem; line-height: 1.35; opacity: 0.95; }
.fsd-layer strong { display: block; font-size: 1rem; }
.fsd-layer--1 { background: linear-gradient(135deg, #5C7CFA, #3B5BDB); }
.fsd-layer--2 { background: linear-gradient(135deg, #3B5BDB, #2B3F9E); animation-delay: 0.6s; }
.fsd-layer--3 { background: linear-gradient(135deg, #2B3F9E, #141B4D); animation-delay: 1.2s; }
.fsd-layer-link { text-align: center; font-size: 0.72rem; font-weight: 800; color: var(--fsd-solid); letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes fsdFloat { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

/* Stack blueprint cards */
.fsd-stack { height: 100%; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.fsd-stack:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--fsd-solid); }
.fsd-stack-head { padding: 22px 22px 18px; background: var(--fsd-grad); color: #fff; }
.fsd-stack-badge { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.fsd-stack-name { font-size: 1.3rem; font-weight: 800; margin: 10px 0 12px; color: #fff; }
.fsd-stack-logos { display: flex; gap: 8px; }
.fsd-stack-logos img { width: 38px; height: 38px; padding: 7px; background: #fff; border-radius: 10px; object-fit: contain; }
.fsd-stack-rows { margin: 0; padding: 6px 22px; }
.fsd-stack-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border-color); }
.fsd-stack-rows dt { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fsd-solid); margin: 0; }
.fsd-stack-rows dd { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); text-align: right; margin: 0; }
.fsd-stack-best { margin: 14px 22px 16px; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; }
.fsd-stack-best i { color: var(--fsd-solid); }
.fsd-stack-btn { margin: auto 22px 22px; padding: 11px 16px; text-align: center; border-radius: var(--radius-full); border: 2px solid var(--fsd-solid); color: var(--fsd-solid); font-weight: 800; font-size: 0.85rem; text-decoration: none; transition: var(--transition); }
.fsd-stack-btn:hover { background: var(--fsd-grad); color: #fff; border-color: transparent; }

/* Quick contact strip (compact banner) */
.fsd-contact { padding: 22px 0; background: var(--fsd-soft); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.fsd-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fsd-contact-text { display: flex; align-items: center; gap: 14px; font-size: 0.95rem; color: var(--text-secondary); flex: 1 1 420px; }
.fsd-contact-text i { font-size: 1.8rem; color: var(--fsd-solid); }
.fsd-contact-text strong { color: var(--text-primary); }
.fsd-contact-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.fsd-contact-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--radius-full); font-weight: 700; font-size: 0.86rem; color: #fff; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition); }
.fsd-contact-btn:hover { transform: translateY(-2px); color: #fff; box-shadow: var(--shadow-md); }
.fsd-contact-btn--call { background: var(--fsd-grad); }
.fsd-contact-btn--wa { background: #047e3d; }

/* Project cards */
.fsd-proj { height: 100%; display: flex; gap: 20px; padding: 24px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); }
.fsd-proj:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.fsd-proj-no { font-size: 2.6rem; font-weight: 800; line-height: 1; background: var(--fsd-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fsd-proj-title { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.fsd-proj-desc { font-size: 0.87rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 12px; }
.fsd-proj-stack { display: inline-block; font-size: 0.76rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--fsd-soft); color: var(--fsd-solid); }

/* Role cards */
.fsd-role { height: 100%; text-align: center; padding: 26px 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-bottom: 4px solid var(--fsd-solid); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); }
.fsd-role:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.fsd-role i { font-size: 1.9rem; color: var(--fsd-solid); }
.fsd-role-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin: 10px 0 4px; }
.fsd-role-desc { font-size: 0.83rem; color: var(--text-secondary); margin: 0; }

/* Why choose us: dark band (same look in light + dark theme) */
.fsd-why { padding: 70px 0; background: linear-gradient(135deg, #0B1437 0%, #1E3A8A 100%); }
.fsd-why-kicker { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #BAC8FF; margin-bottom: 10px; }
.fsd-why-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: #fff; }
.fsd-why-title span { color: #BAC8FF; }
.fsd-why-card { height: 100%; padding: 28px 24px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-lg); transition: var(--transition); }
.fsd-why-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); }
.fsd-why-card i { font-size: 1.8rem; color: #BAC8FF; }
.fsd-why-card h3 { font-size: 1.1rem; font-weight: 800; color: #fff; margin: 12px 0 8px; }
.fsd-why-card p { font-size: 0.87rem; color: rgba(255, 255, 255, 0.8); line-height: 1.6; margin: 0; }

/* Also explore (pill links) */
.fsd-also { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.fsd-also-label { font-weight: 800; color: var(--text-primary); }
.fsd-also a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary); font-size: 0.86rem; font-weight: 700; text-decoration: none; transition: var(--transition); }
.fsd-also a i { color: var(--fsd-solid); }
.fsd-also a:hover { border-color: var(--fsd-solid); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

@media (max-width: 767px) {
  .fsd-contact-inner { flex-direction: column; text-align: center; }
  .fsd-contact-text { flex: none; flex-direction: column; }
  .fsd-contact-actions { width: 100%; flex-direction: column; }
  .fsd-contact-btn { width: 100%; justify-content: center; }
  .fsd-proj { flex-direction: column; gap: 8px; }
  .fsd-why { padding: 50px 0; }
}