/* ==========================================================================
   EXPERT SOLUTIONS — UNIFIED MASTER THEME, ANIMATIONS & MOBILE (iOS/ANDROID)
   Palette: Charcoal Dark (#111215 / #222429), Crimson Accent (#fb383b),
            Light Surface (#f4f5f9), Pure White Cards (#ffffff)
   ========================================================================== */

:root {
   --es-dark-deep: #111215;
   --es-dark: #222429;
   --es-accent: #fb383b;
   --es-accent-hover: #e02427;
   --es-surface: #f4f5f9;
   --es-card: #ffffff;
   --es-text-main: #222429;
   --es-text-muted: #555b6e;
   --es-border: #e2e8f0;
}

html, body {
   overflow-x: hidden !important;
   width: 100%;
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
}

body {
   background-color: var(--es-surface) !important;
   color: #333333 !important;
   font-family: 'Rubik', sans-serif !important;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   margin: 0;
}

body.sidenav-open {
   overflow: hidden !important;
}

/* ================= 1. TOP SEBI COMPLIANCE TICKER ================= */
.fixed-top-ticker {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 44px !important;
   display: flex !important;
   align-items: center !important;
   background-color: var(--es-dark-deep) !important;
   border-bottom: 2px solid var(--es-accent) !important;
   color: #ffffff !important;
   z-index: 10002 !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

.ticker-label {
   background: linear-gradient(135deg, #fb383b 0%, #d62828 100%) !important;
   color: #ffffff !important;
   font-family: 'Teko', sans-serif !important;
   font-size: 22px !important;
   font-weight: 600 !important;
   padding: 0 22px !important;
   height: 100% !important;
   display: flex !important;
   align-items: center !important;
   white-space: nowrap !important;
   z-index: 10 !important;
   letter-spacing: 1px !important;
   box-shadow: 5px 0 15px rgba(0, 0, 0, 0.4) !important;
}

.ticker-label i {
   color: #ffffff !important;
   animation: esPulse 1.8s infinite ease-in-out;
}

.ticker-text-container {
   flex-grow: 1 !important;
   overflow: hidden !important;
   position: relative !important;
   height: 100% !important;
}

.ticker-text {
   display: inline-block !important;
   white-space: nowrap !important;
   font-family: 'Rubik', sans-serif !important;
   font-size: 14px !important;
   line-height: 44px !important;
   padding-left: 100% !important;
   color: #d1d9e6 !important;
   animation: ticker-scroll 38s linear infinite !important;
}

.ticker-text:hover {
   animation-play-state: paused !important;
   color: #ffffff !important;
}

@keyframes ticker-scroll {
   0% { transform: translateX(0); }
   100% { transform: translateX(-100%); }
}

@keyframes esPulse {
   0%, 100% { transform: scale(1); opacity: 1; }
   50% { transform: scale(1.18); opacity: 0.85; }
}

/* ================= 2. UNIFIED GLASSMORPHIC FIXED NAVBAR ================= */
#navigration.navbar.fixed-top {
   position: fixed !important;
   top: 44px !important;
   left: 0 !important;
   width: 100% !important;
   z-index: 10001 !important;
   background: rgba(17, 18, 21, 0.92) !important;
   backdrop-filter: blur(12px) !important;
   -webkit-backdrop-filter: blur(12px) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
   transition: all 0.35s ease !important;
   padding: 0 !important;
}

#navigration.navbar.fixed-top.navbar-scrolled {
   background: #111215 !important;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.55) !important;
}

#navigration .container {
   display: flex !important;
   flex-wrap: nowrap !important;
   align-items: center !important;
   justify-content: space-between !important;
   min-height: 72px !important;
}

@media (min-width: 992px) {
   #navigration .sidenav {
      display: flex !important;
      align-items: center !important;
      margin: 0 auto !important;
   }
   #navigration .sidenav ul {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      margin: 0 !important;
      padding: 0 !important;
   }
   #navigration .nav-item:not(.d-md-none):not(.d-lg-none) {
      display: inline-block !important;
      white-space: nowrap !important;
   }
   #navigration .nav-item.d-md-none,
   #navigration .nav-item.d-lg-none {
      display: none !important;
   }
   #navigration .nav-item .nav-link {
      padding: 24px 12px !important;
      font-size: 14.5px !important;
      white-space: nowrap !important;
   }
   #navigration .btn.layer-btn {
      padding: 11px 22px !important;
      font-size: 14.5px !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
   }
}

#navigration .logo {
   color: #ffffff !important;
   white-space: nowrap !important;
   flex-shrink: 0 !important;
   font-family: 'Teko', sans-serif !important;
   font-size: 36px !important;
   letter-spacing: 1px !important;
   font-weight: 700 !important;
   text-decoration: none !important;
   line-height: 1 !important;
   transition: color 0.3s ease !important;
}

#navigration .logo:hover {
   color: var(--es-accent) !important;
}

#navigration .nav-item .nav-link {
   color: #ffffff !important;
   font-family: 'Rubik', sans-serif !important;
   font-size: 15px !important;
   font-weight: 500 !important;
   padding: 28px 14px !important;
   position: relative !important;
   transition: color 0.3s ease !important;
}

#navigration .nav-item .nav-link::after {
   content: '';
   position: absolute;
   bottom: 18px;
   left: 14px;
   right: 14px;
   height: 2px;
   background: var(--es-accent);
   transform: scaleX(0);
   transform-origin: center;
   transition: transform 0.3s ease;
}

#navigration .nav-item .nav-link:hover,
#navigration .nav-item .nav-link.active-page {
   color: var(--es-accent) !important;
}

#navigration .nav-item .nav-link:hover::after,
#navigration .nav-item .nav-link.active-page::after {
   transform: scaleX(1);
}

/* Mobile Sidenav Backdrop */
.sidenav-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.65);
   backdrop-filter: blur(3px);
   z-index: 10000;
   opacity: 0;
   visibility: hidden;
   transition: all 0.35s ease;
}

.sidenav-backdrop.active {
   opacity: 1;
   visibility: visible;
}

/* ================= 3. UNIFIED INNER PAGE HEADER (#pageHeader) ================= */
#pageHeader {
   background-image: linear-gradient(135deg, rgba(17, 18, 21, 0.88) 0%, rgba(34, 36, 41, 0.82) 100%), url('../img/home-bg.jpg') !important;
   background-size: cover !important;
   background-position: center center !important;
   background-repeat: no-repeat !important;
   position: relative !important;
   margin-top: 0 !important;
   margin-bottom: 60px !important;
   padding: 0 !important;
   border-bottom: 4px solid var(--es-accent) !important;
}

#pageHeader .overlay {
   background: rgba(17, 18, 21, 0.65) !important;
   padding: 165px 0 75px 0 !important;
   width: 100% !important;
}

#pageHeader h2,
#pageHeader .sec-header h2 {
   color: #ffffff !important;
   font-family: 'Teko', sans-serif !important;
   font-size: clamp(38px, 6vw, 56px) !important;
   font-weight: 700 !important;
   letter-spacing: 1.5px !important;
   margin-bottom: 10px !important;
   text-transform: uppercase !important;
   line-height: 1.1 !important;
}

#pageHeader h2 span,
#pageHeader .sec-header h2 span {
   color: var(--es-accent) !important;
}

#pageHeader p,
#pageHeader .sec-header p {
   color: #d1d9e6 !important;
   font-family: 'Rubik', sans-serif !important;
   font-size: 14px !important;
   font-weight: 500 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.8px !important;
   margin: 0 !important;
}

#pageHeader p a,
#pageHeader .sec-header p a {
   color: var(--es-accent) !important;
   text-decoration: none !important;
   font-weight: 600 !important;
   transition: color 0.3s ease !important;
}

#pageHeader p a:hover,
#pageHeader .sec-header p a:hover {
   color: #ffffff !important;
}

#pageHeader .sub-text {
   font-size: 14px !important;
   color: #a1b0be !important;
   margin-top: 8px !important;
   text-transform: none !important;
   font-weight: 400 !important;
}

/* ================= 4. UNIFIED CARDS, PRIVACY POLICY & INNER PAGES ================= */
/* Privacy Policy converted from mismatched dark theme to Unified Light/White Card Theme */
.pp-meta-bar {
   background: #ffffff !important;
   padding: 18px 25px !important;
   border-radius: 10px !important;
   box-shadow: 0 8px 25px rgba(17, 18, 21, 0.06) !important;
   display: flex !important;
   justify-content: space-between !important;
   flex-wrap: wrap !important;
   gap: 15px !important;
   border: 1px solid var(--es-border) !important;
   border-left: 5px solid var(--es-accent) !important;
}

.pp-meta-bar span {
   font-size: 14px !important;
   font-family: 'Rubik', sans-serif !important;
   color: #4a5568 !important;
   display: flex !important;
   align-items: center !important;
}

.pp-meta-bar span strong {
   color: var(--es-dark) !important;
}

.pp-meta-bar span i {
   color: var(--es-accent) !important;
   font-size: 16px !important;
   margin-right: 8px !important;
}

.content-card,
.charter-card,
.table-box,
.form-escalation-box,
.form-section,
.agreement-content {
   background: #ffffff !important;
   color: #333333 !important;
   border: 1px solid var(--es-border) !important;
   border-radius: 12px !important;
   box-shadow: 0 10px 30px rgba(17, 18, 21, 0.05) !important;
   transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.content-card:hover,
.charter-card:hover,
.stat-card:hover {
   transform: translateY(-6px) !important;
   box-shadow: 0 18px 38px rgba(17, 18, 21, 0.10) !important;
   border-color: rgba(251, 56, 59, 0.35) !important;
}

.content-card h3 {
   color: var(--es-dark) !important;
   border-bottom: 2px solid #f0f2f5 !important;
   padding-bottom: 10px !important;
}

.content-card p,
.pp-list li {
   color: #4a5568 !important;
}

.content-card strong,
.pp-list li strong {
   color: var(--es-dark) !important;
}

.pp-highlight-box {
   background: #fff5f5 !important;
   border: 1px solid rgba(251, 56, 59, 0.2) !important;
   border-left: 4px solid var(--es-accent) !important;
}

.pp-highlight-box p {
   color: var(--es-dark) !important;
}

.pp-grid-item {
   background: #f8fafc !important;
   border: 1px solid var(--es-border) !important;
   border-radius: 10px !important;
   padding: 20px !important;
   transition: all 0.3s ease !important;
}

.pp-grid-item:hover {
   background: #ffffff !important;
   border-color: var(--es-accent) !important;
   transform: translateY(-4px) !important;
   box-shadow: 0 10px 25px rgba(251, 56, 59, 0.10) !important;
}

.pp-grid-content strong {
   color: var(--es-dark) !important;
}

.pp-grid-content p {
   color: #555b6e !important;
}

/* ================= 5. PACKAGES SECTION UNIFICATION ================= */
.package-section.standard-pkg-section {
   background-color: var(--es-surface) !important;
   padding: 80px 0 !important;
}

.package-section.standard-pkg-section .package-title {
   color: var(--es-dark) !important;
}

.package-section.premium-pkg-section {
   background-color: var(--es-dark-deep) !important;
   padding: 80px 0 !important;
}

.package-section.premium-pkg-section .package-title {
   color: #ffffff !important;
}

/* ================= 6. UNIFIED MODAL POPUP THEME ================= */
.custom-expert-modal {
   border: none !important;
   border-radius: 14px !important;
   overflow: hidden !important;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45) !important;
}

.expert-header {
   background-image: linear-gradient(135deg, rgba(17, 18, 21, 0.92), rgba(34, 36, 41, 0.88)), url('../img/popup-bg.jpg') !important;
   background-size: cover !important;
   background-position: center !important;
   padding: 32px 20px 24px !important;
   text-align: center !important;
   border-bottom: 4px solid var(--es-accent) !important;
   position: relative !important;
}

.btn-expert-submit:hover {
   background-color: var(--es-dark) !important;
   color: #ffffff !important;
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(34, 36, 41, 0.35);
}

/* ================= 7. UNIFIED 4-COLUMN SEBI FOOTER (#footerSection) ================= */
#footerSection {
   background: #111215 !important;
   color: #a1b0be !important;
   position: relative !important;
   padding-top: 85px !important;
   padding-bottom: 10px !important;
   margin-top: 60px !important;
}

body.home-page #footerSection {
   padding-top: 150px !important;
   margin-top: 0 !important;
}

#footerSection .footer-box .logo {
   font-family: 'Teko', sans-serif !important;
   font-size: 38px !important;
   font-weight: 700 !important;
   color: #ffffff !important;
   text-decoration: none !important;
}

#footerSection .footer-box .about {
   color: #a1b0be !important;
   font-family: 'Rubik', sans-serif !important;
   font-size: 14.5px !important;
   margin-top: 15px !important;
   margin-bottom: 25px !important;
   line-height: 1.75 !important;
}

#footerSection .footer-box .title {
   color: #ffffff !important;
   font-family: 'Teko', sans-serif !important;
   font-size: 25px !important;
   margin-bottom: 22px !important;
   letter-spacing: 1px !important;
}

#footerSection .box2 ul {
   padding-left: 0 !important;
   list-style: none !important;
}

#footerSection .box2 ul li {
   margin-bottom: 10px !important;
}

#footerSection .box2 ul li a {
   color: #a1b0be !important;
   font-family: 'Rubik', sans-serif !important;
   font-size: 14.5px !important;
   text-decoration: none !important;
   transition: all 0.3s ease !important;
}

#footerSection .box2 ul li a:hover {
   color: var(--es-accent) !important;
   padding-left: 6px !important;
}

#footerSection .box3 .icon-box {
   display: flex !important;
   align-items: flex-start !important;
   margin-bottom: 16px !important;
}

#footerSection .box3 .icon-box .icon {
   width: 28px !important;
   flex-shrink: 0 !important;
   margin-top: 3px !important;
}

#footerSection .box3 .icon-box .icon i {
   color: var(--es-accent) !important;
   font-size: 16px !important;
}

#footerSection .box3 .icon-box .txt span,
#footerSection .box3 .icon-box .txt small {
   color: #a1b0be !important;
   font-family: 'Rubik', sans-serif !important;
   font-size: 14px !important;
   line-height: 1.6 !important;
   display: block !important;
}

/* Scroll Up Button */
.scroll-up {
   position: fixed !important;
   right: 20px !important;
   bottom: 20px !important;
   width: 46px !important;
   height: 46px !important;
   background: var(--es-accent) !important;
   color: #ffffff !important;
   border-radius: 50% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   box-shadow: 0 6px 20px rgba(251, 56, 59, 0.45) !important;
   z-index: 999998 !important;
   opacity: 0 !important;
   visibility: hidden !important;
   transform: translateY(15px) !important;
   transition: all 0.3s ease !important;
   text-decoration: none !important;
}
.scroll-up.show-scroll-up {
   opacity: 1 !important;
   visibility: visible !important;
   transform: translateY(0) !important;
}

.scroll-up i {
   color: #ffffff !important;
   font-size: 18px !important;
}

.scroll-up:hover {
   background: var(--es-dark) !important;
   transform: translateY(-4px) !important;
}

/* Signature Canvas Touch Protection on Android & iPhone */
canvas#signature-pad {
   touch-action: none !important;
   -ms-touch-action: none !important;
   user-select: none !important;
   -webkit-user-select: none !important;
}

/* ================= 8. ANDROID & IPHONE (iOS SAFARI) RESPONSIVE BREAKPOINTS ================= */
@media (max-width: 991px) {
   #navigration .container {
      min-height: 64px !important;
      padding: 0 15px !important;
   }
   #navigration .logo {
      font-size: 30px !important;
   }
   #navigration .sidenav {
      position: fixed !important;
      top: 44px !important;
      left: -320px !important;
      width: 280px !important;
      height: calc(100vh - 44px) !important;
      height: calc(100dvh - 44px) !important;
      background: #17181b !important;
      z-index: 10003 !important;
      box-shadow: none !important;
      transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
      overflow-y: auto !important;
      padding-bottom: 40px !important;
   }
   #navigration .sidenav.active-nav {
      left: 0 !important;
      box-shadow: 10px 0 35px rgba(0, 0, 0, 0.65) !important;
   }
   #navigration .sidenav .header {
      padding: 18px 20px !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
   }
   #navigration .sidenav .header .logo {
      padding: 0 !important;
      font-size: 28px !important;
   }
   #navigration .sidenav .header #showsidenav {
      position: static !important;
   }
   #navigration .nav-item {
      display: block !important;
      width: 100% !important;
   }
   #navigration .nav-item .nav-link {
      padding: 15px 22px !important;
      font-size: 15px !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
      display: block !important;
   }
   #navigration .nav-item .nav-link::after {
      display: none !important;
   }

   /* Fix #featureSection image overlap & 200px bottom gap on tablets/phones */
   #featureSection {
      margin-bottom: 60px !important;
   }
   #featureSection .col-lg-7 {
      margin-bottom: 35px !important;
   }
   #featureSection .img-box {
      display: flex !important;
      flex-direction: column !important;
      gap: 16px !important;
      padding-left: 20px !important;
   }
   #featureSection .img-box .img01,
   #featureSection .img-box .img02 {
      position: relative !important;
      bottom: auto !important;
      left: auto !important;
      margin: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      filter: grayscale(0%) !important;
   }
}

@media (max-width: 767px) {
   /* Ticker compact on mobile */
   .fixed-top-ticker {
      height: 38px !important;
   }
   .ticker-label {
      font-size: 16px !important;
      padding: 0 12px !important;
   }
   .ticker-text {
      font-size: 12.5px !important;
      line-height: 38px !important;
   }
   #navigration.navbar.fixed-top {
      top: 38px !important;
   }
   #navigration .sidenav {
      top: 38px !important;
      height: calc(100vh - 38px) !important;
      height: calc(100dvh - 38px) !important;
   }

   /* Hero Slider on iPhone & Android */
   #homeSection {
      margin-bottom: 50px !important;
   }
   #homeSection .slider-box,
   #homeSection .slider-box .txt-box {
      height: auto !important;
      min-height: 540px !important;
      padding: 130px 0 70px 0 !important;
   }
   #homeSection .slider-box .txt-box .txt-area {
      position: relative !important;
      top: auto !important;
      transform: none !important;
      text-align: center !important;
      padding: 0 10px !important;
   }
   #homeSection .slider-box .txt-box .txt-area p {
      font-size: 18px !important;
      margin-bottom: 10px !important;
   }
   #homeSection .slider-box .txt-box .txt-area h1 {
      font-size: clamp(34px, 9.5vw, 48px) !important;
      letter-spacing: 1.5px !important;
      line-height: 1.08 !important;
      margin-bottom: 28px !important;
      word-break: break-word !important;
   }
   .layer-btn {
      padding: 14px 28px 12px 28px !important;
      font-size: 16px !important;
   }

   /* Inner Page Header Banner on Mobile */
   #pageHeader {
      margin-bottom: 35px !important;
   }
   #pageHeader .overlay {
      padding: 125px 0 45px 0 !important;
   }
   #pageHeader h2,
   #pageHeader .sec-header h2 {
      font-size: 36px !important;
   }

   /* Section spacing & typography on Mobile */
   h2, .package-title {
      font-size: 36px !important;
      line-height: 1.15 !important;
   }
   #serviceSection,
   .package-section {
      padding: 50px 0 !important;
      margin-bottom: 50px !important;
   }
   #serviceSection .service-box {
      padding: 30px 24px !important;
   }
   .pricing-card-pro {
      padding: 30px 20px !important;
   }

   /* Testimonial & Special Feature Cards on Mobile */
   #testimonialSection {
      padding-top: 40px !important;
   }
   #testimonialSection .testimonial-box {
      padding: 25px 20px !important;
   }
   #testimonialSection .testimonial-box .top-part .client img {
      width: 55px !important;
      height: 55px !important;
   }
   #testimonialSection .testimonial-box .top-part .txt p {
      font-size: 19px !important;
   }
   #testimonialSection .owl-dots {
      position: static !important;
      text-align: center !important;
      margin-top: 20px !important;
      display: block !important;
   }

   /* Contact CTA Box & Google Map on Mobile */
   #contactArea .contact-box {
      padding: 35px 20px !important;
      transform: translateY(40px) !important;
      text-align: center !important;
   }
   #contactArea .sec-header h2 {
      font-size: 34px !important;
      margin-bottom: 20px !important;
   }
   #googleMap iframe {
      height: 300px !important;
      transform: translateY(30px) !important;
   }
   body.home-page #footerSection {
      padding-top: 90px !important;
   }
   #footerSection {
      padding-top: 65px !important;
   }

   /* Content Cards, Charter, Privacy Policy, User Agreement & Complaint Tables on Mobile */
   .content-card,
   .charter-card,
   .table-box,
   .form-escalation-box,
   .form-section,
   .agreement-content {
      padding: 22px 16px !important;
      margin-bottom: 22px !important;
   }
   .record-item {
      width: 100% !important;
   }
   .table-responsive {
      -webkit-overflow-scrolling: touch !important;
   }
   .custom-table th,
   .custom-table td {
      padding: 10px 8px !important;
      font-size: 12.5px !important;
      white-space: nowrap !important;
   }

   /* Prevent iOS Safari Auto-Zoom on Form Focus (16px minimum) */
   input.form-control,
   select.form-control,
   textarea.form-control {
      font-size: 16px !important;
   }

   /* Modal on iPhone & Android */
   .modal-dialog {
      margin: 12px !important;
      max-width: calc(100% - 24px) !important;
   }
   .expert-body {
      padding: 20px 16px !important;
   }
   .expert-body .row .col-6 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
   }

   /* Floating Widgets Safe Area on Mobile */
   #iaap-a11y-widget {
      bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
      left: 14px !important;
   }
   #iaap-a11y-toggle {
      padding: 8px 13px !important;
      font-size: 13px !important;
   }
   .scroll-up {
      bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
      right: 14px !important;
      width: 42px !important;
      height: 42px !important;
   }
}

/* Ensure Hero Text clears the 116px Fixed Ticker + Navbar on Desktop */
@media (min-width: 768px) {
   #homeSection .slider-box .txt-box .txt-area {
      top: 56% !important;
   }
   #homeSection .slider-box .txt-box .txt-area h1 {
      font-size: clamp(54px, 6.2vw, 88px) !important;
      letter-spacing: 3px !important;
      line-height: 0.96 !important;
      margin-bottom: 35px !important;
   }
}

@media (max-width: 991px) {
   .sidebar-contents {
      position: static !important;
      margin-bottom: 24px !important;
   }
   .sidebar-contents #list-example {
      display: flex !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding: 8px !important;
      gap: 8px !important;
   }
   .sidebar-contents .nav-pills .nav-link {
      white-space: nowrap !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 50px !important;
      padding: 8px 16px !important;
      font-size: 13px !important;
      flex-shrink: 0 !important;
   }
   .sidebar-contents .nav-pills .nav-link.active {
      background-color: #fb383b !important;
      color: #ffffff !important;
      border-color: #fb383b !important;
   }
}

.sidebar-contents #list-example::-webkit-scrollbar {
   display: none !important;
   width: 0 !important;
   height: 0 !important;
}


/* ==========================================================================
   WCAG 2.1 LEVEL AA 100% COLOR CONTRAST REMEDIATION (ALL 68 EXCEL ITEMS)
   Every text/background pair verified >= 4.5:1 (normal) and >= 3.0:1 (large)
   ========================================================================== */

:root {
   --es-accent: #c81e21 !important; /* 5.72:1 contrast against #ffffff (WCAG AA Pass) */
   --es-accent-hover: #a6171a !important;
}

/* 1. Home Page Service Box Numbers 01..06 (Rows 1-6: was #43464b on #1d1e22 = 1.75:1) */
#serviceSection .service-box {
   background: #1d1e22 !important;
}
#serviceSection .service-box .txt-area h3 {
   color: #949ba6 !important; /* 5.35:1 on #1d1e22 (Required >= 3.0:1) */
   opacity: 1 !important;
}
#serviceSection .service-box .txt-area h4 {
   color: #e2e8f0 !important; /* 12.1:1 on #1d1e22 */
}
#serviceSection .service-box:hover {
   background: #c81e21 !important;
}
#serviceSection .service-box:hover .txt-area h3,
#serviceSection .service-box:hover .txt-area h4 {
   color: #ffffff !important; /* 5.72:1 on #c81e21 */
}

/* 2. Pricing Cards /mo, /qtr, /hy, /yr spans & Badges & Buttons (Rows 7-20 & 47-60) */
.pricing-card-pro {
   background: #222429 !important;
}
.pricing-card-pro .duration {
   color: #ff6b6d !important; /* 5.32:1 on #222429 */
}
.pricing-card-pro .price,
.pricing-card-pro .price.text-white {
   color: #ffffff !important;
}
.pricing-card-pro .price span,
.pricing-card-pro .price.text-white span {
   color: #b0bac9 !important; /* 7.21:1 on #222429 (was #888888 = 4.38:1) */
}
.pricing-card-pro .premium-badge {
   background: #c81e21 !important;
   color: #ffffff !important; /* 5.72:1 (was #ffffff on #fb383b = 3.66:1) */
}
.btn-buy-pro {
   border-color: #ff6b6d !important;
   color: #ffffff !important;
   background: #17181b !important; /* 15.8:1 contrast */
}
.btn-buy-pro:hover {
   background: #c81e21 !important;
   border-color: #c81e21 !important;
   color: #ffffff !important; /* 5.72:1 contrast */
}
.btn-buy-pro.btn-buy-premium {
   background: #c81e21 !important;
   border-color: #c81e21 !important;
   color: #ffffff !important; /* 5.72:1 (was #ffffff on #fb383b = 3.66:1) */
}
.btn-buy-pro.btn-buy-premium:hover {
   background: #ffffff !important;
   color: #111215 !important;
   border-color: #ffffff !important;
}

/* 3. All Red Buttons & Badges with White Text Across All 7 Pages */
.ticker-label,
.layer-btn,
.layer-btn::after,
.submit-btn,
.btn-expert-submit,
.escalation-step .step-badge,
.grievance-header,
.scroll-up,
#navigration .sidenav a[data-target="#askExpertModal"],
#footerSection .box4 form .btn {
   background: #c81e21 !important;
   background-color: #c81e21 !important;
   color: #ffffff !important; /* 5.72:1 contrast */
}
#footerSection .box4 form .btn i {
   color: #ffffff !important;
}
.expert-checkbox-wrap label {
   color: #4a5568 !important; /* 7.5:1 on #ffffff */
}
.expert-checkbox-wrap a {
   color: #b91c1c !important; /* 6.4:1 on #ffffff */
}

/* 4. User Agreement Page Contrast Fixes (Rows 78-88) */
.nav-pills .nav-link {
   color: #1e293b !important;
   background-color: #ffffff !important;
}
.nav-pills .nav-link:hover {
   background-color: #f8f9fa !important;
   color: #b91c1c !important; /* 6.08:1 on #f8f9fa (was #fb383b = 3.47:1) */
}
.nav-pills .nav-link.active {
   background-color: #fff5f5 !important;
   color: #b91c1c !important; /* 6.01:1 on #fff5f5 */
   border-left: 4px solid #b91c1c !important;
}
@media (max-width: 991px) {
   .sidebar-contents .nav-pills .nav-link.active {
      background-color: #c81e21 !important;
      color: #ffffff !important; /* 5.72:1 */
      border-color: #c81e21 !important;
   }
}
.nav-pills .nav-link[href="#sign-form"] {
   background-color: #fff0f0 !important;
   color: #b41b1d !important; /* 5.95:1 on #fff0f0 (was #fb383b = 3.31:1) */
}
.risk-alert {
   background: #fff5f5 !important;
   border-left: 5px solid #c81e21 !important;
}
.risk-alert strong {
   color: #b41b1d !important; /* 6.05:1 on #fff5f5 (was #fb383b = 3.42:1) */
}
.form-group label.file-upload-btn,
label.file-upload-btn,
.file-upload-btn {
   background: #222429 !important;
   color: #ffffff !important; /* 15.4:1 on #222429 (was #000000 on #222429 = 1.35:1) */
}
.file-upload-wrapper:hover label.file-upload-btn {
   background: #c81e21 !important;
   color: #ffffff !important;
}
#text-aadhaar-front,
#text-aadhaar-back,
#text-pan-card,
.file-upload-text {
   color: #4a5568 !important; /* 7.12:1 on #f8f9fa (was #888888 = 3.36:1) */
}
#clear-signature,
.clear-btn {
   color: #b41b1d !important; /* 6.12:1 on #f8f9fa (was #fb383b = 3.47:1) */
   border-color: #b41b1d !important;
   background: #ffffff !important;
}
#clear-signature:hover,
.clear-btn:hover {
   background: #c81e21 !important;
   color: #ffffff !important;
}

/* 5. Complaint Board Page Contrast Fixes (Rows 142-151) */
.stat-card span {
   color: #4a5568 !important; /* 7.54:1 on #ffffff (was #888888 = 3.54:1) */
}
.escalation-step .step-content small {
   color: #b41b1d !important; /* 6.42:1 on #ffffff (was #fb383b = 3.66:1) */
}
.text-muted {
   color: #4a5568 !important; /* 7.12:1 on #f8f9fa & 7.54:1 on #ffffff (was #6c757d = 4.44:1) */
}

/* 6. Investor Charter Page Contrast Fixes (Rows 192-204) */
.reg-item strong {
   color: #4a5568 !important; /* 7.54:1 on #ffffff (was #888888 = 3.54:1) */
}
.reg-item span a,
#charterSection a {
   color: #b41b1d !important; /* 6.12:1 on #ffffff / #f8f9fa (was #fb383b = 3.47:1) */
   text-decoration: underline !important;
}
.reg-item span a:hover,
#charterSection a:hover {
   color: #111215 !important;
}

/* 7. Heading Hierarchy Styling Equivalents (So h1/h2/h3 replacements look 100% identical) */
#pageHeader h1,
#pageHeader .sec-header h1 {
   color: #ffffff !important;
   font-family: 'Teko', sans-serif !important;
   font-size: clamp(38px, 6vw, 56px) !important;
   font-weight: 700 !important;
   letter-spacing: 1.5px !important;
   margin-bottom: 10px !important;
   text-transform: uppercase !important;
   line-height: 1.1 !important;
}
#pageHeader h1 span,
#pageHeader .sec-header h1 span {
   color: #ff6b6d !important;
}
#pageHeader p a,
#pageHeader .sec-header p a {
   color: #ff8587 !important; /* 5.8:1 contrast on dark #pageHeader overlay */
}
#featureSection .sec-header h3.sub-headline {
   color: #b41b1d !important;
   font-family: 'Teko', sans-serif !important;
   font-size: 30px !important;
   font-weight: 400 !important;
   margin-bottom: 30px !important;
   line-height: 1.1 !important;
}
#specialFeature .service-box .txt-box h3 {
   color: #ffffff !important;
   font-family: 'Teko', sans-serif !important;
   font-size: 30px !important;
   font-weight: 400 !important;
   line-height: 1.1 !important;
   margin-bottom: 10px !important;
}
.content-card h2 {
   font-family: 'Teko', sans-serif !important;
   font-size: 32px !important;
   color: var(--es-dark) !important;
   margin-bottom: 20px !important;
   letter-spacing: 1px !important;
   display: flex !important;
   align-items: center !important;
   text-transform: uppercase !important;
   border-bottom: 2px solid #f0f2f5 !important;
   padding-bottom: 10px !important;
}
.content-card h2 i {
   color: #c81e21 !important;
   font-size: 24px !important;
   margin-right: 12px !important;
}
.step-content h3 {
   font-size: 16px !important;
   font-weight: 600 !important;
   color: #222429 !important;
   margin-bottom: 4px !important;
   font-family: 'Rubik', sans-serif !important;
}
.support-box h3 {
   font-size: 16px !important;
   color: #222429 !important;
   font-weight: 600 !important;
   margin-bottom: 15px !important;
   font-family: 'Rubik', sans-serif !important;
}
.escalation-step h3.charter-step-heading {
   color: #222429 !important;
   font-size: 16px !important;
   font-weight: 700 !important;
   margin-bottom: 5px !important;
   font-family: 'Rubik', sans-serif !important;
}
#contactArea .contact-box {
   background: #c81e21 !important;
}
#contactArea .sec-header h2 {
   color: #ffffff !important;
}

/* Testimonial / Compliance Box Span Contrast Fix on index.php */
#testimonialSection .testimonial-box {
   background: #ffffff !important;
}
#testimonialSection .testimonial-box .top-part .txt span {
   color: #b41b1d !important; /* 6.42:1 on #ffffff */
   font-weight: 600 !important;
}
#testimonialSection .testimonial-box:hover {
   background: #c81e21 !important;
}
#testimonialSection .testimonial-box:hover .top-part .txt p,
#testimonialSection .testimonial-box:hover .top-part .txt span,
#testimonialSection .testimonial-box:hover .feedback {
   color: #ffffff !important;
}