/* ==========================================================================
   FSS BRAND COLOR PALETTE & PAGEPILING STYLING (MATCHING EL-SEIF DYNAMIC SCROLL)
   Official Brand Colors: #96090c (Red), #004e91 (Blue), #4b5154 (Charcoal)
   ========================================================================== */

:root {
  --fss-red: #96090c;
  --fss-blue: #004e91;
  --fss-charcoal: #4b5154;
  --fss-charcoal-dark: #1e242a;
  --fss-charcoal-deep: #161a1f;
  --fss-blue-dark: #002244;
  --fss-red-dark: #3a0608;
}

body.pagepiling-active,
html.pagepiling-active {
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
  background-color: var(--fss-charcoal-deep) !important;
}

/* PagePiling Section Layout & Physical Stacking Drop Shadow */
#pagepiling {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  z-index: 10 !important;
}

.pp-section {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 80px 0 30px 0 !important;
  overflow: hidden;
  /* Physical sheet-piling drop shadow when sliding over previous section */
  box-shadow: 0 -22px 50px rgba(0, 0, 0, 0.5);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#slide1,
#slide2,
#slide3,
#slide4,
#slide5,
#slide6 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Hardware-Accelerated Smooth 60fps Easing (matching El-Seif buttery tactile slide) */
.pp-easing {
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}

/* Master Header styling during PagePiling (Homepage: Crisp White) */
.pagepiling-active .site-header {
  background: #ffffff !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
}

.pagepiling-active .site-header .nav-link {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}

.pagepiling-active .site-header .nav-link:hover,
.pagepiling-active .site-header .nav-link:focus {
  color: #004e91 !important;
}

.pagepiling-active .site-header .nav-link.active {
  color: #96090c !important;
  font-weight: 700 !important;
}

.pagepiling-active .site-header .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
  border-radius: 8px !important;
}

.pagepiling-active .site-header .dropdown-item {
  color: #1e293b !important;
}

.pagepiling-active .site-header .dropdown-item:hover {
  background: #f1f5f9 !important;
  color: #004e91 !important;
}

/* ==========================================================================
   DYNAMIC CONTRASTING BACKGROUNDS FOR ALL 6 SLIDES
   Strictly using the official brand colors:
   1: Deep Charcoal (#4b5154 family)
   2: Light Architectural Pearl / Mist (#eef4fa)
   3: Crisp Pure White (#ffffff / #f8fafc)
   4: Corporate Royal Blue (#004e91)
   5: Architectural Ice Slate (#edf2f7 / #e2e8f0)
   6: Deep Crimson Red & Charcoal (#96090c / #1e242a)
   ========================================================================== */

/* --------------------------------------------------------------------------
   SLIDE 1: HERO & VISION 2030 (Deep Charcoal Slate #4b5154 Family)
   -------------------------------------------------------------------------- */
#slide1 {
  background: radial-gradient(circle at 50% 30%, #262e36 0%, #171b20 100%) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   SLIDE 2: ABOUT & SCALE (Light Architectural Pearl / Mist)
   Clean, luminous light color - completely free of darkness!
   -------------------------------------------------------------------------- */
#slide2 {
  background: linear-gradient(135deg, #eef4fa 0%, #f6f9fc 45%, #e9f0f8 100%) !important;
  color: #0f172a !important;
}

#slide2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 85% 20%, rgba(0, 78, 145, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

#slide2 .check-pill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.25s ease;
}

#slide2 .check-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 78, 145, 0.35) !important;
  box-shadow: 0 8px 20px rgba(0, 78, 145, 0.08) !important;
}

#slide2 .check-pill span {
  color: #1e293b !important;
  font-weight: 600;
}

#slide2 .stat-counter-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.03) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.25s ease;
}

#slide2 .stat-counter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 78, 145, 0.1) !important;
  border-color: rgba(0, 78, 145, 0.3) !important;
}

#slide2 .btn-outline-fss-blue {
  border: 1.5px solid #004e91 !important;
  color: #004e91 !important;
  background: #ffffff !important;
  transition: all 0.2s ease;
}

#slide2 .btn-outline-fss-blue:hover {
  background: #004e91 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   SLIDE 3: SERVICES & TRADES (CRISP WHITE / LIGHT PLATINUM)
   Dramatic High-Contrast Stacking Feel (Matching El-Seif Frame 4 & 5)
   -------------------------------------------------------------------------- */
#slide3 {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%) !important;
  color: #0f172a !important;
}

#slide3 .slide-heading-main {
  color: #0f172a !important;
}

#slide3 .slide-lead-text {
  color: #475569 !important;
}

#slide3 .trade-card-light {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#slide3 .trade-card-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 78, 145, 0.15), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
  border-color: #004e91 !important;
}

#slide3 .trade-card-light h3 {
  color: #0f172a !important;
}

#slide3 .trade-card-light p {
  color: #64748b !important;
}

#slide3 .trade-badge-light {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   SLIDE 4: LEGAL & COMPLIANCE (LIGHT EXECUTIVE BLUE MIST)
   Luminous Light Blue with Deep Royal Blue & Dark Slate Typography
   -------------------------------------------------------------------------- */
#slide4 {
  background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 50%, #f8fafc 100%) !important;
  color: #0f172a !important;
}

#slide4 h2 {
  color: #0f172a !important;
}

#slide4 p.text-light {
  color: #334155 !important;
  opacity: 1 !important;
}

#slide4 span.text-white {
  color: #004e91 !important;
}

#slide4 .compliance-card-blue {
  background: #ffffff !important;
  border: 1px solid #bfdbfe !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 24px rgba(0, 78, 145, 0.08) !important;
  transition: all 0.3s ease;
}

#slide4 .compliance-card-blue:hover {
  transform: translateY(-3px);
  background: #ffffff !important;
  border-color: #004e91 !important;
  box-shadow: 0 14px 30px rgba(0, 78, 145, 0.15) !important;
}

#slide4 .compliance-card-blue h4 {
  color: #0f172a !important;
}

#slide4 .compliance-card-blue p {
  color: #475569 !important;
}

/* --------------------------------------------------------------------------
   SLIDE 5: PROJECT SECTORS (ARCHITECTURAL ICE SLATE / LIGHT)
   High-contrast light backdrop making the colorful mega cards pop!
   -------------------------------------------------------------------------- */
#slide5 {
  background: linear-gradient(180deg, #edf2f7 0%, #e2e8f0 100%) !important;
  color: #0f172a !important;
}

#slide5 .slide-heading-main {
  color: #0f172a !important;
}

#slide5 .slide-lead-text {
  color: #475569 !important;
}

#slide5 .sector-mega-card {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 14px;
  overflow: hidden;
  min-height: 220px !important;
}

#slide5 .sector-mega-card > div {
  min-height: 220px !important;
}

#slide5 .hubs-strip-light {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

/* --------------------------------------------------------------------------
   SLIDE 6: RFQ REQUEST & FOOTER (LIGHT EXECUTIVE PEARL / MIST)
   -------------------------------------------------------------------------- */
#slide6 {
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
  color: #0f172a !important;
}

#slide6 h2 {
  color: #0f172a !important;
}

#slide6 p.text-secondary {
  color: #334155 !important;
}

#slide6 .rfq-glass-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
  padding: 24px 28px !important;
}

#slide6 .rfq-glass-card h3 {
  color: #0f172a !important;
}

#slide6 .rfq-glass-card .text-secondary {
  color: #64748b !important;
}

#slide6 .rfq-glass-card input,
#slide6 .rfq-glass-card select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

#slide6 .rfq-glass-card input::placeholder {
  color: #94a3b8 !important;
}

#slide6 .contact-info-pill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#slide6 .contact-info-pill .text-white {
  color: #0f172a !important;
}

#slide6 .contact-info-pill .text-secondary {
  color: #64748b !important;
}

/* ==========================================================================
   NAVIGATION DOTS (#pp-nav) - SLEEK FROSTED GLASS CAPSULE
   Dots use official brand colors: FSS Red #96090c with white ring!
   ========================================================================== */
#pp-nav {
  position: fixed;
  z-index: 1050;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  margin-top: 0 !important;
}

#pp-nav ul {
  list-style: none;
  margin: 0;
  padding: 14px 7px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #cbd5e1;
  border-radius: 40px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

/* Connecting line behind dots */
#pp-nav ul::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #cbd5e1;
  z-index: 0;
}

#pp-nav li {
  margin: 0 !important;
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 1;
}

#pp-nav li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

#pp-nav span {
  top: 3px !important;
  left: 3px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: 1.5px solid #94a3b8 !important;
  background: #e2e8f0 !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Active Dot: Official FSS Red #96090c with pure white ring */
#pp-nav li .active span {
  width: 14px !important;
  height: 14px !important;
  top: 0 !important;
  left: 0 !important;
  background: #96090c !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 0 10px rgba(150, 9, 12, 0.6), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.1);
}

/* Tooltips */
.pp-tooltip {
  color: #0f172a !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  top: -4px !important;
  right: 28px !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1) !important;
}

/* Slide Counter Capsule (Bottom-Left) */
.fp-slide-counter {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
  pointer-events: none;
  transition: all 0.3s ease !important;
  color: #64748b !important;
}

.fp-slide-counter span.text-white,
.fp-slide-counter #currentSlideNum {
  color: #0f172a !important;
}

.fp-slide-counter.counter-light {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
  color: #64748b !important;
}

.fp-slide-counter.counter-light #currentSlideNum {
  color: #0f172a !important;
}

/* Brand Buttons */
.btn-fss-red {
  background: linear-gradient(135deg, #b91c1c 0%, #96090c 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(150, 9, 12, 0.35);
}

.btn-fss-red:hover {
  background: linear-gradient(135deg, #dc2626 0%, #96090c 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn-fss-blue {
  background: linear-gradient(135deg, #0284c7 0%, #004e91 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 78, 145, 0.35);
}

.btn-fss-blue:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #004e91 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.border-fss-red {
  border-color: #96090c !important;
}

.border-fss-blue {
  border-color: #004e91 !important;
}

.border-fss-charcoal {
  border-color: #4b5154 !important;
}

.text-fss-red {
  color: #96090c !important;
}

.text-fss-blue {
  color: #004e91 !important;
}

.text-fss-charcoal {
  color: #4b5154 !important;
}

/* Mobile Fallback: Disable pagepiling overflow lock on small phones */
@media (max-width: 900px) {
  body.pagepiling-active,
  html.pagepiling-active {
    overflow-y: auto !important;
    height: auto !important;
  }
  #pagepiling {
    position: relative !important;
    height: auto !important;
  }
  .pp-section {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 100px 16px 50px 16px !important;
    box-shadow: none !important;
  }
  #pp-nav {
    display: none !important;
  }
}