/* ============================================
   PROFESSIONAL DESIGN - NO OVERLAPPING
   ============================================ */

/* 1. GLOBAL IMPROVEMENTS */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* 2. TYPOGRAPHY */
.main-heading {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

@media (max-width: 767px) {
  .main-heading {
    font-size: 28px;
    margin-bottom: 16px;
  }
}

.secondary-heading {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  color: #171428 !important;
}

@media (max-width: 767px) {
  .secondary-heading {
    font-size: 24px;
  }
}

.sub-heading {
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 30px;
  margin-top: 0;
}

@media (max-width: 767px) {
  .sub-heading {
    font-size: 15px;
    margin-bottom: 24px;
  }
}

.small-heading {
  font-size: 28px;
  font-weight: 700;
  color: #171428;
}

@media (max-width: 767px) {
  .small-heading {
    font-size: 22px;
  }
}

/* 3. BANNER SECTION */
.banner-section {
  padding-top: 140px !important;
  padding-bottom: 80px !important;
  /* position: relative; */
  background: #ffffff;
}

@media (max-width: 767px) {
  .banner-section {
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }
}

.banner-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 20px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .banner-content-wrapper {
    padding-right: 0;
    text-align: center;
    margin-bottom: 30px;
  }
}

.banner-heading {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: #171428 !important;
}

@media (max-width: 767px) {
  .banner-heading {
    font-size: 30px;
  }
}

.banner-heading span {
  background: linear-gradient(135deg, #C51230 0%, #8B0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sub-para {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(23, 20, 40, 0.8);
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 767px) {
  .sub-para {
    font-size: 16px;
    margin-bottom: 0;
  }
}

.about-justi {
  text-align: left;
}

@media (max-width: 767px) {
  .about-justi {
    text-align: center;
  }
}

/* 4. CONTACT FORM */
.contact-form-section,
.banner-side {
  margin-top: 0;
}

.contact-page-form-wrapper {
  background: linear-gradient(155deg, #1f1b38 0%, #14122a 55%, #0f0e1d 100%);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 20px 60px rgba(197, 18, 48, 0.3);
  position: relative;
  overflow: hidden;
  margin-top: 0;
}

@media (max-width: 767px) {
  .contact-page-form-wrapper {
    padding: 24px;
    margin-top: 0;
  }
}

.contact-page-form-wrapper h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff !important;
}

.contact-page-form-wrapper .para {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 14px;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .contact-page-form-wrapper h2 {
    font-size: 22px;
  }
}
.stats-wrapper {
    top: 0 !important; /* Remove the -86px from style.css */
    margin-top: 60px !important; /* Add normal spacing */
    margin-bottom: 60px !important;
  }
  
  @media (max-width: 767px) {
    .stats-wrapper {
      top: 0 !important;
      margin-top: 30px !important;
      margin-bottom: 30px !important;
    }
  }

.stats-wrapper .stats-box .value {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
}

.stats-wrapper .stats-box .value.value-big {
  font-size: 56px;
}

.stats-wrapper .stats-box .label {
  color: #9e9bb2;
}

.stats-wrapper .stats-box .sub-value {
  color: #55db62;
}

.stats-wrapper .stats-box .sub-value span {
  color: #9e9bb2;
}

/* 6. SECTION SPACING */
section {
  padding: 60px 0;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  section {
    padding: 40px 0;
  }
}

/* Remove extra spacing */
section + section {
  margin-top: 0;
}

.py-4 {
  padding-top: 60px !important;
  /* padding-bottom: 60px !important; */
}

@media (max-width: 767px) {
  .py-4 {
    padding-top: 40px !important;
    /* padding-bottom: 40px !important; */
  }
}

.one-step {
    margin-top: 0 !important;
  }
  
  @media (max-width: 767px) {
    .one-step {
      margin-top: 0 !important;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
    .one-step {
      margin-top: 0 !important;
    }
  }
  
  @media (min-width: 1024px) {
    .one-step {
      margin-top: 0 !important;
    }
  }
  
/* 8. DARK SECTIONS */
.dark-section-with-bg {
  background: linear-gradient(135deg, #171428 0%, #2d2847 100%);
  position: relative;
  padding: 60px 0;
}

@media (max-width: 767px) {
  .dark-section-with-bg {
    padding: 40px 0;
  }
}

.dark-section-with-bg::after {
  opacity: 0.1;
}

.dark-section-with-bg .main-heading {
  color: #fff !important;
}

.dark-section-with-bg .sub-heading {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 9. BG-WHY SECTION (6 REASONS) */
.bg-why {
  background: #171428 !important;
  position: relative;
  padding: 60px 0 !important;
}

@media (max-width: 767px) {
  .bg-why {
    padding: 40px 0 !important;
  }
}

.bg-why::after {
  opacity: 0.08 !important;
  mix-blend-mode: overlay;
}

.bg-why .main-heading {
  color: #fff !important;
}

.bg-why .sub-heading {
  color: rgba(255, 255, 255, 0.9) !important;
}


/* 10. CARD STYLES */
.box-with-img {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.box-with-img:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(197, 18, 48, 0.12);
  border-color: rgba(197, 18, 48, 0.2);
}

.box-with-img img {
  border-radius: 12px;
  transition: transform 0.3s ease;
  width: 100%;
}

.box-with-img:hover img {
  transform: scale(1.03);
}

.box-with-img h3 {
  font-size: 20px;
  font-weight: 700;
  color: #171428;
  margin: 18px 0 10px;
  line-height: 1.3;
}

.box-with-img p {
  color: rgba(23, 20, 40, 0.75);
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 20px;
}

/* 11. ICON BOXES */
.box-with-icon {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.box-with-icon:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  border-color: rgba(197, 18, 48, 0.2);
}

.box-with-icon img {
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(197, 18, 48, 0.15));
}

.box-with-icon:hover img {
  transform: scale(1.08);
}

.box-with-icon .box-heading {
  font-size: 22px;
  font-weight: 700;
  margin: 20px 0 10px;
  color: #171428;
}

.box-with-icon p {
  color: rgba(23, 20, 40, 0.75);
  line-height: 1.6;
  margin-bottom: 0;
}

/* Dark background icon boxes */
.box-with-icon.box-with-bg {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.box-with-icon.box-with-bg:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(197, 18, 48, 0.4) !important;
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(197, 18, 48, 0.2);
}

.box-with-icon.box-with-bg h3,
.box-with-icon.box-with-bg .box-heading {
  color: #fff !important;
}

.box-with-icon.box-with-bg p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 12. BUTTONS */
.btn {
  border-radius: 12px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  border: none;
}

.btn.btn-primary {
  background: linear-gradient(135deg, #C51230 0%, #a00e28 100%);
  box-shadow: 0 6px 16px rgba(197, 18, 48, 0.3);
  color: #fff;
}

.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(197, 18, 48, 0.4);
  color: #fff;
}

.btn.btn-dark {
  background: linear-gradient(135deg, #171428 0%, #2d2847 100%);
  box-shadow: 0 6px 16px rgba(23, 20, 40, 0.25);
  color: #fff;
}

.btn.btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(23, 20, 40, 0.35);
  color: #fff;
}

.btn.btn-small {
  padding: 10px 24px;
  font-size: 14px;
}

/* 13. FORMS */
.form-control,
.form-select {
  border-radius: 10px;
  border: 1px solid rgba(168, 168, 168, 0.3);
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #fff;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: #C51230;
  box-shadow: 0 0 0 3px rgba(197, 18, 48, 0.1);
  outline: none;
}

.form-group {
  margin-bottom: 20px;
}

/* 14. LOGOS */
.team-certificates-logos-wrapper img,
.team-certificates-logos-wrapper-h img,
.team-certificates-logos-wrapper-h-top img {
  filter: grayscale(100%) opacity(0.5);
  transition: all 0.3s ease;
}

.team-certificates-logos-wrapper img:hover,
.team-certificates-logos-wrapper-h img:hover,
.team-certificates-logos-wrapper-h-top img:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}

/* 15. REVIEW SECTION */
.review-section {
  padding: 60px 0;
}

@media (max-width: 767px) {
  .review-section {
    padding: 40px 0;
  }
}

.review-slider p {
  font-size: 22px;
  line-height: 1.6;
  color: rgba(23, 20, 40, 0.85);
  padding: 0 30px;
}

@media (max-width: 767px) {
  .review-slider p {
    font-size: 16px;
    padding: 0 15px;
  }
}

/* 16. FINDINGS/BLOG CARDS */
.findings-big-icon-wrapper .big-icon-wrapper,
.findings-big-icon-wrapper-h .big-icon-wrapper-h {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px;
  padding: 24px;
  margin: 20px 0;
  height: auto;
}

.findings-big-icon-wrapper .big-icon-wrapper:hover,
.findings-big-icon-wrapper-h .big-icon-wrapper-h:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(197, 18, 48, 0.12);
  border-color: rgba(197, 18, 48, 0.3);
}

/* 17. SIMPLE LINKS */
.simple-link {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  color: rgba(23, 20, 40, 0.7);
  text-decoration: none;
}

.simple-link:hover {
  gap: 12px;
  color: #C51230;
  text-decoration: none;
}

/* 18. PROCESS CARDS */
.card {
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.circle {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 19. CTA SECTION */
.enhanced-cta-section {
  border-radius: 20px;
  margin: 50px 0;
  box-shadow: 0 16px 48px rgba(23, 20, 40, 0.25);
  padding: 60px 0;
}

@media (max-width: 767px) {
  .enhanced-cta-section {
    padding: 40px 0;
    margin: 30px 0;
  }
}

.enhanced-main-heading {
  font-size: 48px;
  font-weight: 800;
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: #fff !important;
}

@media (max-width: 767px) {
  .enhanced-main-heading {
    font-size: 28px;
  }
}

.enhanced-sub-heading {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 20. FOOTER */
footer {
  background: linear-gradient(135deg, #171428 0%, #0d0b1a 100%);
  padding: 60px 0 0 0;
}

.footer-form-section {
  padding: 56px 0 56px 0;
  background: #171428 !important;
}

@media (max-width: 767px) {
  .footer-form-section {
    padding: 36px 0 36px 0;
  }
}

.footer-form-container {
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .footer-form-container {
    margin-bottom: 28px;
  }
}

.footer-menu li a {
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-menu li a:hover {
  transform: translateX(4px);
  color: #C51230;
  text-decoration: none;
}

/* 21. HEADER - ONLY FIXED ELEMENT */
#header,
header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99 !important;
  width: 100%;
}

/* 22. MEGA MENU */
.mega-menu {
  z-index: 90 !important;
}

/* ═══════════════════════════════════════
   SOC 2 PAGE — NEW SECTIONS
   ═══════════════════════════════════════ */

/* Eyebrow label */
.soc2-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #C51230;
  margin-bottom: 12px;
}

/* Body text */
.soc2-body-text {
  font-size: 15.5px;
  color: rgba(23,20,40,0.78);
  line-height: 1.78;
  margin-bottom: 14px;
}

/* Image placeholder box */
.soc2-img-placeholder {
  background: linear-gradient(135deg, #171428 0%, #2a2440 100%);
  border-radius: 18px;
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  box-shadow: 0 20px 48px rgba(23,20,40,0.18);
}

/* ── Type I / Type II cards ── */
.soc2-type-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 36px 32px;
  height: 100%;
  transition: border-color 0.2s, transform 0.2s;
}
.soc2-type-card:hover {
  border-color: rgba(197,18,48,0.4);
  transform: translateY(-4px);
}
.soc2-type-card--featured {
  background: rgba(197,18,48,0.08);
  border-color: rgba(197,18,48,0.3);
}
.soc2-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.soc2-type-badge--red {
  background: rgba(197,18,48,0.2);
  color: #ff7a8a;
}
.soc2-type-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}
.soc2-type-body {
  font-size: 15px;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.75;
  margin-bottom: 20px;
}
.soc2-type-best {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.soc2-type-best i {
  color: #10b981;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Trust Service Criteria cards ── */
.soc2-tsc-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 30px 26px;
  height: 100%;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.soc2-tsc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(197,18,48,0.1);
  border-color: rgba(197,18,48,0.2);
}
.soc2-tsc-card--mandatory {
  border-top: 3px solid #C51230;
}
.soc2-tsc-icon {
  font-size: 32px;
  color: #C51230;
  margin-bottom: 14px;
  line-height: 1;
}
.soc2-tsc-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: rgba(197,18,48,0.1);
  color: #C51230;
  border: 1px solid rgba(197,18,48,0.25);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.soc2-tsc-label--optional {
  background: rgba(23,20,40,0.06);
  color: rgba(23,20,40,0.5);
  border-color: rgba(23,20,40,0.12);
}
.soc2-tsc-title {
  font-size: 19px;
  font-weight: 700;
  color: #171428;
  margin-bottom: 10px;
}
.soc2-tsc-body {
  font-size: 14.5px;
  color: rgba(23,20,40,0.68);
  line-height: 1.7;
  margin: 0;
}

/* ── How We Work With You steps ── */
.soc2-step-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  padding: 32px 28px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.soc2-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(197,18,48,0.1);
  border-color: rgba(197,18,48,0.18);
}
.soc2-step-num {
  font-size: 52px;
  font-weight: 800;
  color: rgba(197,18,48,0.08);
  line-height: 1;
  position: absolute;
  top: 16px;
  right: 22px;
  letter-spacing: -2px;
  pointer-events: none;
  transition: color 0.22s;
}
.soc2-step-card:hover .soc2-step-num {
  color: rgba(197,18,48,0.14);
}
.soc2-step-title {
  font-size: 20px;
  font-weight: 700;
  color: #171428;
  margin-bottom: 12px;
  padding-right: 48px;
}
.soc2-step-title::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: #C51230;
  border-radius: 2px;
  margin-bottom: 12px;
}
.soc2-step-body {
  font-size: 15px;
  color: rgba(23,20,40,0.7);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 767px) {
  .soc2-type-card { padding: 24px 20px; }
  .soc2-tsc-card { padding: 22px 18px; }
  .col-md-4.offset-md-2 { margin-left: 0 !important; }
  .soc2-step-card { padding: 24px 20px; }
}

/* ── SOC 2 vs ISO 27001 comparison table ── */
.soc2-compare-table {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.soc2-compare-header,
.soc2-compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
}
.soc2-compare-header {
  background: #171428;
  padding: 18px 24px;
  align-items: center;
}
.soc2-compare-col {
  padding: 16px 20px;
  font-size: 14.5px;
  color: rgba(23,20,40,0.78);
  line-height: 1.55;
  vertical-align: middle;
}
.soc2-compare-header .soc2-compare-col {
  padding: 8px 20px;
}
.soc2-compare-label {
  font-weight: 700;
  color: #171428;
  font-size: 14px;
}
.soc2-compare-row {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.soc2-compare-row--alt {
  background: #f8f9fb;
}
.soc2-compare-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 18px;
  border-radius: 100px;
  text-align: center;
}
.soc2-badge-soc {
  background: rgba(197,18,48,0.15);
  color: #ff7a8a;
  border: 1px solid rgba(197,18,48,0.3);
}
.soc2-badge-iso {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.2);
}
@media (max-width: 600px) {
  .soc2-compare-header,
  .soc2-compare-row { grid-template-columns: 1fr; }
  .soc2-compare-label { background: rgba(197,18,48,0.06); border-radius: 6px; }
}

/* ── Our Independent Credentials cards ── */
.soc2-cred-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 28px 24px;
  height: 100%;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.soc2-cred-card:hover {
  border-color: rgba(197,18,48,0.35);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  transform: translateY(-4px);
}
.soc2-cred-icon {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.soc2-cred-icon img {
  max-height: 56px;
  max-width: 130px;
  object-fit: contain;
  filter: none;
  transition: transform 0.2s;
}
.soc2-cred-card:hover .soc2-cred-icon img {
  transform: scale(1.05);
}
.soc2-cred-title {
  font-size: 17px;
  font-weight: 700;
  color: #171428 !important;
  margin-bottom: 8px;
}
.soc2-cred-body {
  font-size: 13.5px;
  color: #555 !important;
  line-height: 1.65;
  margin: 0;
}

/* TRUSTED COMPLIANCE SERVICES BANNER */
.trusted-compliance-banner {
  border: 2px solid #1e1c35;
  border-radius: 14px;
  background: #171428;
  padding: 6px;
  margin-bottom: 15px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
.trusted-compliance-inner {
  background: #ffffff;
  border-radius: 10px;
  padding: 22px 30px 18px;
  text-align: center;
}
.trusted-compliance-title {
  color: #C51230;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.trusted-compliance-title::before,
.trusted-compliance-title::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 1.5px;
  background: #C51230;
  flex-shrink: 0;
}
.trusted-compliance-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.trusted-compliance-logos img {
  height: 58px;
  width: auto;
  object-fit: contain;
  filter: none !important;
  transition: transform 0.2s ease;
}
.trusted-compliance-logos img:hover {
  transform: scale(1.08);
}
@media (max-width: 767px) {
  .trusted-compliance-logos {
    gap: 14px;
  }
  .trusted-compliance-logos img {
    height: 42px;
  }
}

/* NAVBAR CENTERING - keep CTA pinned right */
@media (min-width: 993px) {
  header .navbar-collapse {
    display: flex !important;
    align-items: center;
  }
  header .navbar-nav.mx-auto {
    flex: 1;
    justify-content: center;
  }
}

/* RESOURCES DROPDOWN - hover menu */
.rsl-nav-dropdown {
  position: relative;
}
.rsl-nav-dropdown .rsl-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  min-width: 185px;
  z-index: 1000;
}
.rsl-nav-dropdown:hover .rsl-dropdown-menu,
.rsl-nav-dropdown.is-open .rsl-dropdown-menu {
  display: block;
}
.rsl-nav-dropdown .rsl-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.rsl-dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: #171428;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.rsl-dropdown-menu li a:hover {
  color: #C51230;
  background: rgba(197,18,48,0.05);
  padding-left: 24px;
}
/* Mobile: show as plain list, not absolute dropdown */
@media (max-width: 992px) {
  .rsl-nav-dropdown .rsl-dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 3px solid #C51230;
    border-radius: 0;
    padding: 0;
    margin: 6px 0 6px 12px;
    display: block;
  }
  .rsl-dropdown-menu li a {
    font-size: 14px;
    padding: 7px 14px;
  }
}

/* NAV - compact spacing to keep all items on one line */
@media (min-width: 993px) {
  header nav.navbar .nav-item {
    margin-left: 16px !important;
  }
  header nav.navbar .nav-item .nav-link {
    font-size: 13.5px !important;
  }
}
@media (min-width: 993px) and (max-width: 1300px) {
  header nav.navbar .nav-item {
    margin-left: 10px !important;
  }
  header nav.navbar .nav-item .nav-link {
    font-size: 13px !important;
  }
  header nav.navbar .nav-item .btn.btn-small {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* 23. BACKGROUND SECTIONS */
.bg-gray {
  background: #fafafa;
}

/* 24. ROW SPACING */
.row {
  margin-left: -12px;
  margin-right: -12px;
}

.row > * {
  padding-left: 12px;
  padding-right: 12px;
}

/* 25. ENSURE TEXT VISIBILITY */
section:not(.dark-section-with-bg):not(.bg-why):not(.enhanced-cta-section):not(.inner-banner):not(.estimator-hero):not(.inner-banner-sub-sec) .main-heading {
  color: #171428 !important;
}

section:not(.dark-section-with-bg):not(.bg-why):not(.enhanced-cta-section):not(.inner-banner):not(.estimator-hero):not(.inner-banner-sub-sec) .secondary-heading {
  color: #171428 !important;
}

section:not(.dark-section-with-bg):not(.bg-why):not(.enhanced-cta-section):not(.inner-banner):not(.estimator-hero):not(.inner-banner-sub-sec) .sub-heading {
  color: rgba(23, 20, 40, 0.8) !important;
}

/* 26. RESPONSIVE IMPROVEMENTS */
@media (max-width: 767px) {
  .btn {
    padding: 12px 24px;
    font-size: 14px;
  }
  
  .box-with-icon,
  .box-with-img {
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .main-heading br {
    display: none;
  }
}

/* 27. FOCUS STATES */
*:focus-visible {
  outline: 2px solid rgba(197, 18, 48, 0.5);
  outline-offset: 2px;
}

/* 28. BOX ICON WRAPPER */
.box-icon-wrapper {
  margin: 40px 0;
}

.box-icon-wrapper .col-md-4 {
  margin-bottom: 30px;
}

/* 29. FEATURED SLIDERS */
.featured-slider-s,
.featured-slider {
  margin: 40px 0;
}

/* 30. REMOVE ALL NEGATIVE MARGINS */
* {
  margin-block-start: 0;
  margin-block-end: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;
}

/* Last child fix */
section > .container > .row:last-child > *:last-child,
.box-with-img > *:last-child,
.box-with-icon > *:last-child {
  margin-bottom: 0;
}

/* ============================================
   SIMPLE FIX - REMOVE OVERLAPPING ONLY
   ============================================ */

/* 1. REMOVE STATS SECTION OVERLAP */
.stats-wrapper {
    position: relative !important;
    top: 0 !important; /* Remove the -86px that causes overlap */
    margin-top: 60px !important; /* Add normal spacing */
    margin-bottom: 60px !important;
  }
  
  @media (max-width: 767px) {
    .stats-wrapper {
      margin-top: 30px !important;
      margin-bottom: 30px !important;
    }
  }
  
  /* 2. BANNER SECTION - Normal padding */
  .banner-section {
    padding-bottom: 80px !important;
  }
  
  @media (max-width: 767px) {
    .banner-section {
      padding: 100px 0 30px 0 !important;
    }
  }
  
  /* 3. SECTION AFTER STATS - Normal spacing */
  .one-step {
    margin-top: 0 !important;
    padding-top: 60px !important;
  }
  
  @media (max-width: 767px) {
    .one-step {
      padding-top: 40px !important;
    }
  }
  
  /* 4. ICONS - Normal size (not huge) */
  .box-with-icon img {
    max-width: 60px;
    height: auto;
  }
  
  /* 5. "6 REASONS" - Better spacing */
  .bg-why .box-with-icon.box-with-bg img {
    margin-bottom: 24px !important;
  }
  
  .bg-why .box-with-icon.box-with-bg .box-heading,
  .bg-why .box-with-icon.box-with-bg h3 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
  
  .bg-why .box-with-icon.box-with-bg {
    padding: 35px 30px !important;
  }
  
  /* 6. ENSURE PROPER STACKING */
  section {
    position: relative;
    z-index: 1;
  }
  
  .stats-wrapper {
    z-index: 2;
  }
  
  #header {
    z-index: 99 !important;
  }
.trusted-section{
    margin-bottom: 0px;
    margin-top: 0px;
}

/* ── Prevent wide pseudo-element backgrounds from causing horizontal scroll ── */
.dark-section-with-bg,
.bg-why,
.home-banner,
.banner-section,
.inner-banner {
  overflow: hidden;
}

/* ── Mega menu: prevent overflow on smaller screens ── */
@media (max-width: 1199px) {
  .mega-menu {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ═══════════════════════════════════════
   RSL FOOTER
   ═══════════════════════════════════════ */
.rsl-footer {
  background: #0f0d1c;
  color: #fff;
  font-family: inherit;
}

/* ── Main row ── */
.rsl-footer-main {
  padding: 28px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.rsl-f-inner {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Brand col */
.rsl-f-brand {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rsl-f-brand-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.48);
  line-height: 1.75;
  margin: 0;
}
.rsl-f-brand-desc strong {
  display: block;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 13px;
}
.rsl-f-socials {
  display: flex;
  gap: 10px;
}
.rsl-f-socials a {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.rsl-f-socials a:hover { border-color: #C51230; color: #C51230; }

/* Nav columns */
.rsl-f-nav {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px 20px;
  min-width: 0;
}
.rsl-f-nav-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 14px;
  padding-bottom: 10px;
  position: relative;
}
.rsl-f-nav-head::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 20px; height: 2px;
  background: #C51230;
  border-radius: 2px;
}
.rsl-f-nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rsl-f-nav-col ul li { margin-bottom: 8px; }
.rsl-f-nav-col ul li a {
  color: rgba(255,255,255,0.48);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.18s, padding-left 0.18s;
  display: block;
  line-height: 1.4;
}
.rsl-f-nav-col ul li a:hover { color: #fff; padding-left: 4px; }

/* Form box */
.rsl-f-form-box {
  width: 238px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 22px 20px 20px;
}
.rsl-f-form-heading {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 8px;
}
.rsl-f-form-divider {
  width: 24px; height: 2px;
  background: #C51230;
  border: none;
  margin: 0 0 12px 0;
  border-radius: 2px;
}
.rsl-f-form-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  line-height: 1.6;
  margin: 0 0 16px;
}
.rsl-f-input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 12.5px;
  color: #fff;
  margin-bottom: 9px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  box-sizing: border-box;
}
.rsl-f-input::placeholder { color: rgba(255,255,255,0.32); }
.rsl-f-input:focus { border-color: rgba(197,18,48,0.5); background: rgba(255,255,255,0.1); }
.rsl-f-input option { background: #1a1728; color: #fff; }
.rsl-f-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #C51230;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  margin-top: 2px;
  box-sizing: border-box;
}
.rsl-f-btn:hover { background: #a31028; color: #fff; }
.rsl-f-note {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Contact bar ── */
.rsl-footer-contact {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.rsl-footer-contact a {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.rsl-footer-contact a i { color: #C51230; font-size: 13px; }
.rsl-footer-contact a:hover { color: #fff; }

/* ── Offices + certs row ── */
.rsl-footer-offices {
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}
.rsl-office {
  flex: 1;
  min-width: 160px;
  padding-right: 20px;
}
.rsl-office-vline {
  width: 1px;
  background: rgba(255,255,255,0.07);
  align-self: stretch;
  margin: 0 20px;
  flex-shrink: 0;
}
.rsl-office-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #C51230;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
}
.rsl-office p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.42);
  line-height: 1.7;
  margin: 0;
}
.rsl-certs {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,0.07);
  margin-left: auto;
  flex-shrink: 0;
}
.rsl-cert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.rsl-cert-item img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: invert(1) brightness(1.8);
  opacity: 0.65;
}
.rsl-cert-item span {
  font-size: 9px;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Bottom bar ── */
.rsl-footer-bottom {
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.rsl-footer-bottom .f-bottom-links {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
.rsl-footer-bottom .f-bottom-links a {
  color: rgba(255,255,255,0.36);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.18s;
}
.rsl-footer-bottom .f-bottom-links a:hover { color: #fff; }
.rsl-footer-bottom .f-bottom-links .sep { color: rgba(255,255,255,0.14); font-size: 11px; }
.rsl-footer-bottom .f-copyright { color: rgba(255,255,255,0.26); font-size: 12px; }

/* ── Responsive ── */
@media (max-width: 1199px) {
  .rsl-f-nav { grid-template-columns: repeat(2, 1fr); }
  .rsl-f-form-box { width: 210px; }
}
@media (max-width: 991px) {
  .rsl-f-brand { width: 100%; }
  .rsl-f-nav { grid-template-columns: repeat(2, 1fr); flex: none; width: 100%; }
  .rsl-f-form-box { width: 100%; }
  .rsl-certs { border-left: none; padding-left: 0; margin-left: 0; width: 100%; margin-top: 20px; }
  .rsl-office-vline { display: none; }
  .rsl-office { min-width: 44%; margin-bottom: 20px; }
}
@media (max-width: 575px) {
  .rsl-f-nav { grid-template-columns: 1fr; }
  .rsl-footer-contact { flex-direction: column; gap: 12px; }
  .rsl-office { min-width: 100%; }
}

/* ═══════════════════════════════════════
   PARTICLE / NETWORK CANVAS ANIMATION
   ═══════════════════════════════════════ */
canvas.particle-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
/* Sections that host the animation need relative positioning */
.home-banner.banner-section,
.footer-form-section {
  position: relative;
  overflow: hidden;
}
/* Keep section content above the canvas */
.home-banner.banner-section > .container,
.footer-form-section > .container {
  position: relative;
  z-index: 1;
}
/* The hero canvas already exists as #dots — style it */
#dots {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ====== Pentesting Estimator CTA ====== */
.estimator-cta-section {
  position: relative;
  padding: 80px 0 72px;
  background: #0a0a14;
  overflow: hidden;
}

.estimator-cta-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(197, 18, 48, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197, 18, 48, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.estimator-cta-section::after {
  content: '';
  position: absolute;
  top: -120px;
  left: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(197, 18, 48, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.estimator-cta-inner {
  position: relative;
  z-index: 1;
}

.estimator-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(197, 18, 48, 0.12);
  border: 1px solid rgba(197, 18, 48, 0.35);
  color: #ff6b7a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 28px;
}

.estimator-cta-content {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  flex-wrap: wrap;
}

.estimator-cta-left {
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}

.estimator-cta-heading {
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.estimator-highlight {
  color: #C51230;
  position: relative;
}

.estimator-cta-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin-bottom: 32px;
}

.estimator-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #C51230;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  margin-bottom: 16px;
}

.estimator-cta-btn:hover {
  background: #a80f29;
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

.estimator-cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
  margin: 0;
}

/* Right side */
.estimator-cta-right {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* Preview card */
.estimator-preview-card {
  background: #141424;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

.epc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: #0e0e1e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.epc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.epc-dot.red   { background: #ff5f57; }
.epc-dot.amber { background: #febc2e; }
.epc-dot.green { background: #28c840; }

.epc-title {
  margin-left: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.3px;
}

.epc-body {
  padding: 20px;
}

.epc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.epc-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.epc-tag {
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.epc-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 16px 0;
}

.epc-row-result {
  align-items: baseline;
  margin-bottom: 8px;
}

.epc-label-result {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.epc-price {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.epc-duration {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.epc-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 20px;
  text-align: center;
}

.epc-cta-link {
  font-size: 13px;
  font-weight: 700;
  color: #ff6b7a;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color 0.18s;
}

.epc-cta-link:hover {
  color: #C51230;
  text-decoration: none;
}

/* Stats row */
.estimator-stats {
  display: flex;
  gap: 12px;
}

.estimator-stat {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}

.es-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}

.es-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
  line-height: 1.3;
}

/* Responsive */
@media (max-width: 768px) {
  .estimator-cta-section {
    padding: 56px 0 48px;
  }
  .estimator-cta-content {
    flex-direction: column;
    gap: 36px;
  }
  .estimator-cta-left,
  .estimator-cta-right {
    max-width: 100%;
  }
}
/* ====== Sample Pentest Report CTA ====== */
.sample-report-cta-section {
  position: relative;
  padding: 80px 0 72px;
  background: #f7f7fb;
  overflow: hidden;
}

.sample-report-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(197,18,48,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.sample-report-inner {
  position: relative;
  z-index: 1;
}

.sample-report-content {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  flex-wrap: wrap;
}

/* Left */
.src-left {
  flex: 5 1 0;
  min-width: 280px;
}

.report-preview-card {
  background: #141424;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0,0,0,0.18);
}

.rpc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #0e0e1e;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rpc-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rpc-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(197,18,48,0.12);
  border: 1px solid rgba(197,18,48,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rpc-filename {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.rpc-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

.rpc-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  background: rgba(197,18,48,0.15);
  color: #ff6b7a;
  border: 1px solid rgba(197,18,48,0.3);
  padding: 4px 10px;
  border-radius: 100px;
}

.rpc-body {
  padding: 20px;
}

.rpc-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 12px;
}

.rpc-contents-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.rpc-contents-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.rpc-contents-list li:last-child {
  border-bottom: none;
}

/* Severity bars */
.rpc-severity-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 16px;
}

.rpc-severity-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rsb-label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  width: 52px;
  flex-shrink: 0;
}

.rsb-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}

.rsb-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.6s ease;
}

.rsb-critical { background: #e24b4a; }
.rsb-high     { background: #ef9f27; }
.rsb-medium   { background: #febc2e; }
.rsb-low      { background: #1d9e75; }

.rsb-count {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  width: 16px;
  text-align: right;
  flex-shrink: 0;
}

.rpc-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 20px;
  text-align: center;
}

.rpc-download-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #ff6b7a;
  text-decoration: none;
  transition: color 0.18s;
}

.rpc-download-link:hover {
  color: #C51230;
  text-decoration: none;
}

/* Right */
.src-right {
  flex: 6 1 0;
  min-width: 280px;
}

.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(197,18,48,0.08);
  border: 1px solid rgba(197,18,48,0.25);
  color: #C51230;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.src-heading {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  color: #0a0a14;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.4px;
}

.src-highlight {
  color: #C51230;
}

.src-sub {
  font-size: 15.5px;
  color: #555;
  line-height: 1.75;
  margin-bottom: 28px;
}

.src-trust-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.src-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

.src-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0a0a14;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  margin-bottom: 14px;
}

.src-cta-btn:hover {
  background: #C51230;
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

.src-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #999;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .sample-report-cta-section {
    padding: 56px 0 48px;
  }
  .sample-report-content {
    flex-direction: column-reverse;
    gap: 32px;
  }
  .src-left,
  .src-right {
    width: 100%;
  }
}

/* ====== PCI DSS Estimator CTA ====== */
.pcidss-estimator-cta-section {
  position: relative;
  padding: 80px 0 72px;
  background: #0a0a14;
  overflow: hidden;
}

.pcidss-estimator-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(197,18,48,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,18,48,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

.pcidss-estimator-cta-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(197,18,48,0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.pcidss-estimator-inner {
  position: relative;
  z-index: 1;
}

.pcidss-estimator-content {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.pec-left {
  flex: 6 1 0;
  min-width: 280px;
}

.pec-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(197,18,48,0.12);
  border: 1px solid rgba(197,18,48,0.35);
  color: #ff6b7a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.pec-heading {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.4px;
}

.pec-highlight {
  color: #C51230;
}

.pec-sub {
  font-size: 15.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin-bottom: 28px;
}

.pec-trust-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.pec-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}

.pec-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #C51230;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  margin-bottom: 14px;
}

.pec-cta-btn:hover {
  background: #a80f29;
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

.pec-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

/* Right preview card */
.pec-right {
  flex: 5 1 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pci-preview-card {
  background: #141424;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
}

.ppcard-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: #0e0e1e;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ppcard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.ppcard-dot.red   { background: #ff5f57; }
.ppcard-dot.amber { background: #febc2e; }
.ppcard-dot.green { background: #28c840; }

.ppcard-title {
  margin-left: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.3px;
}

.ppcard-body {
  padding: 20px;
}

.ppcard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.ppcard-label {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
}

.ppcard-tag {
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75);
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
}

.ppcard-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 14px 0;
}

.ppcard-row-result {
  align-items: baseline;
  margin-bottom: 8px;
}

.ppcard-label-result {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
}

.ppcard-price {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
}

.ppcard-duration {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
}

.ppcard-compliance-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.ppcard-cbadge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: rgba(197,18,48,0.12);
  color: #ff6b7a;
  border: 1px solid rgba(197,18,48,0.25);
  padding: 3px 9px;
  border-radius: 100px;
}

.ppcard-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 13px 20px;
  text-align: center;
}

.ppcard-cta-link {
  font-size: 13px;
  font-weight: 700;
  color: #ff6b7a;
  text-decoration: none;
  transition: color 0.18s;
}

.ppcard-cta-link:hover {
  color: #C51230;
  text-decoration: none;
}

/* Stats */
.pec-stats {
  display: flex;
  gap: 10px;
}

.pec-stat {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
}

.pec-stat-num {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}

.pec-stat-label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  margin-top: 4px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .pcidss-estimator-cta-section { padding: 56px 0 48px; }
  .pcidss-estimator-content { flex-direction: column; gap: 32px; }
  .pec-left, .pec-right { width: 100%; }
}
/* ====== PCI DSS Sub-pages Cards ====== */
.pcidss-subpages-section {
  padding: 80px 0 72px;
  background: #f7f7fb;
  position: relative;
}

.pss-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.pss-badge {
  display: inline-block;
  background: rgba(197,18,48,0.08);
  border: 1px solid rgba(197,18,48,0.22);
  color: #C51230;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.pss-heading {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: #0a0a14;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

.pss-highlight {
  color: #C51230;
}

.pss-sub {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

/* Cards grid */
.pss-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pss-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.pss-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #C51230;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.pss-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.1);
  border-color: rgba(197,18,48,0.2);
  text-decoration: none;
  color: inherit;
}

.pss-card:hover::before {
  transform: scaleX(1);
}

/* Featured card */
.pss-card-featured {
  background: #0a0a14;
  border-color: rgba(197,18,48,0.3);
}

.pss-card-featured:hover {
  border-color: #C51230;
  box-shadow: 0 16px 40px rgba(197,18,48,0.15);
}

.pss-card-featured .pss-card-title { color: #fff; }
.pss-card-featured .pss-card-desc  { color: rgba(255,255,255,0.6); }
.pss-card-featured .pss-card-features li { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.06); }
.pss-card-featured .pss-card-features li::before { background: #C51230; }
.pss-card-featured .pss-card-link { color: #ff6b7a; }
.pss-card-featured .pss-card-flag { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); }

.pss-card-featured-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(197,18,48,0.15);
  color: #ff6b7a;
  border: 1px solid rgba(197,18,48,0.3);
  padding: 3px 9px;
  border-radius: 100px;
}

.pss-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(197,18,48,0.07);
  border: 1px solid rgba(197,18,48,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.pss-card-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  background: #f5f5f8;
  border: 1px solid rgba(0,0,0,0.07);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
  width: fit-content;
}

.pss-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #0a0a14;
  line-height: 1.3;
  margin-bottom: 10px;
}

.pss-card-desc {
  font-size: 13.5px;
  color: #666;
  line-height: 1.65;
  margin-bottom: 16px;
  flex: 1;
}

.pss-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 14px;
}

.pss-card-features li {
  font-size: 13px;
  color: #555;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-left: 14px;
  position: relative;
}

.pss-card-features li:last-child { border-bottom: none; }

.pss-card-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C51230;
}

.pss-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #C51230;
  margin-top: auto;
  transition: gap 0.18s;
}

.pss-card:hover .pss-card-link { gap: 10px; }

@media (max-width: 991px) {
  .pss-cards-grid { grid-template-columns: 1fr; }
  .pss-card-featured { order: -1; }
}

@media (max-width: 768px) {
  .pcidss-subpages-section { padding: 56px 0 48px; }
}
/* ====== End PCI DSS Sub-pages Cards ====== */


/* =============================================================
   SERVICES PAGE — PROFESSIONAL SECTION REDESIGN
   ============================================================= */

/* Shared: section label chip */
.section-pill {
  display: inline-block;
  background: rgba(197, 18, 48, 0.08);
  color: #C51230;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid rgba(197, 18, 48, 0.18);
  margin-bottom: 14px;
}

/* Shared: section subtitle */
.section-sub {
  display: block;
  color: rgba(23, 20, 40, 0.6);
  font-size: 15px;
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}

/* ── 1. OUR SERVICES SECTION ── */
.services-index-section {
  background: #f8f9fa;
}

.services-index-section .main-heading {
  color: #171428 !important;
}

.services-index-section .section-sub {
  margin-top: 8px;
  margin-bottom: 44px;
}

#pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  padding-bottom: 8px;
}

#pagination button {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #171428;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

#pagination button:hover {
  border-color: #C51230;
  color: #C51230;
  background: rgba(197, 18, 48, 0.04);
}

#pagination button.active {
  background: #C51230;
  border-color: #C51230;
  color: #fff;
  box-shadow: 0 4px 14px rgba(197, 18, 48, 0.35);
}

/* ── 2. WHY RSL SECTION (dark) ── */
.why-rsl-section {
  background: linear-gradient(150deg, #12101f 0%, #1a1730 55%, #12101f 100%);
  position: relative;
  overflow: hidden;
}

.why-rsl-section::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(197, 18, 48, 0.08) 0%, transparent 70%);
  top: -130px;
  right: -110px;
  pointer-events: none;
}

.why-rsl-section .section-pill {
  background: rgba(197, 18, 48, 0.14);
  border-color: rgba(197, 18, 48, 0.32);
}

.why-rsl-section .section-sub {
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 48px;
}

.top-colored-bordered {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid #C51230;
  border-radius: 18px;
  padding: 32px 28px 28px;
  margin-top: 28px;
  height: calc(100% - 28px);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.top-colored-bordered:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-7px);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.4);
}

.why-rsl-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(197, 18, 48, 0.1);
  border: 1px solid rgba(197, 18, 48, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  color: #C51230;
  font-size: 20px;
}

.top-colored-bordered h3 {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.top-colored-bordered p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 0;
}

/* ── 3. METHODOLOGY SECTION ── */
.methodology-section {
  background: #fff;
}

.methodology-section .main-heading {
  color: #171428 !important;
}

.methodology-section .section-sub {
  margin-top: 8px;
  margin-bottom: 48px;
}

.card-methadalogy {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
  padding: 24px 28px !important;
  transition: all 0.3s ease !important;
}

.card-methadalogy:hover {
  background: #fff !important;
  border-color: rgba(197, 18, 48, 0.18) !important;
  box-shadow: 0 14px 36px rgba(197, 18, 48, 0.1) !important;
  transform: translateY(-5px) !important;
}

.card-methadalogy:hover h3 {
  color: #C51230 !important;
}

.card-methadalogy h3.fw-bold {
  font-size: 17px !important;
  color: #171428 !important;
  transition: color 0.25s;
  margin-bottom: 8px;
}

.card-methadalogy ul {
  padding-left: 18px;
  margin-bottom: 0;
}

.card-methadalogy ul li {
  color: rgba(23, 20, 40, 0.65) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 4px;
}

.card-number img { width: 50px; height: 50px; flex-shrink: 0; }
.card-number span { font-size: 15px !important; font-weight: 800 !important; }

/* ── 4. TRUSTED CLIENTS SECTION ── */
.trusted-clients-section {
  background: #f8f9fa;
}

.trusted-clients-section .main-heading {
  color: #171428 !important;
}

.trusted-clients-section .section-sub {
  margin-top: 8px;
  margin-bottom: 48px;
}

.clients-logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  min-width: 148px;
  min-height: 80px;
  transition: all 0.25s ease;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

.client-logo-item:hover {
  border-color: rgba(197, 18, 48, 0.22);
  box-shadow: 0 8px 24px rgba(197, 18, 48, 0.09);
  transform: translateY(-3px);
}

.client-logo-item img {
  max-width: 130px;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(55%) opacity(0.8);
  transition: all 0.25s ease;
}

.client-logo-item:hover img {
  filter: grayscale(0%) opacity(1);
}

@media (max-width: 767px) {
  .clients-logo-grid { gap: 10px; }
  .client-logo-item { min-width: 105px; min-height: 64px; padding: 12px 16px; }
  .client-logo-item img { max-width: 85px; max-height: 36px; }
}

/* ── 5. TESTIMONIALS SECTION (Slick-based, all pages except /services) ── */
.review-section { background: #f8f9fa; }
.review-section .main-heading { color: #171428 !important; }
.review-section .sub-heading { color: rgba(23, 20, 40, 0.6) !important; }

/* Styled Slick slide cards */
.review-slide {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px 28px;
  margin: 8px 12px 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
}

.review-section .review-slider p {
  font-size: 14.5px !important;
  line-height: 1.78 !important;
  color: rgba(23, 20, 40, 0.78) !important;
  text-align: left !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-family: inherit !important;
  margin-bottom: 16px !important;
}

.review-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 18px;
}
.review-stars i { color: #f4b942; font-size: 12px; }

.review-section .review-slider .review-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
  padding-top: 18px !important;
  position: static !important;
}
.review-section .review-slider .review-info .rating-img { display: none !important; }
.review-section .review-slider .review-info .client-info-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.review-section .review-slider .review-info .client-info-wrapper img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(197, 18, 48, 0.15) !important;
  flex-shrink: 0;
  min-width: 44px;
}
.review-section .review-slider .review-info .client-info-wrapper .client-info {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #171428 !important;
  line-height: 1.35 !important;
  margin-left: 0 !important;
}
.review-section .review-slider .review-info .client-info-wrapper .client-info .title {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: rgba(23, 20, 40, 0.5) !important;
  margin-top: 2px;
}
@media (max-width: 767px) {
  .review-slide { padding: 26px 20px 20px; margin: 6px 6px 16px; }
}

/* =============================================================
   END — Services Page Section Redesign
   ============================================================= */
/* =============================================================
   FONT CONSISTENCY ENFORCEMENT
   Ensures the Switzer typeface renders consistently across all
   pages regardless of CSS load order (bootstrap vs style.css race).
   ============================================================= */
body,
.sub-heading,
p,
li,
td,
span,
div {
  font-family: "Switzer-Regular", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.main-heading,
strong, b {
  font-family: "Switzer-Bold", Arial, sans-serif;
}
.sub-heading, .mid-para {
  font-family: "Switzer-Medium", Arial, sans-serif;
}
/* Conversion overlay components inherit the site font cleanly */
[class*="rsl-"] , [class*="cs-"], [class*="cmp-"], [class*="gp-"] {
  font-family: "Switzer-Regular", Arial, sans-serif;
}
[class*="rsl-"] h1, [class*="rsl-"] h2, [class*="rsl-"] h3,
[class*="cs-"] h1, [class*="cs-"] h2, [class*="cs-"] h3,
[class*="cmp-"] h1, [class*="cmp-"] h2, [class*="cmp-"] h3,
[class*="gp-"] h2, [class*="gp-"] h3 {
  font-family: "Switzer-Bold", Arial, sans-serif;
}

/* =============================================================
   HERO TRUST LINE — homepage positioning credibility strip
   ============================================================= */
.hero-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
  margin-bottom: 8px;
}
.hero-trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Switzer-Medium", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(23, 20, 40, 0.78);
  white-space: nowrap;
}
.hero-trust-line span i {
  color: #C51230;
  font-size: 14px;
}
@media (max-width: 991px) {
  .hero-trust-line { gap: 8px 18px; }
  .hero-trust-line span { font-size: 13px; }
}
@media (max-width: 575px) {
  .hero-trust-line { gap: 6px 14px; margin-top: 18px; }
  .hero-trust-line span { font-size: 12.5px; white-space: normal; }
}

/* =============================================================
   HOMEPAGE DESIGN TOUCH-UPS  (additive polish, non-structural)
   ============================================================= */

/* 1. Remove the dated muddy text-shadow on the hero heading,
      replace with a crisp, modern weight. */
.banner-heading {
  text-shadow: none !important;
}

/* 2. Hero sub-paragraph: slightly more breathing room before CTA */
.home-banner .sub-para {
  margin-bottom: 4px;
}

/* 3. one-step service cards — gentle lift + consistent border with the
      rest of the site's card system (matches .rsl-offer-card). */
.one-step .service-card {
  border: 1px solid #eef0f3;
  border-radius: 14px;
  background: #fff;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.one-step .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.10);
  border-color: rgba(197, 18, 48, 0.22);
}
.one-step .service-card .card-divider {
  border: 0;
  height: 2px;
  width: 42px;
  background: #C51230;
  border-radius: 2px;
  margin: 12px 0 14px;
  opacity: 0.85;
}

/* 4. Trusted-by logo strip — calmer, less visually heavy */
.trusted-section img {
  filter: grayscale(100%);
  opacity: 0.62;
  transition: opacity .25s ease, filter .25s ease;
}
.trusted-section img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* 5. Section heading consistency — tighten the eyebrow + h2 rhythm
      across the home sections so they share a vertical cadence. */
.section-eyebrow {
  display: inline-block;
  color: #C51230;
  font-family: "Switzer-Medium", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* 6. Smooth the join between adjacent white sections (hairline divider
      instead of an abrupt edge) — only where two light sections meet. */
.rsl-offers-section { border-top: 1px solid #f1f2f4; }
.industry-packages-section { border-top: 1px solid #f1f2f4; }

/* (removed: card top-accent border — read as templated/AI-slop) */

/* 8. Hero trust line — keep the check icons crisp (fa-check-circle already
      carries its own circle, so no extra background needed). */
.hero-trust-line span i {
  font-size: 15px;
  color: #C51230;
}

/* 9. Consistent, comfortable max line-length for section ledes */
.rsl-offers-section .lede,
.industry-packages-section .lede {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================
   HEADING HIGHLIGHT REFINEMENT
   The animated red highlight bar under .main-heading span looked
   heavy and clashed when the span text was itself red. Refine it
   to a thin, static, tasteful underline accent and disable the
   distracting infinite animation.
   ============================================================= */
.main-heading span::after {
  height: 3px !important;
  bottom: -4px !important;
  background: #C51230 !important;
  border-radius: 2px !important;
  opacity: 0.9 !important;
  animation: none !important;
  width: 100% !important;
}
/* Where the span itself is the red accent (.text-primary), the underline
   under red-on-white reads as clutter — drop it there. */
.main-heading span.text-primary::after {
  display: none !important;
}

/* =============================================================
   MEGA-MENU CTA PANEL POLISH
   The promo image box rendered as a flat gray placeholder when the
   icon class lacked the 'bi ' prefix. Now icons render; give the
   panel a branded, professional treatment instead of flat grey.
   ============================================================= */
.promo-image {
  background: linear-gradient(135deg, #1a1730 0%, #0f0e1d 100%) !important;
  height: 120px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(197,18,48,0.25);
}
.promo-image i {
  font-size: 38px !important;
  color: #ffffff !important;
  opacity: 0.95;
}
.promo-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(197,18,48,0.35), transparent 60%);
  pointer-events: none;
}
.promo-title { color: #171428 !important; font-family: "Switzer-Bold", Arial, sans-serif; }
.promo-description { color: #5b5b6b !important; font-family: "Switzer-Regular", Arial, sans-serif; }
.promo-link {
  color: #C51230 !important; font-weight: 600;
  font-family: "Switzer-Medium", Arial, sans-serif;
  display: inline-flex !important; align-items: center; gap: 6px;
}
.promo-link:hover { color: #a00e28 !important; }

/* =============================================================
   MEGA-MENU LAYOUT FIX
   The 250px category sidebar was being clipped at the left viewport
   edge. Constrain the dropdown to the page container width and make
   the inner grid lay out cleanly: sidebar | services | promo.
   ============================================================= */
.mega-menu {
  padding: 0 !important;
  left: 24px !important;
  transform: none !important;
  width: min(1200px, calc(100vw - 48px)) !important;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
  border: 1px solid #ededf0;
  border-top: 3px solid #C51230;
  overflow: hidden;
}
.mega-menu .container { padding: 0 !important; max-width: 100% !important; }
.mega-menu-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100%;
}
.mega-menu-sidebar {
  width: 248px !important;
  flex-shrink: 0;
  background: #fafbfc !important;
  padding: 14px 0 !important;
}
.sidebar-link {
  color: #44424f !important;
  font-family: "Switzer-Medium", Arial, sans-serif !important;
  font-size: 13.5px !important;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sidebar-link i { color: #C51230 !important; margin-right: 10px; font-size: 15px; }
.sidebar-link:hover, .sidebar-link.active {
  background: #fff !important;
  color: #171428 !important;
  border-left-color: #C51230;
}
.mega-menu-content { padding: 30px 34px !important; }
.mega-menu .column a, .service-simple-card h3 {
  font-family: "Switzer-Bold", Arial, sans-serif;
}
.service-simple-card { padding: 12px 10px; border-radius: 8px; transition: background .15s ease; }
.service-simple-card:hover { background: #fafbfc; }
.service-simple-title { color: #171428 !important; font-size: 14.5px !important; }
.service-simple-description { color: #6b6b78 !important; font-size: 12.5px !important; }
@media (max-width: 991px) {
  .mega-menu { width: 96vw !important; }
  .mega-menu-container { flex-direction: column !important; }
  .mega-menu-sidebar { width: 100% !important; }
}

/* =============================================================
   RICHER INDUSTRIES & RESOURCES DROPDOWNS (icon + description)
   ============================================================= */
.rsl-nav-dropdown .rsl-mega-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ededf0;
  border-top: 3px solid #C51230;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 24px 60px rgba(16,24,40,0.16);
  padding: 14px;
  z-index: 1000;
}
.rsl-nav-dropdown:hover .rsl-mega-panel,
.rsl-nav-dropdown.is-open .rsl-mega-panel { display: block; }
/* Invisible bridge so cursor can travel from trigger to panel without losing hover */
.rsl-nav-dropdown .rsl-mega-panel::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.rsl-industries-panel { width: 660px; }
.rsl-resources-panel { width: 560px; }
.rsl-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.rsl-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 9px;
  text-decoration: none;
  transition: background .15s ease;
}
.rsl-mega-item:hover { background: #fafbfc; }
.rsl-mega-item i {
  color: #C51230;
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.rsl-mega-item div { display: flex; flex-direction: column; }
.rsl-mega-t {
  font-family: "Switzer-Bold", Arial, sans-serif;
  font-size: 14px;
  color: #171428;
  line-height: 1.3;
}
.rsl-mega-item:hover .rsl-mega-t { color: #C51230; }
.rsl-mega-d {
  font-family: "Switzer-Regular", Arial, sans-serif;
  font-size: 12px;
  color: #6b6b78;
  line-height: 1.4;
  margin-top: 2px;
}
@media (max-width: 992px) {
  .rsl-nav-dropdown .rsl-mega-panel {
    position: static; transform: none; width: 100% !important;
    box-shadow: none; border: none; border-left: 3px solid #C51230;
    border-radius: 0; padding: 4px 0 4px 10px; display: block;
  }
  .rsl-mega-grid { grid-template-columns: 1fr; gap: 0; }
  .rsl-mega-d { display: none; }
  .rsl-mega-item { padding: 8px 10px; }
}

/* =============================================================
   HERO FORM + NAV REFINEMENT
   ============================================================= */

/* (old red form gradient removed — replaced by navy resonance block below) */

/* 2. Form inputs — softer corners, subtle inset, clearer focus */
.banner-form .form-control {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.banner-form .form-control:focus {
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18) !important;
}

/* 3. Two CTAs -> clear primary/secondary hierarchy.
      Primary (Request a Consultation) = solid dark, high contrast.
      Secondary (Speak with an Advisor) = outlined, not low-contrast pink. */
.btn-consultation {
  background: #171428 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: "Switzer-Bold", Arial, sans-serif !important;
  transition: transform .18s ease, background .18s ease;
}
.btn-consultation:hover {
  background: #0f0e1d !important;
  transform: translateY(-2px);
}
.btn-speak-advisor {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  border-radius: 10px !important;
  font-family: "Switzer-Medium", Arial, sans-serif !important;
  transition: background .18s ease, border-color .18s ease;
}
.btn-speak-advisor:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #fff !important;
}

/* 4. Active nav state — replace the dated pink pill with a clean
      red label + thin underline accent. Modern and understated. */
.navbar-nav .nav-link.active,
header nav.navbar .nav-link.active {
  background: transparent !important;
  background-color: transparent !important;
  color: #C51230 !important;
  font-weight: 600 !important;
  position: relative;
}
.navbar-nav .nav-link.active::after,
header nav.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  background: #C51230;
  border-radius: 2px;
}

/* 5. Nav links — slightly calmer default colour, red on hover */
header nav.navbar .nav-item .nav-link {
  color: #2b2937 !important;
  transition: color .15s ease;
}
header nav.navbar .nav-item .nav-link:hover {
  color: #C51230 !important;
}

/* =============================================================
   DESIGN COHERENCE LAYER  (unify reds, radii, rhythm, cards)
   Loaded last so it harmonises drift across style.css/custom.css.
   ============================================================= */

/* --- 1. ONE RED SYSTEM -------------------------------------------------
   Brand red #C51230, single darker shade #a00e28 for gradients/hover.
   Neutralise the brighter rgb(225,23,57) and the dark #8B0000 drift. */
.btn-primary,
.banner-btn .btn-primary,
.home-btn.btn-primary {
  background: #C51230 !important;
  background-image: none !important;
  border: none !important;
}
.btn-primary:hover { background: #a00e28 !important; }

/* The promo-image / mega panel kept their navy gradient — leave those.
   But unify any stray dark-red text accents to brand red. */
.promo-title, .promo-description, .promo-link,
.sidebar-link i, .rsl-product-card-title { color: inherit; }

/* --- 2. ONE CORNER-RADIUS SCALE ---------------------------------------
   Cards = 14px · buttons/inputs = 10px · pills = 100px.
   Override the 15/16/18/20/30/50px randoms on card-like elements. */
.one-step .service-card,
.secure-solutions-section .sol-card,
.industry-packages-section .industry-pkg-card,
.rsl-offer-card,
.enhanced-cta-section .cta-inner-card,
.rsl-blog-card,
.rsl-research-card {
  border-radius: 14px !important;
}
.btn, .btn-primary, .btn-cta, .btn-consultation, .btn-speak-advisor,
.form-control, .banner-form .form-control {
  border-radius: 10px !important;
}

/* --- 3. CONSISTENT SECTION RHYTHM -------------------------------------
   Harmonise the big vertical paddings to a single 88px cadence on
   desktop (sections that were 60/80/100 land on one rhythm). */
@media (min-width: 992px) {
  .one-step,
  .secure-solutions-section,
  .rsl-offers-section,
  .industry-packages-section,
  .bg-why,
  .enhanced-cta-section,
  .certifications-section,
  .review-section,
  .rsl-blog-section {
    padding-top: 88px !important;
    padding-bottom: 88px !important;
  }
}

/* --- 4. UNIFY ONE-STEP CARD ICONS -------------------------------------
   The one-step cards used dark PNG icons; the dark Secure-Solutions
   cards use red tinted squares. Give the one-step icons a matching
   light-tinted brand square so the two card families share a language. */
.one-step .service-card .card-icon {
  width: 52px !important;
  height: 52px !important;
  padding: 12px;
  background: rgba(197,18,48,0.07);
  border-radius: 12px;
  object-fit: contain;
}

/* --- 5. CONSISTENT CARD BORDERS & HOVER -------------------------------
   Every white card shares the same hairline border + lift on hover. */
.one-step .service-card,
.industry-packages-section .industry-pkg-card,
.rsl-blog-card {
  border: 1px solid #ededf0 !important;
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.one-step .service-card:hover,
.industry-packages-section .industry-pkg-card:hover,
.rsl-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(16,24,40,0.10) !important;
  border-color: rgba(197,18,48,0.22) !important;
}

/* --- 6. EYEBROW LABEL CONSISTENCY -------------------------------------
   Every section eyebrow uses the same neutral-grey uppercase treatment
   (some were red, some grey). One language. */
.section-eyebrow,
.secure-solutions-section .section-label,
.bg-why .why-eyebrow,
.industry-packages-section .section-eyebrow {
  color: #8a8a96 !important;
  font-family: "Switzer-Medium", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
/* On dark sections the eyebrow needs to stay legible -> soft red */
.secure-solutions-section .section-label,
.bg-why .why-eyebrow { color: #ff6b7a !important; }

/* =============================================================
   DIFFERENTIATORS — dark anchor section (matches Secure Solutions)
   Was a weak grey bullet list; now a dark 6-card grid that mirrors
   the Secure Solutions aesthetic for page rhythm and coherence.
   ============================================================= */
.rsl-diff-section {
  background-color: #0f0e1d;
  background-image: radial-gradient(circle at 80% 0%, rgba(197,18,48,0.14), transparent 55%);
  padding: 88px 0;
  position: relative;
  overflow: hidden;
}
.rsl-diff-eyebrow {
  display: inline-block;
  color: #ff6b7a;
  font-family: "Switzer-Medium", Arial, sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 14px;
}
.rsl-diff-h2 {
  font-family: "Switzer-Bold", Arial, sans-serif;
  font-size: 36px; color: #fff; letter-spacing: -0.02em;
  margin: 0 0 16px; line-height: 1.15;
}
.rsl-diff-h2 span { color: #C51230; }
.rsl-diff-lede {
  font-family: "Switzer-Regular", Arial, sans-serif;
  font-size: 16.5px; color: rgba(255,255,255,0.62);
  max-width: 640px; margin: 0 auto 52px; line-height: 1.6;
}
.rsl-diff-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; max-width: 1140px; margin: 0 auto;
}
.rsl-diff-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 30px 26px;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.rsl-diff-card:hover {
  border-color: rgba(197,18,48,0.45);
  background: rgba(255,255,255,0.06);
  transform: translateY(-4px);
}
.rsl-diff-icon {
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(197,18,48,0.16);
  border-radius: 12px;
  margin-bottom: 20px;
}
.rsl-diff-icon i { color: #ff6b7a; font-size: 22px; }
.rsl-diff-card h3 {
  font-family: "Switzer-Bold", Arial, sans-serif;
  font-size: 17px; color: #fff; margin: 0 0 10px; line-height: 1.3;
}
.rsl-diff-card p {
  font-family: "Switzer-Regular", Arial, sans-serif;
  font-size: 13.5px; color: rgba(255,255,255,0.6);
  line-height: 1.6; margin: 0;
}
@media (max-width: 991px) {
  .rsl-diff-grid { grid-template-columns: repeat(2, 1fr); }
  .rsl-diff-h2 { font-size: 29px; }
}
@media (max-width: 575px) {
  .rsl-diff-grid { grid-template-columns: 1fr; }
  .rsl-diff-section { padding: 60px 0; }
}

/* =============================================================
   ENHANCED-CTA — reflect the footer's design language
   Replace the jarring solid-white card with the footer's
   translucent-bordered-card-on-dark treatment, so this band reads
   as part of the same dark family as the footer / Secure Solutions /
   Differentiators. Also removed the emoji floating-icons in HTML.
   ============================================================= */
.enhanced-cta-section .cta-inner-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 44px 44px !important;
}
.enhanced-cta-section .cta-card-heading,
.enhanced-cta-section .cta-card-heading strong {
  color: #fff !important;
}
.enhanced-cta-section .cta-card-desc {
  color: rgba(255,255,255,0.62) !important;
}
.enhanced-cta-section .cta-section-label h2 { color: #fff !important; }
.enhanced-cta-section .cta-section-label p { color: rgba(255,255,255,0.6) !important; }
/* Map: lighten slightly so it sits well on the translucent card */
.enhanced-cta-section .cta-map-wrap img { opacity: 0.92; }
/* CTA button -> unified brand red, no heavy glow */
.enhanced-cta-section .btn-enhanced,
.enhanced-cta-section .btn-primary-enhanced {
  background: #C51230 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  border: none !important;
}
.enhanced-cta-section .btn-enhanced:hover { background: #a00e28 !important; }
/* Remove leftover space from the deleted floating-icons */
.enhanced-cta-section .floating-icons { display: none !important; }

/* =============================================================
   HEADING SYSTEM UNIFICATION
   The 4 .main-heading sections (Trusted clients, Recognition,
   Certifications, Testimonials) now carry a .section-eyebrow above
   them like every other section. Harmonise their type with the
   eyebrow+h2 system used elsewhere so the page has ONE heading voice.
   ============================================================= */
.main-heading {
  font-family: "Switzer-Bold", Arial, sans-serif !important;
  font-size: 36px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: #171428 !important;
  margin: 0 0 14px !important;
}
.main-heading .text-primary { color: #C51230 !important; }
/* eyebrow sits centered above the centered headings */
.trusted-section .section-eyebrow,
.multiple-logos-slider-section .section-eyebrow,
.certifications-section .section-eyebrow,
.review-section .section-eyebrow {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}
/* the sub-heading under these becomes the standard lede */
.multiple-logos-slider-section .sub-heading,
.trusted-section .sub-heading,
.certifications-section .sub-heading,
.review-section .sub-heading {
  font-family: "Switzer-Regular", Arial, sans-serif !important;
  font-size: 16px !important;
  color: #5b5b6b !important;
  line-height: 1.6 !important;
}
@media (max-width: 991px) { .main-heading { font-size: 28px !important; } }

/* =============================================================
   STATS BAND — clean 5-cell redesign
   Replaces the dated arrow-notch box + fabricated growth %s with
   an even, coherent dark band matching the rest of the dark family.
   ============================================================= */
.rsl-stats-section { padding: 0 0 70px; background: #fff; }
.rsl-stats-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: linear-gradient(135deg, #1a1730 0%, #0f0e1d 100%);
  border-radius: 16px;
  padding: 40px 24px;
  box-shadow: 0 24px 60px rgba(16,24,40,0.18);
  overflow: hidden;
}
.rsl-stat {
  text-align: center;
  padding: 6px 18px;
  position: relative;
}
.rsl-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: rgba(255,255,255,0.10);
}
.rsl-stat-num {
  font-family: "Switzer-Bold", Arial, sans-serif;
  font-size: 44px;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.rsl-stat-num span { color: #ff6b7a; }
.rsl-stat-label {
  font-family: "Switzer-Regular", Arial, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
  max-width: 150px;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .rsl-stats-band { grid-template-columns: repeat(2, 1fr); gap: 26px 0; padding: 34px 18px; }
  .rsl-stat:nth-child(odd)::after { display: none; }
  .rsl-stat-num { font-size: 38px; }
}
@media (max-width: 480px) {
  .rsl-stats-band { grid-template-columns: 1fr; gap: 22px 0; }
  .rsl-stat::after { display: none !important; }
  .rsl-stat:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 22px; }
}

/* Trusted-by heading -> match the unified heading system */
.secondary-heading {
  font-family: "Switzer-Bold", Arial, sans-serif !important;
  font-size: 30px !important;
  color: #171428 !important;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.secondary-heading .text-primary { color: #C51230 !important; }
@media (max-width: 991px) { .secondary-heading { font-size: 24px !important; } }

/* =============================================================
   FORM COLOUR RESONANCE + STATS SPACING
   Shift the hero form from heavy red to the navy used by the footer
   and dark sections, with red as accent — so the form, dark bands and
   footer all resonate as one palette. Add breathing room around stats.
   ============================================================= */

/* 1. Hero form -> navy gradient (matches footer #171428 / dark sections),
      red kept only as accent on the primary button. */
.banner-form {
  background: linear-gradient(155deg, #1f1b38 0%, #14122a 55%, #0f0e1d 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 30px 70px rgba(15, 14, 29, 0.35) !important;
}
/* Form heading + helper text on navy */
.banner-form .form-heading,
.banner-form h2, .banner-form h3,
.banner-form .form-title { color: #fff !important; }
.banner-form .form-subtext,
.banner-form p { color: rgba(255,255,255,0.66) !important; }
/* Inputs: subtle on navy, clear focus */
.banner-form .form-control {
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.banner-form .form-control:focus {
  border-color: #C51230 !important;
  box-shadow: 0 0 0 3px rgba(197,18,48,0.25) !important;
}
/* Primary CTA = brand red (the one pop of colour) */
.btn-consultation {
  background: #C51230 !important;
  color: #fff !important;
  border: none !important;
}
.btn-consultation:hover { background: #a00e28 !important; transform: translateY(-2px); }
/* Secondary CTA = outlined on navy */
.btn-speak-advisor {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.5) !important;
}
.btn-speak-advisor:hover { background: rgba(255,255,255,0.10) !important; border-color:#fff !important; }
.banner-form .privacy-note,
.banner-form small { color: rgba(255,255,255,0.5) !important; }

/* 2. Breathing room: separate the accreditation logos from the stats band */
.trusted-section { padding-bottom: 56px !important; }
.rsl-stats-section { padding-top: 24px !important; padding-bottom: 84px !important; }
/* a touch more air inside the stats band rows on the labels */
.rsl-stat-label { margin-top: 2px; }

/* Form wrapper is .contact-page-form-wrapper — ensure text + buttons read on navy */
.contact-page-form-wrapper { box-shadow: 0 30px 70px rgba(15,14,29,0.4) !important; }
.contact-page-form-wrapper > p:first-child { color: #fff !important; }
.contact-page-form-wrapper .para { color: rgba(255,255,255,0.66) !important; }
.contact-page-form-wrapper .btn-consultation { background:#C51230 !important; color:#fff !important; border:none !important; }
.contact-page-form-wrapper .btn-consultation:hover { background:#a00e28 !important; }
.contact-page-form-wrapper .btn-speak-advisor { background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,0.5) !important; }
.contact-page-form-wrapper .btn-speak-advisor:hover { background:rgba(255,255,255,0.1) !important; border-color:#fff !important; }

/* =============================================================
   FORM NAVY — definitive override
   style.css sets background-image: linear-gradient(red) on the wrapper,
   which beats a `background` shorthand. Override the image layer itself.
   ============================================================= */
.contact-page-form-wrapper {
  background-image: linear-gradient(155deg, #1f1b38 0%, #14122a 55%, #0f0e1d 100%) !important;
  background-color: #14122a !important;
}

/* =============================================================
   GREY UNIFICATION — one warm neutral for all light-grey sections
   Replaces the cold Bootstrap #f8f9fa (bluish) and the stray #fafafa
   with a single warm off-white that sits better against navy + red.
   ============================================================= */
.review-section,
.bg-gray,
.certifications-section.bg-gray,
section.bg-gray {
  background-color: #f7f6f9 !important;
  background: #f7f6f9 !important;
}
/* testimonial cards: warm-white, soft border, consistent with card system */
.review-slide {
  background: #ffffff !important;
  border: 1px solid #ededf0 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(16,24,40,0.04) !important;
}
/* Avatar fallback: if the small img is empty, the ring shouldn't look broken.
   Give it a subtle tinted fill so it reads as an avatar placeholder. */
.client-info-wrapper > img[alt="client"] {
  background: linear-gradient(135deg, #C51230, #a00e28);
  border: none !important;
}

/* Review cards -> match the unified 14px card radius */
.review-section .review-slide { border-radius: 14px !important; }

/* =============================================================
   FORM — adopt the enhanced-CTA / Differentiators colour treatment
   Navy base + a soft red radial glow (top-right) for depth, matching
   the dark sections exactly. Layered: red glow over navy gradient.
   ============================================================= */
.contact-page-form-wrapper {
  background-color: #0f0e1d !important;
  background-image:
    radial-gradient(circle at 85% 8%, rgba(197,18,48,0.22), transparent 52%),
    linear-gradient(155deg, #1f1b38 0%, #14122a 55%, #0f0e1d 100%) !important;
}

/* =============================================================
   FORM — match the enhanced-CTA section's EXACT gradient
   The CTA section uses an even, darker navy (#0a0e1a -> #171428 ->
   #0a0e1a) with no strong red glow. The earlier form glow was too
   saturated/magenta. This makes the form read identically to it.
   ============================================================= */
.contact-page-form-wrapper {
  background-color: #0a0e1a !important;
  background-image: linear-gradient(135deg, #0a0e1a 0%, #171428 50%, #0a0e1a 100%) !important;
}

/* =============================================================
   FORM — match enhanced-CTA section's WARMTH precisely
   The CTA section's aubergine cast = navy gradient + a centred dark-red
   radial glow rgba(137,13,34,0.15). Replicate that exact recipe so the
   form reads with the same warm temperature, not a cool blue-navy.
   ============================================================= */
.contact-page-form-wrapper {
  background-color: #0a0e1a !important;
  background-image:
    radial-gradient(circle at 50% 45%, rgba(137,13,34,0.18) 0%, transparent 65%),
    linear-gradient(135deg, #0a0e1a 0%, #171428 50%, #0a0e1a 100%) !important;
}

/* =============================================================
   FORM — resonate with the "regulators and customers trust" headline
   That headline uses linear-gradient(90deg, #890d22, #C51230). Give the
   form the SAME red gradient family so the two halves of the hero echo
   each other. Diagonal + slightly deeper for a premium panel feel.
   ============================================================= */
.contact-page-form-wrapper {
  background-color: #b0112c !important;
  background-image: linear-gradient(150deg, #C51230 0%, #a00e28 52%, #890d22 100%) !important;
}
/* keep text + CTAs readable on the red */
.contact-page-form-wrapper > p:first-child,
.contact-page-form-wrapper .para { color: #fff !important; }
.contact-page-form-wrapper .para { color: rgba(255,255,255,0.82) !important; }
/* Primary CTA = dark navy (the contrast pop against red) */
.contact-page-form-wrapper .btn-consultation {
  background: #171428 !important; color: #fff !important; border: none !important;
}
.contact-page-form-wrapper .btn-consultation:hover { background: #0f0e1d !important; }
/* Secondary = outlined white */
.contact-page-form-wrapper .btn-speak-advisor {
  background: transparent !important; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
}
.contact-page-form-wrapper .btn-speak-advisor:hover { background: rgba(255,255,255,0.14) !important; border-color:#fff !important; }

/* =============================================================
   FORM BUTTONS — cleaner hierarchy on the red panel
   Primary (Request a Consultation) = solid WHITE with red text:
   crisp, high-contrast, unmistakably THE action on a red panel.
   Secondary (Speak with an Advisor) = soft ghost button.
   ============================================================= */
.contact-page-form-wrapper .btn-consultation {
  background: #ffffff !important;
  color: #C51230 !important;
  border: none !important;
  font-family: "Switzer-Bold", Arial, sans-serif !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.contact-page-form-wrapper .btn-consultation:hover {
  background: #fff !important;
  color: #a00e28 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.22) !important;
}
.contact-page-form-wrapper .btn-speak-advisor {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.45) !important;
  font-family: "Switzer-Medium", Arial, sans-serif !important;
  transition: background .18s ease, border-color .18s ease !important;
}
.contact-page-form-wrapper .btn-speak-advisor:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.85) !important;
}

/* Nav "Book A Consultation" — add subtle depth + hover so it sits better */
.btn-cta, .navbar .btn-cta {
  box-shadow: 0 4px 14px rgba(197,18,48,0.28) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.btn-cta:hover, .navbar .btn-cta:hover {
  background: #a00e28 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(197,18,48,0.38) !important;
}

/* =============================================================
   FORM — dark navy panel + solid red CTA (the "Get Immediate
   Assistance" combination: brand-red button on dark navy reads
   premium and converts). Matches the enhanced-CTA card exactly.
   ============================================================= */
.contact-page-form-wrapper {
  background-color: #0f0e1d !important;
  background-image:
    radial-gradient(circle at 80% 0%, rgba(197,18,48,0.16), transparent 55%),
    linear-gradient(135deg, #0a0e1a 0%, #171428 50%, #0a0e1a 100%) !important;
}
/* Primary CTA = the exact solid red of "Get Immediate Assistance" */
.contact-page-form-wrapper .btn-consultation {
  background: #C51230 !important;
  color: #ffffff !important;
  border: none !important;
  font-family: "Switzer-Bold", Arial, sans-serif !important;
  box-shadow: 0 8px 22px rgba(197,18,48,0.32) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.contact-page-form-wrapper .btn-consultation:hover {
  background: #a00e28 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(197,18,48,0.42) !important;
}
/* Secondary = soft ghost on navy */
.contact-page-form-wrapper .btn-speak-advisor {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  font-family: "Switzer-Medium", Arial, sans-serif !important;
}
.contact-page-form-wrapper .btn-speak-advisor:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.8) !important;
}

/* =============================================================
   FIX: inner-page hero headings were dark-on-dark
   .inner-banner has a dark bg, but the coherence-layer .main-heading
   rule (meant for light homepage sections) forced dark navy text,
   making inner-page hero headings nearly invisible. Force white
   for any heading inside the dark inner-banner / page hero.
   ============================================================= */
.inner-banner .main-heading,
.inner-banner .main-heading span,
.inner-banner h1,
.inner-banner .secondary-heading,
.inner-banner .banner-heading,
.page-banner .main-heading,
.service-banner .main-heading {
  color: #ffffff !important;
}
/* keep the red span accent visible on dark */
.inner-banner .main-heading .text-primary,
.inner-banner h1 .text-primary,
.inner-banner .main-heading span.text-primary {
  color: #ff6b7a !important;
}
/* sub-text/paragraph in the dark hero stays light — but ONLY in the
   text column, NOT inside the white quote-form card (which has its own
   dark text). Scope to the banner content column. */
.inner-banner .banner-content p,
.inner-banner .banner-text p,
.inner-banner > .container > .row > .col-md-6:first-child p,
.inner-banner .banner-desc,
.inner-banner .lead {
  color: rgba(255,255,255,0.85) !important;
}
/* Form card sits on white inside the dark hero — keep its text dark */
.inner-banner .crest-form p,
.inner-banner .crest-form .para,
.inner-banner .crest-form-section p,
.inner-banner .contact-page-form-wrapper p {
  color: #5b5b6b !important;
}
.inner-banner .crest-form > p:first-child,
.inner-banner .crest-form-section .crest-form > p:first-child {
  color: #171428 !important;
  font-family: "Switzer-Bold", Arial, sans-serif;
}

/* =============================================================
   QA FIXES — image overflow guards
   media-coverage logo slider had unconstrained logo images
   (e.g. Independent logo rendering at native 3635px wide).
   Constrain all slider/logo images so they never overflow.
   ============================================================= */
.multiple-logos-slider img,
.logos-slider img,
.partner-logos img,
.media-logos img {
  max-height: 60px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
}
/* Safety net: no image anywhere should exceed its container */
img { max-width: 100%; height: auto; }
/* Contain any minor horizontal overflow without touching Bootstrap grid gutters */
body { overflow-x: hidden; }

/* Fix: .row directly inside a section without a .container wrapper
   (its -12px gutter margins overflow). Scope narrowly to avoid touching
   properly-containered grids. */
section > .blog-section > .row,
.blog-section > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =============================================================
   FIX: swift-who-* section was used on 40 pages but NEVER styled
   (rendered as plain stacked bold text). Define the tile/grid
   styling to match the site's modern card system.
   ============================================================= */
.swift-who-section { padding: 64px 0; background: #fff; }
.swift-who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1140px;
  margin: 0 auto;
}
.swift-who-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid #eaecef;
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 2px 10px rgba(20,20,40,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.swift-who-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20,20,40,0.08);
}
.swift-who-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #C51230, #8B0000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.swift-who-title {
  font-family: 'Switzer-Medium', Arial, sans-serif;
  font-size: 15px;
  color: #171428;
  margin: 0;
  line-height: 1.35;
  font-weight: 600;
}
.swift-who-footer {
  max-width: 1140px;
  margin: 28px auto 0;
}
.swift-who-footer p {
  color: #5b5b6b;
  line-height: 1.7;
  font-size: 15px;
  text-align: left;
}
@media (max-width: 991px) { .swift-who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .swift-who-grid { grid-template-columns: 1fr; } }

/* Minor: .rsl-related-text inner description (parent .rsl-related-card is styled;
   this just ensures consistent muted sub-text). */
.rsl-related-text { color: #5b5b6b; font-size: 13.5px; line-height: 1.5; margin: 4px 0 0; }

/* === iso-form inline validation states === */
.iso-form .iso-invalid {
  border-color: #C51230 !important;
  box-shadow: 0 0 0 2px rgba(197,18,48,0.12) !important;
}
.iso-form .iso-err {
  display: block;
  color: #C51230;
  font-size: 12px;
  line-height: 1.3;
  margin: 4px 2px 8px;
  min-height: 0;
}
.iso-form .iso-err:empty { margin: 0; }
/* Allow error text to wrap onto its own line inside the two-column name row */
.iso-form .two { flex-wrap: wrap; }
.iso-form .two .iso-err { flex-basis: 100%; width: 100%; }

/* =============================================================
   MOBILE NAV FIXES (final override) — 2026-05-26
   - Remove gap above header on mobile
   - Hide the broken desktop-style mega-menu entirely on mobile;
     mobile users get plain "Services" link and accordion dropdowns
   - Make Industries / Products / Resources accordion-style (closed
     by default, click to expand — handled by main.js)
   ============================================================= */
@media (max-width: 991.98px) {
  /* Fix gap above header on mobile — collapse body top padding to header height */
  html, body { margin-top: 0 !important; }
  body { padding-top: 64px !important; }
  #header, header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    overflow: visible !important;
  }
  #header .nav-wrapper,
  header .nav-wrapper { height: 64px !important; padding: 0 !important; margin: 0 !important; }
  #header .nav-wrapper .container,
  header .nav-wrapper .container { height: 64px !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 auto !important; }
  #header .navbar,
  header .navbar { height: 64px !important; min-height: 64px !important; padding: 0 12px !important; margin: 0 !important; }
  #header .navbar-brand,
  header .navbar-brand { height: 44px !important; padding: 0 !important; margin: 0 !important; }
  #header .navbar-brand img,
  header .navbar-brand img { height: 36px !important; width: auto !important; max-height: 36px !important; }
  #header .navbar-toggler,
  header .navbar-toggler { padding: 6px 8px !important; margin: 0 !important; }

  /* Mobile mega-menu: inline accordion (closed by default, shown when parent .is-open) */
  .nav-item.d-block.d-md-none .mega-menu {
    display: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    max-height: 70vh !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid #C51230 !important;
    border-radius: 0 !important;
    padding: 6px 0 6px 10px !important;
    margin: 6px 0 0 0 !important;
    background: transparent !important;
    overflow-y: auto !important;
    z-index: auto !important;
  }
  .nav-item.d-block.d-md-none.is-open .mega-menu { display: block !important; }
  /* Hide the desktop-only Services mega-menu entirely on mobile (it has class d-none d-md-inline-block on its <li>, but be defensive) */
  .nav-item.d-none.d-md-inline-block .mega-menu { display: none !important; }

  /* Mobile mega-menu: stack sidebar + content vertically, show ALL content sections */
  .nav-item.d-block.d-md-none .mega-menu-container {
    display: block !important;
    flex-direction: column !important;
  }
  .nav-item.d-block.d-md-none .mega-menu-sidebar {
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
  }
  .nav-item.d-block.d-md-none .mega-menu-sidebar ul { list-style: none; padding: 0; margin: 0; }
  .nav-item.d-block.d-md-none .mega-menu-sidebar li { margin: 0; padding: 0; }
  .nav-item.d-block.d-md-none .sidebar-link {
    display: block !important;
    padding: 8px 10px !important;
    color: #171428 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-left: none !important;
    background: transparent !important;
  }
  .nav-item.d-block.d-md-none .mega-menu-content {
    padding: 4px 0 8px 6px !important;
    background: transparent !important;
  }
  /* Show ALL category-content sections on mobile (was: only .active) */
  .nav-item.d-block.d-md-none .category-content {
    display: block !important;
  }
  .nav-item.d-block.d-md-none .services-simple-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
  }
  .nav-item.d-block.d-md-none .service-simple-card {
    padding: 6px 10px !important;
    border-radius: 6px !important;
  }
  .nav-item.d-block.d-md-none .service-simple-title { font-size: 13.5px !important; }
  .nav-item.d-block.d-md-none .service-simple-description { display: none !important; }
  .nav-item.d-block.d-md-none .mega-menu-promo { display: none !important; }

  /* Chevron rotation for Services dropdown */
  .nav-item.d-block.d-md-none > .nav-service { cursor: pointer; position: relative; }
  .nav-item.d-block.d-md-none.is-open > .nav-service.dropdown-toggle::after { transform: rotate(180deg); }

  /* Industries / Products / Resources — accordion behavior */
  .rsl-nav-dropdown .rsl-mega-panel,
  .rsl-nav-dropdown .rsl-dropdown-menu {
    display: none !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid #C51230 !important;
    border-radius: 0 !important;
    padding: 4px 0 4px 10px !important;
    margin: 6px 0 6px 4px !important;
  }
  .rsl-nav-dropdown.is-open .rsl-mega-panel,
  .rsl-nav-dropdown.is-open .rsl-dropdown-menu { display: block !important; }
  /* Disable hover-show on mobile (touch devices fire phantom hover) */
  .rsl-nav-dropdown:hover .rsl-mega-panel,
  .rsl-nav-dropdown:hover .rsl-dropdown-menu { display: none !important; }
  .rsl-nav-dropdown.is-open:hover .rsl-mega-panel,
  .rsl-nav-dropdown.is-open:hover .rsl-dropdown-menu { display: block !important; }

  /* Visual: chevron rotates when open */
  .rsl-nav-dropdown > .nav-link.dropdown-toggle { position: relative; }
  .rsl-nav-dropdown.is-open > .nav-link.dropdown-toggle::after { transform: rotate(180deg); }

  /* Mobile mega-grid: single column, tight spacing */
  .rsl-nav-dropdown .rsl-mega-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .rsl-mega-d { display: none !important; }
  .rsl-mega-item { padding: 8px 10px !important; }

  /* Floating phone button - keep above other content but smaller on mobile */
  .float { z-index: 9998 !important; }
}

/* =============================================================
   DESKTOP DROPDOWNS — SINGLE SOURCE OF TRUTH (2026-05-26)
   The page ships 4 competing inline scripts that fight over the
   menus (each sets inline style.display + toggles .show on
   mouseenter/mouseleave/click). That caused menus to either vanish
   before you could click, or stick open after you left.
   Here CSS :hover is made authoritative with !important — which
   overrides the inline style.display the scripts set — so the menu
   is shown exactly while the cursor is over the trigger or panel,
   and hidden the instant it is not. Pure :hover cannot "stick".
   Invisible bridges cover the visual gap so it cannot "vanish".
   ============================================================= */
@media (min-width: 992px) {
  /* --- Services .mega-menu (fixed, ~18px below the nav link) --- */
  .navbar-nav .nav-item .mega-menu { display: none !important; }
  .navbar-nav .nav-item:hover .mega-menu {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  /* Invisible hover bridge from the Services link down to the fixed menu,
     so crossing the gap keeps .nav-item:hover true. */
  .navbar-nav .nav-item.d-none.d-md-inline-block { position: relative; }
  .navbar-nav .nav-item.d-none.d-md-inline-block::after {
    content: '';
    position: absolute;
    left: -24px; right: -24px;
    top: 100%;
    height: 40px;
    background: transparent;
    pointer-events: none;
  }
  /* Bridge only becomes interactive while hovering the Services item,
     so it never blocks clicks on hero content below the header. */
  .navbar-nav .nav-item.d-none.d-md-inline-block:hover::after { pointer-events: auto; }

  /* --- Industries / Products / Resources panels --- */
  .rsl-nav-dropdown .rsl-mega-panel,
  .rsl-nav-dropdown .rsl-dropdown-menu { display: none !important; }
  .rsl-nav-dropdown:hover .rsl-mega-panel,
  .rsl-nav-dropdown:hover .rsl-dropdown-menu { display: block !important; }
  /* Bridge: panels sit ~6px below the trigger; cover that gap. */
  .rsl-nav-dropdown { position: relative; }
  .rsl-nav-dropdown > .nav-link.dropdown-toggle { position: relative; }
  .rsl-nav-dropdown::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 14px;
    background: transparent;
    pointer-events: none;
  }
  .rsl-nav-dropdown:hover::after { pointer-events: auto; }
}